# Color

Prizma's color system is built on semantic tokens: components never reference raw hex values, they reference a role ("surface", "text", "border", "icon") that resolves to the right color for the active mode. Design and code share the same token names, so what's designed in Figma is what ships.

<Tabs>
<Tab title="Overview">

```dh-strip
kind: color
desc: One brand ramp, one gray ramp, and a status set (positive, warning, negative, focus) cover every surface in the product.
| #e5f0ff
| #bfdfff
| #99ceff
| #66a6ff
| #3388ff
| #006aff
| #0055cc
| #e4fbf0
| #189f60
| #fff0f0
| #e71111
| #fff7eb
| #ff9900
```

```dh-principles
#006aff | Semantic, not literal | Components reference roles (surface, text, border, icon) — never a hex, never a primitive. If a needed role is missing, request a token instead of inlining a value.
#189f60 | Adaptive by design | Every semantic token carries a light and a dark value and inverts automatically. Tokens suffixed Static keep the same value in both modes.
#820ad1 | One source of truth | The ramps live in Token Studio and sync to Figma and code. What's designed is what ships — no drift.
```

</Tab>
<Tab title="Palette">

<div class="dh-ramp"><div class="dh-ramp-band"><i style="background:#ffffff"></i><i style="background:#fcfcfd"></i><i style="background:#ebecef"></i><i style="background:#d9dae1"></i><i style="background:#c6c8d2"></i><i style="background:#b5b8c5"></i><i style="background:#a3a8b8"></i><i style="background:#82879a"></i><i style="background:#60667c"></i><i style="background:#4d5264"></i><i style="background:#3a3e4b"></i><i style="background:#30333e"></i><i style="background:#262831"></i><i style="background:#14151a"></i><i style="background:#000000"></i></div><div class="dh-ramp-body"><strong>Gray</strong><div class="dh-ramp-chips"><span class="dh-ramp-chip"><i style="background:#ffffff"></i><em>0</em><code>#ffffff</code></span><span class="dh-ramp-chip"><i style="background:#fcfcfd"></i><em>50</em><code>#fcfcfd</code></span><span class="dh-ramp-chip"><i style="background:#ebecef"></i><em>100</em><code>#ebecef</code></span><span class="dh-ramp-chip"><i style="background:#d9dae1"></i><em>150</em><code>#d9dae1</code></span><span class="dh-ramp-chip"><i style="background:#c6c8d2"></i><em>200</em><code>#c6c8d2</code></span><span class="dh-ramp-chip"><i style="background:#b5b8c5"></i><em>250</em><code>#b5b8c5</code></span><span class="dh-ramp-chip"><i style="background:#a3a8b8"></i><em>300</em><code>#a3a8b8</code></span><span class="dh-ramp-chip"><i style="background:#82879a"></i><em>400</em><code>#82879a</code></span><span class="dh-ramp-chip"><i style="background:#60667c"></i><em>500</em><code>#60667c</code></span><span class="dh-ramp-chip"><i style="background:#4d5264"></i><em>600</em><code>#4d5264</code></span><span class="dh-ramp-chip"><i style="background:#3a3e4b"></i><em>700</em><code>#3a3e4b</code></span><span class="dh-ramp-chip"><i style="background:#30333e"></i><em>750</em><code>#30333e</code></span><span class="dh-ramp-chip"><i style="background:#262831"></i><em>800</em><code>#262831</code></span><span class="dh-ramp-chip"><i style="background:#14151a"></i><em>900</em><code>#14151a</code></span><span class="dh-ramp-chip"><i style="background:#000000"></i><em>1000</em><code>#000000</code></span><span class="dh-ramp-chip"><i style="background:#ffffffcc"></i><em>0 80%</em><code>#ffffffcc</code></span><span class="dh-ramp-chip"><i style="background:#14151acc"></i><em>900 80%</em><code>#14151acc</code></span><span class="dh-ramp-chip"><i style="background:#000000cc"></i><em>1000 80%</em><code>#000000cc</code></span></div></div></div>

<div class="dh-ramp"><div class="dh-ramp-band"><i style="background:#e5f0ff"></i><i style="background:#bfdfff"></i><i style="background:#99ceff"></i><i style="background:#66a6ff"></i><i style="background:#3388ff"></i><i style="background:#006aff"></i><i style="background:#0055cc"></i><i style="background:#21273b"></i></div><div class="dh-ramp-body"><strong>Brand</strong><div class="dh-ramp-chips"><span class="dh-ramp-chip"><i style="background:#e5f0ff"></i><em>50</em><code>#e5f0ff</code></span><span class="dh-ramp-chip"><i style="background:#bfdfff"></i><em>100</em><code>#bfdfff</code></span><span class="dh-ramp-chip"><i style="background:#99ceff"></i><em>200</em><code>#99ceff</code></span><span class="dh-ramp-chip"><i style="background:#66a6ff"></i><em>300</em><code>#66a6ff</code></span><span class="dh-ramp-chip"><i style="background:#3388ff"></i><em>400</em><code>#3388ff</code></span><span class="dh-ramp-chip"><i style="background:#006aff"></i><em>500</em><code>#006aff</code></span><span class="dh-ramp-chip"><i style="background:#0055cc"></i><em>600</em><code>#0055cc</code></span><span class="dh-ramp-chip"><i style="background:#21273b"></i><em>900</em><code>#21273b</code></span></div></div></div>

<div class="dh-ramp"><div class="dh-ramp-band"><i style="background:#189f60"></i><i style="background:#45b380"></i><i style="background:#e4fbf0"></i><i style="background:#ff9900"></i><i style="background:#ffb647"></i><i style="background:#fff7eb"></i><i style="background:#e71111"></i><i style="background:#ff5a5f"></i><i style="background:#fff0f0"></i><i style="background:#006aff"></i><i style="background:#0099ff"></i></div><div class="dh-ramp-body"><strong>Status</strong><div class="dh-ramp-chips"><span class="dh-ramp-chip"><i style="background:#189f60"></i><em>Positive 500</em><code>#189f60</code></span><span class="dh-ramp-chip"><i style="background:#45b380"></i><em>Positive 400</em><code>#45b380</code></span><span class="dh-ramp-chip"><i style="background:#e4fbf0"></i><em>Positive 50</em><code>#e4fbf0</code></span><span class="dh-ramp-chip"><i style="background:#ff9900"></i><em>Warning 500</em><code>#ff9900</code></span><span class="dh-ramp-chip"><i style="background:#ffb647"></i><em>Warning 400</em><code>#ffb647</code></span><span class="dh-ramp-chip"><i style="background:#fff7eb"></i><em>Warning 50</em><code>#fff7eb</code></span><span class="dh-ramp-chip"><i style="background:#e71111"></i><em>Negative 500</em><code>#e71111</code></span><span class="dh-ramp-chip"><i style="background:#ff5a5f"></i><em>Negative 400</em><code>#ff5a5f</code></span><span class="dh-ramp-chip"><i style="background:#fff0f0"></i><em>Negative 50</em><code>#fff0f0</code></span><span class="dh-ramp-chip"><i style="background:#006aff"></i><em>Focus 500</em><code>#006aff</code></span><span class="dh-ramp-chip"><i style="background:#0099ff"></i><em>Focus 400</em><code>#0099ff</code></span></div></div></div>

</Tab>
<Tab title="Using color">

> 📘 Adaptive by design
>
> Every token below carries a light and a dark value. Adaptive tokens invert between modes automatically; tokens suffixed **Static** keep the same value in both modes (for elements that must not change, like brand fills or overlays on imagery).

```dh-usage
Surface roles | surface-* | Background fills for frames, cards, and overlays. The gray scale inverts between modes. | Frames, Cards, Overlays, Status tints
Text roles | text-* | Headings, body, labels, links, and status messages. Primary/secondary/tertiary carry the hierarchy. | Headings, Body, Links, Status text
Border roles | border-* | Strokes for inputs, cards, dividers, and status rings — including the focus ring. | Inputs, Dividers, Focus ring, Status rings
Icon roles | icon-* | Glyph fills. Adaptive tokens invert with mode; static tokens never change. | Glyphs, Status icons, Static marks
```

- Components reference semantic tokens, never primitives or raw hex values.
- Never hardcode a hex in product code — if a needed role is missing, request a token instead of inlining a value.
- Static tokens are for surfaces that must not adapt (brand fills, overlays on photography); everything else should invert with the mode.

</Tab>
<Tab title="Tokens">

## Semantic tokens

### Surface

```dh-tokens
desc: Background fills for frames, cards, and overlays. Gray scale inverts between modes.
Neutral 0 | --surface-neutral-0 | #ffffff | #000000
Neutral 50 | --surface-neutral-50 | #fcfcfd | #14151a
Neutral 100 | --surface-neutral-100 | #ebecef | #262831
Neutral 150 | --surface-neutral-150 | #d9dae1 | #30333e
Neutral 200 | --surface-neutral-200 | #c6c8d2 | #3a3e4b
Neutral 250 | --surface-neutral-250 | #b5b8c5 | #4d5264
Neutral 300 | --surface-neutral-300 | #a3a8b8 | #60667c
Neutral 800 | --surface-neutral-800 | #262831 | #ebecef
Brand 50 | --surface-brand-50 | #e5f0ff | #21273b
Brand 500 Static | --surface-brand-500-static | #006aff | #006aff
Status Warning 50 | --surface-status-warning-50 | #fff7eb | #271400
Status Warning 500 | --surface-status-warning-500 | #ff9900 | #ffb647
Status Negative 50 | --surface-status-negative-50 | #fff0f0 | #240001
Status Positive 50 | --surface-status-positive-50 | #e4fbf0 | #03190e
Status Positive 500 | --surface-status-positive-500 | #189f60 | #45b380
```

### Text

```dh-tokens
desc: Text fills for headings, body, labels, links, and status messages.
Primary | --text-primary | #262831 | #fcfcfd
Secondary | --text-secondary | #60667c | #a3a8b8
Tertiary | --text-tertiary | #a3a8b8 | #60667c
Body 400 | --text-body-400 | #82879a | #60667c
Link Default | --text-link-default | #006aff | #3388ff
Link Visited | --text-link-visited | #3a3e4b | #a3a8b8
Accent Brand | --text-accent-brand | #006aff | #006aff
Status Negative | --text-status-negative | #e71111 | #ff5a5f
Status Warning | --text-status-warning | #ff9900 | #ffb647
Status Positive | --text-status-positive | #189f60 | #189f60
```

### Border

```dh-tokens
desc: Stroke colors for inputs, cards, dividers, and status rings.
Neutral 100 | --border-neutral-100 | #ebecef | #3a3e4b
Neutral 200 | --border-neutral-200 | #c6c8d2 | #4d5264
Neutral 250 | --border-neutral-250 | #b5b8c5 | #4d5264
Neutral 300 | --border-neutral-300 | #a3a8b8 | #60667c
Neutral 400 | --border-neutral-400 | #82879a | #60667c
Neutral 500 | --border-neutral-500 | #60667c | #a3a8b8
Brand 500 | --border-brand-500 | #006aff | #006aff
Brand 600 | --border-brand-600 | #0055cc | #3388ff
Status Focus | --border-status-focus | #006aff | #0099ff
Status Warning | --border-status-warning | #ff9900 | #ffb647
Status Warning Static | --border-status-warning-static | #ff9900 | #ff9900
Status Negative | --border-status-negative | #e71111 | #ff5a5f
Status Negative Static | --border-status-negative-static | #e71111 | #e71111
Status Positive Static | --border-status-positive-static | #189f60 | #189f60
Neutral 100 Static | --border-neutral-100-static | #ebecef | #ebecef
```

### Icon

```dh-tokens
desc: Fill colors for icon glyphs. Adaptive tokens invert with mode; static tokens never change.
Neutral 0 | --icon-neutral-0 | #ffffff | #262831
Neutral 300 | --icon-neutral-300 | #a3a8b8 | #60667c
Neutral 500 | --icon-neutral-500 | #60667c | #a3a8b8
Neutral 800 | --icon-neutral-800 | #262831 | #ebecef
Brand 500 | --icon-brand-500 | #006aff | #006aff
Neutral 0 Static | --icon-neutral-0-static | #ffffff | #ffffff
Neutral 50 Static | --icon-neutral-50-static | #fcfcfd | #fcfcfd
Neutral 300 Static | --icon-neutral-300-static | #a3a8b8 | #a3a8b8
Neutral 500 Static | --icon-neutral-500-static | #60667c | #60667c
Neutral 800 Static | --icon-neutral-800-static | #262831 | #262831
Brand 500 Static | --icon-brand-500-static | #006aff | #006aff
Status Warning | --icon-status-warning | #ff9900 | #ffb647
Status Negative | --icon-status-negative | #e71111 | #ff5a5f
Status Positive | --icon-status-positive | #189f60 | #45b380
```

## Component tokens

### Button

```dh-tokens
desc: Primary, secondary, and tertiary button surface, border, and text tokens.
Primary surface — rest | --btn-primary-surface-default | #006aff | #006aff
Primary surface — hover | --btn-primary-surface-hover | #3388ff | #3388ff
Primary surface — pressed | --btn-primary-surface-pressed | #0055cc | #0055cc
Primary surface — disabled | --btn-primary-surface-disabled | #ebecef | #262831
Primary text — rest | --btn-primary-text-default | #ffffff | #ffffff
Primary text — disabled | --btn-primary-text-disabled | #60667c | #a3a8b8
Secondary border — rest | --btn-secondary-border-default | #006aff | #006aff
Secondary border — hover | --btn-secondary-border-hover | #3388ff | #3388ff
Secondary border — pressed | --btn-secondary-border-pressed | #0055cc | #0055cc
Secondary border — disabled | --btn-secondary-border-disabled | #ebecef | #262831
Secondary text — rest | --btn-secondary-text-default | #006aff | #006aff
Secondary text — disabled | --btn-secondary-text-disabled | #60667c | #a3a8b8
Tertiary text — rest | --btn-tertiary-text-default | #006aff | #006aff
Tertiary text — disabled | --btn-tertiary-text-disabled | #60667c | #a3a8b8
```

### Input

```dh-tokens
desc: Text field surface, border, and label tokens across all states.
Surface — rest | --input-surface-default | #fcfcfd | #14151a
Surface — focused | --input-surface-focused | #fcfcfd | #14151a
Surface — disabled | --input-surface-disabled | #ebecef | #262831
Border — rest | --input-border-default | #82879a | #60667c
Border — focused | --input-border-focused | #006aff | #0099ff
Border — disabled | --input-border-disabled | #ebecef | #3a3e4b
Border — negative | --input-border-negative | #e71111 | #ff5a5f
Text — rest | --input-text-default | #262831 | #fcfcfd
Text — placeholder | --input-text-placeholder | #82879a | #60667c
Text — disabled | --input-text-disabled | #82879a | #60667c
```

### Checkbox

```dh-tokens
desc: Box surface, check icon, border, and label tokens.
Surface — rest | --checkbox-surface-default | #fcfcfd | #14151a
Surface — selected | --checkbox-surface-selected | #006aff | #006aff
Surface — disabled | --checkbox-surface-disabled | #82879a | #60667c
Border — rest | --checkbox-border-default | #82879a | #60667c
Border — focused | --checkbox-border-focused | #006aff | #0099ff
Border — disabled | --checkbox-border-disabled | #82879a | #60667c
Icon — check mark | --checkbox-icon-default | #ffffff | #ffffff
Text — rest | --checkbox-text-default | #262831 | #fcfcfd
Text — disabled | --checkbox-text-disabled | #60667c | #a3a8b8
```

### Radio

```dh-tokens
desc: Radio button surface, knob, border, and label tokens.
Surface — rest | --radio-surface-default | #fcfcfd | #14151a
Border — rest | --radio-border-default | #82879a | #60667c
Border — selected | --radio-border-selected | #006aff | #006aff
Knob — selected | --radio-knob-selected | #006aff | #006aff
Surface — disabled | --radio-surface-disabled | #82879a | #60667c
Border — disabled | --radio-border-disabled | #82879a | #60667c
Text — rest | --radio-text-default | #262831 | #fcfcfd
Text — disabled | --radio-text-disabled | #60667c | #a3a8b8
```

### Toggle

```dh-tokens
desc: Track surface in both states and knob color tokens.
Track — on | --toggle-surface-on | #006aff | #006aff
Track — off | --toggle-surface-off | #82879a | #60667c
Track — disabled | --toggle-surface-disabled | #c6c8d2 | #3a3e4b
Knob — on | --toggle-knob-on | #ffffff | #ffffff
Knob — off | --toggle-knob-off | #ffffff | #ffffff
```

### Dropdown

```dh-tokens
desc: Field surface, border, label, and selected item highlight tokens.
Label color | --dropdown-label-color | #262831 | #fcfcfd
Field surface | --dropdown-surface-field | #fcfcfd | #14151a
Border — rest | --dropdown-border-default | #82879a | #60667c
Item — selected fill | --dropdown-item-surface-selected | #ebecef | #262831
```

### Snackbar

```dh-tokens
desc: Surface and border tokens for neutral, warning, negative, and positive variants.
Surface — neutral | --snackbar-surface-neutral | #e5f0ff | #21273b
Surface — warning | --snackbar-surface-warning | #fff7eb | #271400
Surface — negative | --snackbar-surface-negative | #fff0f0 | #240001
Surface — positive | --snackbar-surface-positive | #e4fbf0 | #03190e
Border — neutral | --snackbar-border-neutral | #006aff | #006aff
Border — warning | --snackbar-border-warning | #ff9900 | #ffb647
Border — negative | --snackbar-border-negative | #e71111 | #ff5a5f
Border — positive | --snackbar-border-positive | #189f60 | #189f60
```

### Card

```dh-tokens
desc: Module card surface and text tokens.
Surface primary | --card-surface-primary | #262831 | #ebecef
Text — title | --card-text-title | #ebecef | #262831
Text — subtitle | --card-text-subtitle | #60667c | #a3a8b8
```

### Countdown

```dh-tokens
desc: Timer component uses static dark tokens so it is always dark-on-dark regardless of page mode.
Surface (static) | --timer-surface | #14151a | #14151a
Border (static) | --timer-border | #ebecef | #ebecef
Text (static) | --timer-text | #ffffff | #ffffff
```

### Tooltip

```dh-tokens
desc: Tooltip always renders on a dark background regardless of page mode.
Surface (static) | --tooltip-surface | #14151a | #14151a
Text (static) | --tooltip-text | #ffffff | #ffffff
```

### Stepper

```dh-tokens
desc: Progress stepper track colors. Active track is always brand blue; inactive is always a light gray.
Track — active (static) | --stepper-track-active | #006aff | #006aff
Track — inactive (static) | --stepper-track-inactive | #c6c8d2 | #c6c8d2
```

</Tab>
</Tabs>