Color Values

🎛️ How to Apply Style & Status Variables

🧬 System Structure Overview

Your token system is organized into a clear, layered hierarchy that drives consistency, flexibility, and semantic clarity.

🔁 Core Token Flow

🎨 Primitive Colors  
   ⮕ 🌓 Theme (light/dark)  
       ⮕ 🧱 Substyles (e.g., pure, brand, muted)  
           ⮕ 🎨 Style Collections (grey, cta, brand, alert)  
               ⮕ 🧩 Semantic Collections or Status Collections  
                   ⮕ ⌨️ Status (priority or toggle if interactive)

This structure allows you to dynamically apply appearance values based on theme mode, contrast tier, behavior, and semantic role.

🎨 Primitive Colors

Primitive colors are the core foundation of our color system — a set of raw hexadecimal values that serve as the base for all other color tokens. Each primitive palette (e.g., eclipse, nebula, uranus) is structured on a 10-step scale, where:

  • 01 represents the lightest value

  • 10 represents the darkest value

This consistent ordering enables clear visual hierarchy, theming flexibility, and predictable scaling across components.

💡 Primitive tokens are never used directly in the UI. Instead, they are re-aliased in the theme collection to enable contextual control (e.g., light/dark mode), before being applied in style, semantic, and status collections.

Primitive colors ensure a modular, scalable, and accessible color foundation for all design decisions.

Tier

eclipse

onyx

echo

nebula

cosmic

jupiter

uranus

saturn

neptune

info

success

warning

error

1

#FFFFFF

#FAFAFA

#F7F7F7

#D9CBE6

#EBEDF7

#FFF2E7

#F2F9FB

#FFF7E6

#EBF2F6

#EAF8F6

#ECF9ED

#FDFAE7

#F9ECEC

2

#F0EDEE

#EDEDED

#E0E0E0

#CDB7E1

#C2C8E5

#FFD7B4

#D8ECF3

#FFE5B0

#C2D6E3

#BEE8E4

#C4EBC6

#F8EFB3

#EBC4C4

3

#DAD8D9

#D4D4D4

#C0C0C0

#BD9CDE

#A4ADD9

#FFC490

#C5E3ED

#FFD88A

#A4C3D6

#9FDDD7

#A7E2AA

#F5E78E

#E29898

4

#B9B9B9

#B4B4B4

#A0A0A0

#A681CA

#7A87C7

#FFA95E

#ABD7E4

#FFC754

#7BA7C3

#73CEC5

#7FD483

#F0DC5B

#D47F7F

5

#979797

#999999

#8A8A8A

#996FC3

#6170BD

#FF993E

#9ACFDF

#FFBC33

#6196B7

#58C5BA

#66CC6B

#EDD53B

#CC6666

6

#676767

#777777

#7C7C7C

#7339AC

#394CAC

#FF7F0E

#81C3D7

#FFAB00

#3A7CA5

#2EB6A9

#3AAE40

#E9CB0A

#BE5555

7

#494949

#595959

#707070

#69349D

#34459D

#E8740D

#75B1C4

#E89C00

#357196

#279B8F

#2D8832

#D4B909

#AE3A3A

8

#292929

#3D3D3D

#666666

#52287A

#28367A

#B55A0A

#5C8A99

#B57900

#295875

#19635D

#226626

#6B5D05

#882D2D

9

#1C1C1C

#2C2C2C

#5C5C5C

#3F1F5F

#1F2A5F

#8C4608

#476B76

#8C5E00

#20445B

#114541

#1B501D

#524703

#692323

10

#000000

#1A1A1A

#4C4C4C

#301848

#182048

#6B3506

#36525A

#6B4800

#183445

#0C312E

#153D16

#332C02

#501B1B

🌓 Theme

The theme layer acts as the contrast controller for all primitive color palettes. It does not define new colors — it simply remaps the primitive values to align with the appropriate contrast level for a given mode (e.g., light or dark).

🧩 What Theme Does

  • Inputs: Primitive tokens (e.g., primitive/onyx/01)

  • Outputs: Mode-aware remapping (e.g., theme/onyx/01)

  • Function: Reassigns which primitive shade is used for each of the ten contrast tiers (01–10) depending on the active theme.

🧠 Important Distinction

🔢 In primitive, 01–10 means lightest to darkest 🎚 In theme, 01–10 means lowest to highest contrast

This inversion allows the same theme/onyx/01 token to represent a very light color in light mode and a very dark color in dark mode, depending on which primitive value it's mapped to.

🌗 Example Flow

plaintextCopyEditprimitive/onyx/01     = #FAFAFA
primitive/onyx/10     = #2C2C2C

theme/onyx/01
 → light-mode: onyx/01 (low contrast on light bg)
 → dark-mode:  onyx/10 (low contrast on dark bg)

theme/onyx/10
 → light-mode: onyx/10 (high contrast on light bg)
 → dark-mode:  onyx/01 (high contrast on dark bg)

🎯 Why This Matters

This contrast-centric structure allows all downstream tokens (e.g., style, semantic, status) to remain consistent and agnostic of theme — the theme layer handles inversion and perceptual balancing behind the scenes.

🎨 Style & Substyle Collections

Style Collections define the visual tone applied to components through semantic roles (surface, border, content, ring) and appearance layers. Each collection is structured by contrast tier (01–10) and further organized by substyle, allowing consistent use across interactive and non-interactive elements, themes, and accessibility contexts.

🌑 Grey Style Collection

Used for neutral, non-CTA interface components and foundational UI.

Substyle
Purpose

eclipse

High contrast — for bold text or essential controls

onyx

Medium contrast — default UI elements, structural surfaces

echo

Low contrast — subtle dividers, backgrounds, disabled states

✅ Best used in structural layouts, forms, containers, and neutral elements that do not require attention emphasis.

⚠️ Avoid overusing eclipse in static contexts as it may overpower more important components or CTAs.

🚀 CTA Style Collection

Used primarily for call-to-action elements that drive user decisions.

Substyle
Purpose

nebula

Primary action (e.g., Continue, Submit)

cosmic

Secondary action (e.g., Back, Skip)

🛑 Do not apply CTA styles to static UI by default — CTA colors are designed to stand out and imply interactivity.

⚠️ Notable Exception: Visual Emphasis in Non-Interactive Components

You may use cta styling for badges, pills, or tags if:

  • The component is part of an attention hierarchy (e.g., a NEW badge in a feature announcement)

  • It signals a semantic label aligned with a CTA (e.g., Recommended, Try Now)

  • It appears in close proximity to an interactive element (e.g., filter chips, onboarding prompts)

In these cases, apply CTA styling sparingly, and ensure it does not compete visually with actual primary actions.

🌌 Brand Style Collection

Represents thematic identity and personality in your product.

Substyle
Brand Expression

jupiter

Warm, vibrant orange — playful, assertive

saturn

Bright yellow — optimistic, high-energy

uranus

Cyan blue — modern, accessible tone

neptune

Deep blue — trustworthy, tech-forward

✅ May be applied to both static and interactive elements when contextually aligned with product branding or storytelling moments.

⚠️ Avoid mixing multiple brand tones within the same view unless your palette system is specifically designed to support that use.

⚠️ Alert Style Collection

Used only in components communicating system feedback, validation states, or user alerts.

Type
Meaning

info

Hints, suggestions, neutral updates

warning

Cautionary alerts requiring attention

error

Invalid actions or system failures

success

Positive confirmations or task completion

🔗 Always pair with a non-color cue such as:

  • Icons

  • Headline or label

  • ARIA role (e.g., role="alert" or aria-live="polite")

🛑 Never use alert styles for decoration. Their purpose is semantic, not aesthetic.

🔗 How It Connects to Semantic Tokens

Once defined, Style Collections are re-aliased into:

  • Semantic collections (e.g. surface/default, content/inverse)

  • Priority collections (e.g. primary, secondary, tertiary)

  • Toggle collections (selected, unselected)

This allows your system to:

  • 🌒 Adapt across themes (light/dark)

  • ♿ Enforce accessibility (contrast + size)

  • 🔁 Enable modularity and theme flexibility

  • 🎯 Preserve visual clarity through consistent application

🧭 Application Guidelines

✅ Static Components (No user interaction)

Use semantic tokens (not status or behavior-based ones):

Role
Default Token
Inverse Token

Background

background/base

—

Surface

surface/default

surface/inverse

Content

content/default

content/inverse

Border

border/default

border/inverse

When to use inverse: If the background is dark or colored and the component must contrast it, use the inverse.

Examples:

  • Labels

  • Layout containers

  • Decorative or structural elements

🎯 Interactive Components (Click, hover, focus, etc.)

Use status tokens, and choose one of two paths:

1. Priority-based (Buttons, action pills, CTAs)

status/priority/color/surface
status/priority/color/content
status/priority/color/border
status/priority/ring/border

2. Toggle-based (Checkboxes, radios, selectable chips)

status/toggle/color/surface
status/toggle/color/content
status/toggle/ring/border

Pro Tip: Status tokens include default, hover, focus, active, visited, and disabled. Use these to define visual state progression across interaction.

🔍 Behavior by Component Type

Component Type
Use
Token Path Example

Static Label

Non-interactive

content/default

Card Surface

Static Surface

surface/default

Primary Button

Priority

status/priority/color/surface

Checkbox

Toggle

status/toggle/color/surface

Focus Ring

Focus State

status/priority/ring/border

🔁 Summary Flow (For Designers & Engineers)

  1. Is the component interactive?

    • If no → use semantic tokens.

    • If yes → proceed.

  2. Is it a priority or toggle-style?

    • Priority? → use status/priority/...

    • Toggle/Selectable? → use status/toggle/...

  3. Apply appropriate values for each role:

    • surface, content, border, ring

    • Respect contrast and state (default, hover, etc.)

PreviousVariables + Property TypesNextBoolean Values

Last updated

Was this helpful?