Style guide / color

Content links

  • Core Palette

  • Functional Colors

  • Accessibility Contrast Ratios

  • Brand vs. UI Color Use

  • Do & Don’t Examples

    • Core Palette

    The core palette defines the brand foundation. Primary colors establish identity. Neutrals do the heavy lifting.

    Restraint creates impact.

    --primary-dark
    #f5f5f5
    --background-dark
    #121212
    --section-dark
    #1a1a1a
    --secondary-dark
    #b3b3b3
    --placeholder-dark
    --divider-dark
    --primary-light
    #111
    --background-light
    #fff
    --section-light
    #f7f7f7
    --secondary-light
    #555
    --placeholder-light
    --divider-light
    --accent
    --underline

    Functional Colors

    Functional colors exist to communicate state: success, warning, error, and focus. They must be instantly recognizable and used consistently.

    Never repurpose functional colors for decoration.

    Accessibility Contrast Ratios

    All color combinations must meet or exceed accessibility standards. This is not optional.

    Accessibility is a baseline, not a feature.

    Brand vs. UI Color Use

    Brand colors attract attention. UI colors guide behavior. Mixing the two creates confusion.

    Do & Don’t Examples

    Examples exist to eliminate interpretation. Follow them exactly.