> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

> How Aura's two-layer color architecture works — ramps, semantic tokens, light and dark theming, fixed-appearance tokens — plus the complete token and ramp value tables.

export const ColorSwatch = ({color}) => <span aria-hidden="true" title={color} style={{
  display: 'inline-block',
  width: '1.5rem',
  height: '1.5rem',
  borderRadius: '0.25rem',
  border: '1px solid rgba(0, 0, 0, 0.12)',
  backgroundImage: `
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
        linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)
      `,
  backgroundSize: '8px 8px',
  backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
  verticalAlign: 'middle'
}}>
    <span style={{
  display: 'block',
  width: '100%',
  height: '100%',
  borderRadius: 'inherit',
  backgroundColor: color
}} />
  </span>;

Aura's color system is built in two layers. **Color ramps** are the raw palette — sequential scales of tints and shades for each hue. **Tokens** are semantic names that map to a specific ramp step and swap their value between light and dark mode automatically.

This separation is what makes theming work. When a user switches themes, every token resolves to a different ramp step — but all product code stays untouched, because it only ever references token names, never raw values. The sections below explain how the system is organized; the [theme token](#theme-tokens) and [color ramp](#color-ramps) tables list every resolved value.

<Note>
  To extend or customize color tokens in a consuming app, see [Token customization reference](/aura-design-system/foundations/customization).
</Note>

## The two layers

### Layer 1 — Color ramps

Ramps are the source material. Each hue has a sequential scale (for example `fjord-50` through `fjord-950`) covering the full range of tints and shades. Alpha variants (`fjord-alpha-50`, `fjord-alpha-200`) are semi-transparent overlays built from the ramp's base color, primarily intended for charts and data visualization.

Ramps exist so tokens have something to point to. **You should rarely reference ramp values directly in product UI.** The only valid exceptions are:

* A color must stay visually constant across both themes (use a fixed token instead if one exists)
* You are building a custom marketing or illustration surface where no semantic token fits and theming is not a concern

### Layer 2 — Tokens

Tokens are named CSS custom properties that resolve to a ramp step. They are the vocabulary product UI speaks. A token like `background` points to `mountain-white` in light mode and `mountain-950` in dark mode — the name stays the same, the value changes with the theme.

## Light and dark theming

Every token has a light mode value and a dark mode value. The token name never changes — only what it resolves to. This means:

* Product code never needs `dark:` overrides for tokens
* Switching themes is handled entirely by the system
* Contrast has been verified for both themes for every token

### How ramp steps map across themes

As a general pattern, light mode uses lighter ramp steps for surfaces and darker steps for text. Dark mode inverts this:

## Fixed tokens

Fixed tokens are the deliberate exception to the theming rule. They resolve to the **same value in both light and dark mode** — they do not flip with the theme. Unlike theme-adaptive surfaces, fixed colors stay consistent across light and dark mode — keeping these elements from becoming too stark against an inverted background

<Warning>
  Fixed tokens are not a workaround for theming. If you find yourself reaching for them outside of persistent chrome, it is a sign the design needs revisiting. Overusing fixed tokens breaks the light/dark contract for users.
</Warning>

## Dos and don'ts

<AccordionGroup>
  <Accordion title="Do use tokens as named">
    Token names reflect their intended use and have been contrast-tested in both themes. Using `destructive-foreground` for something that isn't destructive, or `info-background` as a decorative accent, undermines both the visual language and accessibility guarantees.
  </Accordion>

  <Accordion title="Don't use raw hex values">
    Raw hex values don't respond to theme changes. A hardcoded `#FFFFFF` looks correct in light mode and breaks in dark mode. Always use a token.
  </Accordion>

  <Accordion title="Don't adjust opacity manually">
    Manual opacity adjustments (`opacity: 0.5`, custom `rgba()` values) bypass the token system and produce colors that aren't theme-tested. Use alpha tokens from the ramp instead.
  </Accordion>

  <Accordion title="Don't use semantic tokens decoratively">
    Semantic tokens — info, success, warning, destructive — exist to communicate system states. Using a green semantic background as a decorative accent trains users to ignore real success states. Use decorative tokens for visual differentiation that carries no status meaning.
  </Accordion>
</AccordionGroup>

## Theme tokens

Theme tokens are the vocabulary product UI speaks. They are organized into four families — base, semantic, decorative, and chart — each with a distinct job. Tokens resolve to different ramp values in light and dark mode automatically; product code never needs to write `dark:` overrides for tokens.

| Family         | Share of UI   | Purpose                                                            |
| :------------- | :------------ | :----------------------------------------------------------------- |
| **Base**       | \~80–90%      | Surfaces, text, borders, interactive states                        |
| **Semantic**   | \~5–10%       | Status and feedback — info, success, warning, destructive, neutral |
| **Decorative** | \~5–10%       | Visual differentiation — avatars, badges, illustrations            |
| **Chart**      | Data viz only | Semi-transparent series and status colors for charts               |

Base tokens cover the vast majority of UI and are organized into background, foreground, and border and ring subfamilies. Semantic tokens should only appear in components that carry a status signal. Decorative tokens add color where it carries no status meaning. Chart tokens are semi-transparent colors derived from the alpha ramps — use default series colors in sequence, and semantic chart colors only when the data itself carries that meaning.

### Base

Base tokens cover most interactive elements and surfaces — backgrounds, text, borders, and interactive states.

#### Background

Surface, action, and interactive state color tokens.

<Tabs>
  <Tab title="Light">
    | Token                           | Value     |             Preview             | Usage                                                         |
    | :------------------------------ | :-------- | :-----------------------------: | :------------------------------------------------------------ |
    | `background`                    | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Main app and page surface                                     |
    | `alternate-background`          | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Alternating rows, subtle secondary surfaces                   |
    | `muted-background`              | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Subdued background for less prominent UI areas                |
    | `card-background`               | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Card and panel surface fill                                   |
    | `primary-background`            | `#212426` | <ColorSwatch color="#212426" /> | Primary action buttons and key CTAs                           |
    | `primary-background-hover`      | `#40464A` | <ColorSwatch color="#40464A" /> | Hover state on primary action elements                        |
    | `secondary-background`          | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Secondary actions, chip fills, ghost button surfaces          |
    | `secondary-background-hover`    | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Hover state on secondary action elements                      |
    | `accent-background`             | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Subtle highlight for selected, focused, or hovered items      |
    | `accent-background-strong`      | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Stronger accent for more prominent highlighted states         |
    | `input-active-background`       | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Background of active or focused form inputs                   |
    | `active-background`             | `#191B1D` | <ColorSwatch color="#191B1D" /> | Fill for selected items in navigation and lists               |
    | `active-background-hover`       | `#2D3134` | <ColorSwatch color="#2D3134" /> | Hover state on selected navigation items                      |
    | `active-muted-background`       | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Subtle selected-state fill for secondary navigation           |
    | `active-muted-background-hover` | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Hover state on muted active elements                          |
    | `popover-background`            | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Dropdowns, popovers, tooltips, and floating panels            |
    | `raised-background`             | `#2D3134` | <ColorSwatch color="#2D3134" /> | Modals, drawers, and elevated surfaces above the page         |
    | `disabled-background`           | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Fill for disabled interactive elements                        |
    | `background-fixed-light`        | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Permanently light surface — does not flip in dark mode        |
    | `background-fixed-dark`         | `#212426` | <ColorSwatch color="#212426" /> | Permanently dark surface — does not flip in light mode        |
    | `accent-background-fixed-dark`  | `#2D3134` | <ColorSwatch color="#2D3134" /> | Permanently dark accent surface — does not flip in light mode |
    | `overlay-background`            | `#000000` | <ColorSwatch color="#000000" /> | Scrim or backdrop behind modals and dialogs                   |
  </Tab>

  <Tab title="Dark">
    | Token                           | Value     |             Preview             | Usage                                                         |
    | :------------------------------ | :-------- | :-----------------------------: | :------------------------------------------------------------ |
    | `background`                    | `#191B1D` | <ColorSwatch color="#191B1D" /> | Main app and page surface                                     |
    | `alternate-background`          | `#111213` | <ColorSwatch color="#111213" /> | Alternating rows, subtle secondary surfaces                   |
    | `muted-background`              | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subdued background for less prominent UI areas                |
    | `card-background`               | `#212426` | <ColorSwatch color="#212426" /> | Card and panel surface fill                                   |
    | `primary-background`            | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Primary action buttons and key CTAs                           |
    | `primary-background-hover`      | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Hover state on primary action elements                        |
    | `secondary-background`          | `#40464A` | <ColorSwatch color="#40464A" /> | Secondary actions, chip fills, ghost button surfaces          |
    | `secondary-background-hover`    | `#5E666D` | <ColorSwatch color="#5E666D" /> | Hover state on secondary action elements                      |
    | `accent-background`             | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle highlight for selected, focused, or hovered items      |
    | `accent-background-strong`      | `#40464A` | <ColorSwatch color="#40464A" /> | Stronger accent for more prominent highlighted states         |
    | `input-active-background`       | `#212426` | <ColorSwatch color="#212426" /> | Background of active or focused form inputs                   |
    | `active-background`             | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Fill for selected items in navigation and lists               |
    | `active-background-hover`       | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Hover state on selected navigation items                      |
    | `active-muted-background`       | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle selected-state fill for secondary navigation           |
    | `active-muted-background-hover` | `#40464A` | <ColorSwatch color="#40464A" /> | Hover state on muted active elements                          |
    | `popover-background`            | `#212426` | <ColorSwatch color="#212426" /> | Dropdowns, popovers, tooltips, and floating panels            |
    | `raised-background`             | `#40464A` | <ColorSwatch color="#40464A" /> | Modals, drawers, and elevated surfaces above the page         |
    | `disabled-background`           | `#2D3134` | <ColorSwatch color="#2D3134" /> | Fill for disabled interactive elements                        |
    | `background-fixed-light`        | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Permanently light surface — does not flip in dark mode        |
    | `background-fixed-dark`         | `#212426` | <ColorSwatch color="#212426" /> | Permanently dark surface — does not flip in light mode        |
    | `accent-background-fixed-dark`  | `#2D3134` | <ColorSwatch color="#2D3134" /> | Permanently dark accent surface — does not flip in light mode |
    | `overlay-background`            | `#000000` | <ColorSwatch color="#000000" /> | Scrim or backdrop behind modals and dialogs                   |
  </Tab>
</Tabs>

<Info>
  Fixed tokens in this table resolve to the same value in both themes. See [Fixed tokens](#fixed-tokens) for when to use them.
</Info>

#### Foreground

Text, icon, and link color tokens.

<Tabs>
  <Tab title="Light">
    | Token                              | Value     |             Preview             | Usage                                                   |
    | :--------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------------ |
    | `foreground`                       | `#191B1D` | <ColorSwatch color="#191B1D" /> | Primary text and icons                                  |
    | `secondary-foreground`             | `#40464A` | <ColorSwatch color="#40464A" /> | Secondary text — slightly less prominent than primary   |
    | `muted-foreground`                 | `#7C868E` | <ColorSwatch color="#7C868E" /> | Placeholder text, timestamps, and supplemental labels   |
    | `disabled-foreground`              | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Text and icons on disabled elements                     |
    | `link-foreground`                  | `#486AED` | <ColorSwatch color="#486AED" /> | Hyperlinks and interactive inline text                  |
    | `foreground-on-primary`            | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Text and icons on a primary-background surface          |
    | `foreground-on-active`             | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Text and icons on an active-background surface          |
    | `foreground-fixed-light`           | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Permanently white text — for use on fixed-dark surfaces |
    | `foreground-fixed-dark`            | `#191B1D` | <ColorSwatch color="#191B1D" /> | Permanently dark text — for use on fixed-light surfaces |
    | `secondary-foreground-fixed-light` | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Secondary text on permanently dark surfaces             |
    | `foreground-secondary-fixed-dark`  | `#40464A` | <ColorSwatch color="#40464A" /> | Secondary text on permanently light surfaces            |
    | `muted-foreground-fixed-light`     | `#BBC0C4` | <ColorSwatch color="#BBC0C4" /> | Muted text on permanently dark surfaces                 |
  </Tab>

  <Tab title="Dark">
    | Token                              | Value     |             Preview             | Usage                                                   |
    | :--------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------------ |
    | `foreground`                       | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Primary text and icons                                  |
    | `secondary-foreground`             | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Secondary text — slightly less prominent than primary   |
    | `muted-foreground`                 | `#A5ABB1` | <ColorSwatch color="#A5ABB1" /> | Placeholder text, timestamps, and supplemental labels   |
    | `disabled-foreground`              | `#5E666D` | <ColorSwatch color="#5E666D" /> | Text and icons on disabled elements                     |
    | `link-foreground`                  | `#728DF1` | <ColorSwatch color="#728DF1" /> | Hyperlinks and interactive inline text                  |
    | `foreground-on-primary`            | `#191B1D` | <ColorSwatch color="#191B1D" /> | Text and icons on a primary-background surface          |
    | `foreground-on-active`             | `#191B1D` | <ColorSwatch color="#191B1D" /> | Text and icons on an active-background surface          |
    | `foreground-fixed-light`           | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> | Permanently white text — for use on fixed-dark surfaces |
    | `foreground-fixed-dark`            | `#191B1D` | <ColorSwatch color="#191B1D" /> | Permanently dark text — for use on fixed-light surfaces |
    | `secondary-foreground-fixed-light` | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Secondary text on permanently dark surfaces             |
    | `foreground-secondary-fixed-dark`  | `#40464A` | <ColorSwatch color="#40464A" /> | Secondary text on permanently light surfaces            |
    | `muted-foreground-fixed-light`     | `#BBC0C4` | <ColorSwatch color="#BBC0C4" /> | Muted text on permanently dark surfaces                 |
  </Tab>
</Tabs>

#### Border and ring

Border and focus ring color tokens.

<Tabs>
  <Tab title="Light">
    | Token                    | Value     |             Preview             | Usage                                                          |
    | :----------------------- | :-------- | :-----------------------------: | :------------------------------------------------------------- |
    | `border`                 | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Default dividers and element borders                           |
    | `border-active`          | `#191B1D` | <ColorSwatch color="#191B1D" /> | Border of active or selected elements                          |
    | `border-emphasized`      | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Slightly stronger border for emphasis                          |
    | `border-fixed-light`     | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Border on a fixed-light surface — does not flip with the theme |
    | `border-on-dark`         | `#2D3134` | <ColorSwatch color="#2D3134" /> | Border used on dark surfaces                                   |
    | `ring`                   | `#7081C7` | <ColorSwatch color="#7081C7" /> | Focus ring for keyboard navigation                             |
    | `ring-muted`             | `#D0D6ED` | <ColorSwatch color="#D0D6ED" /> | Subtle focus ring variant                                      |
    | `ring-destructive`       | `#CB0B2C` | <ColorSwatch color="#CB0B2C" /> | Focus ring on destructive or error-state elements              |
    | `ring-destructive-muted` | `#FDDEE4` | <ColorSwatch color="#FDDEE4" /> | Muted focus ring for destructive elements                      |
  </Tab>

  <Tab title="Dark">
    | Token                    | Value     |             Preview             | Usage                                                          |
    | :----------------------- | :-------- | :-----------------------------: | :------------------------------------------------------------- |
    | `border`                 | `#2D3134` | <ColorSwatch color="#2D3134" /> | Default dividers and element borders                           |
    | `border-active`          | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> | Border of active or selected elements                          |
    | `border-emphasized`      | `#40464A` | <ColorSwatch color="#40464A" /> | Slightly stronger border for emphasis                          |
    | `border-fixed-light`     | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Border on a fixed-light surface — does not flip with the theme |
    | `border-on-dark`         | `#2D3134` | <ColorSwatch color="#2D3134" /> | Border used on dark surfaces                                   |
    | `ring`                   | `#7081C7` | <ColorSwatch color="#7081C7" /> | Focus ring for keyboard navigation                             |
    | `ring-muted`             | `#232E5A` | <ColorSwatch color="#232E5A" /> | Subtle focus ring variant                                      |
    | `ring-destructive`       | `#F65E78` | <ColorSwatch color="#F65E78" /> | Focus ring on destructive or error-state elements              |
    | `ring-destructive-muted` | `#4E0411` | <ColorSwatch color="#4E0411" /> | Muted focus ring for destructive elements                      |
  </Tab>
</Tabs>

***

### Semantic

Semantic tokens communicate status and meaning. They account for 5–10% of the UI and should only appear in components that carry a status signal — Alert, Banner, Sonner toasts, status Badge variants, and form validation. Do not use them as general fills or decorative accents.

Each family has a default background/foreground pair for theme-switching surfaces, a `*-muted-background` for use on persistent dark chrome, and a `*-foreground-on-*` token for text rendered directly on the colored surface.

#### Background

<Tabs>
  <Tab title="Light">
    | Token                                | Value     |             Preview             | Usage                                                                   |
    | :----------------------------------- | :-------- | :-----------------------------: | :---------------------------------------------------------------------- |
    | `info-background`                    | `#D0D6ED` | <ColorSwatch color="#D0D6ED" /> | Surface fill for informational status components (Alert, Banner, Badge) |
    | `info-background-hover`              | `#B5BEE2` | <ColorSwatch color="#B5BEE2" /> | Hover state on info status surfaces                                     |
    | `info-muted-background`              | `#E2E5F4` | <ColorSwatch color="#E2E5F4" /> | Subtle info surface for use on persistent chrome                        |
    | `success-background`                 | `#BBF3D0` | <ColorSwatch color="#BBF3D0" /> | Surface fill for success status components                              |
    | `success-background-hover`           | `#8BEAAE` | <ColorSwatch color="#8BEAAE" /> | Hover state on success status surfaces                                  |
    | `success-muted-background`           | `#DDF9E7` | <ColorSwatch color="#DDF9E7" /> | Subtle success surface for use on persistent chrome                     |
    | `warning-background`                 | `#FFE3A2` | <ColorSwatch color="#FFE3A2" /> | Surface fill for warning status components                              |
    | `warning-background-hover`           | `#FFD062` | <ColorSwatch color="#FFD062" /> | Hover state on warning status surfaces                                  |
    | `warning-muted-background`           | `#FFF1D0` | <ColorSwatch color="#FFF1D0" /> | Subtle warning surface for use on persistent chrome                     |
    | `destructive-background`             | `#FCCAD2` | <ColorSwatch color="#FCCAD2" /> | Surface fill for destructive or error status components                 |
    | `destructive-background-hover`       | `#FAA9B7` | <ColorSwatch color="#FAA9B7" /> | Hover state on destructive status surfaces                              |
    | `destructive-muted-background`       | `#FDDEE4` | <ColorSwatch color="#FDDEE4" /> | Subtle destructive surface for use on persistent chrome                 |
    | `destructive-muted-background-hover` | `#FCCAD2` | <ColorSwatch color="#FCCAD2" /> | Hover state on muted destructive surfaces                               |
    | `neutral-background`                 | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Surface fill for neutral or inactive status components                  |
    | `neutral-background-hover`           | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Hover state on neutral status surfaces                                  |
    | `neutral-muted-background`           | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> | Subtle neutral surface for use on persistent chrome                     |
  </Tab>

  <Tab title="Dark">
    | Token                                | Value     |             Preview             | Usage                                                                   |
    | :----------------------------------- | :-------- | :-----------------------------: | :---------------------------------------------------------------------- |
    | `info-background`                    | `#B5BEE2` | <ColorSwatch color="#B5BEE2" /> | Surface fill for informational status components (Alert, Banner, Badge) |
    | `info-background-hover`              | `#D0D6ED` | <ColorSwatch color="#D0D6ED" /> | Hover state on info status surfaces                                     |
    | `info-muted-background`              | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle info surface for use on persistent chrome                        |
    | `success-background`                 | `#8BEAAE` | <ColorSwatch color="#8BEAAE" /> | Surface fill for success status components                              |
    | `success-background-hover`           | `#BBF3D0` | <ColorSwatch color="#BBF3D0" /> | Hover state on success status surfaces                                  |
    | `success-muted-background`           | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle success surface for use on persistent chrome                     |
    | `warning-background`                 | `#FFE3A2` | <ColorSwatch color="#FFE3A2" /> | Surface fill for warning status components                              |
    | `warning-background-hover`           | `#FFF1D0` | <ColorSwatch color="#FFF1D0" /> | Hover state on warning status surfaces                                  |
    | `warning-muted-background`           | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle warning surface for use on persistent chrome                     |
    | `destructive-background`             | `#FAA9B7` | <ColorSwatch color="#FAA9B7" /> | Surface fill for destructive or error status components                 |
    | `destructive-background-hover`       | `#FCCAD2` | <ColorSwatch color="#FCCAD2" /> | Hover state on destructive status surfaces                              |
    | `destructive-muted-background`       | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle destructive surface for use on persistent chrome                 |
    | `destructive-muted-background-hover` | `#40464A` | <ColorSwatch color="#40464A" /> | Hover state on muted destructive surfaces                               |
    | `neutral-background`                 | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Surface fill for neutral or inactive status components                  |
    | `neutral-background-hover`           | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> | Hover state on neutral status surfaces                                  |
    | `neutral-muted-background`           | `#2D3134` | <ColorSwatch color="#2D3134" /> | Subtle neutral surface for use on persistent chrome                     |
  </Tab>
</Tabs>

#### Foreground

<Tabs>
  <Tab title="Light">
    | Token                                | Value     |             Preview             | Usage                                                                     |
    | :----------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------------------------------ |
    | `info-foreground`                    | `#4A5FB8` | <ColorSwatch color="#4A5FB8" /> | Text and icons conveying info status on a neutral surface                 |
    | `info-foreground-on-info`            | `#32417F` | <ColorSwatch color="#32417F" /> | Text and icons placed directly on an info-background surface              |
    | `success-foreground`                 | `#1C984A` | <ColorSwatch color="#1C984A" /> | Text and icons conveying success status on a neutral surface              |
    | `success-foreground-on-success`      | `#0F5026` | <ColorSwatch color="#0F5026" /> | Text and icons placed directly on a success-background surface            |
    | `warning-foreground`                 | `#C18800` | <ColorSwatch color="#C18800" /> | Text and icons conveying warning status on a neutral surface              |
    | `warning-foreground-on-warning`      | `#755200` | <ColorSwatch color="#755200" /> | Text and icons placed directly on a warning-background surface            |
    | `destructive-foreground`             | `#CB0B2C` | <ColorSwatch color="#CB0B2C" /> | Text and icons conveying destructive or error status on a neutral surface |
    | `destructive-foreground-on-critical` | `#8D081F` | <ColorSwatch color="#8D081F" /> | Text and icons placed directly on a destructive-background surface        |
    | `neutral-foreground`                 | `#52595F` | <ColorSwatch color="#52595F" /> | Text and icons conveying neutral status on a neutral surface              |
    | `neutral-foreground-on-neutral`      | `#40464A` | <ColorSwatch color="#40464A" /> | Text and icons placed directly on a neutral-background surface            |
  </Tab>

  <Tab title="Dark">
    | Token                                | Value     |             Preview             | Usage                                                                     |
    | :----------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------------------------------ |
    | `info-foreground`                    | `#9DA9D9` | <ColorSwatch color="#9DA9D9" /> | Text and icons conveying info status on a neutral surface                 |
    | `info-foreground-on-info`            | `#1A2242` | <ColorSwatch color="#1A2242" /> | Text and icons placed directly on an info-background surface              |
    | `success-foreground`                 | `#24C45E` | <ColorSwatch color="#24C45E" /> | Text and icons conveying success status on a neutral surface              |
    | `success-foreground-on-success`      | `#0A381B` | <ColorSwatch color="#0A381B" /> | Text and icons placed directly on a success-background surface            |
    | `warning-foreground`                 | `#FCB100` | <ColorSwatch color="#FCB100" /> | Text and icons conveying warning status on a neutral surface              |
    | `warning-foreground-on-warning`      | `#5B4000` | <ColorSwatch color="#5B4000" /> | Text and icons placed directly on a warning-background surface            |
    | `destructive-foreground`             | `#F65E78` | <ColorSwatch color="#F65E78" /> | Text and icons conveying destructive or error status on a neutral surface |
    | `destructive-foreground-on-critical` | `#8D081F` | <ColorSwatch color="#8D081F" /> | Text and icons placed directly on a destructive-background surface        |
    | `neutral-foreground`                 | `#A5ABB1` | <ColorSwatch color="#A5ABB1" /> | Text and icons conveying neutral status on a neutral surface              |
    | `neutral-foreground-on-neutral`      | `#2D3134` | <ColorSwatch color="#2D3134" /> | Text and icons placed directly on a neutral-background surface            |
  </Tab>
</Tabs>

***

### Decorative

Decorative tokens add color for visual differentiation — for avatars, badges, and illustrations — where color has no status meaning. Do not use them to imply health, errors, or validation state.

**Preference order for layering in colors:** fjord → nordic → aurora → dusk → orange → sky → mountain.

#### Background

<Tabs>
  <Tab title="Light">
    | Token                                  | Value                       |                      Preview                      | Usage                                                       |
    | :------------------------------------- | :-------------------------- | :-----------------------------------------------: | :---------------------------------------------------------- |
    | `decorative-background-mountain`       | `rgba(124, 134, 142, 0.2)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.2)" /> | Mountain-tinted fill for avatars, badges, and illustrations |
    | `decorative-background-hover-mountain` | `rgba(124, 134, 142, 0.32)` | <ColorSwatch color="rgba(124, 134, 142, 0.32)" /> | Hover state for mountain decorative fill                    |
    | `decorative-background-fjord`          | `rgba(95, 125, 239, 0.32)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.32)" /> | Fjord-tinted fill for avatars, badges, and illustrations    |
    | `decorative-background-hover-fjord`    | `rgba(95, 125, 239, 0.5)`   |  <ColorSwatch color="rgba(95, 125, 239, 0.5)" />  | Hover state for fjord decorative fill                       |
    | `decorative-background-nordic`         | `rgba(26, 150, 122, 0.2)`   |  <ColorSwatch color="rgba(26, 150, 122, 0.2)" />  | Nordic-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-nordic`   | `rgba(26, 150, 122, 0.32)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.32)" /> | Hover state for nordic decorative fill                      |
    | `decorative-background-aurora`         | `rgba(100, 146, 16, 0.2)`   |  <ColorSwatch color="rgba(100, 146, 16, 0.2)" />  | Aurora-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-aurora`   | `rgba(100, 146, 16, 0.32)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.32)" /> | Hover state for aurora decorative fill                      |
    | `decorative-background-dusk`           | `rgba(183, 101, 196, 0.32)` | <ColorSwatch color="rgba(183, 101, 196, 0.32)" /> | Dusk-tinted fill for avatars, badges, and illustrations     |
    | `decorative-background-hover-dusk`     | `rgba(183, 101, 196, 0.5)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.5)" /> | Hover state for dusk decorative fill                        |
    | `decorative-background-orange`         | `rgba(225, 90, 7, 0.32)`    |   <ColorSwatch color="rgba(225, 90, 7, 0.32)" />  | Orange-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-orange`   | `rgba(225, 90, 7, 0.5)`     |   <ColorSwatch color="rgba(225, 90, 7, 0.5)" />   | Hover state for orange decorative fill                      |
    | `decorative-background-sky`            | `rgba(2, 144, 182, 0.2)`    |   <ColorSwatch color="rgba(2, 144, 182, 0.2)" />  | Sky-tinted fill for avatars, badges, and illustrations      |
    | `decorative-background-hover-sky`      | `rgba(2, 144, 182, 0.32)`   |  <ColorSwatch color="rgba(2, 144, 182, 0.32)" />  | Hover state for sky decorative fill                         |
  </Tab>

  <Tab title="Dark">
    | Token                                  | Value                       |                      Preview                      | Usage                                                       |
    | :------------------------------------- | :-------------------------- | :-----------------------------------------------: | :---------------------------------------------------------- |
    | `decorative-background-mountain`       | `rgba(109, 118, 126, 0.55)` | <ColorSwatch color="rgba(109, 118, 126, 0.55)" /> | Mountain-tinted fill for avatars, badges, and illustrations |
    | `decorative-background-hover-mountain` | `rgba(109, 118, 126, 0.7)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.7)" /> | Hover state for mountain decorative fill                    |
    | `decorative-background-fjord`          | `rgba(95, 125, 239, 0.5)`   |  <ColorSwatch color="rgba(95, 125, 239, 0.5)" />  | Fjord-tinted fill for avatars, badges, and illustrations    |
    | `decorative-background-hover-fjord`    | `rgba(95, 125, 239, 0.32)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.32)" /> | Hover state for fjord decorative fill                       |
    | `decorative-background-nordic`         | `rgba(26, 150, 122, 0.32)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.32)" /> | Nordic-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-nordic`   | `rgba(26, 150, 122, 0.2)`   |  <ColorSwatch color="rgba(26, 150, 122, 0.2)" />  | Hover state for nordic decorative fill                      |
    | `decorative-background-aurora`         | `rgba(100, 146, 16, 0.2)`   |  <ColorSwatch color="rgba(100, 146, 16, 0.2)" />  | Aurora-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-aurora`   | `rgba(100, 146, 16, 0.1)`   |  <ColorSwatch color="rgba(100, 146, 16, 0.1)" />  | Hover state for aurora decorative fill                      |
    | `decorative-background-dusk`           | `rgba(183, 101, 196, 0.5)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.5)" /> | Dusk-tinted fill for avatars, badges, and illustrations     |
    | `decorative-background-hover-dusk`     | `rgba(183, 101, 196, 0.32)` | <ColorSwatch color="rgba(183, 101, 196, 0.32)" /> | Hover state for dusk decorative fill                        |
    | `decorative-background-orange`         | `rgba(225, 90, 7, 0.5)`     |   <ColorSwatch color="rgba(225, 90, 7, 0.5)" />   | Orange-tinted fill for avatars, badges, and illustrations   |
    | `decorative-background-hover-orange`   | `rgba(225, 90, 7, 0.32)`    |   <ColorSwatch color="rgba(225, 90, 7, 0.32)" />  | Hover state for orange decorative fill                      |
    | `decorative-background-sky`            | `rgba(2, 144, 182, 0.32)`   |  <ColorSwatch color="rgba(2, 144, 182, 0.32)" />  | Sky-tinted fill for avatars, badges, and illustrations      |
    | `decorative-background-hover-sky`      | `rgba(2, 144, 182, 0.2)`    |   <ColorSwatch color="rgba(2, 144, 182, 0.2)" />  | Hover state for sky decorative fill                         |
  </Tab>
</Tabs>

#### Foreground

<Tabs>
  <Tab title="Light">
    | Token                            | Value     |             Preview             | Usage                                              |
    | :------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------- |
    | `decorative-foreground-mountain` | `#2D3134` | <ColorSwatch color="#2D3134" /> | Text and icons on a mountain decorative background |
    | `decorative-foreground-fjord`    | `#1234B6` | <ColorSwatch color="#1234B6" /> | Text and icons on a fjord decorative background    |
    | `decorative-foreground-nordic`   | `#0D4E40` | <ColorSwatch color="#0D4E40" /> | Text and icons on a nordic decorative background   |
    | `decorative-foreground-aurora`   | `#344C08` | <ColorSwatch color="#344C08" /> | Text and icons on an aurora decorative background  |
    | `decorative-foreground-dusk`     | `#682C71` | <ColorSwatch color="#682C71" /> | Text and icons on a dusk decorative background     |
    | `decorative-foreground-orange`   | `#762F04` | <ColorSwatch color="#762F04" /> | Text and icons on an orange decorative background  |
    | `decorative-foreground-sky`      | `#014B60` | <ColorSwatch color="#014B60" /> | Text and icons on a sky decorative background      |
  </Tab>

  <Tab title="Dark">
    | Token                            | Value     |             Preview             | Usage                                              |
    | :------------------------------- | :-------- | :-----------------------------: | :------------------------------------------------- |
    | `decorative-foreground-mountain` | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> | Text and icons on a mountain decorative background |
    | `decorative-foreground-fjord`    | `#0D2582` | <ColorSwatch color="#0D2582" /> | Text and icons on a fjord decorative background    |
    | `decorative-foreground-nordic`   | `#0A372D` | <ColorSwatch color="#0A372D" /> | Text and icons on a nordic decorative background   |
    | `decorative-foreground-aurora`   | `#253606` | <ColorSwatch color="#253606" /> | Text and icons on an aurora decorative background  |
    | `decorative-foreground-dusk`     | `#4A1F50` | <ColorSwatch color="#4A1F50" /> | Text and icons on a dusk decorative background     |
    | `decorative-foreground-orange`   | `#542203` | <ColorSwatch color="#542203" /> | Text and icons on an orange decorative background  |
    | `decorative-foreground-sky`      | `#013644` | <ColorSwatch color="#013644" /> | Text and icons on a sky decorative background      |
  </Tab>
</Tabs>

***

### Data visualizations

Chart tokens are semi-transparent colors derived from the alpha ramps and are intended for charts and data visualizations. They are organized into default series colors and semantic status colors.

**Choosing colors for data visualization**

* **Single color, varying opacity** works best for magnitude or intensity within one category — like a heatmap or density chart. Use levels 1–6 in order from most to least opaque.
* **Multiple colors** are for distinguishing unrelated categories — like separate series in a line chart. Limit to what's necessary; more colors add noise.
* **Semantic colors** (error, warning, success, info) should only appear when the data carries that meaning. Do not repurpose them for neutral categories just for variety.
* **Highlighting** uses color to direct attention — keep most data in a neutral or muted state and use a prominent color only on the value that matters. If everything is highlighted, nothing is.

#### Default

Default chart colors ordered 1–6 from most opaque to most transparent. Use them in sequence, starting with fjord.

##### Fjord

Fjord is the default series color for data visualization.

<Tabs>
  <Tab title="Light">
    | Token                 | Value                      |                      Preview                     |
    | :-------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-fjord-color-1` | `rgba(95, 125, 239, 0.88)` | <ColorSwatch color="rgba(95, 125, 239, 0.88)" /> |
    | `chart-fjord-color-2` | `rgba(95, 125, 239, 0.68)` | <ColorSwatch color="rgba(95, 125, 239, 0.68)" /> |
    | `chart-fjord-color-3` | `rgba(95, 125, 239, 0.5)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.5)" /> |
    | `chart-fjord-color-4` | `rgba(95, 125, 239, 0.32)` | <ColorSwatch color="rgba(95, 125, 239, 0.32)" /> |
    | `chart-fjord-color-5` | `rgba(95, 125, 239, 0.2)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.2)" /> |
    | `chart-fjord-color-6` | `rgba(95, 125, 239, 0.1)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                 | Value                      |                      Preview                     |
    | :-------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-fjord-color-1` | `rgba(72, 106, 237, 0.8)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.8)" /> |
    | `chart-fjord-color-2` | `rgba(72, 106, 237, 0.7)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.7)" /> |
    | `chart-fjord-color-3` | `rgba(72, 106, 237, 0.55)` | <ColorSwatch color="rgba(72, 106, 237, 0.55)" /> |
    | `chart-fjord-color-4` | `rgba(72, 106, 237, 0.4)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.4)" /> |
    | `chart-fjord-color-5` | `rgba(72, 106, 237, 0.25)` | <ColorSwatch color="rgba(72, 106, 237, 0.25)" /> |
    | `chart-fjord-color-6` | `rgba(72, 106, 237, 0.1)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.1)" /> |
  </Tab>
</Tabs>

##### Nordic

Nordic is the secondary series color for data visualization.

<Tabs>
  <Tab title="Light">
    | Token                  | Value                      |                      Preview                     |
    | :--------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-nordic-color-1` | `rgba(26, 150, 122, 0.88)` | <ColorSwatch color="rgba(26, 150, 122, 0.88)" /> |
    | `chart-nordic-color-2` | `rgba(26, 150, 122, 0.68)` | <ColorSwatch color="rgba(26, 150, 122, 0.68)" /> |
    | `chart-nordic-color-3` | `rgba(26, 150, 122, 0.5)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.5)" /> |
    | `chart-nordic-color-4` | `rgba(26, 150, 122, 0.32)` | <ColorSwatch color="rgba(26, 150, 122, 0.32)" /> |
    | `chart-nordic-color-5` | `rgba(26, 150, 122, 0.2)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.2)" /> |
    | `chart-nordic-color-6` | `rgba(26, 150, 122, 0.1)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                  | Value                      |                      Preview                     |
    | :--------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-nordic-color-1` | `rgba(23, 132, 108, 0.8)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.8)" /> |
    | `chart-nordic-color-2` | `rgba(23, 132, 108, 0.7)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.7)" /> |
    | `chart-nordic-color-3` | `rgba(23, 132, 108, 0.55)` | <ColorSwatch color="rgba(23, 132, 108, 0.55)" /> |
    | `chart-nordic-color-4` | `rgba(23, 132, 108, 0.4)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.4)" /> |
    | `chart-nordic-color-5` | `rgba(23, 132, 108, 0.25)` | <ColorSwatch color="rgba(23, 132, 108, 0.25)" /> |
    | `chart-nordic-color-6` | `rgba(23, 132, 108, 0.1)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.1)" /> |
  </Tab>
</Tabs>

##### Dusk

Dusk is the tertiary series color for data visualization.

<Tabs>
  <Tab title="Light">
    | Token                | Value                       |                      Preview                      |
    | :------------------- | :-------------------------- | :-----------------------------------------------: |
    | `chart-dusk-color-1` | `rgba(183, 101, 196, 0.88)` | <ColorSwatch color="rgba(183, 101, 196, 0.88)" /> |
    | `chart-dusk-color-2` | `rgba(183, 101, 196, 0.68)` | <ColorSwatch color="rgba(183, 101, 196, 0.68)" /> |
    | `chart-dusk-color-3` | `rgba(183, 101, 196, 0.5)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.5)" /> |
    | `chart-dusk-color-4` | `rgba(183, 101, 196, 0.32)` | <ColorSwatch color="rgba(183, 101, 196, 0.32)" /> |
    | `chart-dusk-color-5` | `rgba(183, 101, 196, 0.2)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.2)" /> |
    | `chart-dusk-color-6` | `rgba(183, 101, 196, 0.1)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                | Value                      |                      Preview                     |
    | :------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-dusk-color-1` | `rgba(173, 78, 187, 0.8)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.8)" /> |
    | `chart-dusk-color-2` | `rgba(173, 78, 187, 0.7)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.7)" /> |
    | `chart-dusk-color-3` | `rgba(173, 78, 187, 0.55)` | <ColorSwatch color="rgba(173, 78, 187, 0.55)" /> |
    | `chart-dusk-color-4` | `rgba(173, 78, 187, 0.4)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.4)" /> |
    | `chart-dusk-color-5` | `rgba(173, 78, 187, 0.25)` | <ColorSwatch color="rgba(173, 78, 187, 0.25)" /> |
    | `chart-dusk-color-6` | `rgba(173, 78, 187, 0.1)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.1)" /> |
  </Tab>
</Tabs>

##### Aurora

Aurora is the quaternary series color for data visualization.

<Tabs>
  <Tab title="Light">
    | Token                  | Value                      |                      Preview                     |
    | :--------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-aurora-color-1` | `rgba(100, 146, 16, 0.88)` | <ColorSwatch color="rgba(100, 146, 16, 0.88)" /> |
    | `chart-aurora-color-2` | `rgba(100, 146, 16, 0.68)` | <ColorSwatch color="rgba(100, 146, 16, 0.68)" /> |
    | `chart-aurora-color-3` | `rgba(100, 146, 16, 0.5)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.5)" /> |
    | `chart-aurora-color-4` | `rgba(100, 146, 16, 0.32)` | <ColorSwatch color="rgba(100, 146, 16, 0.32)" /> |
    | `chart-aurora-color-5` | `rgba(100, 146, 16, 0.2)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.2)" /> |
    | `chart-aurora-color-6` | `rgba(100, 146, 16, 0.1)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                  | Value                     |                     Preview                     |
    | :--------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-aurora-color-1` | `rgba(88, 129, 14, 0.8)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.8)" /> |
    | `chart-aurora-color-2` | `rgba(88, 129, 14, 0.7)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.7)" /> |
    | `chart-aurora-color-3` | `rgba(88, 129, 14, 0.55)` | <ColorSwatch color="rgba(88, 129, 14, 0.55)" /> |
    | `chart-aurora-color-4` | `rgba(88, 129, 14, 0.4)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.4)" /> |
    | `chart-aurora-color-5` | `rgba(88, 129, 14, 0.25)` | <ColorSwatch color="rgba(88, 129, 14, 0.25)" /> |
    | `chart-aurora-color-6` | `rgba(88, 129, 14, 0.1)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.1)" /> |
  </Tab>
</Tabs>

##### Orange

Orange is the quinary series color for data visualization.

<Tabs>
  <Tab title="Light">
    | Token                  | Value                    |                     Preview                    |
    | :--------------------- | :----------------------- | :--------------------------------------------: |
    | `chart-orange-color-1` | `rgba(225, 90, 7, 0.88)` | <ColorSwatch color="rgba(225, 90, 7, 0.88)" /> |
    | `chart-orange-color-2` | `rgba(225, 90, 7, 0.68)` | <ColorSwatch color="rgba(225, 90, 7, 0.68)" /> |
    | `chart-orange-color-3` | `rgba(225, 90, 7, 0.5)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.5)" /> |
    | `chart-orange-color-4` | `rgba(225, 90, 7, 0.32)` | <ColorSwatch color="rgba(225, 90, 7, 0.32)" /> |
    | `chart-orange-color-5` | `rgba(225, 90, 7, 0.2)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.2)" /> |
    | `chart-orange-color-6` | `rgba(225, 90, 7, 0.1)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                  | Value                    |                     Preview                    |
    | :--------------------- | :----------------------- | :--------------------------------------------: |
    | `chart-orange-color-1` | `rgba(199, 80, 6, 0.8)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.8)" /> |
    | `chart-orange-color-2` | `rgba(199, 80, 6, 0.7)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.7)" /> |
    | `chart-orange-color-3` | `rgba(199, 80, 6, 0.55)` | <ColorSwatch color="rgba(199, 80, 6, 0.55)" /> |
    | `chart-orange-color-4` | `rgba(199, 80, 6, 0.4)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.4)" /> |
    | `chart-orange-color-5` | `rgba(199, 80, 6, 0.25)` | <ColorSwatch color="rgba(199, 80, 6, 0.25)" /> |
    | `chart-orange-color-6` | `rgba(199, 80, 6, 0.1)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.1)" /> |
  </Tab>
</Tabs>

#### Semantic

Semantic chart colors communicate status within data visualizations. Only use them when the data itself carries that meaning — not for neutral series variety.

##### Informational

<Tabs>
  <Tab title="Light">
    | Token                | Value                       |                      Preview                      |
    | :------------------- | :-------------------------- | :-----------------------------------------------: |
    | `chart-info-color-1` | `rgba(112, 129, 199, 0.88)` | <ColorSwatch color="rgba(112, 129, 199, 0.88)" /> |
    | `chart-info-color-2` | `rgba(112, 129, 199, 0.68)` | <ColorSwatch color="rgba(112, 129, 199, 0.68)" /> |
    | `chart-info-color-3` | `rgba(112, 129, 199, 0.5)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.5)" /> |
    | `chart-info-color-4` | `rgba(112, 129, 199, 0.32)` | <ColorSwatch color="rgba(112, 129, 199, 0.32)" /> |
    | `chart-info-color-5` | `rgba(112, 129, 199, 0.2)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.2)" /> |
    | `chart-info-color-6` | `rgba(112, 129, 199, 0.1)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                | Value                      |                      Preview                     |
    | :------------------- | :------------------------- | :----------------------------------------------: |
    | `chart-info-color-1` | `rgba(93, 112, 192, 0.8)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.8)" /> |
    | `chart-info-color-2` | `rgba(93, 112, 192, 0.7)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.7)" /> |
    | `chart-info-color-3` | `rgba(93, 112, 192, 0.55)` | <ColorSwatch color="rgba(93, 112, 192, 0.55)" /> |
    | `chart-info-color-4` | `rgba(93, 112, 192, 0.4)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.4)" /> |
    | `chart-info-color-5` | `rgba(93, 112, 192, 0.25)` | <ColorSwatch color="rgba(93, 112, 192, 0.25)" /> |
    | `chart-info-color-6` | `rgba(93, 112, 192, 0.1)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.1)" /> |
  </Tab>
</Tabs>

##### Success

<Tabs>
  <Tab title="Light">
    | Token                   | Value                     |                     Preview                     |
    | :---------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-success-color-1` | `rgba(28, 152, 74, 0.88)` | <ColorSwatch color="rgba(28, 152, 74, 0.88)" /> |
    | `chart-success-color-2` | `rgba(28, 152, 74, 0.68)` | <ColorSwatch color="rgba(28, 152, 74, 0.68)" /> |
    | `chart-success-color-3` | `rgba(28, 152, 74, 0.5)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.5)" /> |
    | `chart-success-color-4` | `rgba(28, 152, 74, 0.32)` | <ColorSwatch color="rgba(28, 152, 74, 0.32)" /> |
    | `chart-success-color-5` | `rgba(28, 152, 74, 0.2)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.2)" /> |
    | `chart-success-color-6` | `rgba(28, 152, 74, 0.1)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                   | Value                     |                     Preview                     |
    | :---------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-success-color-1` | `rgba(25, 135, 65, 0.8)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.8)" /> |
    | `chart-success-color-2` | `rgba(25, 135, 65, 0.7)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.7)" /> |
    | `chart-success-color-3` | `rgba(25, 135, 65, 0.55)` | <ColorSwatch color="rgba(25, 135, 65, 0.55)" /> |
    | `chart-success-color-4` | `rgba(25, 135, 65, 0.4)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.4)" /> |
    | `chart-success-color-5` | `rgba(25, 135, 65, 0.25)` | <ColorSwatch color="rgba(25, 135, 65, 0.25)" /> |
    | `chart-success-color-6` | `rgba(25, 135, 65, 0.1)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.1)" /> |
  </Tab>
</Tabs>

##### Warning

<Tabs>
  <Tab title="Light">
    | Token                   | Value                     |                     Preview                     |
    | :---------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-warning-color-1` | `rgba(175, 123, 0, 0.88)` | <ColorSwatch color="rgba(175, 123, 0, 0.88)" /> |
    | `chart-warning-color-2` | `rgba(175, 123, 0, 0.68)` | <ColorSwatch color="rgba(175, 123, 0, 0.68)" /> |
    | `chart-warning-color-3` | `rgba(175, 123, 0, 0.5)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.5)" /> |
    | `chart-warning-color-4` | `rgba(175, 123, 0, 0.32)` | <ColorSwatch color="rgba(175, 123, 0, 0.32)" /> |
    | `chart-warning-color-5` | `rgba(175, 123, 0, 0.2)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.2)" /> |
    | `chart-warning-color-6` | `rgba(175, 123, 0, 0.1)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                   | Value                     |                     Preview                     |
    | :---------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-warning-color-1` | `rgba(155, 109, 0, 0.8)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.8)" /> |
    | `chart-warning-color-2` | `rgba(155, 109, 0, 0.7)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.7)" /> |
    | `chart-warning-color-3` | `rgba(155, 109, 0, 0.55)` | <ColorSwatch color="rgba(155, 109, 0, 0.55)" /> |
    | `chart-warning-color-4` | `rgba(155, 109, 0, 0.4)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.4)" /> |
    | `chart-warning-color-5` | `rgba(155, 109, 0, 0.25)` | <ColorSwatch color="rgba(155, 109, 0, 0.25)" /> |
    | `chart-warning-color-6` | `rgba(155, 109, 0, 0.1)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.1)" /> |
  </Tab>
</Tabs>

##### Error

<Tabs>
  <Tab title="Light">
    | Token                 | Value                     |                     Preview                     |
    | :-------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-error-color-1` | `rgba(244, 61, 92, 0.88)` | <ColorSwatch color="rgba(244, 61, 92, 0.88)" /> |
    | `chart-error-color-2` | `rgba(244, 61, 92, 0.68)` | <ColorSwatch color="rgba(244, 61, 92, 0.68)" /> |
    | `chart-error-color-3` | `rgba(244, 61, 92, 0.5)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.5)" /> |
    | `chart-error-color-4` | `rgba(244, 61, 92, 0.32)` | <ColorSwatch color="rgba(244, 61, 92, 0.32)" /> |
    | `chart-error-color-5` | `rgba(244, 61, 92, 0.2)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.2)" /> |
    | `chart-error-color-6` | `rgba(244, 61, 92, 0.1)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                 | Value                     |                     Preview                     |
    | :-------------------- | :------------------------ | :---------------------------------------------: |
    | `chart-error-color-1` | `rgba(233, 13, 50, 0.8)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.8)" /> |
    | `chart-error-color-2` | `rgba(233, 13, 50, 0.7)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.7)" /> |
    | `chart-error-color-3` | `rgba(233, 13, 50, 0.55)` | <ColorSwatch color="rgba(233, 13, 50, 0.55)" /> |
    | `chart-error-color-4` | `rgba(233, 13, 50, 0.4)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.4)" /> |
    | `chart-error-color-5` | `rgba(233, 13, 50, 0.25)` | <ColorSwatch color="rgba(233, 13, 50, 0.25)" /> |
    | `chart-error-color-6` | `rgba(233, 13, 50, 0.1)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.1)" /> |
  </Tab>
</Tabs>

##### Neutral

<Tabs>
  <Tab title="Light">
    | Token                   | Value                       |                      Preview                      |
    | :---------------------- | :-------------------------- | :-----------------------------------------------: |
    | `chart-neutral-color-1` | `rgba(124, 134, 142, 0.88)` | <ColorSwatch color="rgba(124, 134, 142, 0.88)" /> |
    | `chart-neutral-color-2` | `rgba(124, 134, 142, 0.68)` | <ColorSwatch color="rgba(124, 134, 142, 0.68)" /> |
    | `chart-neutral-color-3` | `rgba(124, 134, 142, 0.5)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.5)" /> |
    | `chart-neutral-color-4` | `rgba(124, 134, 142, 0.32)` | <ColorSwatch color="rgba(124, 134, 142, 0.32)" /> |
    | `chart-neutral-color-5` | `rgba(124, 134, 142, 0.2)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.2)" /> |
    | `chart-neutral-color-6` | `rgba(124, 134, 142, 0.1)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.1)" /> |
  </Tab>

  <Tab title="Dark">
    | Token                   | Value                       |                      Preview                      |
    | :---------------------- | :-------------------------- | :-----------------------------------------------: |
    | `chart-neutral-color-1` | `rgba(109, 118, 126, 0.8)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.8)" /> |
    | `chart-neutral-color-2` | `rgba(109, 118, 126, 0.7)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.7)" /> |
    | `chart-neutral-color-3` | `rgba(109, 118, 126, 0.55)` | <ColorSwatch color="rgba(109, 118, 126, 0.55)" /> |
    | `chart-neutral-color-4` | `rgba(109, 118, 126, 0.4)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.4)" /> |
    | `chart-neutral-color-5` | `rgba(109, 118, 126, 0.25)` | <ColorSwatch color="rgba(109, 118, 126, 0.25)" /> |
    | `chart-neutral-color-6` | `rgba(109, 118, 126, 0.1)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.1)" /> |
  </Tab>
</Tabs>

#### Gridlines

<Tabs>
  <Tab title="Light">
    | Token             | Value     |             Preview             |
    | :---------------- | :-------- | :-----------------------------: |
    | `chart-gridlines` | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> |
  </Tab>

  <Tab title="Dark">
    | Token             | Value     |             Preview             |
    | :---------------- | :-------- | :-----------------------------: |
    | `chart-gridlines` | `#2D3134` | <ColorSwatch color="#2D3134" /> |
  </Tab>
</Tabs>

***

## Color ramps

Color ramps are sequential scales of tints and shades for a single hue (for example, `mountain-50` through `mountain-950`). Themed tokens map to specific steps on these ramps and swap their values between light and dark mode — so `background` points to `mountain-white` in light mode and `mountain-950` in dark mode.

**Use themed tokens, not raw ramp values** — unless a color must stay constant across both themes, or you are building a custom marketing or illustration surface where no semantic token fits.

Alpha values (`mountain/50`, `fjord/200`, etc.) are semi-transparent overlays built from the ramp's base color. They are primarily intended for charts and data visualizations and are intentionally more muted. Light theme alphas map from `50–450` with `500` as the base; dark theme alphas map from `600–950` with `550` as the base.

### Mountain

Neutral base palette for text, surfaces, and borders.

<Tabs>
  <Tab title="Default">
    | Token            | Value     |             Preview             |
    | :--------------- | :-------- | :-----------------------------: |
    | `mountain-white` | `#FFFFFF` | <ColorSwatch color="#FFFFFF" /> |
    | `mountain-10`    | `#F9FAFA` | <ColorSwatch color="#F9FAFA" /> |
    | `mountain-50`    | `#F1F2F3` | <ColorSwatch color="#F1F2F3" /> |
    | `mountain-100`   | `#E4E6E8` | <ColorSwatch color="#E4E6E8" /> |
    | `mountain-200`   | `#D4D7D9` | <ColorSwatch color="#D4D7D9" /> |
    | `mountain-300`   | `#BBC0C4` | <ColorSwatch color="#BBC0C4" /> |
    | `mountain-400`   | `#A5ABB1` | <ColorSwatch color="#A5ABB1" /> |
    | `mountain-450`   | `#8B949A` | <ColorSwatch color="#8B949A" /> |
    | `mountain-500`   | `#7C868E` | <ColorSwatch color="#7C868E" /> |
    | `mountain-550`   | `#6D767E` | <ColorSwatch color="#6D767E" /> |
    | `mountain-600`   | `#5E666D` | <ColorSwatch color="#5E666D" /> |
    | `mountain-650`   | `#52595F` | <ColorSwatch color="#52595F" /> |
    | `mountain-700`   | `#40464A` | <ColorSwatch color="#40464A" /> |
    | `mountain-800`   | `#2D3134` | <ColorSwatch color="#2D3134" /> |
    | `mountain-900`   | `#212426` | <ColorSwatch color="#212426" /> |
    | `mountain-950`   | `#191B1D` | <ColorSwatch color="#191B1D" /> |
    | `mountain-black` | `#111213` | <ColorSwatch color="#111213" /> |
  </Tab>

  <Tab title="Alpha">
    | Token          | Value                       |                      Preview                      |
    | :------------- | :-------------------------- | :-----------------------------------------------: |
    | `mountain/50`  | `rgba(124, 134, 142, 0.1)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.1)" /> |
    | `mountain/100` | `rgba(124, 134, 142, 0.2)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.2)" /> |
    | `mountain/200` | `rgba(124, 134, 142, 0.32)` | <ColorSwatch color="rgba(124, 134, 142, 0.32)" /> |
    | `mountain/300` | `rgba(124, 134, 142, 0.5)`  |  <ColorSwatch color="rgba(124, 134, 142, 0.5)" /> |
    | `mountain/400` | `rgba(124, 134, 142, 0.68)` | <ColorSwatch color="rgba(124, 134, 142, 0.68)" /> |
    | `mountain/450` | `rgba(124, 134, 142, 0.88)` | <ColorSwatch color="rgba(124, 134, 142, 0.88)" /> |
    | `mountain/600` | `rgba(109, 118, 126, 0.8)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.8)" /> |
    | `mountain/650` | `rgba(109, 118, 126, 0.7)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.7)" /> |
    | `mountain/700` | `rgba(109, 118, 126, 0.55)` | <ColorSwatch color="rgba(109, 118, 126, 0.55)" /> |
    | `mountain/800` | `rgba(109, 118, 126, 0.4)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.4)" /> |
    | `mountain/900` | `rgba(109, 118, 126, 0.25)` | <ColorSwatch color="rgba(109, 118, 126, 0.25)" /> |
    | `mountain/950` | `rgba(109, 118, 126, 0.1)`  |  <ColorSwatch color="rgba(109, 118, 126, 0.1)" /> |
  </Tab>
</Tabs>

### Fjord

Primary decorative color used for charts.

<Tabs>
  <Tab title="Default">
    | Token       | Value     |             Preview             |
    | :---------- | :-------- | :-----------------------------: |
    | `fjord-50`  | `#EFF2FD` | <ColorSwatch color="#EFF2FD" /> |
    | `fjord-100` | `#DFE5FC` | <ColorSwatch color="#DFE5FC" /> |
    | `fjord-200` | `#CCD5FA` | <ColorSwatch color="#CCD5FA" /> |
    | `fjord-300` | `#AEBDF7` | <ColorSwatch color="#AEBDF7" /> |
    | `fjord-400` | `#93A7F4` | <ColorSwatch color="#93A7F4" /> |
    | `fjord-450` | `#728DF1` | <ColorSwatch color="#728DF1" /> |
    | `fjord-500` | `#5F7DEF` | <ColorSwatch color="#5F7DEF" /> |
    | `fjord-550` | `#486AED` | <ColorSwatch color="#486AED" /> |
    | `fjord-600` | `#2F55EA` | <ColorSwatch color="#2F55EA" /> |
    | `fjord-650` | `#1742E7` | <ColorSwatch color="#1742E7" /> |
    | `fjord-700` | `#1234B6` | <ColorSwatch color="#1234B6" /> |
    | `fjord-800` | `#0D2582` | <ColorSwatch color="#0D2582" /> |
    | `fjord-900` | `#0A1C61` | <ColorSwatch color="#0A1C61" /> |
    | `fjord-950` | `#050F33` | <ColorSwatch color="#050F33" /> |
  </Tab>

  <Tab title="Alpha">
    | Token       | Value                      |                      Preview                     |
    | :---------- | :------------------------- | :----------------------------------------------: |
    | `fjord/50`  | `rgba(95, 125, 239, 0.1)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.1)" /> |
    | `fjord/100` | `rgba(95, 125, 239, 0.2)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.2)" /> |
    | `fjord/200` | `rgba(95, 125, 239, 0.32)` | <ColorSwatch color="rgba(95, 125, 239, 0.32)" /> |
    | `fjord/300` | `rgba(95, 125, 239, 0.5)`  |  <ColorSwatch color="rgba(95, 125, 239, 0.5)" /> |
    | `fjord/400` | `rgba(95, 125, 239, 0.68)` | <ColorSwatch color="rgba(95, 125, 239, 0.68)" /> |
    | `fjord/450` | `rgba(95, 125, 239, 0.88)` | <ColorSwatch color="rgba(95, 125, 239, 0.88)" /> |
    | `fjord/600` | `rgba(72, 106, 237, 0.8)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.8)" /> |
    | `fjord/650` | `rgba(72, 106, 237, 0.7)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.7)" /> |
    | `fjord/700` | `rgba(72, 106, 237, 0.55)` | <ColorSwatch color="rgba(72, 106, 237, 0.55)" /> |
    | `fjord/800` | `rgba(72, 106, 237, 0.4)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.4)" /> |
    | `fjord/900` | `rgba(72, 106, 237, 0.25)` | <ColorSwatch color="rgba(72, 106, 237, 0.25)" /> |
    | `fjord/950` | `rgba(72, 106, 237, 0.1)`  |  <ColorSwatch color="rgba(72, 106, 237, 0.1)" /> |
  </Tab>
</Tabs>

### Nordic

Primary decorative color used for charts and Atlas AI.

<Tabs>
  <Tab title="Default">
    | Token        | Value     |             Preview             |
    | :----------- | :-------- | :-----------------------------: |
    | `nordic-50`  | `#DAF9F2` | <ColorSwatch color="#DAF9F2" /> |
    | `nordic-100` | `#B4F2E5` | <ColorSwatch color="#B4F2E5" /> |
    | `nordic-200` | `#7FE9D2` | <ColorSwatch color="#7FE9D2" /> |
    | `nordic-300` | `#25D7B0` | <ColorSwatch color="#25D7B0" /> |
    | `nordic-400` | `#21C09D` | <ColorSwatch color="#21C09D" /> |
    | `nordic-450` | `#1CA587` | <ColorSwatch color="#1CA587" /> |
    | `nordic-500` | `#1A967A` | <ColorSwatch color="#1A967A" /> |
    | `nordic-550` | `#17846C` | <ColorSwatch color="#17846C" /> |
    | `nordic-600` | `#14735E` | <ColorSwatch color="#14735E" /> |
    | `nordic-650` | `#116452` | <ColorSwatch color="#116452" /> |
    | `nordic-700` | `#0D4E40` | <ColorSwatch color="#0D4E40" /> |
    | `nordic-800` | `#0A372D` | <ColorSwatch color="#0A372D" /> |
    | `nordic-900` | `#072922` | <ColorSwatch color="#072922" /> |
    | `nordic-950` | `#041511` | <ColorSwatch color="#041511" /> |
  </Tab>

  <Tab title="Alpha">
    | Token        | Value                      |                      Preview                     |
    | :----------- | :------------------------- | :----------------------------------------------: |
    | `nordic/50`  | `rgba(26, 150, 122, 0.1)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.1)" /> |
    | `nordic/100` | `rgba(26, 150, 122, 0.2)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.2)" /> |
    | `nordic/200` | `rgba(26, 150, 122, 0.32)` | <ColorSwatch color="rgba(26, 150, 122, 0.32)" /> |
    | `nordic/300` | `rgba(26, 150, 122, 0.5)`  |  <ColorSwatch color="rgba(26, 150, 122, 0.5)" /> |
    | `nordic/400` | `rgba(26, 150, 122, 0.68)` | <ColorSwatch color="rgba(26, 150, 122, 0.68)" /> |
    | `nordic/450` | `rgba(26, 150, 122, 0.88)` | <ColorSwatch color="rgba(26, 150, 122, 0.88)" /> |
    | `nordic/600` | `rgba(23, 132, 108, 0.8)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.8)" /> |
    | `nordic/650` | `rgba(23, 132, 108, 0.7)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.7)" /> |
    | `nordic/700` | `rgba(23, 132, 108, 0.55)` | <ColorSwatch color="rgba(23, 132, 108, 0.55)" /> |
    | `nordic/800` | `rgba(23, 132, 108, 0.4)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.4)" /> |
    | `nordic/900` | `rgba(23, 132, 108, 0.25)` | <ColorSwatch color="rgba(23, 132, 108, 0.25)" /> |
    | `nordic/950` | `rgba(23, 132, 108, 0.1)`  |  <ColorSwatch color="rgba(23, 132, 108, 0.1)" /> |
  </Tab>
</Tabs>

### Aurora

Primary decorative color used for charts and decorative elements.

<Tabs>
  <Tab title="Default">
    | Token        | Value     |             Preview             |
    | :----------- | :-------- | :-----------------------------: |
    | `aurora-50`  | `#E7F9C6` | <ColorSwatch color="#E7F9C6" /> |
    | `aurora-100` | `#CFF38D` | <ColorSwatch color="#CFF38D" /> |
    | `aurora-200` | `#ABE938` | <ColorSwatch color="#ABE938" /> |
    | `aurora-300` | `#90D217` | <ColorSwatch color="#90D217" /> |
    | `aurora-400` | `#81BC14` | <ColorSwatch color="#81BC14" /> |
    | `aurora-450` | `#6EA112` | <ColorSwatch color="#6EA112" /> |
    | `aurora-500` | `#649210` | <ColorSwatch color="#649210" /> |
    | `aurora-550` | `#58810E` | <ColorSwatch color="#58810E" /> |
    | `aurora-600` | `#4D700C` | <ColorSwatch color="#4D700C" /> |
    | `aurora-650` | `#43610B` | <ColorSwatch color="#43610B" /> |
    | `aurora-700` | `#344C08` | <ColorSwatch color="#344C08" /> |
    | `aurora-800` | `#253606` | <ColorSwatch color="#253606" /> |
    | `aurora-900` | `#1B2804` | <ColorSwatch color="#1B2804" /> |
    | `aurora-950` | `#0E1402` | <ColorSwatch color="#0E1402" /> |
  </Tab>

  <Tab title="Alpha">
    | Token        | Value                      |                      Preview                     |
    | :----------- | :------------------------- | :----------------------------------------------: |
    | `aurora/50`  | `rgba(100, 146, 16, 0.1)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.1)" /> |
    | `aurora/100` | `rgba(100, 146, 16, 0.2)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.2)" /> |
    | `aurora/200` | `rgba(100, 146, 16, 0.32)` | <ColorSwatch color="rgba(100, 146, 16, 0.32)" /> |
    | `aurora/300` | `rgba(100, 146, 16, 0.5)`  |  <ColorSwatch color="rgba(100, 146, 16, 0.5)" /> |
    | `aurora/400` | `rgba(100, 146, 16, 0.68)` | <ColorSwatch color="rgba(100, 146, 16, 0.68)" /> |
    | `aurora/450` | `rgba(100, 146, 16, 0.88)` | <ColorSwatch color="rgba(100, 146, 16, 0.88)" /> |
    | `aurora/600` | `rgba(88, 129, 14, 0.8)`   |  <ColorSwatch color="rgba(88, 129, 14, 0.8)" />  |
    | `aurora/650` | `rgba(88, 129, 14, 0.7)`   |  <ColorSwatch color="rgba(88, 129, 14, 0.7)" />  |
    | `aurora/700` | `rgba(88, 129, 14, 0.55)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.55)" /> |
    | `aurora/800` | `rgba(88, 129, 14, 0.4)`   |  <ColorSwatch color="rgba(88, 129, 14, 0.4)" />  |
    | `aurora/900` | `rgba(88, 129, 14, 0.25)`  |  <ColorSwatch color="rgba(88, 129, 14, 0.25)" /> |
    | `aurora/950` | `rgba(88, 129, 14, 0.1)`   |  <ColorSwatch color="rgba(88, 129, 14, 0.1)" />  |
  </Tab>
</Tabs>

### Dusk

Primary decorative color used for charts and decorative elements.

<Tabs>
  <Tab title="Default">
    | Token      | Value     |             Preview             |
    | :--------- | :-------- | :-----------------------------: |
    | `dusk-50`  | `#F8EFF9` | <ColorSwatch color="#F8EFF9" /> |
    | `dusk-100` | `#F1E1F3` | <ColorSwatch color="#F1E1F3" /> |
    | `dusk-200` | `#E8CEEC` | <ColorSwatch color="#E8CEEC" /> |
    | `dusk-300` | `#DBB1E1` | <ColorSwatch color="#DBB1E1" /> |
    | `dusk-400` | `#CF97D7` | <ColorSwatch color="#CF97D7" /> |
    | `dusk-450` | `#C078CB` | <ColorSwatch color="#C078CB" /> |
    | `dusk-500` | `#B765C4` | <ColorSwatch color="#B765C4" /> |
    | `dusk-550` | `#AD4EBB` | <ColorSwatch color="#AD4EBB" /> |
    | `dusk-600` | `#9940A6` | <ColorSwatch color="#9940A6" /> |
    | `dusk-650` | `#853790` | <ColorSwatch color="#853790" /> |
    | `dusk-700` | `#682C71` | <ColorSwatch color="#682C71" /> |
    | `dusk-800` | `#4A1F50` | <ColorSwatch color="#4A1F50" /> |
    | `dusk-900` | `#37173C` | <ColorSwatch color="#37173C" /> |
    | `dusk-950` | `#1C0C1F` | <ColorSwatch color="#1C0C1F" /> |
  </Tab>

  <Tab title="Alpha">
    | Token      | Value                       |                      Preview                      |
    | :--------- | :-------------------------- | :-----------------------------------------------: |
    | `dusk/50`  | `rgba(183, 101, 196, 0.1)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.1)" /> |
    | `dusk/100` | `rgba(183, 101, 196, 0.2)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.2)" /> |
    | `dusk/200` | `rgba(183, 101, 196, 0.32)` | <ColorSwatch color="rgba(183, 101, 196, 0.32)" /> |
    | `dusk/300` | `rgba(183, 101, 196, 0.5)`  |  <ColorSwatch color="rgba(183, 101, 196, 0.5)" /> |
    | `dusk/400` | `rgba(183, 101, 196, 0.68)` | <ColorSwatch color="rgba(183, 101, 196, 0.68)" /> |
    | `dusk/450` | `rgba(183, 101, 196, 0.88)` | <ColorSwatch color="rgba(183, 101, 196, 0.88)" /> |
    | `dusk/600` | `rgba(173, 78, 187, 0.8)`   |  <ColorSwatch color="rgba(173, 78, 187, 0.8)" />  |
    | `dusk/650` | `rgba(173, 78, 187, 0.7)`   |  <ColorSwatch color="rgba(173, 78, 187, 0.7)" />  |
    | `dusk/700` | `rgba(173, 78, 187, 0.55)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.55)" /> |
    | `dusk/800` | `rgba(173, 78, 187, 0.4)`   |  <ColorSwatch color="rgba(173, 78, 187, 0.4)" />  |
    | `dusk/900` | `rgba(173, 78, 187, 0.25)`  |  <ColorSwatch color="rgba(173, 78, 187, 0.25)" /> |
    | `dusk/950` | `rgba(173, 78, 187, 0.1)`   |  <ColorSwatch color="rgba(173, 78, 187, 0.1)" />  |
  </Tab>
</Tabs>

### Sky

Secondary decorative color used for badges, avatars, and illustrations.

<Tabs>
  <Tab title="Default">
    | Token     | Value     |             Preview             |
    | :-------- | :-------- | :-----------------------------: |
    | `sky-50`  | `#DBF7FF` | <ColorSwatch color="#DBF7FF" /> |
    | `sky-100` | `#B7EFFE` | <ColorSwatch color="#B7EFFE" /> |
    | `sky-200` | `#84E4FE` | <ColorSwatch color="#84E4FE" /> |
    | `sky-300` | `#25CFFD` | <ColorSwatch color="#25CFFD" /> |
    | `sky-400` | `#02B9EA` | <ColorSwatch color="#02B9EA" /> |
    | `sky-450` | `#029FC9` | <ColorSwatch color="#029FC9" /> |
    | `sky-500` | `#0290B6` | <ColorSwatch color="#0290B6" /> |
    | `sky-550` | `#017FA1` | <ColorSwatch color="#017FA1" /> |
    | `sky-600` | `#016E8C` | <ColorSwatch color="#016E8C" /> |
    | `sky-650` | `#01607A` | <ColorSwatch color="#01607A" /> |
    | `sky-700` | `#014B60` | <ColorSwatch color="#014B60" /> |
    | `sky-800` | `#013644` | <ColorSwatch color="#013644" /> |
    | `sky-900` | `#002832` | <ColorSwatch color="#002832" /> |
    | `sky-950` | `#00151A` | <ColorSwatch color="#00151A" /> |
  </Tab>

  <Tab title="Alpha">
    | Token     | Value                     |                     Preview                     |
    | :-------- | :------------------------ | :---------------------------------------------: |
    | `sky/50`  | `rgba(2, 144, 182, 0.1)`  |  <ColorSwatch color="rgba(2, 144, 182, 0.1)" /> |
    | `sky/100` | `rgba(2, 144, 182, 0.2)`  |  <ColorSwatch color="rgba(2, 144, 182, 0.2)" /> |
    | `sky/200` | `rgba(2, 144, 182, 0.32)` | <ColorSwatch color="rgba(2, 144, 182, 0.32)" /> |
    | `sky/300` | `rgba(2, 144, 182, 0.5)`  |  <ColorSwatch color="rgba(2, 144, 182, 0.5)" /> |
    | `sky/400` | `rgba(2, 144, 182, 0.68)` | <ColorSwatch color="rgba(2, 144, 182, 0.68)" /> |
    | `sky/450` | `rgba(2, 144, 182, 0.88)` | <ColorSwatch color="rgba(2, 144, 182, 0.88)" /> |
    | `sky/600` | `rgba(1, 127, 161, 0.8)`  |  <ColorSwatch color="rgba(1, 127, 161, 0.8)" /> |
    | `sky/650` | `rgba(1, 127, 161, 0.7)`  |  <ColorSwatch color="rgba(1, 127, 161, 0.7)" /> |
    | `sky/700` | `rgba(1, 127, 161, 0.55)` | <ColorSwatch color="rgba(1, 127, 161, 0.55)" /> |
    | `sky/800` | `rgba(1, 127, 161, 0.4)`  |  <ColorSwatch color="rgba(1, 127, 161, 0.4)" /> |
    | `sky/900` | `rgba(1, 127, 161, 0.25)` | <ColorSwatch color="rgba(1, 127, 161, 0.25)" /> |
    | `sky/950` | `rgba(1, 127, 161, 0.1)`  |  <ColorSwatch color="rgba(1, 127, 161, 0.1)" /> |
  </Tab>
</Tabs>

### Orange

Secondary decorative color used for badges, avatars, and illustrations.

<Tabs>
  <Tab title="Default">
    | Token        | Value     |             Preview             |
    | :----------- | :-------- | :-----------------------------: |
    | `orange-50`  | `#FEEFE6` | <ColorSwatch color="#FEEFE6" /> |
    | `orange-100` | `#FDE0CF` | <ColorSwatch color="#FDE0CF" /> |
    | `orange-200` | `#FCCDB0` | <ColorSwatch color="#FCCDB0" /> |
    | `orange-300` | `#FBAE7E` | <ColorSwatch color="#FBAE7E" /> |
    | `orange-400` | `#F98F4E` | <ColorSwatch color="#F98F4E" /> |
    | `orange-450` | `#F7640A` | <ColorSwatch color="#F7640A" /> |
    | `orange-500` | `#E15A07` | <ColorSwatch color="#E15A07" /> |
    | `orange-550` | `#C75006` | <ColorSwatch color="#C75006" /> |
    | `orange-600` | `#AD4506` | <ColorSwatch color="#AD4506" /> |
    | `orange-650` | `#963C05` | <ColorSwatch color="#963C05" /> |
    | `orange-700` | `#762F04` | <ColorSwatch color="#762F04" /> |
    | `orange-800` | `#542203` | <ColorSwatch color="#542203" /> |
    | `orange-900` | `#3E1902` | <ColorSwatch color="#3E1902" /> |
    | `orange-950` | `#210D01` | <ColorSwatch color="#210D01" /> |
  </Tab>

  <Tab title="Alpha">
    | Token        | Value                    |                     Preview                    |
    | :----------- | :----------------------- | :--------------------------------------------: |
    | `orange/50`  | `rgba(225, 90, 7, 0.1)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.1)" /> |
    | `orange/100` | `rgba(225, 90, 7, 0.2)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.2)" /> |
    | `orange/200` | `rgba(225, 90, 7, 0.32)` | <ColorSwatch color="rgba(225, 90, 7, 0.32)" /> |
    | `orange/300` | `rgba(225, 90, 7, 0.5)`  |  <ColorSwatch color="rgba(225, 90, 7, 0.5)" /> |
    | `orange/400` | `rgba(225, 90, 7, 0.68)` | <ColorSwatch color="rgba(225, 90, 7, 0.68)" /> |
    | `orange/450` | `rgba(225, 90, 7, 0.88)` | <ColorSwatch color="rgba(225, 90, 7, 0.88)" /> |
    | `orange/600` | `rgba(199, 80, 6, 0.8)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.8)" /> |
    | `orange/650` | `rgba(199, 80, 6, 0.7)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.7)" /> |
    | `orange/700` | `rgba(199, 80, 6, 0.55)` | <ColorSwatch color="rgba(199, 80, 6, 0.55)" /> |
    | `orange/800` | `rgba(199, 80, 6, 0.4)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.4)" /> |
    | `orange/900` | `rgba(199, 80, 6, 0.25)` | <ColorSwatch color="rgba(199, 80, 6, 0.25)" /> |
    | `orange/950` | `rgba(199, 80, 6, 0.1)`  |  <ColorSwatch color="rgba(199, 80, 6, 0.1)" /> |
  </Tab>
</Tabs>

### Yellow

Secondary decorative color used for badges, avatars, and illustrations.

<Tabs>
  <Tab title="Default">
    | Token        | Value     |             Preview             |
    | :----------- | :-------- | :-----------------------------: |
    | `yellow-50`  | `#FFF4A2` | <ColorSwatch color="#FFF4A2" /> |
    | `yellow-100` | `#FFE834` | <ColorSwatch color="#FFE834" /> |
    | `yellow-200` | `#F3D700` | <ColorSwatch color="#F3D700" /> |
    | `yellow-300` | `#D8BF00` | <ColorSwatch color="#D8BF00" /> |
    | `yellow-400` | `#C1AB00` | <ColorSwatch color="#C1AB00" /> |
    | `yellow-450` | `#A69300` | <ColorSwatch color="#A69300" /> |
    | `yellow-500` | `#968500` | <ColorSwatch color="#968500" /> |
    | `yellow-550` | `#857600` | <ColorSwatch color="#857600" /> |
    | `yellow-600` | `#736600` | <ColorSwatch color="#736600" /> |
    | `yellow-650` | `#645900` | <ColorSwatch color="#645900" /> |
    | `yellow-700` | `#4E4500` | <ColorSwatch color="#4E4500" /> |
    | `yellow-800` | `#373100` | <ColorSwatch color="#373100" /> |
    | `yellow-900` | `#292400` | <ColorSwatch color="#292400" /> |
    | `yellow-950` | `#151200` | <ColorSwatch color="#151200" /> |
  </Tab>

  <Tab title="Alpha">
    | Token        | Value                     |                     Preview                     |
    | :----------- | :------------------------ | :---------------------------------------------: |
    | `yellow/50`  | `rgba(150, 133, 0, 0.1)`  |  <ColorSwatch color="rgba(150, 133, 0, 0.1)" /> |
    | `yellow/100` | `rgba(150, 133, 0, 0.2)`  |  <ColorSwatch color="rgba(150, 133, 0, 0.2)" /> |
    | `yellow/200` | `rgba(150, 133, 0, 0.32)` | <ColorSwatch color="rgba(150, 133, 0, 0.32)" /> |
    | `yellow/300` | `rgba(150, 133, 0, 0.5)`  |  <ColorSwatch color="rgba(150, 133, 0, 0.5)" /> |
    | `yellow/400` | `rgba(150, 133, 0, 0.68)` | <ColorSwatch color="rgba(150, 133, 0, 0.68)" /> |
    | `yellow/450` | `rgba(150, 133, 0, 0.88)` | <ColorSwatch color="rgba(150, 133, 0, 0.88)" /> |
    | `yellow/600` | `rgba(133, 118, 0, 0.8)`  |  <ColorSwatch color="rgba(133, 118, 0, 0.8)" /> |
    | `yellow/650` | `rgba(133, 118, 0, 0.7)`  |  <ColorSwatch color="rgba(133, 118, 0, 0.7)" /> |
    | `yellow/700` | `rgba(133, 118, 0, 0.55)` | <ColorSwatch color="rgba(133, 118, 0, 0.55)" /> |
    | `yellow/800` | `rgba(133, 118, 0, 0.4)`  |  <ColorSwatch color="rgba(133, 118, 0, 0.4)" /> |
    | `yellow/900` | `rgba(133, 118, 0, 0.25)` | <ColorSwatch color="rgba(133, 118, 0, 0.25)" /> |
    | `yellow/950` | `rgba(133, 118, 0, 0.1)`  |  <ColorSwatch color="rgba(133, 118, 0, 0.1)" /> |
  </Tab>
</Tabs>

### Pink

Secondary decorative color used for badges, avatars, and illustrations.

<Tabs>
  <Tab title="Default">
    | Token      | Value     |             Preview             |
    | :--------- | :-------- | :-----------------------------: |
    | `pink-50`  | `#FDEEF4` | <ColorSwatch color="#FDEEF4" /> |
    | `pink-100` | `#FBDEEA` | <ColorSwatch color="#FBDEEA" /> |
    | `pink-200` | `#F9CADD` | <ColorSwatch color="#F9CADD" /> |
    | `pink-300` | `#F5A9C8` | <ColorSwatch color="#F5A9C8" /> |
    | `pink-400` | `#F28BB4` | <ColorSwatch color="#F28BB4" /> |
    | `pink-450` | `#ED6199` | <ColorSwatch color="#ED6199" /> |
    | `pink-500` | `#E94487` | <ColorSwatch color="#E94487" /> |
    | `pink-550` | `#E11A6A` | <ColorSwatch color="#E11A6A" /> |
    | `pink-600` | `#C4175C` | <ColorSwatch color="#C4175C" /> |
    | `pink-650` | `#AB1451` | <ColorSwatch color="#AB1451" /> |
    | `pink-700` | `#881040` | <ColorSwatch color="#881040" /> |
    | `pink-800` | `#620B2E` | <ColorSwatch color="#620B2E" /> |
    | `pink-900` | `#490823` | <ColorSwatch color="#490823" /> |
    | `pink-950` | `#280513` | <ColorSwatch color="#280513" /> |
  </Tab>

  <Tab title="Alpha">
    | Token      | Value                      |                      Preview                     |
    | :--------- | :------------------------- | :----------------------------------------------: |
    | `pink/50`  | `rgba(233, 68, 135, 0.1)`  |  <ColorSwatch color="rgba(233, 68, 135, 0.1)" /> |
    | `pink/100` | `rgba(233, 68, 135, 0.2)`  |  <ColorSwatch color="rgba(233, 68, 135, 0.2)" /> |
    | `pink/200` | `rgba(233, 68, 135, 0.32)` | <ColorSwatch color="rgba(233, 68, 135, 0.32)" /> |
    | `pink/300` | `rgba(233, 68, 135, 0.5)`  |  <ColorSwatch color="rgba(233, 68, 135, 0.5)" /> |
    | `pink/400` | `rgba(233, 68, 135, 0.68)` | <ColorSwatch color="rgba(233, 68, 135, 0.68)" /> |
    | `pink/450` | `rgba(233, 68, 135, 0.88)` | <ColorSwatch color="rgba(233, 68, 135, 0.88)" /> |
    | `pink/600` | `rgba(225, 26, 106, 0.8)`  |  <ColorSwatch color="rgba(225, 26, 106, 0.8)" /> |
    | `pink/650` | `rgba(225, 26, 106, 0.7)`  |  <ColorSwatch color="rgba(225, 26, 106, 0.7)" /> |
    | `pink/700` | `rgba(225, 26, 106, 0.55)` | <ColorSwatch color="rgba(225, 26, 106, 0.55)" /> |
    | `pink/800` | `rgba(225, 26, 106, 0.4)`  |  <ColorSwatch color="rgba(225, 26, 106, 0.4)" /> |
    | `pink/900` | `rgba(225, 26, 106, 0.25)` | <ColorSwatch color="rgba(225, 26, 106, 0.25)" /> |
    | `pink/950` | `rgba(225, 26, 106, 0.1)`  |  <ColorSwatch color="rgba(225, 26, 106, 0.1)" /> |
  </Tab>
</Tabs>

### Gray

Used for focus states and secondary decorative elements.

<Tabs>
  <Tab title="Default">
    | Token      | Value     |             Preview             |
    | :--------- | :-------- | :-----------------------------: |
    | `gray-50`  | `#F0F2F9` | <ColorSwatch color="#F0F2F9" /> |
    | `gray-100` | `#E2E5F4` | <ColorSwatch color="#E2E5F4" /> |
    | `gray-200` | `#D0D6ED` | <ColorSwatch color="#D0D6ED" /> |
    | `gray-300` | `#B5BEE2` | <ColorSwatch color="#B5BEE2" /> |
    | `gray-400` | `#9DA9D9` | <ColorSwatch color="#9DA9D9" /> |
    | `gray-450` | `#818FCE` | <ColorSwatch color="#818FCE" /> |
    | `gray-500` | `#7081C7` | <ColorSwatch color="#7081C7" /> |
    | `gray-550` | `#5D70C0` | <ColorSwatch color="#5D70C0" /> |
    | `gray-600` | `#4A5FB8` | <ColorSwatch color="#4A5FB8" /> |
    | `gray-650` | `#3F52A3` | <ColorSwatch color="#3F52A3" /> |
    | `gray-700` | `#32417F` | <ColorSwatch color="#32417F" /> |
    | `gray-800` | `#232E5A` | <ColorSwatch color="#232E5A" /> |
    | `gray-900` | `#1A2242` | <ColorSwatch color="#1A2242" /> |
    | `gray-950` | `#0D1122` | <ColorSwatch color="#0D1122" /> |
  </Tab>

  <Tab title="Alpha">
    | Token      | Value                       |                      Preview                      |
    | :--------- | :-------------------------- | :-----------------------------------------------: |
    | `gray/50`  | `rgba(112, 129, 199, 0.1)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.1)" /> |
    | `gray/100` | `rgba(112, 129, 199, 0.2)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.2)" /> |
    | `gray/200` | `rgba(112, 129, 199, 0.32)` | <ColorSwatch color="rgba(112, 129, 199, 0.32)" /> |
    | `gray/300` | `rgba(112, 129, 199, 0.5)`  |  <ColorSwatch color="rgba(112, 129, 199, 0.5)" /> |
    | `gray/400` | `rgba(112, 129, 199, 0.68)` | <ColorSwatch color="rgba(112, 129, 199, 0.68)" /> |
    | `gray/450` | `rgba(112, 129, 199, 0.88)` | <ColorSwatch color="rgba(112, 129, 199, 0.88)" /> |
    | `gray/600` | `rgba(93, 112, 192, 0.8)`   |  <ColorSwatch color="rgba(93, 112, 192, 0.8)" />  |
    | `gray/650` | `rgba(93, 112, 192, 0.7)`   |  <ColorSwatch color="rgba(93, 112, 192, 0.7)" />  |
    | `gray/700` | `rgba(93, 112, 192, 0.55)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.55)" /> |
    | `gray/800` | `rgba(93, 112, 192, 0.4)`   |  <ColorSwatch color="rgba(93, 112, 192, 0.4)" />  |
    | `gray/900` | `rgba(93, 112, 192, 0.25)`  |  <ColorSwatch color="rgba(93, 112, 192, 0.25)" /> |
    | `gray/950` | `rgba(93, 112, 192, 0.1)`   |  <ColorSwatch color="rgba(93, 112, 192, 0.1)" />  |
  </Tab>
</Tabs>

### Red

Maps to semantic status colors for destructive actions and critical alerts.

<Tabs>
  <Tab title="Default">
    | Token     | Value     |             Preview             |
    | :-------- | :-------- | :-----------------------------: |
    | `red-50`  | `#FEEEF1` | <ColorSwatch color="#FEEEF1" /> |
    | `red-100` | `#FDDEE4` | <ColorSwatch color="#FDDEE4" /> |
    | `red-200` | `#FCCAD2` | <ColorSwatch color="#FCCAD2" /> |
    | `red-300` | `#FAA9B7` | <ColorSwatch color="#FAA9B7" /> |
    | `red-400` | `#F8899C` | <ColorSwatch color="#F8899C" /> |
    | `red-450` | `#F65E78` | <ColorSwatch color="#F65E78" /> |
    | `red-500` | `#F43D5C` | <ColorSwatch color="#F43D5C" /> |
    | `red-550` | `#E90D32` | <ColorSwatch color="#E90D32" /> |
    | `red-600` | `#CB0B2C` | <ColorSwatch color="#CB0B2C" /> |
    | `red-650` | `#B20A26` | <ColorSwatch color="#B20A26" /> |
    | `red-700` | `#8D081F` | <ColorSwatch color="#8D081F" /> |
    | `red-800` | `#660616` | <ColorSwatch color="#660616" /> |
    | `red-900` | `#4E0411` | <ColorSwatch color="#4E0411" /> |
    | `red-950` | `#2C0209` | <ColorSwatch color="#2C0209" /> |
  </Tab>

  <Tab title="Alpha">
    | Token     | Value                     |                     Preview                     |
    | :-------- | :------------------------ | :---------------------------------------------: |
    | `red/50`  | `rgba(244, 61, 92, 0.1)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.1)" /> |
    | `red/100` | `rgba(244, 61, 92, 0.2)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.2)" /> |
    | `red/200` | `rgba(244, 61, 92, 0.32)` | <ColorSwatch color="rgba(244, 61, 92, 0.32)" /> |
    | `red/300` | `rgba(244, 61, 92, 0.5)`  |  <ColorSwatch color="rgba(244, 61, 92, 0.5)" /> |
    | `red/400` | `rgba(244, 61, 92, 0.68)` | <ColorSwatch color="rgba(244, 61, 92, 0.68)" /> |
    | `red/450` | `rgba(244, 61, 92, 0.88)` | <ColorSwatch color="rgba(244, 61, 92, 0.88)" /> |
    | `red/600` | `rgba(233, 13, 50, 0.8)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.8)" /> |
    | `red/650` | `rgba(233, 13, 50, 0.7)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.7)" /> |
    | `red/700` | `rgba(233, 13, 50, 0.55)` | <ColorSwatch color="rgba(233, 13, 50, 0.55)" /> |
    | `red/800` | `rgba(233, 13, 50, 0.4)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.4)" /> |
    | `red/900` | `rgba(233, 13, 50, 0.25)` | <ColorSwatch color="rgba(233, 13, 50, 0.25)" /> |
    | `red/950` | `rgba(233, 13, 50, 0.1)`  |  <ColorSwatch color="rgba(233, 13, 50, 0.1)" /> |
  </Tab>
</Tabs>

### Amber

Maps to semantic status colors for warnings.

<Tabs>
  <Tab title="Default">
    | Token       | Value     |             Preview             |
    | :---------- | :-------- | :-----------------------------: |
    | `amber-50`  | `#FFF1D0` | <ColorSwatch color="#FFF1D0" /> |
    | `amber-100` | `#FFE3A2` | <ColorSwatch color="#FFE3A2" /> |
    | `amber-200` | `#FFD062` | <ColorSwatch color="#FFD062" /> |
    | `amber-300` | `#FCB100` | <ColorSwatch color="#FCB100" /> |
    | `amber-400` | `#E19E00` | <ColorSwatch color="#E19E00" /> |
    | `amber-450` | `#C18800` | <ColorSwatch color="#C18800" /> |
    | `amber-500` | `#AF7B00` | <ColorSwatch color="#AF7B00" /> |
    | `amber-550` | `#9B6D00` | <ColorSwatch color="#9B6D00" /> |
    | `amber-600` | `#865E00` | <ColorSwatch color="#865E00" /> |
    | `amber-650` | `#755200` | <ColorSwatch color="#755200" /> |
    | `amber-700` | `#5B4000` | <ColorSwatch color="#5B4000" /> |
    | `amber-800` | `#412D00` | <ColorSwatch color="#412D00" /> |
    | `amber-900` | `#302200` | <ColorSwatch color="#302200" /> |
    | `amber-950` | `#181100` | <ColorSwatch color="#181100" /> |
  </Tab>

  <Tab title="Alpha">
    | Token       | Value                     |                     Preview                     |
    | :---------- | :------------------------ | :---------------------------------------------: |
    | `amber/50`  | `rgba(175, 123, 0, 0.1)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.1)" /> |
    | `amber/100` | `rgba(175, 123, 0, 0.2)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.2)" /> |
    | `amber/200` | `rgba(175, 123, 0, 0.32)` | <ColorSwatch color="rgba(175, 123, 0, 0.32)" /> |
    | `amber/300` | `rgba(175, 123, 0, 0.5)`  |  <ColorSwatch color="rgba(175, 123, 0, 0.5)" /> |
    | `amber/400` | `rgba(175, 123, 0, 0.68)` | <ColorSwatch color="rgba(175, 123, 0, 0.68)" /> |
    | `amber/450` | `rgba(175, 123, 0, 0.88)` | <ColorSwatch color="rgba(175, 123, 0, 0.88)" /> |
    | `amber/600` | `rgba(155, 109, 0, 0.8)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.8)" /> |
    | `amber/650` | `rgba(155, 109, 0, 0.7)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.7)" /> |
    | `amber/700` | `rgba(155, 109, 0, 0.55)` | <ColorSwatch color="rgba(155, 109, 0, 0.55)" /> |
    | `amber/800` | `rgba(155, 109, 0, 0.4)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.4)" /> |
    | `amber/900` | `rgba(155, 109, 0, 0.25)` | <ColorSwatch color="rgba(155, 109, 0, 0.25)" /> |
    | `amber/950` | `rgba(155, 109, 0, 0.1)`  |  <ColorSwatch color="rgba(155, 109, 0, 0.1)" /> |
  </Tab>
</Tabs>

### Green

Maps to semantic status colors for success.

<Tabs>
  <Tab title="Default">
    | Token       | Value     |             Preview             |
    | :---------- | :-------- | :-----------------------------: |
    | `green-50`  | `#DDF9E7` | <ColorSwatch color="#DDF9E7" /> |
    | `green-100` | `#BBF3D0` | <ColorSwatch color="#BBF3D0" /> |
    | `green-200` | `#8BEAAE` | <ColorSwatch color="#8BEAAE" /> |
    | `green-300` | `#34DA71` | <ColorSwatch color="#34DA71" /> |
    | `green-400` | `#24C45E` | <ColorSwatch color="#24C45E" /> |
    | `green-450` | `#1FA851` | <ColorSwatch color="#1FA851" /> |
    | `green-500` | `#1C984A` | <ColorSwatch color="#1C984A" /> |
    | `green-550` | `#198741` | <ColorSwatch color="#198741" /> |
    | `green-600` | `#157538` | <ColorSwatch color="#157538" /> |
    | `green-650` | `#136631` | <ColorSwatch color="#136631" /> |
    | `green-700` | `#0F5026` | <ColorSwatch color="#0F5026" /> |
    | `green-800` | `#0A381B` | <ColorSwatch color="#0A381B" /> |
    | `green-900` | `#082A14` | <ColorSwatch color="#082A14" /> |
    | `green-950` | `#04160A` | <ColorSwatch color="#04160A" /> |
  </Tab>

  <Tab title="Alpha">
    | Token       | Value                     |                     Preview                     |
    | :---------- | :------------------------ | :---------------------------------------------: |
    | `green/50`  | `rgba(28, 152, 74, 0.1)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.1)" /> |
    | `green/100` | `rgba(28, 152, 74, 0.2)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.2)" /> |
    | `green/200` | `rgba(28, 152, 74, 0.32)` | <ColorSwatch color="rgba(28, 152, 74, 0.32)" /> |
    | `green/300` | `rgba(28, 152, 74, 0.5)`  |  <ColorSwatch color="rgba(28, 152, 74, 0.5)" /> |
    | `green/400` | `rgba(28, 152, 74, 0.68)` | <ColorSwatch color="rgba(28, 152, 74, 0.68)" /> |
    | `green/450` | `rgba(28, 152, 74, 0.88)` | <ColorSwatch color="rgba(28, 152, 74, 0.88)" /> |
    | `green/600` | `rgba(25, 135, 65, 0.8)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.8)" /> |
    | `green/650` | `rgba(25, 135, 65, 0.7)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.7)" /> |
    | `green/700` | `rgba(25, 135, 65, 0.55)` | <ColorSwatch color="rgba(25, 135, 65, 0.55)" /> |
    | `green/800` | `rgba(25, 135, 65, 0.4)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.4)" /> |
    | `green/900` | `rgba(25, 135, 65, 0.25)` | <ColorSwatch color="rgba(25, 135, 65, 0.25)" /> |
    | `green/950` | `rgba(25, 135, 65, 0.1)`  |  <ColorSwatch color="rgba(25, 135, 65, 0.1)" /> |
  </Tab>
</Tabs>

### Blue

Maps to semantic status colors for information.

<Tabs>
  <Tab title="Default">
    | Token      | Value     |             Preview             |
    | :--------- | :-------- | :-----------------------------: |
    | `blue-50`  | `#E6F4FF` | <ColorSwatch color="#E6F4FF" /> |
    | `blue-100` | `#CEEAFF` | <ColorSwatch color="#CEEAFF" /> |
    | `blue-200` | `#AEDCFF` | <ColorSwatch color="#AEDCFF" /> |
    | `blue-300` | `#7CC6FF` | <ColorSwatch color="#7CC6FF" /> |
    | `blue-400` | `#4CB2FF` | <ColorSwatch color="#4CB2FF" /> |
    | `blue-450` | `#0B95FF` | <ColorSwatch color="#0B95FF" /> |
    | `blue-500` | `#0086ED` | <ColorSwatch color="#0086ED" /> |
    | `blue-550` | `#0077D2` | <ColorSwatch color="#0077D2" /> |
    | `blue-600` | `#0067B6` | <ColorSwatch color="#0067B6" /> |
    | `blue-650` | `#005A9F` | <ColorSwatch color="#005A9F" /> |
    | `blue-700` | `#00477D` | <ColorSwatch color="#00477D" /> |
    | `blue-800` | `#003259` | <ColorSwatch color="#003259" /> |
    | `blue-900` | `#002542` | <ColorSwatch color="#002542" /> |
    | `blue-950` | `#001423` | <ColorSwatch color="#001423" /> |
  </Tab>

  <Tab title="Alpha">
    | Token      | Value                     |                     Preview                     |
    | :--------- | :------------------------ | :---------------------------------------------: |
    | `blue/50`  | `rgba(0, 134, 237, 0.1)`  |  <ColorSwatch color="rgba(0, 134, 237, 0.1)" /> |
    | `blue/100` | `rgba(0, 134, 237, 0.2)`  |  <ColorSwatch color="rgba(0, 134, 237, 0.2)" /> |
    | `blue/200` | `rgba(0, 134, 237, 0.32)` | <ColorSwatch color="rgba(0, 134, 237, 0.32)" /> |
    | `blue/300` | `rgba(0, 134, 237, 0.5)`  |  <ColorSwatch color="rgba(0, 134, 237, 0.5)" /> |
    | `blue/400` | `rgba(0, 134, 237, 0.68)` | <ColorSwatch color="rgba(0, 134, 237, 0.68)" /> |
    | `blue/450` | `rgba(0, 134, 237, 0.88)` | <ColorSwatch color="rgba(0, 134, 237, 0.88)" /> |
    | `blue/600` | `rgba(0, 119, 210, 0.8)`  |  <ColorSwatch color="rgba(0, 119, 210, 0.8)" /> |
    | `blue/650` | `rgba(0, 119, 210, 0.7)`  |  <ColorSwatch color="rgba(0, 119, 210, 0.7)" /> |
    | `blue/700` | `rgba(0, 119, 210, 0.55)` | <ColorSwatch color="rgba(0, 119, 210, 0.55)" /> |
    | `blue/800` | `rgba(0, 119, 210, 0.4)`  |  <ColorSwatch color="rgba(0, 119, 210, 0.4)" /> |
    | `blue/900` | `rgba(0, 119, 210, 0.25)` | <ColorSwatch color="rgba(0, 119, 210, 0.25)" /> |
    | `blue/950` | `rgba(0, 119, 210, 0.1)`  |  <ColorSwatch color="rgba(0, 119, 210, 0.1)" /> |
  </Tab>
</Tabs>