Color - Cognite Docs

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 and color ramp tables list every resolved value.

To extend or customize color tokens in a consuming app, see Token customization reference.

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

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.

Dos and don’ts

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.

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.

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.

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.

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.

Light
Dark

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

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

Fixed tokens in this table resolve to the same value in both themes. See Fixed tokens for when to use them.

Foreground

Text, icon, and link color tokens.

Light
Dark

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

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

Border and ring

Border and focus ring color tokens.

Light
Dark

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

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

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

Light
Dark

Token	Value	Usage
`info-background`	`#D0D6ED`	Surface fill for informational status components (Alert, Banner, Badge)
`info-background-hover`	`#B5BEE2`	Hover state on info status surfaces
`info-muted-background`	`#E2E5F4`	Subtle info surface for use on persistent chrome
`success-background`	`#BBF3D0`	Surface fill for success status components
`success-background-hover`	`#8BEAAE`	Hover state on success status surfaces
`success-muted-background`	`#DDF9E7`	Subtle success surface for use on persistent chrome
`warning-background`	`#FFE3A2`	Surface fill for warning status components
`warning-background-hover`	`#FFD062`	Hover state on warning status surfaces
`warning-muted-background`	`#FFF1D0`	Subtle warning surface for use on persistent chrome
`destructive-background`	`#FCCAD2`	Surface fill for destructive or error status components
`destructive-background-hover`	`#FAA9B7`	Hover state on destructive status surfaces
`destructive-muted-background`	`#FDDEE4`	Subtle destructive surface for use on persistent chrome
`destructive-muted-background-hover`	`#FCCAD2`	Hover state on muted destructive surfaces
`neutral-background`	`#E4E6E8`	Surface fill for neutral or inactive status components
`neutral-background-hover`	`#D4D7D9`	Hover state on neutral status surfaces
`neutral-muted-background`	`#F1F2F3`	Subtle neutral surface for use on persistent chrome

Token	Value	Usage
`info-background`	`#B5BEE2`	Surface fill for informational status components (Alert, Banner, Badge)
`info-background-hover`	`#D0D6ED`	Hover state on info status surfaces
`info-muted-background`	`#2D3134`	Subtle info surface for use on persistent chrome
`success-background`	`#8BEAAE`	Surface fill for success status components
`success-background-hover`	`#BBF3D0`	Hover state on success status surfaces
`success-muted-background`	`#2D3134`	Subtle success surface for use on persistent chrome
`warning-background`	`#FFE3A2`	Surface fill for warning status components
`warning-background-hover`	`#FFF1D0`	Hover state on warning status surfaces
`warning-muted-background`	`#2D3134`	Subtle warning surface for use on persistent chrome
`destructive-background`	`#FAA9B7`	Surface fill for destructive or error status components
`destructive-background-hover`	`#FCCAD2`	Hover state on destructive status surfaces
`destructive-muted-background`	`#2D3134`	Subtle destructive surface for use on persistent chrome
`destructive-muted-background-hover`	`#40464A`	Hover state on muted destructive surfaces
`neutral-background`	`#D4D7D9`	Surface fill for neutral or inactive status components
`neutral-background-hover`	`#E4E6E8`	Hover state on neutral status surfaces
`neutral-muted-background`	`#2D3134`	Subtle neutral surface for use on persistent chrome

Foreground

Light
Dark

Token	Value	Usage
`info-foreground`	`#4A5FB8`	Text and icons conveying info status on a neutral surface
`info-foreground-on-info`	`#32417F`	Text and icons placed directly on an info-background surface
`success-foreground`	`#1C984A`	Text and icons conveying success status on a neutral surface
`success-foreground-on-success`	`#0F5026`	Text and icons placed directly on a success-background surface
`warning-foreground`	`#C18800`	Text and icons conveying warning status on a neutral surface
`warning-foreground-on-warning`	`#755200`	Text and icons placed directly on a warning-background surface
`destructive-foreground`	`#CB0B2C`	Text and icons conveying destructive or error status on a neutral surface
`destructive-foreground-on-critical`	`#8D081F`	Text and icons placed directly on a destructive-background surface
`neutral-foreground`	`#52595F`	Text and icons conveying neutral status on a neutral surface
`neutral-foreground-on-neutral`	`#40464A`	Text and icons placed directly on a neutral-background surface

Token	Value	Usage
`info-foreground`	`#9DA9D9`	Text and icons conveying info status on a neutral surface
`info-foreground-on-info`	`#1A2242`	Text and icons placed directly on an info-background surface
`success-foreground`	`#24C45E`	Text and icons conveying success status on a neutral surface
`success-foreground-on-success`	`#0A381B`	Text and icons placed directly on a success-background surface
`warning-foreground`	`#FCB100`	Text and icons conveying warning status on a neutral surface
`warning-foreground-on-warning`	`#5B4000`	Text and icons placed directly on a warning-background surface
`destructive-foreground`	`#F65E78`	Text and icons conveying destructive or error status on a neutral surface
`destructive-foreground-on-critical`	`#8D081F`	Text and icons placed directly on a destructive-background surface
`neutral-foreground`	`#A5ABB1`	Text and icons conveying neutral status on a neutral surface
`neutral-foreground-on-neutral`	`#2D3134`	Text and icons placed directly on a neutral-background surface

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

Light
Dark

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

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

Foreground

Light
Dark

Token	Value	Usage
`decorative-foreground-mountain`	`#2D3134`	Text and icons on a mountain decorative background
`decorative-foreground-fjord`	`#1234B6`	Text and icons on a fjord decorative background
`decorative-foreground-nordic`	`#0D4E40`	Text and icons on a nordic decorative background
`decorative-foreground-aurora`	`#344C08`	Text and icons on an aurora decorative background
`decorative-foreground-dusk`	`#682C71`	Text and icons on a dusk decorative background
`decorative-foreground-orange`	`#762F04`	Text and icons on an orange decorative background
`decorative-foreground-sky`	`#014B60`	Text and icons on a sky decorative background

Token	Value	Usage
`decorative-foreground-mountain`	`#D4D7D9`	Text and icons on a mountain decorative background
`decorative-foreground-fjord`	`#0D2582`	Text and icons on a fjord decorative background
`decorative-foreground-nordic`	`#0A372D`	Text and icons on a nordic decorative background
`decorative-foreground-aurora`	`#253606`	Text and icons on an aurora decorative background
`decorative-foreground-dusk`	`#4A1F50`	Text and icons on a dusk decorative background
`decorative-foreground-orange`	`#542203`	Text and icons on an orange decorative background
`decorative-foreground-sky`	`#013644`	Text and icons on a sky decorative background

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.

Light
Dark

Token	Value	Preview
`chart-fjord-color-1`	`rgba(95, 125, 239, 0.88)`
`chart-fjord-color-2`	`rgba(95, 125, 239, 0.68)`
`chart-fjord-color-3`	`rgba(95, 125, 239, 0.5)`
`chart-fjord-color-4`	`rgba(95, 125, 239, 0.32)`
`chart-fjord-color-5`	`rgba(95, 125, 239, 0.2)`
`chart-fjord-color-6`	`rgba(95, 125, 239, 0.1)`

Token	Value	Preview
`chart-fjord-color-1`	`rgba(72, 106, 237, 0.8)`
`chart-fjord-color-2`	`rgba(72, 106, 237, 0.7)`
`chart-fjord-color-3`	`rgba(72, 106, 237, 0.55)`
`chart-fjord-color-4`	`rgba(72, 106, 237, 0.4)`
`chart-fjord-color-5`	`rgba(72, 106, 237, 0.25)`
`chart-fjord-color-6`	`rgba(72, 106, 237, 0.1)`

Nordic

Nordic is the secondary series color for data visualization.

Light
Dark

Token	Value	Preview
`chart-nordic-color-1`	`rgba(26, 150, 122, 0.88)`
`chart-nordic-color-2`	`rgba(26, 150, 122, 0.68)`
`chart-nordic-color-3`	`rgba(26, 150, 122, 0.5)`
`chart-nordic-color-4`	`rgba(26, 150, 122, 0.32)`
`chart-nordic-color-5`	`rgba(26, 150, 122, 0.2)`
`chart-nordic-color-6`	`rgba(26, 150, 122, 0.1)`

Token	Value	Preview
`chart-nordic-color-1`	`rgba(23, 132, 108, 0.8)`
`chart-nordic-color-2`	`rgba(23, 132, 108, 0.7)`
`chart-nordic-color-3`	`rgba(23, 132, 108, 0.55)`
`chart-nordic-color-4`	`rgba(23, 132, 108, 0.4)`
`chart-nordic-color-5`	`rgba(23, 132, 108, 0.25)`
`chart-nordic-color-6`	`rgba(23, 132, 108, 0.1)`

Dusk

Dusk is the tertiary series color for data visualization.

Light
Dark

Token	Value	Preview
`chart-dusk-color-1`	`rgba(183, 101, 196, 0.88)`
`chart-dusk-color-2`	`rgba(183, 101, 196, 0.68)`
`chart-dusk-color-3`	`rgba(183, 101, 196, 0.5)`
`chart-dusk-color-4`	`rgba(183, 101, 196, 0.32)`
`chart-dusk-color-5`	`rgba(183, 101, 196, 0.2)`
`chart-dusk-color-6`	`rgba(183, 101, 196, 0.1)`

Token	Value	Preview
`chart-dusk-color-1`	`rgba(173, 78, 187, 0.8)`
`chart-dusk-color-2`	`rgba(173, 78, 187, 0.7)`
`chart-dusk-color-3`	`rgba(173, 78, 187, 0.55)`
`chart-dusk-color-4`	`rgba(173, 78, 187, 0.4)`
`chart-dusk-color-5`	`rgba(173, 78, 187, 0.25)`
`chart-dusk-color-6`	`rgba(173, 78, 187, 0.1)`

Aurora

Aurora is the quaternary series color for data visualization.

Light
Dark

Token	Value	Preview
`chart-aurora-color-1`	`rgba(100, 146, 16, 0.88)`
`chart-aurora-color-2`	`rgba(100, 146, 16, 0.68)`
`chart-aurora-color-3`	`rgba(100, 146, 16, 0.5)`
`chart-aurora-color-4`	`rgba(100, 146, 16, 0.32)`
`chart-aurora-color-5`	`rgba(100, 146, 16, 0.2)`
`chart-aurora-color-6`	`rgba(100, 146, 16, 0.1)`

Token	Value	Preview
`chart-aurora-color-1`	`rgba(88, 129, 14, 0.8)`
`chart-aurora-color-2`	`rgba(88, 129, 14, 0.7)`
`chart-aurora-color-3`	`rgba(88, 129, 14, 0.55)`
`chart-aurora-color-4`	`rgba(88, 129, 14, 0.4)`
`chart-aurora-color-5`	`rgba(88, 129, 14, 0.25)`
`chart-aurora-color-6`	`rgba(88, 129, 14, 0.1)`

Orange

Orange is the quinary series color for data visualization.

Light
Dark

Token	Value	Preview
`chart-orange-color-1`	`rgba(225, 90, 7, 0.88)`
`chart-orange-color-2`	`rgba(225, 90, 7, 0.68)`
`chart-orange-color-3`	`rgba(225, 90, 7, 0.5)`
`chart-orange-color-4`	`rgba(225, 90, 7, 0.32)`
`chart-orange-color-5`	`rgba(225, 90, 7, 0.2)`
`chart-orange-color-6`	`rgba(225, 90, 7, 0.1)`

Token	Value	Preview
`chart-orange-color-1`	`rgba(199, 80, 6, 0.8)`
`chart-orange-color-2`	`rgba(199, 80, 6, 0.7)`
`chart-orange-color-3`	`rgba(199, 80, 6, 0.55)`
`chart-orange-color-4`	`rgba(199, 80, 6, 0.4)`
`chart-orange-color-5`	`rgba(199, 80, 6, 0.25)`
`chart-orange-color-6`	`rgba(199, 80, 6, 0.1)`

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

Light
Dark

Token	Value	Preview
`chart-info-color-1`	`rgba(112, 129, 199, 0.88)`
`chart-info-color-2`	`rgba(112, 129, 199, 0.68)`
`chart-info-color-3`	`rgba(112, 129, 199, 0.5)`
`chart-info-color-4`	`rgba(112, 129, 199, 0.32)`
`chart-info-color-5`	`rgba(112, 129, 199, 0.2)`
`chart-info-color-6`	`rgba(112, 129, 199, 0.1)`

Token	Value	Preview
`chart-info-color-1`	`rgba(93, 112, 192, 0.8)`
`chart-info-color-2`	`rgba(93, 112, 192, 0.7)`
`chart-info-color-3`	`rgba(93, 112, 192, 0.55)`
`chart-info-color-4`	`rgba(93, 112, 192, 0.4)`
`chart-info-color-5`	`rgba(93, 112, 192, 0.25)`
`chart-info-color-6`	`rgba(93, 112, 192, 0.1)`

Success

Light
Dark

Token	Value	Preview
`chart-success-color-1`	`rgba(28, 152, 74, 0.88)`
`chart-success-color-2`	`rgba(28, 152, 74, 0.68)`
`chart-success-color-3`	`rgba(28, 152, 74, 0.5)`
`chart-success-color-4`	`rgba(28, 152, 74, 0.32)`
`chart-success-color-5`	`rgba(28, 152, 74, 0.2)`
`chart-success-color-6`	`rgba(28, 152, 74, 0.1)`

Token	Value	Preview
`chart-success-color-1`	`rgba(25, 135, 65, 0.8)`
`chart-success-color-2`	`rgba(25, 135, 65, 0.7)`
`chart-success-color-3`	`rgba(25, 135, 65, 0.55)`
`chart-success-color-4`	`rgba(25, 135, 65, 0.4)`
`chart-success-color-5`	`rgba(25, 135, 65, 0.25)`
`chart-success-color-6`	`rgba(25, 135, 65, 0.1)`

Warning

Light
Dark

Token	Value	Preview
`chart-warning-color-1`	`rgba(175, 123, 0, 0.88)`
`chart-warning-color-2`	`rgba(175, 123, 0, 0.68)`
`chart-warning-color-3`	`rgba(175, 123, 0, 0.5)`
`chart-warning-color-4`	`rgba(175, 123, 0, 0.32)`
`chart-warning-color-5`	`rgba(175, 123, 0, 0.2)`
`chart-warning-color-6`	`rgba(175, 123, 0, 0.1)`

Token	Value	Preview
`chart-warning-color-1`	`rgba(155, 109, 0, 0.8)`
`chart-warning-color-2`	`rgba(155, 109, 0, 0.7)`
`chart-warning-color-3`	`rgba(155, 109, 0, 0.55)`
`chart-warning-color-4`	`rgba(155, 109, 0, 0.4)`
`chart-warning-color-5`	`rgba(155, 109, 0, 0.25)`
`chart-warning-color-6`	`rgba(155, 109, 0, 0.1)`

Error

Light
Dark

Token	Value	Preview
`chart-error-color-1`	`rgba(244, 61, 92, 0.88)`
`chart-error-color-2`	`rgba(244, 61, 92, 0.68)`
`chart-error-color-3`	`rgba(244, 61, 92, 0.5)`
`chart-error-color-4`	`rgba(244, 61, 92, 0.32)`
`chart-error-color-5`	`rgba(244, 61, 92, 0.2)`
`chart-error-color-6`	`rgba(244, 61, 92, 0.1)`

Token	Value	Preview
`chart-error-color-1`	`rgba(233, 13, 50, 0.8)`
`chart-error-color-2`	`rgba(233, 13, 50, 0.7)`
`chart-error-color-3`	`rgba(233, 13, 50, 0.55)`
`chart-error-color-4`	`rgba(233, 13, 50, 0.4)`
`chart-error-color-5`	`rgba(233, 13, 50, 0.25)`
`chart-error-color-6`	`rgba(233, 13, 50, 0.1)`

Neutral

Light
Dark

Token	Value	Preview
`chart-neutral-color-1`	`rgba(124, 134, 142, 0.88)`
`chart-neutral-color-2`	`rgba(124, 134, 142, 0.68)`
`chart-neutral-color-3`	`rgba(124, 134, 142, 0.5)`
`chart-neutral-color-4`	`rgba(124, 134, 142, 0.32)`
`chart-neutral-color-5`	`rgba(124, 134, 142, 0.2)`
`chart-neutral-color-6`	`rgba(124, 134, 142, 0.1)`

Token	Value	Preview
`chart-neutral-color-1`	`rgba(109, 118, 126, 0.8)`
`chart-neutral-color-2`	`rgba(109, 118, 126, 0.7)`
`chart-neutral-color-3`	`rgba(109, 118, 126, 0.55)`
`chart-neutral-color-4`	`rgba(109, 118, 126, 0.4)`
`chart-neutral-color-5`	`rgba(109, 118, 126, 0.25)`
`chart-neutral-color-6`	`rgba(109, 118, 126, 0.1)`

Gridlines

Light
Dark

Token	Value	Preview
`chart-gridlines`	`#E4E6E8`

Token	Value	Preview
`chart-gridlines`	`#2D3134`

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.

Default
Alpha

Token	Value	Preview
`mountain-white`	`#FFFFFF`
`mountain-10`	`#F9FAFA`
`mountain-50`	`#F1F2F3`
`mountain-100`	`#E4E6E8`
`mountain-200`	`#D4D7D9`
`mountain-300`	`#BBC0C4`
`mountain-400`	`#A5ABB1`
`mountain-450`	`#8B949A`
`mountain-500`	`#7C868E`
`mountain-550`	`#6D767E`
`mountain-600`	`#5E666D`
`mountain-650`	`#52595F`
`mountain-700`	`#40464A`
`mountain-800`	`#2D3134`
`mountain-900`	`#212426`
`mountain-950`	`#191B1D`
`mountain-black`	`#111213`

Token	Value	Preview
`mountain/50`	`rgba(124, 134, 142, 0.1)`
`mountain/100`	`rgba(124, 134, 142, 0.2)`
`mountain/200`	`rgba(124, 134, 142, 0.32)`
`mountain/300`	`rgba(124, 134, 142, 0.5)`
`mountain/400`	`rgba(124, 134, 142, 0.68)`
`mountain/450`	`rgba(124, 134, 142, 0.88)`
`mountain/600`	`rgba(109, 118, 126, 0.8)`
`mountain/650`	`rgba(109, 118, 126, 0.7)`
`mountain/700`	`rgba(109, 118, 126, 0.55)`
`mountain/800`	`rgba(109, 118, 126, 0.4)`
`mountain/900`	`rgba(109, 118, 126, 0.25)`
`mountain/950`	`rgba(109, 118, 126, 0.1)`

Fjord

Primary decorative color used for charts.

Default
Alpha

Token	Value	Preview
`fjord-50`	`#EFF2FD`
`fjord-100`	`#DFE5FC`
`fjord-200`	`#CCD5FA`
`fjord-300`	`#AEBDF7`
`fjord-400`	`#93A7F4`
`fjord-450`	`#728DF1`
`fjord-500`	`#5F7DEF`
`fjord-550`	`#486AED`
`fjord-600`	`#2F55EA`
`fjord-650`	`#1742E7`
`fjord-700`	`#1234B6`
`fjord-800`	`#0D2582`
`fjord-900`	`#0A1C61`
`fjord-950`	`#050F33`

Token	Value	Preview
`fjord/50`	`rgba(95, 125, 239, 0.1)`
`fjord/100`	`rgba(95, 125, 239, 0.2)`
`fjord/200`	`rgba(95, 125, 239, 0.32)`
`fjord/300`	`rgba(95, 125, 239, 0.5)`
`fjord/400`	`rgba(95, 125, 239, 0.68)`
`fjord/450`	`rgba(95, 125, 239, 0.88)`
`fjord/600`	`rgba(72, 106, 237, 0.8)`
`fjord/650`	`rgba(72, 106, 237, 0.7)`
`fjord/700`	`rgba(72, 106, 237, 0.55)`
`fjord/800`	`rgba(72, 106, 237, 0.4)`
`fjord/900`	`rgba(72, 106, 237, 0.25)`
`fjord/950`	`rgba(72, 106, 237, 0.1)`

Nordic

Primary decorative color used for charts and Atlas AI.

Default
Alpha

Token	Value	Preview
`nordic-50`	`#DAF9F2`
`nordic-100`	`#B4F2E5`
`nordic-200`	`#7FE9D2`
`nordic-300`	`#25D7B0`
`nordic-400`	`#21C09D`
`nordic-450`	`#1CA587`
`nordic-500`	`#1A967A`
`nordic-550`	`#17846C`
`nordic-600`	`#14735E`
`nordic-650`	`#116452`
`nordic-700`	`#0D4E40`
`nordic-800`	`#0A372D`
`nordic-900`	`#072922`
`nordic-950`	`#041511`

Token	Value	Preview
`nordic/50`	`rgba(26, 150, 122, 0.1)`
`nordic/100`	`rgba(26, 150, 122, 0.2)`
`nordic/200`	`rgba(26, 150, 122, 0.32)`
`nordic/300`	`rgba(26, 150, 122, 0.5)`
`nordic/400`	`rgba(26, 150, 122, 0.68)`
`nordic/450`	`rgba(26, 150, 122, 0.88)`
`nordic/600`	`rgba(23, 132, 108, 0.8)`
`nordic/650`	`rgba(23, 132, 108, 0.7)`
`nordic/700`	`rgba(23, 132, 108, 0.55)`
`nordic/800`	`rgba(23, 132, 108, 0.4)`
`nordic/900`	`rgba(23, 132, 108, 0.25)`
`nordic/950`	`rgba(23, 132, 108, 0.1)`

Aurora

Primary decorative color used for charts and decorative elements.

Default
Alpha

Token	Value	Preview
`aurora-50`	`#E7F9C6`
`aurora-100`	`#CFF38D`
`aurora-200`	`#ABE938`
`aurora-300`	`#90D217`
`aurora-400`	`#81BC14`
`aurora-450`	`#6EA112`
`aurora-500`	`#649210`
`aurora-550`	`#58810E`
`aurora-600`	`#4D700C`
`aurora-650`	`#43610B`
`aurora-700`	`#344C08`
`aurora-800`	`#253606`
`aurora-900`	`#1B2804`
`aurora-950`	`#0E1402`

Token	Value	Preview
`aurora/50`	`rgba(100, 146, 16, 0.1)`
`aurora/100`	`rgba(100, 146, 16, 0.2)`
`aurora/200`	`rgba(100, 146, 16, 0.32)`
`aurora/300`	`rgba(100, 146, 16, 0.5)`
`aurora/400`	`rgba(100, 146, 16, 0.68)`
`aurora/450`	`rgba(100, 146, 16, 0.88)`
`aurora/600`	`rgba(88, 129, 14, 0.8)`
`aurora/650`	`rgba(88, 129, 14, 0.7)`
`aurora/700`	`rgba(88, 129, 14, 0.55)`
`aurora/800`	`rgba(88, 129, 14, 0.4)`
`aurora/900`	`rgba(88, 129, 14, 0.25)`
`aurora/950`	`rgba(88, 129, 14, 0.1)`

Dusk

Primary decorative color used for charts and decorative elements.

Default
Alpha

Token	Value	Preview
`dusk-50`	`#F8EFF9`
`dusk-100`	`#F1E1F3`
`dusk-200`	`#E8CEEC`
`dusk-300`	`#DBB1E1`
`dusk-400`	`#CF97D7`
`dusk-450`	`#C078CB`
`dusk-500`	`#B765C4`
`dusk-550`	`#AD4EBB`
`dusk-600`	`#9940A6`
`dusk-650`	`#853790`
`dusk-700`	`#682C71`
`dusk-800`	`#4A1F50`
`dusk-900`	`#37173C`
`dusk-950`	`#1C0C1F`

Token	Value	Preview
`dusk/50`	`rgba(183, 101, 196, 0.1)`
`dusk/100`	`rgba(183, 101, 196, 0.2)`
`dusk/200`	`rgba(183, 101, 196, 0.32)`
`dusk/300`	`rgba(183, 101, 196, 0.5)`
`dusk/400`	`rgba(183, 101, 196, 0.68)`
`dusk/450`	`rgba(183, 101, 196, 0.88)`
`dusk/600`	`rgba(173, 78, 187, 0.8)`
`dusk/650`	`rgba(173, 78, 187, 0.7)`
`dusk/700`	`rgba(173, 78, 187, 0.55)`
`dusk/800`	`rgba(173, 78, 187, 0.4)`
`dusk/900`	`rgba(173, 78, 187, 0.25)`
`dusk/950`	`rgba(173, 78, 187, 0.1)`

Sky

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

Default
Alpha

Token	Value	Preview
`sky-50`	`#DBF7FF`
`sky-100`	`#B7EFFE`
`sky-200`	`#84E4FE`
`sky-300`	`#25CFFD`
`sky-400`	`#02B9EA`
`sky-450`	`#029FC9`
`sky-500`	`#0290B6`
`sky-550`	`#017FA1`
`sky-600`	`#016E8C`
`sky-650`	`#01607A`
`sky-700`	`#014B60`
`sky-800`	`#013644`
`sky-900`	`#002832`
`sky-950`	`#00151A`

Token	Value	Preview
`sky/50`	`rgba(2, 144, 182, 0.1)`
`sky/100`	`rgba(2, 144, 182, 0.2)`
`sky/200`	`rgba(2, 144, 182, 0.32)`
`sky/300`	`rgba(2, 144, 182, 0.5)`
`sky/400`	`rgba(2, 144, 182, 0.68)`
`sky/450`	`rgba(2, 144, 182, 0.88)`
`sky/600`	`rgba(1, 127, 161, 0.8)`
`sky/650`	`rgba(1, 127, 161, 0.7)`
`sky/700`	`rgba(1, 127, 161, 0.55)`
`sky/800`	`rgba(1, 127, 161, 0.4)`
`sky/900`	`rgba(1, 127, 161, 0.25)`
`sky/950`	`rgba(1, 127, 161, 0.1)`

Orange

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

Default
Alpha

Token	Value	Preview
`orange-50`	`#FEEFE6`
`orange-100`	`#FDE0CF`
`orange-200`	`#FCCDB0`
`orange-300`	`#FBAE7E`
`orange-400`	`#F98F4E`
`orange-450`	`#F7640A`
`orange-500`	`#E15A07`
`orange-550`	`#C75006`
`orange-600`	`#AD4506`
`orange-650`	`#963C05`
`orange-700`	`#762F04`
`orange-800`	`#542203`
`orange-900`	`#3E1902`
`orange-950`	`#210D01`

Token	Value	Preview
`orange/50`	`rgba(225, 90, 7, 0.1)`
`orange/100`	`rgba(225, 90, 7, 0.2)`
`orange/200`	`rgba(225, 90, 7, 0.32)`
`orange/300`	`rgba(225, 90, 7, 0.5)`
`orange/400`	`rgba(225, 90, 7, 0.68)`
`orange/450`	`rgba(225, 90, 7, 0.88)`
`orange/600`	`rgba(199, 80, 6, 0.8)`
`orange/650`	`rgba(199, 80, 6, 0.7)`
`orange/700`	`rgba(199, 80, 6, 0.55)`
`orange/800`	`rgba(199, 80, 6, 0.4)`
`orange/900`	`rgba(199, 80, 6, 0.25)`
`orange/950`	`rgba(199, 80, 6, 0.1)`

Yellow

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

Default
Alpha

Token	Value	Preview
`yellow-50`	`#FFF4A2`
`yellow-100`	`#FFE834`
`yellow-200`	`#F3D700`
`yellow-300`	`#D8BF00`
`yellow-400`	`#C1AB00`
`yellow-450`	`#A69300`
`yellow-500`	`#968500`
`yellow-550`	`#857600`
`yellow-600`	`#736600`
`yellow-650`	`#645900`
`yellow-700`	`#4E4500`
`yellow-800`	`#373100`
`yellow-900`	`#292400`
`yellow-950`	`#151200`

Token	Value	Preview
`yellow/50`	`rgba(150, 133, 0, 0.1)`
`yellow/100`	`rgba(150, 133, 0, 0.2)`
`yellow/200`	`rgba(150, 133, 0, 0.32)`
`yellow/300`	`rgba(150, 133, 0, 0.5)`
`yellow/400`	`rgba(150, 133, 0, 0.68)`
`yellow/450`	`rgba(150, 133, 0, 0.88)`
`yellow/600`	`rgba(133, 118, 0, 0.8)`
`yellow/650`	`rgba(133, 118, 0, 0.7)`
`yellow/700`	`rgba(133, 118, 0, 0.55)`
`yellow/800`	`rgba(133, 118, 0, 0.4)`
`yellow/900`	`rgba(133, 118, 0, 0.25)`
`yellow/950`	`rgba(133, 118, 0, 0.1)`

Pink

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

Default
Alpha

Token	Value	Preview
`pink-50`	`#FDEEF4`
`pink-100`	`#FBDEEA`
`pink-200`	`#F9CADD`
`pink-300`	`#F5A9C8`
`pink-400`	`#F28BB4`
`pink-450`	`#ED6199`
`pink-500`	`#E94487`
`pink-550`	`#E11A6A`
`pink-600`	`#C4175C`
`pink-650`	`#AB1451`
`pink-700`	`#881040`
`pink-800`	`#620B2E`
`pink-900`	`#490823`
`pink-950`	`#280513`

Token	Value	Preview
`pink/50`	`rgba(233, 68, 135, 0.1)`
`pink/100`	`rgba(233, 68, 135, 0.2)`
`pink/200`	`rgba(233, 68, 135, 0.32)`
`pink/300`	`rgba(233, 68, 135, 0.5)`
`pink/400`	`rgba(233, 68, 135, 0.68)`
`pink/450`	`rgba(233, 68, 135, 0.88)`
`pink/600`	`rgba(225, 26, 106, 0.8)`
`pink/650`	`rgba(225, 26, 106, 0.7)`
`pink/700`	`rgba(225, 26, 106, 0.55)`
`pink/800`	`rgba(225, 26, 106, 0.4)`
`pink/900`	`rgba(225, 26, 106, 0.25)`
`pink/950`	`rgba(225, 26, 106, 0.1)`

Gray

Used for focus states and secondary decorative elements.

Default
Alpha

Token	Value	Preview
`gray-50`	`#F0F2F9`
`gray-100`	`#E2E5F4`
`gray-200`	`#D0D6ED`
`gray-300`	`#B5BEE2`
`gray-400`	`#9DA9D9`
`gray-450`	`#818FCE`
`gray-500`	`#7081C7`
`gray-550`	`#5D70C0`
`gray-600`	`#4A5FB8`
`gray-650`	`#3F52A3`
`gray-700`	`#32417F`
`gray-800`	`#232E5A`
`gray-900`	`#1A2242`
`gray-950`	`#0D1122`

Token	Value	Preview
`gray/50`	`rgba(112, 129, 199, 0.1)`
`gray/100`	`rgba(112, 129, 199, 0.2)`
`gray/200`	`rgba(112, 129, 199, 0.32)`
`gray/300`	`rgba(112, 129, 199, 0.5)`
`gray/400`	`rgba(112, 129, 199, 0.68)`
`gray/450`	`rgba(112, 129, 199, 0.88)`
`gray/600`	`rgba(93, 112, 192, 0.8)`
`gray/650`	`rgba(93, 112, 192, 0.7)`
`gray/700`	`rgba(93, 112, 192, 0.55)`
`gray/800`	`rgba(93, 112, 192, 0.4)`
`gray/900`	`rgba(93, 112, 192, 0.25)`
`gray/950`	`rgba(93, 112, 192, 0.1)`

Red

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

Default
Alpha

Token	Value	Preview
`red-50`	`#FEEEF1`
`red-100`	`#FDDEE4`
`red-200`	`#FCCAD2`
`red-300`	`#FAA9B7`
`red-400`	`#F8899C`
`red-450`	`#F65E78`
`red-500`	`#F43D5C`
`red-550`	`#E90D32`
`red-600`	`#CB0B2C`
`red-650`	`#B20A26`
`red-700`	`#8D081F`
`red-800`	`#660616`
`red-900`	`#4E0411`
`red-950`	`#2C0209`

Token	Value	Preview
`red/50`	`rgba(244, 61, 92, 0.1)`
`red/100`	`rgba(244, 61, 92, 0.2)`
`red/200`	`rgba(244, 61, 92, 0.32)`
`red/300`	`rgba(244, 61, 92, 0.5)`
`red/400`	`rgba(244, 61, 92, 0.68)`
`red/450`	`rgba(244, 61, 92, 0.88)`
`red/600`	`rgba(233, 13, 50, 0.8)`
`red/650`	`rgba(233, 13, 50, 0.7)`
`red/700`	`rgba(233, 13, 50, 0.55)`
`red/800`	`rgba(233, 13, 50, 0.4)`
`red/900`	`rgba(233, 13, 50, 0.25)`
`red/950`	`rgba(233, 13, 50, 0.1)`

Amber

Maps to semantic status colors for warnings.

Default
Alpha

Token	Value	Preview
`amber-50`	`#FFF1D0`
`amber-100`	`#FFE3A2`
`amber-200`	`#FFD062`
`amber-300`	`#FCB100`
`amber-400`	`#E19E00`
`amber-450`	`#C18800`
`amber-500`	`#AF7B00`
`amber-550`	`#9B6D00`
`amber-600`	`#865E00`
`amber-650`	`#755200`
`amber-700`	`#5B4000`
`amber-800`	`#412D00`
`amber-900`	`#302200`
`amber-950`	`#181100`

Token	Value	Preview
`amber/50`	`rgba(175, 123, 0, 0.1)`
`amber/100`	`rgba(175, 123, 0, 0.2)`
`amber/200`	`rgba(175, 123, 0, 0.32)`
`amber/300`	`rgba(175, 123, 0, 0.5)`
`amber/400`	`rgba(175, 123, 0, 0.68)`
`amber/450`	`rgba(175, 123, 0, 0.88)`
`amber/600`	`rgba(155, 109, 0, 0.8)`
`amber/650`	`rgba(155, 109, 0, 0.7)`
`amber/700`	`rgba(155, 109, 0, 0.55)`
`amber/800`	`rgba(155, 109, 0, 0.4)`
`amber/900`	`rgba(155, 109, 0, 0.25)`
`amber/950`	`rgba(155, 109, 0, 0.1)`

Green

Maps to semantic status colors for success.

Default
Alpha

Token	Value	Preview
`green-50`	`#DDF9E7`
`green-100`	`#BBF3D0`
`green-200`	`#8BEAAE`
`green-300`	`#34DA71`
`green-400`	`#24C45E`
`green-450`	`#1FA851`
`green-500`	`#1C984A`
`green-550`	`#198741`
`green-600`	`#157538`
`green-650`	`#136631`
`green-700`	`#0F5026`
`green-800`	`#0A381B`
`green-900`	`#082A14`
`green-950`	`#04160A`

Token	Value	Preview
`green/50`	`rgba(28, 152, 74, 0.1)`
`green/100`	`rgba(28, 152, 74, 0.2)`
`green/200`	`rgba(28, 152, 74, 0.32)`
`green/300`	`rgba(28, 152, 74, 0.5)`
`green/400`	`rgba(28, 152, 74, 0.68)`
`green/450`	`rgba(28, 152, 74, 0.88)`
`green/600`	`rgba(25, 135, 65, 0.8)`
`green/650`	`rgba(25, 135, 65, 0.7)`
`green/700`	`rgba(25, 135, 65, 0.55)`
`green/800`	`rgba(25, 135, 65, 0.4)`
`green/900`	`rgba(25, 135, 65, 0.25)`
`green/950`	`rgba(25, 135, 65, 0.1)`

Blue

Maps to semantic status colors for information.

Default
Alpha

Token	Value	Preview
`blue-50`	`#E6F4FF`
`blue-100`	`#CEEAFF`
`blue-200`	`#AEDCFF`
`blue-300`	`#7CC6FF`
`blue-400`	`#4CB2FF`
`blue-450`	`#0B95FF`
`blue-500`	`#0086ED`
`blue-550`	`#0077D2`
`blue-600`	`#0067B6`
`blue-650`	`#005A9F`
`blue-700`	`#00477D`
`blue-800`	`#003259`
`blue-900`	`#002542`
`blue-950`	`#001423`

Token	Value	Preview
`blue/50`	`rgba(0, 134, 237, 0.1)`
`blue/100`	`rgba(0, 134, 237, 0.2)`
`blue/200`	`rgba(0, 134, 237, 0.32)`
`blue/300`	`rgba(0, 134, 237, 0.5)`
`blue/400`	`rgba(0, 134, 237, 0.68)`
`blue/450`	`rgba(0, 134, 237, 0.88)`
`blue/600`	`rgba(0, 119, 210, 0.8)`
`blue/650`	`rgba(0, 119, 210, 0.7)`
`blue/700`	`rgba(0, 119, 210, 0.55)`
`blue/800`	`rgba(0, 119, 210, 0.4)`
`blue/900`	`rgba(0, 119, 210, 0.25)`
`blue/950`	`rgba(0, 119, 210, 0.1)`

​The two layers

​Layer 1 — Color ramps

​Layer 2 — Tokens

​Light and dark theming

​How ramp steps map across themes

​Fixed tokens

​Dos and don’ts

​Theme tokens

​Base

​Background

​Foreground

​Border and ring

​Semantic

​Background

​Foreground

​Decorative

​Background

​Foreground

​Data visualizations

​Default

Fjord

Nordic

Dusk

Aurora

Orange

​Semantic

Informational

Success

Warning

Error

Neutral

​Gridlines

​Color ramps

​Mountain

​Fjord

​Nordic

​Aurora

​Dusk

​Sky

​Orange

​Yellow

​Pink

​Gray

​Red

​Amber

​Green

​Blue

The two layers

Layer 1 — Color ramps

Layer 2 — Tokens

Light and dark theming

How ramp steps map across themes

Fixed tokens

Dos and don’ts

Theme tokens

Base

Background

Foreground

Border and ring

Semantic

Background

Foreground

Decorative

Background

Foreground

Data visualizations

Default

Semantic

Gridlines

Color ramps

Mountain

Fjord

Nordic

Aurora

Dusk

Sky

Orange

Yellow

Pink

Gray

Red

Amber

Green

Blue