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.
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
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.
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.
Token Value Preview Usage background#FFFFFFMain app and page surface alternate-background#F9FAFAAlternating rows, subtle secondary surfaces muted-background#F1F2F3Subdued background for less prominent UI areas card-background#F9FAFACard and panel surface fill primary-background#212426Primary action buttons and key CTAs primary-background-hover#40464AHover state on primary action elements secondary-background#E4E6E8Secondary actions, chip fills, ghost button surfaces secondary-background-hover#D4D7D9Hover state on secondary action elements accent-background#F1F2F3Subtle highlight for selected, focused, or hovered items accent-background-strong#E4E6E8Stronger accent for more prominent highlighted states input-active-background#F9FAFABackground of active or focused form inputs active-background#191B1DFill for selected items in navigation and lists active-background-hover#2D3134Hover state on selected navigation items active-muted-background#F1F2F3Subtle selected-state fill for secondary navigation active-muted-background-hover#E4E6E8Hover state on muted active elements popover-background#FFFFFFDropdowns, popovers, tooltips, and floating panels raised-background#2D3134Modals, drawers, and elevated surfaces above the page disabled-background#F1F2F3Fill for disabled interactive elements background-fixed-light#FFFFFFPermanently light surface — does not flip in dark mode background-fixed-dark#212426Permanently dark surface — does not flip in light mode accent-background-fixed-dark#2D3134Permanently dark accent surface — does not flip in light mode overlay-background#000000Scrim or backdrop behind modals and dialogs
Token Value Preview Usage background#191B1DMain app and page surface alternate-background#111213Alternating rows, subtle secondary surfaces muted-background#2D3134Subdued background for less prominent UI areas card-background#212426Card and panel surface fill primary-background#F9FAFAPrimary action buttons and key CTAs primary-background-hover#E4E6E8Hover state on primary action elements secondary-background#40464ASecondary actions, chip fills, ghost button surfaces secondary-background-hover#5E666DHover state on secondary action elements accent-background#2D3134Subtle highlight for selected, focused, or hovered items accent-background-strong#40464AStronger accent for more prominent highlighted states input-active-background#212426Background of active or focused form inputs active-background#F9FAFAFill for selected items in navigation and lists active-background-hover#F1F2F3Hover state on selected navigation items active-muted-background#2D3134Subtle selected-state fill for secondary navigation active-muted-background-hover#40464AHover state on muted active elements popover-background#212426Dropdowns, popovers, tooltips, and floating panels raised-background#40464AModals, drawers, and elevated surfaces above the page disabled-background#2D3134Fill for disabled interactive elements background-fixed-light#FFFFFFPermanently light surface — does not flip in dark mode background-fixed-dark#212426Permanently dark surface — does not flip in light mode accent-background-fixed-dark#2D3134Permanently dark accent surface — does not flip in light mode overlay-background#000000Scrim 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.
Token Value Preview Usage foreground#191B1DPrimary text and icons secondary-foreground#40464ASecondary text — slightly less prominent than primary muted-foreground#7C868EPlaceholder text, timestamps, and supplemental labels disabled-foreground#D4D7D9Text and icons on disabled elements link-foreground#486AEDHyperlinks and interactive inline text foreground-on-primary#F1F2F3Text and icons on a primary-background surface foreground-on-active#F1F2F3Text and icons on an active-background surface foreground-fixed-light#FFFFFFPermanently white text — for use on fixed-dark surfaces foreground-fixed-dark#191B1DPermanently dark text — for use on fixed-light surfaces secondary-foreground-fixed-light#D4D7D9Secondary text on permanently dark surfaces foreground-secondary-fixed-dark#40464ASecondary text on permanently light surfaces muted-foreground-fixed-light#BBC0C4Muted text on permanently dark surfaces
Token Value Preview Usage foreground#F1F2F3Primary text and icons secondary-foreground#D4D7D9Secondary text — slightly less prominent than primary muted-foreground#A5ABB1Placeholder text, timestamps, and supplemental labels disabled-foreground#5E666DText and icons on disabled elements link-foreground#728DF1Hyperlinks and interactive inline text foreground-on-primary#191B1DText and icons on a primary-background surface foreground-on-active#191B1DText and icons on an active-background surface foreground-fixed-light#FFFFFFPermanently white text — for use on fixed-dark surfaces foreground-fixed-dark#191B1DPermanently dark text — for use on fixed-light surfaces secondary-foreground-fixed-light#D4D7D9Secondary text on permanently dark surfaces foreground-secondary-fixed-dark#40464ASecondary text on permanently light surfaces muted-foreground-fixed-light#BBC0C4Muted text on permanently dark surfaces
Border and ring Border and focus ring color tokens.
Token Value Preview Usage border#E4E6E8Default dividers and element borders border-active#191B1DBorder of active or selected elements border-emphasized#D4D7D9Slightly stronger border for emphasis border-fixed-light#E4E6E8Border on a fixed-light surface — does not flip with the theme border-on-dark#2D3134Border used on dark surfaces ring#7081C7Focus ring for keyboard navigation ring-muted#D0D6EDSubtle focus ring variant ring-destructive#CB0B2CFocus ring on destructive or error-state elements ring-destructive-muted#FDDEE4Muted focus ring for destructive elements
Token Value Preview Usage border#2D3134Default dividers and element borders border-active#F9FAFABorder of active or selected elements border-emphasized#40464ASlightly stronger border for emphasis border-fixed-light#E4E6E8Border on a fixed-light surface — does not flip with the theme border-on-dark#2D3134Border used on dark surfaces ring#7081C7Focus ring for keyboard navigation ring-muted#232E5ASubtle focus ring variant ring-destructive#F65E78Focus ring on destructive or error-state elements ring-destructive-muted#4E0411Muted 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 Token Value Preview Usage info-background#D0D6EDSurface fill for informational status components (Alert, Banner, Badge) info-background-hover#B5BEE2Hover state on info status surfaces info-muted-background#E2E5F4Subtle info surface for use on persistent chrome success-background#BBF3D0Surface fill for success status components success-background-hover#8BEAAEHover state on success status surfaces success-muted-background#DDF9E7Subtle success surface for use on persistent chrome warning-background#FFE3A2Surface fill for warning status components warning-background-hover#FFD062Hover state on warning status surfaces warning-muted-background#FFF1D0Subtle warning surface for use on persistent chrome destructive-background#FCCAD2Surface fill for destructive or error status components destructive-background-hover#FAA9B7Hover state on destructive status surfaces destructive-muted-background#FDDEE4Subtle destructive surface for use on persistent chrome destructive-muted-background-hover#FCCAD2Hover state on muted destructive surfaces neutral-background#E4E6E8Surface fill for neutral or inactive status components neutral-background-hover#D4D7D9Hover state on neutral status surfaces neutral-muted-background#F1F2F3Subtle neutral surface for use on persistent chrome
Token Value Preview Usage info-background#B5BEE2Surface fill for informational status components (Alert, Banner, Badge) info-background-hover#D0D6EDHover state on info status surfaces info-muted-background#2D3134Subtle info surface for use on persistent chrome success-background#8BEAAESurface fill for success status components success-background-hover#BBF3D0Hover state on success status surfaces success-muted-background#2D3134Subtle success surface for use on persistent chrome warning-background#FFE3A2Surface fill for warning status components warning-background-hover#FFF1D0Hover state on warning status surfaces warning-muted-background#2D3134Subtle warning surface for use on persistent chrome destructive-background#FAA9B7Surface fill for destructive or error status components destructive-background-hover#FCCAD2Hover state on destructive status surfaces destructive-muted-background#2D3134Subtle destructive surface for use on persistent chrome destructive-muted-background-hover#40464AHover state on muted destructive surfaces neutral-background#D4D7D9Surface fill for neutral or inactive status components neutral-background-hover#E4E6E8Hover state on neutral status surfaces neutral-muted-background#2D3134Subtle neutral surface for use on persistent chrome
Foreground Token Value Preview Usage info-foreground#4A5FB8Text and icons conveying info status on a neutral surface info-foreground-on-info#32417FText and icons placed directly on an info-background surface success-foreground#1C984AText and icons conveying success status on a neutral surface success-foreground-on-success#0F5026Text and icons placed directly on a success-background surface warning-foreground#C18800Text and icons conveying warning status on a neutral surface warning-foreground-on-warning#755200Text and icons placed directly on a warning-background surface destructive-foreground#CB0B2CText and icons conveying destructive or error status on a neutral surface destructive-foreground-on-critical#8D081FText and icons placed directly on a destructive-background surface neutral-foreground#52595FText and icons conveying neutral status on a neutral surface neutral-foreground-on-neutral#40464AText and icons placed directly on a neutral-background surface
Token Value Preview Usage info-foreground#9DA9D9Text and icons conveying info status on a neutral surface info-foreground-on-info#1A2242Text and icons placed directly on an info-background surface success-foreground#24C45EText and icons conveying success status on a neutral surface success-foreground-on-success#0A381BText and icons placed directly on a success-background surface warning-foreground#FCB100Text and icons conveying warning status on a neutral surface warning-foreground-on-warning#5B4000Text and icons placed directly on a warning-background surface destructive-foreground#F65E78Text and icons conveying destructive or error status on a neutral surface destructive-foreground-on-critical#8D081FText and icons placed directly on a destructive-background surface neutral-foreground#A5ABB1Text and icons conveying neutral status on a neutral surface neutral-foreground-on-neutral#2D3134Text 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 Token Value Preview Usage decorative-background-mountainrgba(124, 134, 142, 0.2)Mountain-tinted fill for avatars, badges, and illustrations decorative-background-hover-mountainrgba(124, 134, 142, 0.32)Hover state for mountain decorative fill decorative-background-fjordrgba(95, 125, 239, 0.32)Fjord-tinted fill for avatars, badges, and illustrations decorative-background-hover-fjordrgba(95, 125, 239, 0.5)Hover state for fjord decorative fill decorative-background-nordicrgba(26, 150, 122, 0.2)Nordic-tinted fill for avatars, badges, and illustrations decorative-background-hover-nordicrgba(26, 150, 122, 0.32)Hover state for nordic decorative fill decorative-background-aurorargba(100, 146, 16, 0.2)Aurora-tinted fill for avatars, badges, and illustrations decorative-background-hover-aurorargba(100, 146, 16, 0.32)Hover state for aurora decorative fill decorative-background-duskrgba(183, 101, 196, 0.32)Dusk-tinted fill for avatars, badges, and illustrations decorative-background-hover-duskrgba(183, 101, 196, 0.5)Hover state for dusk decorative fill decorative-background-orangergba(225, 90, 7, 0.32)Orange-tinted fill for avatars, badges, and illustrations decorative-background-hover-orangergba(225, 90, 7, 0.5)Hover state for orange decorative fill decorative-background-skyrgba(2, 144, 182, 0.2)Sky-tinted fill for avatars, badges, and illustrations decorative-background-hover-skyrgba(2, 144, 182, 0.32)Hover state for sky decorative fill
Token Value Preview Usage decorative-background-mountainrgba(109, 118, 126, 0.55)Mountain-tinted fill for avatars, badges, and illustrations decorative-background-hover-mountainrgba(109, 118, 126, 0.7)Hover state for mountain decorative fill decorative-background-fjordrgba(95, 125, 239, 0.5)Fjord-tinted fill for avatars, badges, and illustrations decorative-background-hover-fjordrgba(95, 125, 239, 0.32)Hover state for fjord decorative fill decorative-background-nordicrgba(26, 150, 122, 0.32)Nordic-tinted fill for avatars, badges, and illustrations decorative-background-hover-nordicrgba(26, 150, 122, 0.2)Hover state for nordic decorative fill decorative-background-aurorargba(100, 146, 16, 0.2)Aurora-tinted fill for avatars, badges, and illustrations decorative-background-hover-aurorargba(100, 146, 16, 0.1)Hover state for aurora decorative fill decorative-background-duskrgba(183, 101, 196, 0.5)Dusk-tinted fill for avatars, badges, and illustrations decorative-background-hover-duskrgba(183, 101, 196, 0.32)Hover state for dusk decorative fill decorative-background-orangergba(225, 90, 7, 0.5)Orange-tinted fill for avatars, badges, and illustrations decorative-background-hover-orangergba(225, 90, 7, 0.32)Hover state for orange decorative fill decorative-background-skyrgba(2, 144, 182, 0.32)Sky-tinted fill for avatars, badges, and illustrations decorative-background-hover-skyrgba(2, 144, 182, 0.2)Hover state for sky decorative fill
Foreground Token Value Preview Usage decorative-foreground-mountain#2D3134Text and icons on a mountain decorative background decorative-foreground-fjord#1234B6Text and icons on a fjord decorative background decorative-foreground-nordic#0D4E40Text and icons on a nordic decorative background decorative-foreground-aurora#344C08Text and icons on an aurora decorative background decorative-foreground-dusk#682C71Text and icons on a dusk decorative background decorative-foreground-orange#762F04Text and icons on an orange decorative background decorative-foreground-sky#014B60Text and icons on a sky decorative background
Token Value Preview Usage decorative-foreground-mountain#D4D7D9Text and icons on a mountain decorative background decorative-foreground-fjord#0D2582Text and icons on a fjord decorative background decorative-foreground-nordic#0A372DText and icons on a nordic decorative background decorative-foreground-aurora#253606Text and icons on an aurora decorative background decorative-foreground-dusk#4A1F50Text and icons on a dusk decorative background decorative-foreground-orange#542203Text and icons on an orange decorative background decorative-foreground-sky#013644Text 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.
Token Value Preview chart-fjord-color-1rgba(95, 125, 239, 0.88)chart-fjord-color-2rgba(95, 125, 239, 0.68)chart-fjord-color-3rgba(95, 125, 239, 0.5)chart-fjord-color-4rgba(95, 125, 239, 0.32)chart-fjord-color-5rgba(95, 125, 239, 0.2)chart-fjord-color-6rgba(95, 125, 239, 0.1)
Token Value Preview chart-fjord-color-1rgba(72, 106, 237, 0.8)chart-fjord-color-2rgba(72, 106, 237, 0.7)chart-fjord-color-3rgba(72, 106, 237, 0.55)chart-fjord-color-4rgba(72, 106, 237, 0.4)chart-fjord-color-5rgba(72, 106, 237, 0.25)chart-fjord-color-6rgba(72, 106, 237, 0.1)
Nordic
Nordic is the secondary series color for data visualization.
Token Value Preview chart-nordic-color-1rgba(26, 150, 122, 0.88)chart-nordic-color-2rgba(26, 150, 122, 0.68)chart-nordic-color-3rgba(26, 150, 122, 0.5)chart-nordic-color-4rgba(26, 150, 122, 0.32)chart-nordic-color-5rgba(26, 150, 122, 0.2)chart-nordic-color-6rgba(26, 150, 122, 0.1)
Token Value Preview chart-nordic-color-1rgba(23, 132, 108, 0.8)chart-nordic-color-2rgba(23, 132, 108, 0.7)chart-nordic-color-3rgba(23, 132, 108, 0.55)chart-nordic-color-4rgba(23, 132, 108, 0.4)chart-nordic-color-5rgba(23, 132, 108, 0.25)chart-nordic-color-6rgba(23, 132, 108, 0.1)
Dusk
Dusk is the tertiary series color for data visualization.
Token Value Preview chart-dusk-color-1rgba(183, 101, 196, 0.88)chart-dusk-color-2rgba(183, 101, 196, 0.68)chart-dusk-color-3rgba(183, 101, 196, 0.5)chart-dusk-color-4rgba(183, 101, 196, 0.32)chart-dusk-color-5rgba(183, 101, 196, 0.2)chart-dusk-color-6rgba(183, 101, 196, 0.1)
Token Value Preview chart-dusk-color-1rgba(173, 78, 187, 0.8)chart-dusk-color-2rgba(173, 78, 187, 0.7)chart-dusk-color-3rgba(173, 78, 187, 0.55)chart-dusk-color-4rgba(173, 78, 187, 0.4)chart-dusk-color-5rgba(173, 78, 187, 0.25)chart-dusk-color-6rgba(173, 78, 187, 0.1)
Aurora
Aurora is the quaternary series color for data visualization.
Token Value Preview chart-aurora-color-1rgba(100, 146, 16, 0.88)chart-aurora-color-2rgba(100, 146, 16, 0.68)chart-aurora-color-3rgba(100, 146, 16, 0.5)chart-aurora-color-4rgba(100, 146, 16, 0.32)chart-aurora-color-5rgba(100, 146, 16, 0.2)chart-aurora-color-6rgba(100, 146, 16, 0.1)
Token Value Preview chart-aurora-color-1rgba(88, 129, 14, 0.8)chart-aurora-color-2rgba(88, 129, 14, 0.7)chart-aurora-color-3rgba(88, 129, 14, 0.55)chart-aurora-color-4rgba(88, 129, 14, 0.4)chart-aurora-color-5rgba(88, 129, 14, 0.25)chart-aurora-color-6rgba(88, 129, 14, 0.1)
Orange
Orange is the quinary series color for data visualization.
Token Value Preview chart-orange-color-1rgba(225, 90, 7, 0.88)chart-orange-color-2rgba(225, 90, 7, 0.68)chart-orange-color-3rgba(225, 90, 7, 0.5)chart-orange-color-4rgba(225, 90, 7, 0.32)chart-orange-color-5rgba(225, 90, 7, 0.2)chart-orange-color-6rgba(225, 90, 7, 0.1)
Token Value Preview chart-orange-color-1rgba(199, 80, 6, 0.8)chart-orange-color-2rgba(199, 80, 6, 0.7)chart-orange-color-3rgba(199, 80, 6, 0.55)chart-orange-color-4rgba(199, 80, 6, 0.4)chart-orange-color-5rgba(199, 80, 6, 0.25)chart-orange-color-6rgba(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
Token Value Preview chart-info-color-1rgba(112, 129, 199, 0.88)chart-info-color-2rgba(112, 129, 199, 0.68)chart-info-color-3rgba(112, 129, 199, 0.5)chart-info-color-4rgba(112, 129, 199, 0.32)chart-info-color-5rgba(112, 129, 199, 0.2)chart-info-color-6rgba(112, 129, 199, 0.1)
Token Value Preview chart-info-color-1rgba(93, 112, 192, 0.8)chart-info-color-2rgba(93, 112, 192, 0.7)chart-info-color-3rgba(93, 112, 192, 0.55)chart-info-color-4rgba(93, 112, 192, 0.4)chart-info-color-5rgba(93, 112, 192, 0.25)chart-info-color-6rgba(93, 112, 192, 0.1)
Success
Token Value Preview chart-success-color-1rgba(28, 152, 74, 0.88)chart-success-color-2rgba(28, 152, 74, 0.68)chart-success-color-3rgba(28, 152, 74, 0.5)chart-success-color-4rgba(28, 152, 74, 0.32)chart-success-color-5rgba(28, 152, 74, 0.2)chart-success-color-6rgba(28, 152, 74, 0.1)
Token Value Preview chart-success-color-1rgba(25, 135, 65, 0.8)chart-success-color-2rgba(25, 135, 65, 0.7)chart-success-color-3rgba(25, 135, 65, 0.55)chart-success-color-4rgba(25, 135, 65, 0.4)chart-success-color-5rgba(25, 135, 65, 0.25)chart-success-color-6rgba(25, 135, 65, 0.1)
Warning
Token Value Preview chart-warning-color-1rgba(175, 123, 0, 0.88)chart-warning-color-2rgba(175, 123, 0, 0.68)chart-warning-color-3rgba(175, 123, 0, 0.5)chart-warning-color-4rgba(175, 123, 0, 0.32)chart-warning-color-5rgba(175, 123, 0, 0.2)chart-warning-color-6rgba(175, 123, 0, 0.1)
Token Value Preview chart-warning-color-1rgba(155, 109, 0, 0.8)chart-warning-color-2rgba(155, 109, 0, 0.7)chart-warning-color-3rgba(155, 109, 0, 0.55)chart-warning-color-4rgba(155, 109, 0, 0.4)chart-warning-color-5rgba(155, 109, 0, 0.25)chart-warning-color-6rgba(155, 109, 0, 0.1)
Error
Token Value Preview chart-error-color-1rgba(244, 61, 92, 0.88)chart-error-color-2rgba(244, 61, 92, 0.68)chart-error-color-3rgba(244, 61, 92, 0.5)chart-error-color-4rgba(244, 61, 92, 0.32)chart-error-color-5rgba(244, 61, 92, 0.2)chart-error-color-6rgba(244, 61, 92, 0.1)
Token Value Preview chart-error-color-1rgba(233, 13, 50, 0.8)chart-error-color-2rgba(233, 13, 50, 0.7)chart-error-color-3rgba(233, 13, 50, 0.55)chart-error-color-4rgba(233, 13, 50, 0.4)chart-error-color-5rgba(233, 13, 50, 0.25)chart-error-color-6rgba(233, 13, 50, 0.1)
Neutral
Token Value Preview chart-neutral-color-1rgba(124, 134, 142, 0.88)chart-neutral-color-2rgba(124, 134, 142, 0.68)chart-neutral-color-3rgba(124, 134, 142, 0.5)chart-neutral-color-4rgba(124, 134, 142, 0.32)chart-neutral-color-5rgba(124, 134, 142, 0.2)chart-neutral-color-6rgba(124, 134, 142, 0.1)
Token Value Preview chart-neutral-color-1rgba(109, 118, 126, 0.8)chart-neutral-color-2rgba(109, 118, 126, 0.7)chart-neutral-color-3rgba(109, 118, 126, 0.55)chart-neutral-color-4rgba(109, 118, 126, 0.4)chart-neutral-color-5rgba(109, 118, 126, 0.25)chart-neutral-color-6rgba(109, 118, 126, 0.1)
Gridlines 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.
Token Value Preview mountain-white#FFFFFFmountain-10#F9FAFAmountain-50#F1F2F3mountain-100#E4E6E8mountain-200#D4D7D9mountain-300#BBC0C4mountain-400#A5ABB1mountain-450#8B949Amountain-500#7C868Emountain-550#6D767Emountain-600#5E666Dmountain-650#52595Fmountain-700#40464Amountain-800#2D3134mountain-900#212426mountain-950#191B1Dmountain-black#111213
Token Value Preview mountain/50rgba(124, 134, 142, 0.1)mountain/100rgba(124, 134, 142, 0.2)mountain/200rgba(124, 134, 142, 0.32)mountain/300rgba(124, 134, 142, 0.5)mountain/400rgba(124, 134, 142, 0.68)mountain/450rgba(124, 134, 142, 0.88)mountain/600rgba(109, 118, 126, 0.8)mountain/650rgba(109, 118, 126, 0.7)mountain/700rgba(109, 118, 126, 0.55)mountain/800rgba(109, 118, 126, 0.4)mountain/900rgba(109, 118, 126, 0.25)mountain/950rgba(109, 118, 126, 0.1)
Fjord Primary decorative color used for charts.
Token Value Preview fjord-50#EFF2FDfjord-100#DFE5FCfjord-200#CCD5FAfjord-300#AEBDF7fjord-400#93A7F4fjord-450#728DF1fjord-500#5F7DEFfjord-550#486AEDfjord-600#2F55EAfjord-650#1742E7fjord-700#1234B6fjord-800#0D2582fjord-900#0A1C61fjord-950#050F33
Token Value Preview fjord/50rgba(95, 125, 239, 0.1)fjord/100rgba(95, 125, 239, 0.2)fjord/200rgba(95, 125, 239, 0.32)fjord/300rgba(95, 125, 239, 0.5)fjord/400rgba(95, 125, 239, 0.68)fjord/450rgba(95, 125, 239, 0.88)fjord/600rgba(72, 106, 237, 0.8)fjord/650rgba(72, 106, 237, 0.7)fjord/700rgba(72, 106, 237, 0.55)fjord/800rgba(72, 106, 237, 0.4)fjord/900rgba(72, 106, 237, 0.25)fjord/950rgba(72, 106, 237, 0.1)
Nordic Primary decorative color used for charts and Atlas AI.
Token Value Preview nordic-50#DAF9F2nordic-100#B4F2E5nordic-200#7FE9D2nordic-300#25D7B0nordic-400#21C09Dnordic-450#1CA587nordic-500#1A967Anordic-550#17846Cnordic-600#14735Enordic-650#116452nordic-700#0D4E40nordic-800#0A372Dnordic-900#072922nordic-950#041511
Token Value Preview nordic/50rgba(26, 150, 122, 0.1)nordic/100rgba(26, 150, 122, 0.2)nordic/200rgba(26, 150, 122, 0.32)nordic/300rgba(26, 150, 122, 0.5)nordic/400rgba(26, 150, 122, 0.68)nordic/450rgba(26, 150, 122, 0.88)nordic/600rgba(23, 132, 108, 0.8)nordic/650rgba(23, 132, 108, 0.7)nordic/700rgba(23, 132, 108, 0.55)nordic/800rgba(23, 132, 108, 0.4)nordic/900rgba(23, 132, 108, 0.25)nordic/950rgba(23, 132, 108, 0.1)
Aurora Primary decorative color used for charts and decorative elements.
Token Value Preview aurora-50#E7F9C6aurora-100#CFF38Daurora-200#ABE938aurora-300#90D217aurora-400#81BC14aurora-450#6EA112aurora-500#649210aurora-550#58810Eaurora-600#4D700Caurora-650#43610Baurora-700#344C08aurora-800#253606aurora-900#1B2804aurora-950#0E1402
Token Value Preview aurora/50rgba(100, 146, 16, 0.1)aurora/100rgba(100, 146, 16, 0.2)aurora/200rgba(100, 146, 16, 0.32)aurora/300rgba(100, 146, 16, 0.5)aurora/400rgba(100, 146, 16, 0.68)aurora/450rgba(100, 146, 16, 0.88)aurora/600rgba(88, 129, 14, 0.8)aurora/650rgba(88, 129, 14, 0.7)aurora/700rgba(88, 129, 14, 0.55)aurora/800rgba(88, 129, 14, 0.4)aurora/900rgba(88, 129, 14, 0.25)aurora/950rgba(88, 129, 14, 0.1)
Dusk Primary decorative color used for charts and decorative elements.
Token Value Preview dusk-50#F8EFF9dusk-100#F1E1F3dusk-200#E8CEECdusk-300#DBB1E1dusk-400#CF97D7dusk-450#C078CBdusk-500#B765C4dusk-550#AD4EBBdusk-600#9940A6dusk-650#853790dusk-700#682C71dusk-800#4A1F50dusk-900#37173Cdusk-950#1C0C1F
Token Value Preview dusk/50rgba(183, 101, 196, 0.1)dusk/100rgba(183, 101, 196, 0.2)dusk/200rgba(183, 101, 196, 0.32)dusk/300rgba(183, 101, 196, 0.5)dusk/400rgba(183, 101, 196, 0.68)dusk/450rgba(183, 101, 196, 0.88)dusk/600rgba(173, 78, 187, 0.8)dusk/650rgba(173, 78, 187, 0.7)dusk/700rgba(173, 78, 187, 0.55)dusk/800rgba(173, 78, 187, 0.4)dusk/900rgba(173, 78, 187, 0.25)dusk/950rgba(173, 78, 187, 0.1)
Sky Secondary decorative color used for badges, avatars, and illustrations.
Token Value Preview sky-50#DBF7FFsky-100#B7EFFEsky-200#84E4FEsky-300#25CFFDsky-400#02B9EAsky-450#029FC9sky-500#0290B6sky-550#017FA1sky-600#016E8Csky-650#01607Asky-700#014B60sky-800#013644sky-900#002832sky-950#00151A
Token Value Preview sky/50rgba(2, 144, 182, 0.1)sky/100rgba(2, 144, 182, 0.2)sky/200rgba(2, 144, 182, 0.32)sky/300rgba(2, 144, 182, 0.5)sky/400rgba(2, 144, 182, 0.68)sky/450rgba(2, 144, 182, 0.88)sky/600rgba(1, 127, 161, 0.8)sky/650rgba(1, 127, 161, 0.7)sky/700rgba(1, 127, 161, 0.55)sky/800rgba(1, 127, 161, 0.4)sky/900rgba(1, 127, 161, 0.25)sky/950rgba(1, 127, 161, 0.1)
Orange Secondary decorative color used for badges, avatars, and illustrations.
Token Value Preview orange-50#FEEFE6orange-100#FDE0CForange-200#FCCDB0orange-300#FBAE7Eorange-400#F98F4Eorange-450#F7640Aorange-500#E15A07orange-550#C75006orange-600#AD4506orange-650#963C05orange-700#762F04orange-800#542203orange-900#3E1902orange-950#210D01
Token Value Preview orange/50rgba(225, 90, 7, 0.1)orange/100rgba(225, 90, 7, 0.2)orange/200rgba(225, 90, 7, 0.32)orange/300rgba(225, 90, 7, 0.5)orange/400rgba(225, 90, 7, 0.68)orange/450rgba(225, 90, 7, 0.88)orange/600rgba(199, 80, 6, 0.8)orange/650rgba(199, 80, 6, 0.7)orange/700rgba(199, 80, 6, 0.55)orange/800rgba(199, 80, 6, 0.4)orange/900rgba(199, 80, 6, 0.25)orange/950rgba(199, 80, 6, 0.1)
Yellow Secondary decorative color used for badges, avatars, and illustrations.
Token Value Preview yellow-50#FFF4A2yellow-100#FFE834yellow-200#F3D700yellow-300#D8BF00yellow-400#C1AB00yellow-450#A69300yellow-500#968500yellow-550#857600yellow-600#736600yellow-650#645900yellow-700#4E4500yellow-800#373100yellow-900#292400yellow-950#151200
Token Value Preview yellow/50rgba(150, 133, 0, 0.1)yellow/100rgba(150, 133, 0, 0.2)yellow/200rgba(150, 133, 0, 0.32)yellow/300rgba(150, 133, 0, 0.5)yellow/400rgba(150, 133, 0, 0.68)yellow/450rgba(150, 133, 0, 0.88)yellow/600rgba(133, 118, 0, 0.8)yellow/650rgba(133, 118, 0, 0.7)yellow/700rgba(133, 118, 0, 0.55)yellow/800rgba(133, 118, 0, 0.4)yellow/900rgba(133, 118, 0, 0.25)yellow/950rgba(133, 118, 0, 0.1)
Pink Secondary decorative color used for badges, avatars, and illustrations.
Token Value Preview pink-50#FDEEF4pink-100#FBDEEApink-200#F9CADDpink-300#F5A9C8pink-400#F28BB4pink-450#ED6199pink-500#E94487pink-550#E11A6Apink-600#C4175Cpink-650#AB1451pink-700#881040pink-800#620B2Epink-900#490823pink-950#280513
Token Value Preview pink/50rgba(233, 68, 135, 0.1)pink/100rgba(233, 68, 135, 0.2)pink/200rgba(233, 68, 135, 0.32)pink/300rgba(233, 68, 135, 0.5)pink/400rgba(233, 68, 135, 0.68)pink/450rgba(233, 68, 135, 0.88)pink/600rgba(225, 26, 106, 0.8)pink/650rgba(225, 26, 106, 0.7)pink/700rgba(225, 26, 106, 0.55)pink/800rgba(225, 26, 106, 0.4)pink/900rgba(225, 26, 106, 0.25)pink/950rgba(225, 26, 106, 0.1)
Gray Used for focus states and secondary decorative elements.
Token Value Preview gray-50#F0F2F9gray-100#E2E5F4gray-200#D0D6EDgray-300#B5BEE2gray-400#9DA9D9gray-450#818FCEgray-500#7081C7gray-550#5D70C0gray-600#4A5FB8gray-650#3F52A3gray-700#32417Fgray-800#232E5Agray-900#1A2242gray-950#0D1122
Token Value Preview gray/50rgba(112, 129, 199, 0.1)gray/100rgba(112, 129, 199, 0.2)gray/200rgba(112, 129, 199, 0.32)gray/300rgba(112, 129, 199, 0.5)gray/400rgba(112, 129, 199, 0.68)gray/450rgba(112, 129, 199, 0.88)gray/600rgba(93, 112, 192, 0.8)gray/650rgba(93, 112, 192, 0.7)gray/700rgba(93, 112, 192, 0.55)gray/800rgba(93, 112, 192, 0.4)gray/900rgba(93, 112, 192, 0.25)gray/950rgba(93, 112, 192, 0.1)
Red Maps to semantic status colors for destructive actions and critical alerts.
Token Value Preview red-50#FEEEF1red-100#FDDEE4red-200#FCCAD2red-300#FAA9B7red-400#F8899Cred-450#F65E78red-500#F43D5Cred-550#E90D32red-600#CB0B2Cred-650#B20A26red-700#8D081Fred-800#660616red-900#4E0411red-950#2C0209
Token Value Preview red/50rgba(244, 61, 92, 0.1)red/100rgba(244, 61, 92, 0.2)red/200rgba(244, 61, 92, 0.32)red/300rgba(244, 61, 92, 0.5)red/400rgba(244, 61, 92, 0.68)red/450rgba(244, 61, 92, 0.88)red/600rgba(233, 13, 50, 0.8)red/650rgba(233, 13, 50, 0.7)red/700rgba(233, 13, 50, 0.55)red/800rgba(233, 13, 50, 0.4)red/900rgba(233, 13, 50, 0.25)red/950rgba(233, 13, 50, 0.1)
Amber Maps to semantic status colors for warnings.
Token Value Preview amber-50#FFF1D0amber-100#FFE3A2amber-200#FFD062amber-300#FCB100amber-400#E19E00amber-450#C18800amber-500#AF7B00amber-550#9B6D00amber-600#865E00amber-650#755200amber-700#5B4000amber-800#412D00amber-900#302200amber-950#181100
Token Value Preview amber/50rgba(175, 123, 0, 0.1)amber/100rgba(175, 123, 0, 0.2)amber/200rgba(175, 123, 0, 0.32)amber/300rgba(175, 123, 0, 0.5)amber/400rgba(175, 123, 0, 0.68)amber/450rgba(175, 123, 0, 0.88)amber/600rgba(155, 109, 0, 0.8)amber/650rgba(155, 109, 0, 0.7)amber/700rgba(155, 109, 0, 0.55)amber/800rgba(155, 109, 0, 0.4)amber/900rgba(155, 109, 0, 0.25)amber/950rgba(155, 109, 0, 0.1)
Green Maps to semantic status colors for success.
Token Value Preview green-50#DDF9E7green-100#BBF3D0green-200#8BEAAEgreen-300#34DA71green-400#24C45Egreen-450#1FA851green-500#1C984Agreen-550#198741green-600#157538green-650#136631green-700#0F5026green-800#0A381Bgreen-900#082A14green-950#04160A
Token Value Preview green/50rgba(28, 152, 74, 0.1)green/100rgba(28, 152, 74, 0.2)green/200rgba(28, 152, 74, 0.32)green/300rgba(28, 152, 74, 0.5)green/400rgba(28, 152, 74, 0.68)green/450rgba(28, 152, 74, 0.88)green/600rgba(25, 135, 65, 0.8)green/650rgba(25, 135, 65, 0.7)green/700rgba(25, 135, 65, 0.55)green/800rgba(25, 135, 65, 0.4)green/900rgba(25, 135, 65, 0.25)green/950rgba(25, 135, 65, 0.1)
Blue Maps to semantic status colors for information.
Token Value Preview blue-50#E6F4FFblue-100#CEEAFFblue-200#AEDCFFblue-300#7CC6FFblue-400#4CB2FFblue-450#0B95FFblue-500#0086EDblue-550#0077D2blue-600#0067B6blue-650#005A9Fblue-700#00477Dblue-800#003259blue-900#002542blue-950#001423
Token Value Preview blue/50rgba(0, 134, 237, 0.1)blue/100rgba(0, 134, 237, 0.2)blue/200rgba(0, 134, 237, 0.32)blue/300rgba(0, 134, 237, 0.5)blue/400rgba(0, 134, 237, 0.68)blue/450rgba(0, 134, 237, 0.88)blue/600rgba(0, 119, 210, 0.8)blue/650rgba(0, 119, 210, 0.7)blue/700rgba(0, 119, 210, 0.55)blue/800rgba(0, 119, 210, 0.4)blue/900rgba(0, 119, 210, 0.25)blue/950rgba(0, 119, 210, 0.1)
