Style guide / color

Content links

  • Core Palette

  • Functional Colors

  • Accessibility Contrast Ratios

  • Brand vs. UI Color Use

    • 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
    #777
    --divider-dark
    #333
    --primary-light
    #111
    --background-light
    #fff
    --section-light
    #f7f7f7
    --secondary-light
    #555
    --placeholder-light
    #888
    --divider-light
    #e0e0e0
    --accent
    #ffc700
    --underline
    #ffc700

    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.

    1. Primary Action
      Name: Accent Gold
      Hex: #FFC700
      Function: Primary CTA, active states, key interactions, emphasis, links.
      This is the only high-attention color in the system.
    2. Secondary / Muted
      Name: Secondary Dark
      Hex: #B3B3B3
      Function: Secondary text, supporting UI elements, less prominent actions.
      Used to reduce visual weight without removing visibility.
    3. Disabled / Placeholder
      Name: Placeholder Dark
      Hex: #777777
      Function: Disabled states, placeholder text, inactive elements.
      Signals non-interactive or inactive status.‍
    4. Divider / Structural
      Name: Divider Dark
      Hex: #2A2A2A (approx. from divider tone in image)
      Function: Dividers, subtle borders, structural separation.
      Provides hierarchy without competing with content.

    Accessibility Contrast Ratios

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

    Accessibility is a baseline, not a feature.

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Button Text
    Light Mode

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Button Text
    Dark Mode

    Brand vs. UI Color Use

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

    Brand color and UI color serve different purposes. They are not interchangeable.

    Brand color communicates identity.

    UI color communicates function.

    They must remain separate.

    Brand Color Use

    The Accent Gold exists to represent the brand.

    Use it for:

    • Primary CTAs
    • Active navigation
    • Key emphasis moments
    • Links and interaction highlights

    Gold should feel intentional and rare. Overuse reduces impact.

    Never use brand color for structural elements.

    UI Color Use

    Neutral tones power the interface.

    Use neutrals for:

    • Backgrounds
    • Sections
    • Dividers
    • Body text
    • Secondary elements
    • Disabled states

    UI color supports readability and hierarchy.
    It should never compete with brand emphasis.

    Rules

    • Do not use gold for decorative blocks.
    • Do not use brand color for error or system states.
    • Do not introduce new colors without updating the system.
    • If everything is gold, nothing is important.