# Colors

Semantic roles first, then the primitive ramps they alias. Light and dark are the resolved values.

## Roles

| Name | CSS var | Tailwind | Light | Dark | Modes | Description |
| --- | --- | --- | --- | --- | --- | --- |
| --color-accent | `--color-accent` | `bg-accent, text-accent, border-accent` | `#f3f6f4` | `#3e413f` |  | Hover fill for ghost controls and list or menu rows, and the fill of a focused ghost control. |
| --color-accent-blue-active | `--color-accent-blue-active` | `bg-accent-blue-active, text-accent-blue-active, border-accent-blue-active` | `#1c65d0` | `#3a84f6` |  | Active blue accent fill, for emphasis that is not an action. |
| --color-accent-blue-hover | `--color-accent-blue-hover` | `bg-accent-blue-hover, text-accent-blue-hover, border-accent-blue-hover` | `#3a84f6` | `#95bdfa` |  | Hover blue accent fill, for emphasis that is not an action. |
| --color-accent-blue-subtle | `--color-accent-blue-subtle` | `bg-accent-blue-subtle, text-accent-blue-subtle, border-accent-blue-subtle` | `#f8f9fb` | `#112543` |  | Subtle blue accent fill, for emphasis that is not an action. |
| --color-accent-foreground | `--color-accent-foreground` | `bg-accent-foreground, text-accent-foreground, border-accent-foreground` | `#242725` | `#f3f6f4` |  | Text and icons on accent. |
| --color-accent-green-active | `--color-accent-green-active` | `bg-accent-green-active, text-accent-green-active, border-accent-green-active` | `#227e45` | `#25a156` |  | Green accent pressed. |
| --color-accent-green-default | `--color-accent-green-default` | `bg-accent-green-default, text-accent-green-default, border-accent-green-default` | `#33bd68` | `#33bd68` |  |  |
| --color-accent-green-hover | `--color-accent-green-hover` | `bg-accent-green-hover, text-accent-green-hover, border-accent-green-hover` | `#25a156` | `#37dd79` |  | Green accent hover (darker on light). |
| --color-accent-green-subtle | `--color-accent-green-subtle` | `bg-accent-green-subtle, text-accent-green-subtle, border-accent-green-subtle` | `#f4fbf6` | `#142b1b` |  | Green subtle background — tinted bg for green badges/chips. |
| --color-accent-red-active | `--color-accent-red-active` | `bg-accent-red-active, text-accent-red-active, border-accent-red-active` | `#c0262c` | `#f62a36` |  | Active red accent fill, for emphasis that is not an action. |
| --color-accent-red-default | `--color-accent-red-default` | `bg-accent-red-default, text-accent-red-default, border-accent-red-default` | `#f97972` | `#f97972` |  | Red accent. |
| --color-accent-red-hover | `--color-accent-red-hover` | `bg-accent-red-hover, text-accent-red-hover, border-accent-red-hover` | `#f62a36` | `#fa9f97` |  | Red accent hover. |
| --color-accent-red-subtle | `--color-accent-red-subtle` | `bg-accent-red-subtle, text-accent-red-subtle, border-accent-red-subtle` | `#fbf8f8` | `#401615` |  | Red subtle background. |
| --color-background | `--color-background` | `bg-background, text-background, border-background` | `#ffffff` | `#151816` |  | The page, inside the shell. Cards sit on it. |
| --color-border | `--color-border` | `bg-border, text-border, border-border` | `#e3e6e4` | `#ffffff0a` |  | Card and control borders. |
| --color-border-accent | `--color-border-accent` | `bg-border-accent, text-border-accent, border-border-accent` | `#25a156` | `#33bd68` |  | Border carrying brand emphasis, e.g. a selected card. Meets 3:1 against the default surface. |
| --color-border-danger | `--color-border-danger` | `bg-border-danger, text-border-danger, border-border-danger` | `#f97972` | `#f62a36` |  | Destructive or error border. Meets 3:1 against the default surface, so it may bound a control. |
| --color-border-info | `--color-border-info` | `bg-border-info, text-border-info, border-border-info` | `#71a6f8` | `#3a84f6` |  | Informational border. Meets 3:1 against the default surface, so it may bound a control. |
| --color-border-inverse | `--color-border-inverse` | `bg-border-inverse, text-border-inverse, border-border-inverse` | `#ffffff` | `#080b09` |  | Inverted (on an opposite-tone surface) border. Meets 3:1 against the default surface, so it may bound a control. |
| --color-border-strong | `--color-border-strong` | `bg-border-strong, text-border-strong, border-border-strong` | `#d3d5d3` | `#515351` |  | Borders that must stand out, like a selected outline in neutral. |
| --color-border-subtle | `--color-border-subtle` | `bg-border-subtle, text-border-subtle, border-border-subtle` | `#f3f6f4` | `#ffffff08` |  | Hairlines inside a card: row dividers, tray top edge. |
| --color-border-success | `--color-border-success` | `bg-border-success, text-border-success, border-border-success` | `#25a156` | `#25a156` |  | Success border. Meets 3:1 against the default surface, so it may bound a control. |
| --color-border-warning | `--color-border-warning` | `bg-border-warning, text-border-warning, border-border-warning` | `#b87920` | `#b87920` |  | Caution border. Meets 3:1 against the default surface, so it may bound a control. |
| --color-brand | `--color-brand` | `bg-brand, text-brand, border-brand` | `#33bd68` | `#33bd68` |  | Logomark and small accents. Never a button or a surface. |
| --color-brand-background-blue-default | `--color-brand-background-blue-default` | `bg-brand-background-blue-default, text-brand-background-blue-default, border-brand-background-blue-default` | `#f8f9fb` | `#1c4481` |  | Blue-tinted section background. Use for brand hero areas and featured content. |
| --color-brand-background-blue-subtle | `--color-brand-background-blue-subtle` | `bg-brand-background-blue-subtle, text-brand-background-blue-subtle, border-brand-background-blue-subtle` | `#eef3f9` | `#1d51a1` |  | Subtle blue-tinted background. Use for secondary brand sections and info panels. |
| --color-brand-background-green-default | `--color-brand-background-green-default` | `bg-brand-background-green-default, text-brand-background-green-default, border-brand-background-green-default` | `#f4fbf6` | `#215130` |  | Green-tinted section background. Use for positive outcomes, profit, and growth areas. |
| --color-brand-background-green-subtle | `--color-brand-background-green-subtle` | `bg-brand-background-green-subtle, text-brand-background-green-subtle, border-brand-background-green-subtle` | `#e3f9e7` | `#226339` |  | Subtle green-tinted background. Use for success states and positive metric areas. |
| --color-brand-background-red-default | `--color-brand-background-red-default` | `bg-brand-background-red-default, text-brand-background-red-default, border-brand-background-red-default` | `#fbf8f8` | `#782523` |  | Red-tinted section background. Use for alerts, losses, and high-urgency areas. |
| --color-brand-background-red-subtle | `--color-brand-background-red-subtle` | `bg-brand-background-red-subtle, text-brand-background-red-subtle, border-brand-background-red-subtle` | `#f9f0ef` | `#952627` |  | Subtle red-tinted background. Use for warning zones and at-risk metric areas. |
| --color-brand-highlight | `--color-brand-highlight` | `bg-brand-highlight, text-brand-highlight, border-brand-highlight` | `#dff248` | `#dff248` |  | The original electric lime brand highlight (#DFF248). Kept as a standalone accent because it is too light (L=0.92) to sit at 500 in a well-formed ramp. Use sparingly for brand moments, never as a text colour. |
| --color-brand-secondary | `--color-brand-secondary` | `bg-brand-secondary, text-brand-secondary, border-brand-secondary` | `#71a6f8` | `#71a6f8` |  | brand-secondary |
| --color-brand-tertiary | `--color-brand-tertiary` | `bg-brand-tertiary, text-brand-tertiary, border-brand-tertiary` | `#f97972` | `#f97972` |  | brand-tertiary |
| --color-card | `--color-card` | `bg-card, text-card, border-card` | `#ffffff` | `#1c1f1d` |  | Groups on the page. Pair with border and shadow/xs. |
| --color-card-foreground | `--color-card-foreground` | `bg-card-foreground, text-card-foreground, border-card-foreground` | `#242725` | `#f3f6f4` |  | Text and icons on card. |
| --color-chart-1 | `--color-chart-1` | `bg-chart-1, text-chart-1, border-chart-1` | `#9167f6` | `#bdaefa` |  | Chart series 1. Use in order. |
| --color-chart-2 | `--color-chart-2` | `bg-chart-2, text-chart-2, border-chart-2` | `#2db1f4` | `#70c6fa` |  | Chart series 2. Use in order. |
| --color-chart-3 | `--color-chart-3` | `bg-chart-3, text-chart-3, border-chart-3` | `#de9329` | `#faa732` |  | Chart series 3. Use in order. |
| --color-chart-4 | `--color-chart-4` | `bg-chart-4, text-chart-4, border-chart-4` | `#f96dad` | `#fa98c1` |  | Chart series 4. Use in order. |
| --color-chart-5 | `--color-chart-5` | `bg-chart-5, text-chart-5, border-chart-5` | `#2fbeab` | `#37d6c1` |  | Chart series 5. Use in order. |
| --color-chart-6 | `--color-chart-6` | `bg-chart-6, text-chart-6, border-chart-6` | `#f97e39` | `#faa377` |  | Chart series 6. Use in order. |
| --color-chart-7 | `--color-chart-7` | `bg-chart-7, text-chart-7, border-chart-7` | `#919cf8` | `#abb6fa` |  | Chart series 7. Use in order. |
| --color-chart-8 | `--color-chart-8` | `bg-chart-8, text-chart-8, border-chart-8` | `#6d9820` | `#97d130` |  | Chart series 8. Use in order. |
| --color-chart-axis | `--color-chart-axis` | `bg-chart-axis, text-chart-axis, border-chart-axis` | `#6d6f6d` | `#9fa19f` |  | Chart axis lines and ticks. Meets 3:1 against the default surface. |
| --color-chart-brand | `--color-chart-brand` | `bg-chart-brand, text-chart-brand, border-chart-brand` | `#25a156` | `#33bd68` |  | The highlighted series. Use with color/chart/neutral to make one series stand out. |
| --color-chart-categorical-1-hover | `--color-chart-categorical-1-hover` | `bg-chart-categorical-1-hover, text-chart-categorical-1-hover, border-chart-categorical-1-hover` | `#f22962` | `#fac5ca` |  | Hover state for categorical series 1. Always pair with color/chart/categorical/1. |
| --color-chart-categorical-2-hover | `--color-chart-categorical-2-hover` | `bg-chart-categorical-2-hover, text-chart-categorical-2-hover, border-chart-categorical-2-hover` | `#6d9820` | `#aeec47` |  | Hover state for categorical series 2. Always pair with color/chart/categorical/2. |
| --color-chart-categorical-3-hover | `--color-chart-categorical-3-hover` | `bg-chart-categorical-3-hover, text-chart-categorical-3-hover, border-chart-categorical-3-hover` | `#2598ab` | `#83e6fa` |  | Hover state for categorical series 3. Always pair with color/chart/categorical/3. |
| --color-chart-categorical-4-hover | `--color-chart-categorical-4-hover` | `bg-chart-categorical-4-hover, text-chart-categorical-4-hover, border-chart-categorical-4-hover` | `#aa54f6` | `#dfcafa` |  | Hover state for categorical series 4. Always pair with color/chart/categorical/4. |
| --color-chart-categorical-5-hover | `--color-chart-categorical-5-hover` | `bg-chart-categorical-5-hover, text-chart-categorical-5-hover, border-chart-categorical-5-hover` | `#d3631f` | `#fac8b0` |  | Hover state for categorical series 5. Always pair with color/chart/categorical/5. |
| --color-chart-categorical-6-hover | `--color-chart-categorical-6-hover` | `bg-chart-categorical-6-hover, text-chart-categorical-6-hover, border-chart-categorical-6-hover` | `#259c8d` | `#4ff2db` |  | Hover state for categorical series 6. Always pair with color/chart/categorical/6. |
| --color-chart-categorical-7-hover | `--color-chart-categorical-7-hover` | `bg-chart-categorical-7-hover, text-chart-categorical-7-hover, border-chart-categorical-7-hover` | `#6f77f6` | `#cbd2fa` |  | Hover state for categorical series 7. Always pair with color/chart/categorical/7. |
| --color-chart-categorical-8-hover | `--color-chart-categorical-8-hover` | `bg-chart-categorical-8-hover, text-chart-categorical-8-hover, border-chart-categorical-8-hover` | `#ea2892` | `#fac3d8` |  | Hover state for categorical series 8. Always pair with color/chart/categorical/8. |
| --color-chart-grid | `--color-chart-grid` | `bg-chart-grid, text-chart-grid, border-chart-grid` | `#f3f6f4` | `#242725` |  | Chart gridlines. Decorative, so exempt from the 3:1 non-text rule. |
| --color-chart-neutral | `--color-chart-neutral` | `bg-chart-neutral, text-chart-neutral, border-chart-neutral` | `#d3d5d3` | `#515351` |  | De-emphasised series, shown alongside color/chart/brand. |
| --color-chart-ordinal-1 | `--color-chart-ordinal-1` | `bg-chart-ordinal-1, text-chart-ordinal-1, border-chart-ordinal-1` | `#dce7f9` | `#1d51a1` |  | Ordinal step 1 of 3 — a single-hue ramp for ranked buckets, not unrelated categories. |
| --color-chart-ordinal-2 | `--color-chart-ordinal-2` | `bg-chart-ordinal-2, text-chart-ordinal-2, border-chart-ordinal-2` | `#95bdfa` | `#3a84f6` |  | Ordinal step 2 of 3 — a single-hue ramp for ranked buckets, not unrelated categories. |
| --color-chart-ordinal-3 | `--color-chart-ordinal-3` | `bg-chart-ordinal-3, text-chart-ordinal-3, border-chart-ordinal-3` | `#3a84f6` | `#95bdfa` |  | Ordinal step 3 of 3 — a single-hue ramp for ranked buckets, not unrelated categories. |
| --color-chart-sequential-1 | `--color-chart-sequential-1` | `bg-chart-sequential-1, text-chart-sequential-1, border-chart-sequential-1` | `#dce7f9` | `#1c4481` |  | Sequential step 1 of 4 — for funnel or stage progressions. |
| --color-chart-sequential-2 | `--color-chart-sequential-2` | `bg-chart-sequential-2, text-chart-sequential-2, border-chart-sequential-2` | `#95bdfa` | `#1c65d0` |  | Sequential step 2 of 4 — for funnel or stage progressions. |
| --color-chart-sequential-3 | `--color-chart-sequential-3` | `bg-chart-sequential-3, text-chart-sequential-3, border-chart-sequential-3` | `#3a84f6` | `#71a6f8` |  | Sequential step 3 of 4 — for funnel or stage progressions. |
| --color-chart-sequential-4 | `--color-chart-sequential-4` | `bg-chart-sequential-4, text-chart-sequential-4, border-chart-sequential-4` | `#1d51a1` | `#bfd6fa` |  | Sequential step 4 of 4 — for funnel or stage progressions. |
| --color-chart-track | `--color-chart-track` | `bg-chart-track, text-chart-track, border-chart-track` | `#f3f6f4` | `#242725` |  | The unfilled remainder of a bar, meter or progress track. |
| --color-destructive | `--color-destructive` | `bg-destructive, text-destructive, border-destructive` | `#c0262c` | `#c0262c` |  | Irreversible or risky actions and error states. Not for price down; use negative. |
| --color-destructive-active | `--color-destructive-active` | `bg-destructive-active, text-destructive-active, border-destructive-active` | `#952627` | `#782523` |  | Background while pressed of the danger action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-destructive-border | `--color-destructive-border` | `bg-destructive-border, text-destructive-border, border-destructive-border` | `#f9dfdd` | `#952627` |  | Border of a destructive callout. |
| --color-destructive-foreground | `--color-destructive-foreground` | `bg-destructive-foreground, text-destructive-foreground, border-destructive-foreground` | `#ffffff` | `#ffffff` |  | Text and icons on destructive. |
| --color-destructive-hover | `--color-destructive-hover` | `bg-destructive-hover, text-destructive-hover, border-destructive-hover` | `#952627` | `#952627` |  | Destructive on hover. |
| --color-destructive-icon | `--color-destructive-icon` | `bg-destructive-icon, text-destructive-icon, border-destructive-icon` | `#f62a36` | `#fa9f97` |  | Icon of a destructive or error message — banners, inline validation and toasts. Use the four danger parts together. |
| --color-destructive-muted | `--color-destructive-muted` | `bg-destructive-muted, text-destructive-muted, border-destructive-muted` | `#f9f0ef` | `#401615` |  | Tinted destructive background for callouts and chips. |
| --color-destructive-muted-foreground | `--color-destructive-muted-foreground` | `bg-destructive-muted-foreground, text-destructive-muted-foreground, border-destructive-muted-foreground` | `#952627` | `#fac6c1` |  | Text and icons on destructive-muted, or destructive text on neutral surfaces. |
| --color-destructive-outline | `--color-destructive-outline` | `bg-destructive-outline, text-destructive-outline, border-destructive-outline` | `#fac6c1` | `#952627` |  | Border of the danger action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-destructive-outline-active | `--color-destructive-outline-active` | `bg-destructive-outline-active, text-destructive-outline-active, border-destructive-outline-active` | `#f97972` | `#f62a36` |  | Danger action border while pressed. |
| --color-destructive-outline-hover | `--color-destructive-outline-hover` | `bg-destructive-outline-hover, text-destructive-outline-hover, border-destructive-outline-hover` | `#fa9f97` | `#c0262c` |  | Danger action border on hover. |
| --color-disabled | `--color-disabled` | `bg-disabled, text-disabled, border-disabled` | `#f3f6f4` | `#242725` |  | Disabled controls. Exempt from contrast rules. |
| --color-disabled-foreground | `--color-disabled-foreground` | `bg-disabled-foreground, text-disabled-foreground, border-disabled-foreground` | `#9fa19f` | `#515351` |  | Text and icons on disabled controls. |
| --color-field-disabled | `--color-field-disabled` | `bg-field-disabled, text-field-disabled, border-field-disabled` | `#f3f6f4` | `#080b09` |  | Form input background when disabled. Pair with color/text/disabled. |
| --color-field-hover | `--color-field-hover` | `bg-field-hover, text-field-hover, border-field-hover` | `#f9faf9` | `#242725` |  | Form input background on hover. |
| --color-focus-ring-offset | `--color-focus-ring-offset` | `bg-focus-ring-offset, text-focus-ring-offset, border-focus-ring-offset` | `#ffffff` | `#151816` |  | Focus ring offset — matches white surface. |
| --color-foreground | `--color-foreground` | `bg-foreground, text-foreground, border-foreground` | `#242725` | `#f3f6f4` |  | Default text and icons. |
| --color-ghost-active | `--color-ghost-active` | `bg-ghost-active, text-ghost-active, border-ghost-active` | `#080b091a` | `#ffffff1f` |  | Ghost action while pressed. |
| --color-ghost-hover | `--color-ghost-hover` | `bg-ghost-hover, text-ghost-hover, border-ghost-hover` | `#080b090f` | `#ffffff14` |  | Ghost action on hover. A translucent tint so it shows on white and muted surfaces. |
| --color-gradient-cta-from | `--color-gradient-cta-from` | `bg-gradient-cta-from, text-gradient-cta-from, border-gradient-cta-from` | `#33bd68` | `#33bd68` |  | Start stop of the CTA gradient. Interpolate in oklab so the midpoint stays vivid. |
| --color-gradient-cta-to | `--color-gradient-cta-to` | `bg-gradient-cta-to, text-gradient-cta-to, border-gradient-cta-to` | `#2fbeab` | `#2fbeab` |  | End stop of the CTA gradient. |
| --color-gradient-hero-from | `--color-gradient-hero-from` | `bg-gradient-hero-from, text-gradient-hero-from, border-gradient-hero-from` | `#e3f9e7` | `#142b1b` |  | Start stop of the hero backdrop wash. |
| --color-gradient-hero-to | `--color-gradient-hero-to` | `bg-gradient-hero-to, text-gradient-hero-to, border-gradient-hero-to` | `#ffffff` | `#151816` |  | End stop of the hero backdrop wash. |
| --color-icon-accent | `--color-icon-accent` | `bg-icon-accent, text-icon-accent, border-icon-accent` | `#25a156` | `#33bd68` |  | Brand-accented icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-danger | `--color-icon-danger` | `bg-icon-danger, text-icon-danger, border-icon-danger` | `#f62a36` | `#fac6c1` |  | Destructive or error icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-disabled | `--color-icon-disabled` | `bg-icon-disabled, text-icon-disabled, border-icon-disabled` | `#d3d5d3` | `#3e413f` |  | Disabled icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-info | `--color-icon-info` | `bg-icon-info, text-icon-info, border-icon-info` | `#1c65d0` | `#bfd6fa` |  | Informational icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-inverse | `--color-icon-inverse` | `bg-icon-inverse, text-icon-inverse, border-icon-inverse` | `#ffffff` | `#080b09` |  | Inverted (on an opposite-tone surface) icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-link | `--color-icon-link` | `bg-icon-link, text-icon-link, border-icon-link` | `#1c65d0` | `#bfd6fa` |  | Icon accompanying a link, matching color/text/link. |
| --color-icon-primary | `--color-icon-primary` | `bg-icon-primary, text-icon-primary, border-icon-primary` | `#242725` | `#ffffff` |  | Highest-emphasis icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-secondary | `--color-icon-secondary` | `bg-icon-secondary, text-icon-secondary, border-icon-secondary` | `#515351` | `#d3d5d3` |  | Medium-emphasis icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-success | `--color-icon-success` | `bg-icon-success, text-icon-success, border-icon-success` | `#227e45` | `#37dd79` |  | Success icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-tertiary | `--color-icon-tertiary` | `bg-icon-tertiary, text-icon-tertiary, border-icon-tertiary` | `#6d6f6d` | `#9fa19f` |  | Lowest-emphasis icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-icon-warning | `--color-icon-warning` | `bg-icon-warning, text-icon-warning, border-icon-warning` | `#b87920` | `#facb96` |  | Caution icon. Icons need 3:1 against their surface, not 4.5:1. |
| --color-info | `--color-info` | `bg-info, text-info, border-info` | `#1c65d0` | `#95bdfa` |  | Solid info fill for badges and banners. |
| --color-info-border | `--color-info-border` | `bg-info-border, text-info-border, border-info-border` | `#dce7f9` | `#1d51a1` |  | Border of an info callout. |
| --color-info-foreground | `--color-info-foreground` | `bg-info-foreground, text-info-foreground, border-info-foreground` | `#ffffff` | `#080b09` |  | Text and icons on info. |
| --color-info-icon | `--color-info-icon` | `bg-info-icon, text-info-icon, border-info-icon` | `#3a84f6` | `#95bdfa` |  | Icon of a informational message — banners, inline validation and toasts. Use the four info parts together. |
| --color-info-muted | `--color-info-muted` | `bg-info-muted, text-info-muted, border-info-muted` | `#eef3f9` | `#112543` |  | Tinted info background for callouts and chips. |
| --color-info-muted-foreground | `--color-info-muted-foreground` | `bg-info-muted-foreground, text-info-muted-foreground, border-info-muted-foreground` | `#1d51a1` | `#bfd6fa` |  | Text and icons on info-muted, or info text on neutral surfaces. |
| --color-input | `--color-input` | `bg-input, text-input, border-input` | `#d3d5d3` | `#515351` |  | Text field border. It doesn't change on hover; focus turns it ring green. Fields are white with 8px corners. |
| --color-inverse | `--color-inverse` | `bg-inverse, text-inverse, border-inverse` | `#080b09` | `#f9faf9` |  | Tooltips and toasts. |
| --color-inverse-foreground | `--color-inverse-foreground` | `bg-inverse-foreground, text-inverse-foreground, border-inverse-foreground` | `#f9faf9` | `#080b09` |  | Text on inverse. |
| --color-inverse-muted-foreground | `--color-inverse-muted-foreground` | `bg-inverse-muted-foreground, text-inverse-muted-foreground, border-inverse-muted-foreground` | `#9fa19f` | `#515351` |  | Hints and meta text on inverse, like the shortcut in a tooltip. |
| --color-muted | `--color-muted` | `bg-muted, text-muted, border-muted` | `#f3f6f4` | `#242725` |  | Quiet fills: segmented controls, progress tracks, skeletons. Not for buttons; use secondary. |
| --color-muted-foreground | `--color-muted-foreground` | `bg-muted-foreground, text-muted-foreground, border-muted-foreground` | `#6d6f6d` | `#9fa19f` |  | Lowest-emphasis text that still passes: descriptions, captions, meta. At least 4.6:1 on white, background and muted. |
| --color-nav-border | `--color-nav-border` | `bg-nav-border, text-nav-border, border-nav-border` | `#f3f6f4` | `#242725` |  | Divider between navigation chrome and content. |
| --color-nav-item-bg-hover | `--color-nav-item-bg-hover` | `bg-nav-item-bg-hover, text-nav-item-bg-hover, border-nav-item-bg-hover` | `#e3e6e4` | `#ffffff14` |  | Navigation item background on hover. Sits on the shell, darker than it in light, lighter in dark. |
| --color-negative | `--color-negative` | `bg-negative, text-negative, border-negative` | `#c0262c` | `#fa9f97` | Standard: #c0262c; Color-blind: #a54f1d | Price down, loss, Fail. Not for errors; use destructive. |
| --color-negative-muted | `--color-negative-muted` | `bg-negative-muted, text-negative-muted, border-negative-muted` | `#f9f0ef` | `#401615` | Standard: #f9f0ef; Color-blind: #f9f0ec | Tint behind negative chips. |
| --color-overlay | `--color-overlay` | `bg-overlay, text-overlay, border-overlay` | `#00000080` | `#000000b3` |  | Scrim behind dialogs and sheets. |
| --color-overlay-blocking | `--color-overlay-blocking` | `bg-overlay-blocking, text-overlay-blocking, border-overlay-blocking` | `#000000cc` | `#000000cc` |  | Scrim overlay — 80% black. |
| --color-overlay-scroll-shadow | `--color-overlay-scroll-shadow` | `bg-overlay-scroll-shadow, text-overlay-scroll-shadow, border-overlay-scroll-shadow` | `#0000001f` | `#00000080` |  | Edge shadow indicating scrollable overflow. |
| --color-overlay-strong | `--color-overlay-strong` | `bg-overlay-strong, text-overlay-strong, border-overlay-strong` | `#00000099` | `#00000099` |  | Scrim overlay — 60% black. |
| --color-popover | `--color-popover` | `bg-popover, text-popover, border-popover` | `#ffffff` | `#242725` |  | Menus, dropdowns and dialogs that float above the page. |
| --color-popover-foreground | `--color-popover-foreground` | `bg-popover-foreground, text-popover-foreground, border-popover-foreground` | `#242725` | `#f3f6f4` |  | Text and icons on popover. |
| --color-positive | `--color-positive` | `bg-positive, text-positive, border-positive` | `#227e45` | `#37dd79` | Standard: #227e45; Color-blind: #1c65d0 | Price up, gain, Pass. Not for success messages; use success. |
| --color-positive-muted | `--color-positive-muted` | `bg-positive-muted, text-positive-muted, border-positive-muted` | `#e3f9e7` | `#142b1b` | Standard: #e3f9e7; Color-blind: #eef3f9 | Tint behind positive chips and selected Pass tiles. |
| --color-primary | `--color-primary` | `bg-primary, text-primary, border-primary` | `#080b09` | `#f9faf9` |  | The one main action per view, as a black pill. Use secondary for other actions. Not for brand. |
| --color-primary-active | `--color-primary-active` | `bg-primary-active, text-primary-active, border-primary-active` | `#3e413f` | `#d3d5d3` |  | Primary while pressed. |
| --color-primary-border | `--color-primary-border` | `bg-primary-border, text-primary-border, border-primary-border` | `#33bd68` | `#33bd68` |  | Border of the primary action. Matches its fill, so a filled primary reads as a single solid shape. |
| --color-primary-border-active | `--color-primary-border-active` | `bg-primary-border-active, text-primary-border-active, border-primary-border-active` | `#25a156` | `#25a156` |  | Primary action border while pressed. |
| --color-primary-border-hover | `--color-primary-border-hover` | `bg-primary-border-hover, text-primary-border-hover, border-primary-border-hover` | `#37dd79` | `#37dd79` |  | Primary action border on hover. |
| --color-primary-foreground | `--color-primary-foreground` | `bg-primary-foreground, text-primary-foreground, border-primary-foreground` | `#ffffff` | `#080b09` |  | Text and icons on primary. |
| --color-primary-hover | `--color-primary-hover` | `bg-primary-hover, text-primary-hover, border-primary-hover` | `#242725` | `#e3e6e4` |  | Primary on hover. |
| --color-ring | `--color-ring` | `bg-ring, text-ring, border-ring` | `#25a156` | `#37dd79` |  | Focus ring. At least 3:1 on its surface. |
| --color-secondary | `--color-secondary` | `bg-secondary, text-secondary, border-secondary` | `#ffffff` | `#242725` |  | Every other action: Deposit, Withdraw, Cancel. A raised white pill with a border and shadow/xs. |
| --color-secondary-active | `--color-secondary-active` | `bg-secondary-active, text-secondary-active, border-secondary-active` | `#f3f6f4` | `#363836` |  | Secondary action while pressed. Drop the shadow when pressed. |
| --color-secondary-border | `--color-secondary-border` | `bg-secondary-border, text-secondary-border, border-secondary-border` | `#e3e6e4` | `#ffffff0a` |  | Border of the secondary action. |
| --color-secondary-border-active | `--color-secondary-border-active` | `bg-secondary-border-active, text-secondary-border-active, border-secondary-border-active` | `#d3d5d3` | `#ffffff14` |  | Secondary action border while pressed. |
| --color-secondary-border-hover | `--color-secondary-border-hover` | `bg-secondary-border-hover, text-secondary-border-hover, border-secondary-border-hover` | `#d3d5d3` | `#ffffff14` |  | Secondary action border on hover. |
| --color-secondary-foreground | `--color-secondary-foreground` | `bg-secondary-foreground, text-secondary-foreground, border-secondary-foreground` | `#242725` | `#f3f6f4` |  | Text and icons on secondary. |
| --color-secondary-hover | `--color-secondary-hover` | `bg-secondary-hover, text-secondary-hover, border-secondary-hover` | `#f9faf9` | `#2f3230` |  | Secondary action on hover. |
| --color-shell | `--color-shell` | `bg-shell, text-shell, border-shell` | `#f3f6f4` | `#030403` |  | The app frame around panels: flat neutral, one step off the page (neutral/100 light, neutral/1000 dark, below the page so panels lift). App shell only. |
| --color-shell-accent | `--color-shell-accent` | `bg-shell-accent, text-shell-accent, border-shell-accent` | `#ffffff` | `#ffffff14` |  | Selected item background on the shell (Discover pill). |
| --color-shell-foreground | `--color-shell-foreground` | `bg-shell-foreground, text-shell-foreground, border-shell-foreground` | `#242725` | `#ffffff` |  | Active icons and text on the shell. |
| --color-shell-muted-foreground | `--color-shell-muted-foreground` | `bg-shell-muted-foreground, text-shell-muted-foreground, border-shell-muted-foreground` | `#6d6f6d` | `#d3d5d3` |  | Idle icons and secondary text on the shell. |
| --color-skeleton-bg | `--color-skeleton-bg` | `bg-skeleton-bg, text-skeleton-bg, border-skeleton-bg` | `#f3f6f4` | `#242725` |  | Resting background of a loading placeholder. |
| --color-skeleton-shimmer | `--color-skeleton-shimmer` | `bg-skeleton-shimmer, text-skeleton-shimmer, border-skeleton-shimmer` | `#e3e6e4` | `#3e413f` |  | Moving highlight of a loading placeholder. Suppress the animation under reduced motion. |
| --color-success | `--color-success` | `bg-success, text-success, border-success` | `#227e45` | `#37dd79` |  | Solid success fill for badges and banners. |
| --color-success-border | `--color-success-border` | `bg-success-border, text-success-border, border-success-border` | `#b6f9c6` | `#226339` |  | Border of a success callout. |
| --color-success-foreground | `--color-success-foreground` | `bg-success-foreground, text-success-foreground, border-success-foreground` | `#ffffff` | `#080b09` |  | Text and icons on success. |
| --color-success-icon | `--color-success-icon` | `bg-success-icon, text-success-icon, border-success-icon` | `#25a156` | `#37dd79` |  | Icon of a success message — banners, inline validation and toasts. Use the four success parts together. |
| --color-success-muted | `--color-success-muted` | `bg-success-muted, text-success-muted, border-success-muted` | `#e3f9e7` | `#142b1b` |  | Tinted success background for callouts and chips. |
| --color-success-muted-foreground | `--color-success-muted-foreground` | `bg-success-muted-foreground, text-success-muted-foreground, border-success-muted-foreground` | `#226339` | `#4ff98e` |  | Text and icons on success-muted, or success text on neutral surfaces. |
| --color-surface-badge-accent | `--color-surface-badge-accent` | `bg-surface-badge-accent, text-surface-badge-accent, border-surface-badge-accent` | `#e3f9e7` | `#215130` |  | Brand-accented badge background. |
| --color-surface-badge-danger | `--color-surface-badge-danger` | `bg-surface-badge-danger, text-surface-badge-danger, border-surface-badge-danger` | `#f9f0ef` | `#782523` |  | Danger badge background. |
| --color-surface-badge-neutral | `--color-surface-badge-neutral` | `bg-surface-badge-neutral, text-surface-badge-neutral, border-surface-badge-neutral` | `#f3f6f4` | `#242725` |  | Neutral badge, tag and pill background. |
| --color-surface-badge-success | `--color-surface-badge-success` | `bg-surface-badge-success, text-surface-badge-success, border-surface-badge-success` | `#e3f9e7` | `#215130` |  | Success badge background. |
| --color-surface-code | `--color-surface-code` | `bg-surface-code, text-surface-code, border-surface-code` | `#f9faf9` | `#1c1f1d` |  | Background for code blocks and inline code. Pair with the code/inline text style. |
| --color-surface-glass-bg | `--color-surface-glass-bg` | `bg-surface-glass-bg, text-surface-glass-bg, border-surface-glass-bg` | `#ffffff99` | `#1a1a1a99` |  | Translucent panel background. Pair with blur/md; never place body text directly on it without checking contrast. |
| --color-surface-glass-border | `--color-surface-glass-border` | `bg-surface-glass-border, text-surface-glass-border, border-surface-glass-border` | `#ffffff47` | `#ffffff1f` |  | Hairline edge of a glass panel. |
| --color-surface-glass-highlight | `--color-surface-glass-highlight` | `bg-surface-glass-highlight, text-surface-glass-highlight, border-surface-glass-highlight` | `#ffffff73` | `#ffffff14` |  | Top-edge sheen on a glass panel. |
| --color-surface-pressed | `--color-surface-pressed` | `bg-surface-pressed, text-surface-pressed, border-surface-pressed` | `#f3f6f4` | `#242725` |  | Pressed container surface, drawn on top of background/*. Not for the page itself. |
| --color-surface-raised | `--color-surface-raised` | `bg-surface-raised, text-surface-raised, border-surface-raised` | `#ffffff` | `#242725` |  | Card surface on light — same white, differentiated by shadow. |
| --color-surface-selected | `--color-surface-selected` | `bg-surface-selected, text-surface-selected, border-surface-selected` | `#ffffff` | `#3e413f` |  | Selected option in a segmented track. Lighter than the track in both themes. |
| --color-surface-sunken | `--color-surface-sunken` | `bg-surface-sunken, text-surface-sunken, border-surface-sunken` | `#f9faf9` | `#151816` |  | Sunken input bg on light theme. |
| --color-surface-transparent | `--color-surface-transparent` | `bg-surface-transparent, text-surface-transparent, border-surface-transparent` | `#ffffff00` | `#00000000` |  | For gradient or content fading |
| --color-tertiary | `--color-tertiary` | `bg-tertiary, text-tertiary, border-tertiary` | `#080b09` | `#ffffff` |  | Background of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-tertiary-active | `--color-tertiary-active` | `bg-tertiary-active, text-tertiary-active, border-tertiary-active` | `#3e413f` | `#e3e6e4` |  | Background while pressed of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-tertiary-border | `--color-tertiary-border` | `bg-tertiary-border, text-tertiary-border, border-tertiary-border` | `#080b09` | `#ffffff` |  | Border of the tertiary action. Matches its fill. |
| --color-tertiary-border-active | `--color-tertiary-border-active` | `bg-tertiary-border-active, text-tertiary-border-active, border-tertiary-border-active` | `#3e413f` | `#e3e6e4` |  | Tertiary action border while pressed. |
| --color-tertiary-border-hover | `--color-tertiary-border-hover` | `bg-tertiary-border-hover, text-tertiary-border-hover, border-tertiary-border-hover` | `#242725` | `#f3f6f4` |  | Tertiary action border on hover. |
| --color-tertiary-foreground | `--color-tertiary-foreground` | `bg-tertiary-foreground, text-tertiary-foreground, border-tertiary-foreground` | `#ffffff` | `#080b09` |  | Label of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-tertiary-hover | `--color-tertiary-hover` | `bg-tertiary-hover, text-tertiary-hover, border-tertiary-hover` | `#242725` | `#f3f6f4` |  | Background on hover of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves. |
| --color-text-accent | `--color-text-accent` | `bg-text-accent, text-text-accent, border-text-accent` | `#227e45` | `#37dd79` |  | Accent text on light — green/600 for WCAG AA compliance on white. |
| --color-text-danger | `--color-text-danger` | `bg-text-danger, text-text-danger, border-text-danger` | `#c0262c` | `#fac6c1` |  | Error text on light. |
| --color-text-info | `--color-text-info` | `bg-text-info, text-text-info, border-text-info` | `#1c65d0` | `#bfd6fa` |  | Informational text. Pair with color/feedback/info/bg or use on a neutral surface. |
| --color-text-link | `--color-text-link` | `bg-text-link, text-text-link, border-text-link` | `#1c65d0` | `#bfd6fa` |  | Hyperlinks on light. |
| --color-text-secondary | `--color-text-secondary` | `bg-text-secondary, text-text-secondary, border-text-secondary` | `#515351` | `#d3d5d3` |  | Second-level text: labels and values that need more weight than muted-foreground. 7.8:1 on white. |
| --color-text-success | `--color-text-success` | `bg-text-success, text-text-success, border-text-success` | `#227e45` | `#37dd79` |  | Success text on light. |
| --color-text-warning | `--color-text-warning` | `bg-text-warning, text-text-warning, border-text-warning` | `#905f1d` | `#facb96` |  | Warning text on light. |
| --color-tray | `--color-tray` | `bg-tray, text-tray, border-tray` | `#f9faf9` | `#1c1f1d` |  | Footer strip attached under a card, for totals and meta. Top edge uses border-subtle. |
| --color-warning | `--color-warning` | `bg-warning, text-warning, border-warning` | `#905f1d` | `#faa732` |  | Solid warning fill for badges and banners. |
| --color-warning-border | `--color-warning-border` | `bg-warning-border, text-warning-border, border-warning-border` | `#f9e2c9` | `#704c1e` |  | Border of a warning callout. |
| --color-warning-foreground | `--color-warning-foreground` | `bg-warning-foreground, text-warning-foreground, border-warning-foreground` | `#ffffff` | `#080b09` |  | Text and icons on warning. |
| --color-warning-highlight | `--color-warning-highlight` | `bg-warning-highlight, text-warning-highlight, border-warning-highlight` | `#fad055` | `#fad055` |  | Status that needs attention now, like a market closing soon. One per card at most. |
| --color-warning-highlight-foreground | `--color-warning-highlight-foreground` | `bg-warning-highlight-foreground, text-warning-highlight-foreground, border-warning-highlight-foreground` | `#2c2512` | `#2c2512` |  | Text and icons on warning-highlight. |
| --color-warning-icon | `--color-warning-icon` | `bg-warning-icon, text-warning-icon, border-warning-icon` | `#b87920` | `#facb96` |  | Icon of a caution message — banners, inline validation and toasts. Use the four warning parts together. |
| --color-warning-muted | `--color-warning-muted` | `bg-warning-muted, text-warning-muted, border-warning-muted` | `#f9f1e8` | `#302212` |  | Tinted warning background for callouts and chips. |
| --color-warning-muted-foreground | `--color-warning-muted-foreground` | `bg-warning-muted-foreground, text-warning-muted-foreground, border-warning-muted-foreground` | `#704c1e` | `#facb96` |  | Text and icons on warning-muted, or warning text on neutral surfaces. |

## Ramps

| Name | CSS var | Tailwind | Light | Dark | Description |
| --- | --- | --- | --- | --- | --- |
| --color-amber-100 | `--color-amber-100` | `bg-amber-100, text-amber-100, border-amber-100` | `#f9f1e8` | `#f9f1e8` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-200 | `--color-amber-200` | `bg-amber-200, text-amber-200, border-amber-200` | `#f9e2c9` | `#f9e2c9` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-300 | `--color-amber-300` | `bg-amber-300, text-amber-300, border-amber-300` | `#facb96` | `#facb96` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-400 | `--color-amber-400` | `bg-amber-400, text-amber-400, border-amber-400` | `#faa732` | `#faa732` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-50 | `--color-amber-50` | `bg-amber-50, text-amber-50, border-amber-50` | `#fbf9f6` | `#fbf9f6` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-500 | `--color-amber-500` | `bg-amber-500, text-amber-500, border-amber-500` | `#de9329` | `#de9329` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-600 | `--color-amber-600` | `bg-amber-600, text-amber-600, border-amber-600` | `#b87920` | `#b87920` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-700 | `--color-amber-700` | `bg-amber-700, text-amber-700, border-amber-700` | `#905f1d` | `#905f1d` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-800 | `--color-amber-800` | `bg-amber-800, text-amber-800, border-amber-800` | `#704c1e` | `#704c1e` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-900 | `--color-amber-900` | `bg-amber-900, text-amber-900, border-amber-900` | `#5b3f1d` | `#5b3f1d` | Warning. Raw value. Use a semantic token instead. |
| --color-amber-950 | `--color-amber-950` | `bg-amber-950, text-amber-950, border-amber-950` | `#302212` | `#302212` | Warning. Raw value. Use a semantic token instead. |
| --color-black | `--color-black` | `bg-black, text-black, border-black` | `#000000` | `#000000` | Raw value. Use a semantic token instead. |
| --color-blue-100 | `--color-blue-100` | `bg-blue-100, text-blue-100, border-blue-100` | `#eef3f9` | `#eef3f9` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-200 | `--color-blue-200` | `bg-blue-200, text-blue-200, border-blue-200` | `#dce7f9` | `#dce7f9` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-300 | `--color-blue-300` | `bg-blue-300, text-blue-300, border-blue-300` | `#bfd6fa` | `#bfd6fa` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-400 | `--color-blue-400` | `bg-blue-400, text-blue-400, border-blue-400` | `#95bdfa` | `#95bdfa` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-50 | `--color-blue-50` | `bg-blue-50, text-blue-50, border-blue-50` | `#f8f9fb` | `#f8f9fb` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-500 | `--color-blue-500` | `bg-blue-500, text-blue-500, border-blue-500` | `#71a6f8` | `#71a6f8` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-600 | `--color-blue-600` | `bg-blue-600, text-blue-600, border-blue-600` | `#3a84f6` | `#3a84f6` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-700 | `--color-blue-700` | `bg-blue-700, text-blue-700, border-blue-700` | `#1c65d0` | `#1c65d0` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-800 | `--color-blue-800` | `bg-blue-800, text-blue-800, border-blue-800` | `#1d51a1` | `#1d51a1` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-900 | `--color-blue-900` | `bg-blue-900, text-blue-900, border-blue-900` | `#1c4481` | `#1c4481` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-blue-950 | `--color-blue-950` | `bg-blue-950, text-blue-950, border-blue-950` | `#112543` | `#112543` | Info, Color-blind positive. Raw value. Use a semantic token instead. |
| --color-cyan-100 | `--color-cyan-100` | `bg-cyan-100, text-cyan-100, border-cyan-100` | `#e6f6f9` | `#e6f6f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-200 | `--color-cyan-200` | `bg-cyan-200, text-cyan-200, border-cyan-200` | `#c3eff9` | `#c3eff9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-300 | `--color-cyan-300` | `bg-cyan-300, text-cyan-300, border-cyan-300` | `#83e6fa` | `#83e6fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-400 | `--color-cyan-400` | `bg-cyan-400, text-cyan-400, border-cyan-400` | `#36d0ea` | `#36d0ea` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-50 | `--color-cyan-50` | `bg-cyan-50, text-cyan-50, border-cyan-50` | `#f5fafb` | `#f5fafb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-500 | `--color-cyan-500` | `bg-cyan-500, text-cyan-500, border-cyan-500` | `#2fb8d0` | `#2fb8d0` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-600 | `--color-cyan-600` | `bg-cyan-600, text-cyan-600, border-cyan-600` | `#2598ab` | `#2598ab` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-700 | `--color-cyan-700` | `bg-cyan-700, text-cyan-700, border-cyan-700` | `#227786` | `#227786` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-800 | `--color-cyan-800` | `bg-cyan-800, text-cyan-800, border-cyan-800` | `#225e69` | `#225e69` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-900 | `--color-cyan-900` | `bg-cyan-900, text-cyan-900, border-cyan-900` | `#214d56` | `#214d56` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-cyan-950 | `--color-cyan-950` | `bg-cyan-950, text-cyan-950, border-cyan-950` | `#14292d` | `#14292d` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-100 | `--color-emerald-100` | `bg-emerald-100, text-emerald-100, border-emerald-100` | `#e1f9ed` | `#e1f9ed` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-200 | `--color-emerald-200` | `bg-emerald-200, text-emerald-200, border-emerald-200` | `#b0f9d6` | `#b0f9d6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-300 | `--color-emerald-300` | `bg-emerald-300, text-emerald-300, border-emerald-300` | `#50f6b5` | `#50f6b5` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-400 | `--color-emerald-400` | `bg-emerald-400, text-emerald-400, border-emerald-400` | `#37da9e` | `#37da9e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-50 | `--color-emerald-50` | `bg-emerald-50, text-emerald-50, border-emerald-50` | `#f4fbf7` | `#f4fbf7` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-500 | `--color-emerald-500` | `bg-emerald-500, text-emerald-500, border-emerald-500` | `#2fc18b` | `#2fc18b` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-600 | `--color-emerald-600` | `bg-emerald-600, text-emerald-600, border-emerald-600` | `#259f72` | `#259f72` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-700 | `--color-emerald-700` | `bg-emerald-700, text-emerald-700, border-emerald-700` | `#227d5a` | `#227d5a` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-800 | `--color-emerald-800` | `bg-emerald-800, text-emerald-800, border-emerald-800` | `#226248` | `#226248` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-900 | `--color-emerald-900` | `bg-emerald-900, text-emerald-900, border-emerald-900` | `#21503c` | `#21503c` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-emerald-950 | `--color-emerald-950` | `bg-emerald-950, text-emerald-950, border-emerald-950` | `#142b21` | `#142b21` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-100 | `--color-fuchsia-100` | `bg-fuchsia-100, text-fuchsia-100, border-fuchsia-100` | `#f8eff9` | `#f8eff9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-200 | `--color-fuchsia-200` | `bg-fuchsia-200, text-fuchsia-200, border-fuchsia-200` | `#f5ddf9` | `#f5ddf9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-300 | `--color-fuchsia-300` | `bg-fuchsia-300, text-fuchsia-300, border-fuchsia-300` | `#f2c0fa` | `#f2c0fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-400 | `--color-fuchsia-400` | `bg-fuchsia-400, text-fuchsia-400, border-fuchsia-400` | `#ec94fa` | `#ec94fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-50 | `--color-fuchsia-50` | `bg-fuchsia-50, text-fuchsia-50, border-fuchsia-50` | `#fbf8fb` | `#fbf8fb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-500 | `--color-fuchsia-500` | `bg-fuchsia-500, text-fuchsia-500, border-fuchsia-500` | `#e569f8` | `#e569f8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-600 | `--color-fuchsia-600` | `bg-fuchsia-600, text-fuchsia-600, border-fuchsia-600` | `#cf2ae7` | `#cf2ae7` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-700 | `--color-fuchsia-700` | `bg-fuchsia-700, text-fuchsia-700, border-fuchsia-700` | `#a226b4` | `#a226b4` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-800 | `--color-fuchsia-800` | `bg-fuchsia-800, text-fuchsia-800, border-fuchsia-800` | `#7e268c` | `#7e268c` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-900 | `--color-fuchsia-900` | `bg-fuchsia-900, text-fuchsia-900, border-fuchsia-900` | `#662470` | `#662470` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-fuchsia-950 | `--color-fuchsia-950` | `bg-fuchsia-950, text-fuchsia-950, border-fuchsia-950` | `#36163b` | `#36163b` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-green-100 | `--color-green-100` | `bg-green-100, text-green-100, border-green-100` | `#e3f9e7` | `#e3f9e7` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-200 | `--color-green-200` | `bg-green-200, text-green-200, border-green-200` | `#b6f9c6` | `#b6f9c6` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-300 | `--color-green-300` | `bg-green-300, text-green-300, border-green-300` | `#4ff98e` | `#4ff98e` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-400 | `--color-green-400` | `bg-green-400, text-green-400, border-green-400` | `#37dd79` | `#37dd79` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-50 | `--color-green-50` | `bg-green-50, text-green-50, border-green-50` | `#f4fbf6` | `#f4fbf6` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-500 | `--color-green-500` | `bg-green-500, text-green-500, border-green-500` | `#33bd68` | `#33bd68` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-600 | `--color-green-600` | `bg-green-600, text-green-600, border-green-600` | `#25a156` | `#25a156` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-700 | `--color-green-700` | `bg-green-700, text-green-700, border-green-700` | `#227e45` | `#227e45` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-800 | `--color-green-800` | `bg-green-800, text-green-800, border-green-800` | `#226339` | `#226339` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-900 | `--color-green-900` | `bg-green-900, text-green-900, border-green-900` | `#215130` | `#215130` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-green-950 | `--color-green-950` | `bg-green-950, text-green-950, border-green-950` | `#142b1b` | `#142b1b` | Brand mark, positive, success. Raw value. Use a semantic token instead. |
| --color-indigo-100 | `--color-indigo-100` | `bg-indigo-100, text-indigo-100, border-indigo-100` | `#f0f2f9` | `#f0f2f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-200 | `--color-indigo-200` | `bg-indigo-200, text-indigo-200, border-indigo-200` | `#e1e5f9` | `#e1e5f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-300 | `--color-indigo-300` | `bg-indigo-300, text-indigo-300, border-indigo-300` | `#cbd2fa` | `#cbd2fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-400 | `--color-indigo-400` | `bg-indigo-400, text-indigo-400, border-indigo-400` | `#abb6fa` | `#abb6fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-50 | `--color-indigo-50` | `bg-indigo-50, text-indigo-50, border-indigo-50` | `#f8f9fb` | `#f8f9fb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-500 | `--color-indigo-500` | `bg-indigo-500, text-indigo-500, border-indigo-500` | `#919cf8` | `#919cf8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-600 | `--color-indigo-600` | `bg-indigo-600, text-indigo-600, border-indigo-600` | `#6f77f6` | `#6f77f6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-700 | `--color-indigo-700` | `bg-indigo-700, text-indigo-700, border-indigo-700` | `#534aee` | `#534aee` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-800 | `--color-indigo-800` | `bg-indigo-800, text-indigo-800, border-indigo-800` | `#4131cc` | `#4131cc` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-900 | `--color-indigo-900` | `bg-indigo-900, text-indigo-900, border-indigo-900` | `#352ea2` | `#352ea2` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-indigo-950 | `--color-indigo-950` | `bg-indigo-950, text-indigo-950, border-indigo-950` | `#1c1c54` | `#1c1c54` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-100 | `--color-lime-100` | `bg-lime-100, text-lime-100, border-lime-100` | `#e9fad6` | `#e9fad6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-200 | `--color-lime-200` | `bg-lime-200, text-lime-200, border-lime-200` | `#c8fa84` | `#c8fa84` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-300 | `--color-lime-300` | `bg-lime-300, text-lime-300, border-lime-300` | `#aeec47` | `#aeec47` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-400 | `--color-lime-400` | `bg-lime-400, text-lime-400, border-lime-400` | `#97d130` | `#97d130` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-50 | `--color-lime-50` | `bg-lime-50, text-lime-50, border-lime-50` | `#f6fbf1` | `#f6fbf1` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-500 | `--color-lime-500` | `bg-lime-500, text-lime-500, border-lime-500` | `#85b92a` | `#85b92a` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-600 | `--color-lime-600` | `bg-lime-600, text-lime-600, border-lime-600` | `#6d9820` | `#6d9820` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-700 | `--color-lime-700` | `bg-lime-700, text-lime-700, border-lime-700` | `#56771e` | `#56771e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-800 | `--color-lime-800` | `bg-lime-800, text-lime-800, border-lime-800` | `#455e1e` | `#455e1e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-900 | `--color-lime-900` | `bg-lime-900, text-lime-900, border-lime-900` | `#3a4d1e` | `#3a4d1e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-lime-950 | `--color-lime-950` | `bg-lime-950, text-lime-950, border-lime-950` | `#1f2912` | `#1f2912` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-neutral-0 | `--color-neutral-0` | `bg-neutral-0, text-neutral-0, border-neutral-0` | `#ffffff` | `#ffffff` | neutral 0 — #FFFFFF. Pure white anchor. Primitive: never apply directly, alias it from a semantic token. |
| --color-neutral-100 | `--color-neutral-100` | `bg-neutral-100, text-neutral-100, border-neutral-100` | `#f3f6f4` | `#f3f6f4` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-1000 | `--color-neutral-1000` | `bg-neutral-1000, text-neutral-1000, border-neutral-1000` | `#030403` | `#030403` | neutral 1000 — #030403. Darker than 950, for rare deepest-black needs. Primitive: never apply directly, alias it from a semantic token. |
| --color-neutral-200 | `--color-neutral-200` | `bg-neutral-200, text-neutral-200, border-neutral-200` | `#e3e6e4` | `#e3e6e4` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-300 | `--color-neutral-300` | `bg-neutral-300, text-neutral-300, border-neutral-300` | `#d3d5d3` | `#d3d5d3` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-400 | `--color-neutral-400` | `bg-neutral-400, text-neutral-400, border-neutral-400` | `#9fa19f` | `#9fa19f` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-50 | `--color-neutral-50` | `bg-neutral-50, text-neutral-50, border-neutral-50` | `#f9faf9` | `#f9faf9` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-500 | `--color-neutral-500` | `bg-neutral-500, text-neutral-500, border-neutral-500` | `#6d6f6d` | `#6d6f6d` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-600 | `--color-neutral-600` | `bg-neutral-600, text-neutral-600, border-neutral-600` | `#515351` | `#515351` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-700 | `--color-neutral-700` | `bg-neutral-700, text-neutral-700, border-neutral-700` | `#3e413f` | `#3e413f` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-800 | `--color-neutral-800` | `bg-neutral-800, text-neutral-800, border-neutral-800` | `#242725` | `#242725` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-850 | `--color-neutral-850` | `bg-neutral-850, text-neutral-850, border-neutral-850` | `#1c1f1d` | `#1c1f1d` | Between 800 and 900. Raised cards on the dark page. |
| --color-neutral-900 | `--color-neutral-900` | `bg-neutral-900, text-neutral-900, border-neutral-900` | `#151816` | `#151816` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-neutral-950 | `--color-neutral-950` | `bg-neutral-950, text-neutral-950, border-neutral-950` | `#080b09` | `#080b09` | Surfaces, text, borders. Raw value. Use a semantic token instead. |
| --color-orange-100 | `--color-orange-100` | `bg-orange-100, text-orange-100, border-orange-100` | `#f9f0ec` | `#f9f0ec` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-200 | `--color-orange-200` | `bg-orange-200, text-orange-200, border-orange-200` | `#f9e0d5` | `#f9e0d5` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-300 | `--color-orange-300` | `bg-orange-300, text-orange-300, border-orange-300` | `#fac8b0` | `#fac8b0` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-400 | `--color-orange-400` | `bg-orange-400, text-orange-400, border-orange-400` | `#faa377` | `#faa377` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-50 | `--color-orange-50` | `bg-orange-50, text-orange-50, border-orange-50` | `#fbf8f7` | `#fbf8f7` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-500 | `--color-orange-500` | `bg-orange-500, text-orange-500, border-orange-500` | `#f97e39` | `#f97e39` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-600 | `--color-orange-600` | `bg-orange-600, text-orange-600, border-orange-600` | `#d3631f` | `#d3631f` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-700 | `--color-orange-700` | `bg-orange-700, text-orange-700, border-orange-700` | `#a54f1d` | `#a54f1d` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-800 | `--color-orange-800` | `bg-orange-800, text-orange-800, border-orange-800` | `#81401d` | `#81401d` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-900 | `--color-orange-900` | `bg-orange-900, text-orange-900, border-orange-900` | `#68371d` | `#68371d` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-orange-950 | `--color-orange-950` | `bg-orange-950, text-orange-950, border-orange-950` | `#371e12` | `#371e12` | Color-blind negative. Raw value. Use a semantic token instead. |
| --color-pink-100 | `--color-pink-100` | `bg-pink-100, text-pink-100, border-pink-100` | `#f9eff3` | `#f9eff3` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-200 | `--color-pink-200` | `bg-pink-200, text-pink-200, border-pink-200` | `#f9dee8` | `#f9dee8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-300 | `--color-pink-300` | `bg-pink-300, text-pink-300, border-pink-300` | `#fac3d8` | `#fac3d8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-400 | `--color-pink-400` | `bg-pink-400, text-pink-400, border-pink-400` | `#fa98c1` | `#fa98c1` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-50 | `--color-pink-50` | `bg-pink-50, text-pink-50, border-pink-50` | `#fbf8f9` | `#fbf8f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-500 | `--color-pink-500` | `bg-pink-500, text-pink-500, border-pink-500` | `#f96dad` | `#f96dad` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-600 | `--color-pink-600` | `bg-pink-600, text-pink-600, border-pink-600` | `#ea2892` | `#ea2892` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-700 | `--color-pink-700` | `bg-pink-700, text-pink-700, border-pink-700` | `#b72572` | `#b72572` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-800 | `--color-pink-800` | `bg-pink-800, text-pink-800, border-pink-800` | `#8f255a` | `#8f255a` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-900 | `--color-pink-900` | `bg-pink-900, text-pink-900, border-pink-900` | `#73234a` | `#73234a` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-pink-950 | `--color-pink-950` | `bg-pink-950, text-pink-950, border-pink-950` | `#3d1628` | `#3d1628` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-100 | `--color-purple-100` | `bg-purple-100, text-purple-100, border-purple-100` | `#f4f0f9` | `#f4f0f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-200 | `--color-purple-200` | `bg-purple-200, text-purple-200, border-purple-200` | `#ebe1f9` | `#ebe1f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-300 | `--color-purple-300` | `bg-purple-300, text-purple-300, border-purple-300` | `#dfcafa` | `#dfcafa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-400 | `--color-purple-400` | `bg-purple-400, text-purple-400, border-purple-400` | `#cda7fa` | `#cda7fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-50 | `--color-purple-50` | `bg-purple-50, text-purple-50, border-purple-50` | `#faf8fb` | `#faf8fb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-500 | `--color-purple-500` | `bg-purple-500, text-purple-500, border-purple-500` | `#be87f8` | `#be87f8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-600 | `--color-purple-600` | `bg-purple-600, text-purple-600, border-purple-600` | `#aa54f6` | `#aa54f6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-700 | `--color-purple-700` | `bg-purple-700, text-purple-700, border-purple-700` | `#8d2ad7` | `#8d2ad7` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-800 | `--color-purple-800` | `bg-purple-800, text-purple-800, border-purple-800` | `#6e29a6` | `#6e29a6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-900 | `--color-purple-900` | `bg-purple-900, text-purple-900, border-purple-900` | `#592785` | `#592785` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-purple-950 | `--color-purple-950` | `bg-purple-950, text-purple-950, border-purple-950` | `#2f1845` | `#2f1845` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-red-100 | `--color-red-100` | `bg-red-100, text-red-100, border-red-100` | `#f9f0ef` | `#f9f0ef` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-200 | `--color-red-200` | `bg-red-200, text-red-200, border-red-200` | `#f9dfdd` | `#f9dfdd` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-300 | `--color-red-300` | `bg-red-300, text-red-300, border-red-300` | `#fac6c1` | `#fac6c1` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-400 | `--color-red-400` | `bg-red-400, text-red-400, border-red-400` | `#fa9f97` | `#fa9f97` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-50 | `--color-red-50` | `bg-red-50, text-red-50, border-red-50` | `#fbf8f8` | `#fbf8f8` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-500 | `--color-red-500` | `bg-red-500, text-red-500, border-red-500` | `#f97972` | `#f97972` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-600 | `--color-red-600` | `bg-red-600, text-red-600, border-red-600` | `#f62a36` | `#f62a36` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-700 | `--color-red-700` | `bg-red-700, text-red-700, border-red-700` | `#c0262c` | `#c0262c` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-800 | `--color-red-800` | `bg-red-800, text-red-800, border-red-800` | `#952627` | `#952627` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-900 | `--color-red-900` | `bg-red-900, text-red-900, border-red-900` | `#782523` | `#782523` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-red-950 | `--color-red-950` | `bg-red-950, text-red-950, border-red-950` | `#401615` | `#401615` | Negative, destructive. Raw value. Use a semantic token instead. |
| --color-rose-100 | `--color-rose-100` | `bg-rose-100, text-rose-100, border-rose-100` | `#f9f0f0` | `#f9f0f0` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-200 | `--color-rose-200` | `bg-rose-200, text-rose-200, border-rose-200` | `#f9dfe1` | `#f9dfe1` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-300 | `--color-rose-300` | `bg-rose-300, text-rose-300, border-rose-300` | `#fac5ca` | `#fac5ca` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-400 | `--color-rose-400` | `bg-rose-400, text-rose-400, border-rose-400` | `#fa9ca8` | `#fa9ca8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-50 | `--color-rose-50` | `bg-rose-50, text-rose-50, border-rose-50` | `#fbf8f8` | `#fbf8f8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-500 | `--color-rose-500` | `bg-rose-500, text-rose-500, border-rose-500` | `#f9758a` | `#f9758a` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-600 | `--color-rose-600` | `bg-rose-600, text-rose-600, border-rose-600` | `#f22962` | `#f22962` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-700 | `--color-rose-700` | `bg-rose-700, text-rose-700, border-rose-700` | `#bd264e` | `#bd264e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-800 | `--color-rose-800` | `bg-rose-800, text-rose-800, border-rose-800` | `#93253f` | `#93253f` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-900 | `--color-rose-900` | `bg-rose-900, text-rose-900, border-rose-900` | `#772435` | `#772435` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-rose-950 | `--color-rose-950` | `bg-rose-950, text-rose-950, border-rose-950` | `#3f161d` | `#3f161d` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-100 | `--color-sky-100` | `bg-sky-100, text-sky-100, border-sky-100` | `#ecf4f9` | `#ecf4f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-200 | `--color-sky-200` | `bg-sky-200, text-sky-200, border-sky-200` | `#d4eaf9` | `#d4eaf9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-300 | `--color-sky-300` | `bg-sky-300, text-sky-300, border-sky-300` | `#addcfa` | `#addcfa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-400 | `--color-sky-400` | `bg-sky-400, text-sky-400, border-sky-400` | `#70c6fa` | `#70c6fa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-50 | `--color-sky-50` | `bg-sky-50, text-sky-50, border-sky-50` | `#f7f9fb` | `#f7f9fb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-500 | `--color-sky-500` | `bg-sky-500, text-sky-500, border-sky-500` | `#2db1f4` | `#2db1f4` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-600 | `--color-sky-600` | `bg-sky-600, text-sky-600, border-sky-600` | `#2492ca` | `#2492ca` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-700 | `--color-sky-700` | `bg-sky-700, text-sky-700, border-sky-700` | `#21739e` | `#21739e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-800 | `--color-sky-800` | `bg-sky-800, text-sky-800, border-sky-800` | `#215b7b` | `#215b7b` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-900 | `--color-sky-900` | `bg-sky-900, text-sky-900, border-sky-900` | `#204b63` | `#204b63` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-sky-950 | `--color-sky-950` | `bg-sky-950, text-sky-950, border-sky-950` | `#142835` | `#142835` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-100 | `--color-teal-100` | `bg-teal-100, text-teal-100, border-teal-100` | `#def9f4` | `#def9f4` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-200 | `--color-teal-200` | `bg-teal-200, text-teal-200, border-teal-200` | `#a5f9ea` | `#a5f9ea` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-300 | `--color-teal-300` | `bg-teal-300, text-teal-300, border-teal-300` | `#4ff2db` | `#4ff2db` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-400 | `--color-teal-400` | `bg-teal-400, text-teal-400, border-teal-400` | `#37d6c1` | `#37d6c1` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-50 | `--color-teal-50` | `bg-teal-50, text-teal-50, border-teal-50` | `#f3fbf9` | `#f3fbf9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-500 | `--color-teal-500` | `bg-teal-500, text-teal-500, border-teal-500` | `#2fbeab` | `#2fbeab` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-600 | `--color-teal-600` | `bg-teal-600, text-teal-600, border-teal-600` | `#259c8d` | `#259c8d` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-700 | `--color-teal-700` | `bg-teal-700, text-teal-700, border-teal-700` | `#227a6e` | `#227a6e` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-800 | `--color-teal-800` | `bg-teal-800, text-teal-800, border-teal-800` | `#226057` | `#226057` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-900 | `--color-teal-900` | `bg-teal-900, text-teal-900, border-teal-900` | `#214f48` | `#214f48` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-teal-950 | `--color-teal-950` | `bg-teal-950, text-teal-950, border-teal-950` | `#142a26` | `#142a26` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-100 | `--color-violet-100` | `bg-violet-100, text-violet-100, border-violet-100` | `#f2f1f9` | `#f2f1f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-200 | `--color-violet-200` | `bg-violet-200, text-violet-200, border-violet-200` | `#e6e3f9` | `#e6e3f9` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-300 | `--color-violet-300` | `bg-violet-300, text-violet-300, border-violet-300` | `#d5cefa` | `#d5cefa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-400 | `--color-violet-400` | `bg-violet-400, text-violet-400, border-violet-400` | `#bdaefa` | `#bdaefa` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-50 | `--color-violet-50` | `bg-violet-50, text-violet-50, border-violet-50` | `#f9f9fb` | `#f9f9fb` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-500 | `--color-violet-500` | `bg-violet-500, text-violet-500, border-violet-500` | `#aa92f8` | `#aa92f8` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-600 | `--color-violet-600` | `bg-violet-600, text-violet-600, border-violet-600` | `#9167f6` | `#9167f6` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-700 | `--color-violet-700` | `bg-violet-700, text-violet-700, border-violet-700` | `#792dee` | `#792dee` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-800 | `--color-violet-800` | `bg-violet-800, text-violet-800, border-violet-800` | `#5f2cb7` | `#5f2cb7` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-900 | `--color-violet-900` | `bg-violet-900, text-violet-900, border-violet-900` | `#4d2a92` | `#4d2a92` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-violet-950 | `--color-violet-950` | `bg-violet-950, text-violet-950, border-violet-950` | `#28194c` | `#28194c` | Decorative. Charts, categories, avatars. No meaning. Raw value. Use a semantic token instead. |
| --color-white | `--color-white` | `bg-white, text-white, border-white` | `#ffffff` | `#ffffff` | Raw value. Use a semantic token instead. |
| --color-yellow-100 | `--color-yellow-100` | `bg-yellow-100, text-yellow-100, border-yellow-100` | `#f9f2df` | `#f9f2df` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-200 | `--color-yellow-200` | `bg-yellow-200, text-yellow-200, border-yellow-200` | `#f9e5af` | `#f9e5af` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-300 | `--color-yellow-300` | `bg-yellow-300, text-yellow-300, border-yellow-300` | `#fad055` | `#fad055` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-400 | `--color-yellow-400` | `bg-yellow-400, text-yellow-400, border-yellow-400` | `#e0b62f` | `#e0b62f` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-50 | `--color-yellow-50` | `bg-yellow-50, text-yellow-50, border-yellow-50` | `#fbf9f3` | `#fbf9f3` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-500 | `--color-yellow-500` | `bg-yellow-500, text-yellow-500, border-yellow-500` | `#c7a129` | `#c7a129` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-600 | `--color-yellow-600` | `bg-yellow-600, text-yellow-600, border-yellow-600` | `#a48420` | `#a48420` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-700 | `--color-yellow-700` | `bg-yellow-700, text-yellow-700, border-yellow-700` | `#80681d` | `#80681d` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-800 | `--color-yellow-800` | `bg-yellow-800, text-yellow-800, border-yellow-800` | `#65531e` | `#65531e` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-900 | `--color-yellow-900` | `bg-yellow-900, text-yellow-900, border-yellow-900` | `#52441d` | `#52441d` | Warning highlight. Raw value. Use a semantic token instead. |
| --color-yellow-950 | `--color-yellow-950` | `bg-yellow-950, text-yellow-950, border-yellow-950` | `#2c2512` | `#2c2512` | Warning highlight. Raw value. Use a semantic token instead. |

## Contrast

WCAG 2.x relative-luminance contrast of text on its surface. AA for body text is 4.5:1. Translucent colours are composited over the surface first. `--color-text-secondary` stands in for secondary text.

| Text | On | Light | Dark | AA (light / dark) |
| --- | --- | --- | --- | --- |
| `--color-foreground` | `--color-background` | 15.09 | 16.44 | pass / pass |
| `--color-muted-foreground` | `--color-background` | 5.07 | 6.88 | pass / pass |
| `--color-text-secondary` | `--color-background` | 7.76 | 12.12 | pass / pass |
| `--color-foreground` | `--color-card` | 15.09 | 15.28 | pass / pass |
| `--color-muted-foreground` | `--color-card` | 5.07 | 6.39 | pass / pass |
| `--color-text-secondary` | `--color-card` | 7.76 | 11.26 | pass / pass |
| `--color-foreground` | `--color-popover` | 15.09 | 13.87 | pass / pass |
| `--color-muted-foreground` | `--color-popover` | 5.07 | 5.80 | pass / pass |
| `--color-text-secondary` | `--color-popover` | 7.76 | 10.22 | pass / pass |
| `--color-foreground` | `--color-muted` | 13.87 | 13.87 | pass / pass |
| `--color-muted-foreground` | `--color-muted` | 4.66 | 5.80 | pass / pass |
| `--color-text-secondary` | `--color-muted` | 7.13 | 10.22 | pass / pass |
| `--color-accent-foreground` | `--color-accent` | 13.87 | 9.49 | pass / pass |
| `--color-card-foreground` | `--color-card` | 15.09 | 15.28 | pass / pass |
| `--color-destructive-foreground` | `--color-destructive` | 5.91 | 5.91 | pass / pass |
| `--color-destructive-muted-foreground` | `--color-destructive-muted` | 7.25 | 10.35 | pass / pass |
| `--color-disabled-foreground` | `--color-disabled` | 2.39 | 1.94 | fail / fail |
| `--color-info-foreground` | `--color-info` | 5.49 | 10.30 | pass / pass |
| `--color-info-muted-foreground` | `--color-info-muted` | 6.86 | 10.38 | pass / pass |
| `--color-inverse-foreground` | `--color-inverse` | 18.90 | 18.90 | pass / pass |
| `--color-popover-foreground` | `--color-popover` | 15.09 | 13.87 | pass / pass |
| `--color-primary-foreground` | `--color-primary` | 19.77 | 18.90 | pass / pass |
| `--color-secondary-foreground` | `--color-secondary` | 15.09 | 13.87 | pass / pass |
| `--color-shell-foreground` | `--color-shell` | 13.87 | 20.54 | pass / pass |
| `--color-success-foreground` | `--color-success` | 5.07 | 11.09 | pass / pass |
| `--color-success-muted-foreground` | `--color-success-muted` | 6.51 | 10.98 | pass / pass |
| `--color-tertiary-foreground` | `--color-tertiary` | 19.77 | 19.77 | pass / pass |
| `--color-warning-foreground` | `--color-warning` | 5.47 | 10.02 | pass / pass |
| `--color-warning-highlight-foreground` | `--color-warning-highlight` | 10.30 | 10.30 | pass / pass |
| `--color-warning-muted-foreground` | `--color-warning-muted` | 6.85 | 10.30 | pass / pass |