> For the complete documentation index, see [llms.txt](https://docs.devlaunchers.org/dl-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/contributing/creating-components/variables-+-properties/variables-+-property-types/color-values.md).

# 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**

```plaintext
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)**

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

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

```plaintext
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.)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/contributing/creating-components/variables-+-properties/variables-+-property-types/color-values.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.