Foundations
Semantic Colors
Functional color tokens that map a role to a visual value. They adapt automatically between light and dark mode while keeping the same token names across themes.
Semantic tokens reference raw primitives and give them a functional meaning. Components only ever consume semantic tokens.
When the theme switches, semantic tokens resolve to different primitives automatically. Components don’t need any manual overrides — the same token name produces the correct color in both light and dark mode.
Surface fill and border tokens are documented on the Surface Elevations page. This page covers content, element, border, illustration, and shadow color tokens.
Content colors
Content tokens are used exclusively for text and icons. They define the color of readable elements in the interface, from high-emphasis headings to disabled labels and semantic status indicators.
Text hierarchy
Five neutral tones that establish reading priority. All derive from neutral primitives and carry no semantic meaning — they communicate importance, not intent.
Aa
content-primary Aa
content-secondary Aa
content-tertiary Aa
content-muted Aa
content-disabled Preview Semantic name Primitive reference
content-primary L light-cool-grey-alpha-900 D global-white-alpha-1000
content-secondary L light-cool-grey-alpha-600 D global-white-alpha-600
content-tertiary L light-cool-grey-alpha-500 D global-white-alpha-500
content-muted L light-cool-grey-alpha-200 D global-white-alpha-150
content-disabled L light-cool-grey-alpha-400 D global-white-alpha-400
content-primary-inverse L global-white-alpha-1000 D light-cool-grey-alpha-900
primary-inverse
A true inverse of primary — white in light mode,
near-black in dark mode. It flips with the theme, unlike
on-dark-primary which stays white in both modes.
Aa
content-primary-inverse Flips with theme. Switch ball, inverted labels.
Aa
content-on-dark-primary Always white (static). Text on permanently dark surfaces.
In light mode both tokens resolve to white and look identical. The
difference shows in dark mode: primary-inverse flips
to dark, while on-dark-primary stays white because
dark-suffix surfaces don’t change with the theme.
Semantic intents
Color-coded content for communicating meaning: status messages, links, labels, and indicators. Each intent has a base variant for content on plain surfaces and a contrast variant for content on element fills (soft / softer backgrounds).
Neutral vs secondary. Although visually similar,
content-neutral belongs to the intent family — use it
when a component appears alongside other intents (brand, critical, info,
warning) so that at equal desaturation all colours carry the same visual
weight. content-secondary is for standalone plain content
where you need to set text priority (primary → secondary → tertiary).
Aa
content-brand Aa
content-critical Aa
content-info Aa
content-warning Aa
content-neutral Aa
content-accent-orange Aa
content-accent-violet Base tokens
Preview Semantic name Primitive reference
content-brand L light-green-600 D dark-green-600
content-critical L light-red-600 D dark-red-600
content-info L light-blue-600 D dark-blue-600
content-warning L light-yellow-600 D dark-yellow-600
content-neutral L light-cool-grey-600 D dark-cool-grey-600
content-accent-orange L light-orange-600 D dark-orange-600
content-accent-violet L light-violet-600 D dark-violet-600
Contrast tokens
Preview Semantic name Primitive reference
content-brand-contrast L light-green-700 D dark-green-700
content-critical-contrast L light-red-700 D dark-red-700
content-info-contrast L light-blue-700 D dark-blue-700
content-warning-contrast L light-yellow-700 D dark-yellow-700
content-neutral-contrast L light-cool-grey-700 D dark-cool-grey-700
content-accent-orange-contrast L light-orange-700 D dark-orange-700
content-accent-violet-contrast L light-violet-700 D dark-violet-700
Base vs contrast
Aa
Base — content on plain surface
Aa
Contrast — content on element soft / softer fill
Base tokens are for content sitting directly on a surface (page, raised, etc.) without any element fill behind them. Contrast tokens are paired with element fills — the soft or softer background combined with the surface creates a darker composite, so the contrast variant shifts the content color for better readability.
Emphasis
A special brand token (neon green) reserved for handwritten-style decorations — underlines beneath headlines, circles, waves, and micro-illustrations that add a visual flourish near text. Not for regular text or icons: the color does not meet text accessibility contrast ratios.
Aa
content-emphasis Preview Semantic name Primitive reference
content-emphasis L light-green-300 D dark-green-600
Button content
Dedicated tokens for text inside filled buttons. Each intent has a specific label color optimized for readability against its bold fill.
Preview Semantic name Primitive reference
content-button-brand-primary L light-green-900 D dark-green-25
content-button-critical-primary L global-white-alpha-1000 D dark-red-25
content-button-info-primary L light-blue-900 D dark-blue-25
content-button-warning-primary L light-yellow-900 D dark-yellow-25
content-button-accent-orange-primary L light-orange-900 D dark-orange-25
content-button-accent-violet-primary L light-violet-900 D dark-violet-25
on-bold
For text and icons on surfaces with a Bold suffix
(e.g. surface-brand-bold). Bold surfaces have a saturated
fill that stays the same across themes. These tokens use black alphas
to stay readable on bright backgrounds.
Aa
content-on-bold-primary Aa
content-on-bold-secondary Aa
content-on-bold-tertiary Aa
content-on-bold-muted Aa
content-on-bold-disabled Preview Semantic name Primitive reference
content-on-bold-primary L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-bold-secondary L light-cool-grey-alpha-600 D light-cool-grey-alpha-600
content-on-bold-tertiary L light-cool-grey-alpha-500 D light-cool-grey-alpha-500
content-on-bold-muted L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
content-on-bold-disabled L light-cool-grey-alpha-400 D light-cool-grey-alpha-400
content-on-bold-emphasis L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-bold-neutral-contrast L light-cool-grey-900 D light-cool-grey-900
on-dark
For text and icons on surfaces with a Dark suffix
(e.g. surface-brand-dark, modeless-neutral-dark).
Dark surfaces are permanently dark regardless of the active theme.
These tokens use white alphas to stay readable on dark fills.
The “Dark” suffix is a general naming convention —
any token with -dark in its name is static
across themes and does not invert when switching modes.
Aa
content-on-dark-primary Aa
content-on-dark-secondary Aa
content-on-dark-tertiary Aa
content-on-dark-muted Aa
content-on-dark-disabled Preview Semantic name Primitive reference
content-on-dark-primary L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-secondary L global-white-alpha-600 D global-white-alpha-600
content-on-dark-tertiary L global-white-alpha-500 D global-white-alpha-500
content-on-dark-muted L global-white-alpha-150 D global-white-alpha-150
content-on-dark-disabled L global-white-alpha-400 D global-white-alpha-400
content-on-dark-primary-inverse L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-dark-brand L dark-green-600 D dark-green-600
content-on-dark-brand-contrast L dark-green-700 D dark-green-700
content-on-dark-critical L dark-red-600 D dark-red-600
content-on-dark-critical-contrast L dark-red-700 D dark-red-700
content-on-dark-info L dark-blue-600 D dark-blue-600
content-on-dark-info-contrast L dark-blue-700 D dark-blue-700
content-on-dark-warning L dark-yellow-600 D dark-yellow-600
content-on-dark-warning-contrast L dark-yellow-700 D dark-yellow-700
content-on-dark-neutral L global-white-alpha-600 D global-white-alpha-600
content-on-dark-neutral-contrast L global-white-alpha-700 D global-white-alpha-700
content-on-dark-accent-orange L dark-orange-600 D dark-orange-600
content-on-dark-accent-orange-contrast L dark-orange-700 D dark-orange-700
content-on-dark-accent-violet L dark-violet-600 D dark-violet-600
content-on-dark-accent-violet-contrast L dark-violet-700 D dark-violet-700
content-on-dark-button-brand-primary L dark-green-25 D dark-green-25
content-on-dark-button-critical-primary L dark-red-25 D dark-red-25
content-on-dark-button-info-primary L dark-blue-25 D dark-blue-25
content-on-dark-button-warning-primary L dark-yellow-25 D dark-yellow-25
content-on-dark-button-accent-orange-primary L dark-orange-25 D dark-orange-25
content-on-dark-button-accent-violet-primary L dark-violet-25 D dark-violet-25
Content interaction states (hovered / pressed) 34
Preview Semantic name Primitive reference
content-primary-hovered L light-cool-grey-alpha-600 D global-white-alpha-600
content-primary-pressed L light-cool-grey-alpha-500 D global-white-alpha-500
content-secondary-hovered L light-cool-grey-alpha-700 D global-white-alpha-700
content-secondary-pressed L light-cool-grey-alpha-800 D global-white-alpha-800
content-tertiary-hovered L light-cool-grey-alpha-600 D global-white-alpha-600
content-tertiary-pressed L light-cool-grey-alpha-700 D global-white-alpha-700
content-brand-hovered L light-green-700 D dark-green-700
content-brand-pressed L light-green-800 D dark-green-800
content-brand-contrast-hovered L light-green-800 D dark-green-800
content-brand-contrast-pressed L light-green-900 D global-white-alpha-1000
content-critical-hovered L light-red-700 D dark-red-700
content-critical-pressed L light-red-800 D dark-red-800
content-critical-contrast-hovered L light-red-800 D dark-red-800
content-critical-contrast-pressed L light-red-900 D global-white-alpha-1000
content-info-hovered L light-blue-700 D dark-blue-700
content-info-pressed L light-blue-800 D dark-blue-800
content-info-contrast-hovered L light-blue-800 D dark-blue-800
content-info-contrast-pressed L light-blue-900 D global-white-alpha-1000
content-warning-hovered L light-yellow-700 D dark-yellow-700
content-warning-pressed L light-yellow-800 D dark-yellow-800
content-warning-contrast-hovered L light-yellow-800 D dark-yellow-800
content-warning-contrast-pressed L light-yellow-900 D global-white-alpha-1000
content-neutral-hovered L light-cool-grey-700 D dark-cool-grey-700
content-neutral-pressed L light-cool-grey-800 D dark-cool-grey-800
content-neutral-contrast-hovered L light-cool-grey-800 D dark-cool-grey-800
content-neutral-contrast-pressed L light-cool-grey-900 D global-white-alpha-1000
content-accent-orange-hovered L light-orange-700 D dark-orange-700
content-accent-orange-pressed L light-orange-800 D dark-orange-800
content-accent-orange-contrast-hovered L light-orange-800 D dark-orange-800
content-accent-orange-contrast-pressed L light-orange-900 D global-white-alpha-1000
content-accent-violet-hovered L light-violet-700 D dark-violet-700
content-accent-violet-pressed L light-violet-800 D dark-violet-800
content-accent-violet-contrast-hovered L light-violet-800 D dark-violet-800
content-accent-violet-contrast-pressed L light-violet-900 D global-white-alpha-1000
on-bold interaction states 6
Preview Semantic name Primitive reference
content-on-bold-primary-hovered L light-cool-grey-alpha-600 D light-cool-grey-alpha-600
content-on-bold-primary-pressed L light-cool-grey-alpha-500 D light-cool-grey-alpha-500
content-on-bold-secondary-hovered L light-cool-grey-alpha-700 D light-cool-grey-alpha-700
content-on-bold-secondary-pressed L light-cool-grey-alpha-800 D light-cool-grey-alpha-800
content-on-bold-tertiary-hovered L light-cool-grey-alpha-600 D light-cool-grey-alpha-600
content-on-bold-tertiary-pressed L light-cool-grey-alpha-700 D light-cool-grey-alpha-700
on-dark interaction states 34
Preview Semantic name Primitive reference
content-on-dark-primary-hovered L global-white-alpha-600 D global-white-alpha-600
content-on-dark-primary-pressed L global-white-alpha-500 D global-white-alpha-500
content-on-dark-secondary-hovered L global-white-alpha-700 D global-white-alpha-700
content-on-dark-secondary-pressed L global-white-alpha-800 D global-white-alpha-800
content-on-dark-tertiary-hovered L global-white-alpha-600 D global-white-alpha-600
content-on-dark-tertiary-pressed L global-white-alpha-700 D global-white-alpha-700
content-on-dark-brand-hovered L dark-green-700 D dark-green-700
content-on-dark-brand-pressed L dark-green-800 D dark-green-800
content-on-dark-brand-contrast-hovered L dark-green-800 D dark-green-800
content-on-dark-brand-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-critical-hovered L dark-red-700 D dark-red-700
content-on-dark-critical-pressed L dark-red-800 D dark-red-800
content-on-dark-critical-contrast-hovered L dark-red-800 D dark-red-800
content-on-dark-critical-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-info-hovered L dark-blue-700 D dark-blue-700
content-on-dark-info-pressed L dark-blue-800 D dark-blue-800
content-on-dark-info-contrast-hovered L dark-blue-800 D dark-blue-800
content-on-dark-info-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-warning-hovered L dark-yellow-700 D dark-yellow-700
content-on-dark-warning-pressed L dark-yellow-800 D dark-yellow-800
content-on-dark-warning-contrast-hovered L dark-yellow-800 D dark-yellow-800
content-on-dark-warning-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-neutral-hovered L global-white-alpha-700 D global-white-alpha-700
content-on-dark-neutral-pressed L global-white-alpha-800 D global-white-alpha-800
content-on-dark-neutral-contrast-hovered L global-white-alpha-800 D global-white-alpha-800
content-on-dark-neutral-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-accent-orange-hovered L dark-orange-700 D dark-orange-700
content-on-dark-accent-orange-pressed L dark-orange-800 D dark-orange-800
content-on-dark-accent-orange-contrast-hovered L dark-orange-800 D dark-orange-800
content-on-dark-accent-orange-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-accent-violet-hovered L dark-violet-700 D dark-violet-700
content-on-dark-accent-violet-pressed L dark-violet-800 D dark-violet-800
content-on-dark-accent-violet-contrast-hovered L dark-violet-800 D dark-violet-800
content-on-dark-accent-violet-contrast-pressed L global-white-alpha-1000 D global-white-alpha-1000
Element fill
Background colors for UI elements — everything that lives on top of a surface. Buttons, badges, tags, inputs, toggles, indicators, and other components. Each intent comes in three emphasis levels that control visual prominence.
Emphasis levels
Bold
Primary prominence. Saturated fills for primary buttons, selected states, and high-emphasis indicators.
Soft
Secondary prominence. Translucent fills for secondary buttons, badges, tags, and chips. The most commonly used level across components. No matching border — use without a border.
Softer
Tertiary prominence. Subtle fills for molecule-level components where soft would compete with the atomic elements inside — alert banners, segmented control backgrounds. Always comes with a matching border.
Bold
fill-element-brand-bold fill-element-critical-bold fill-element-info-bold fill-element-warning-bold fill-element-neutral-bold fill-element-accent-orange-bold fill-element-accent-violet-bold Soft
fill-element-brand-soft fill-element-critical-soft fill-element-info-soft fill-element-warning-soft fill-element-neutral-soft fill-element-accent-orange-soft fill-element-accent-violet-soft Softer
fill-element-brand-softer fill-element-critical-softer fill-element-info-softer fill-element-warning-softer fill-element-neutral-softer fill-element-accent-orange-softer fill-element-accent-violet-softer Preview Semantic name Primitive reference
fill-element-brand-bold L light-green-300 D dark-green-600
fill-element-brand-soft L light-green-alpha-100 D dark-green-alpha-100
fill-element-brand-softer L light-green-alpha-75 D dark-green-alpha-50
fill-element-critical-bold L light-red-600 D dark-red-600
fill-element-critical-soft L light-red-alpha-100 D dark-red-alpha-100
fill-element-critical-softer L light-red-alpha-75 D dark-red-alpha-50
fill-element-info-bold L light-blue-300 D dark-blue-600
fill-element-info-soft L light-blue-alpha-100 D dark-blue-alpha-100
fill-element-info-softer L light-blue-alpha-75 D dark-blue-alpha-50
fill-element-warning-bold L light-yellow-300 D dark-yellow-600
fill-element-warning-soft L light-yellow-alpha-100 D dark-yellow-alpha-100
fill-element-warning-softer L light-yellow-alpha-75 D dark-yellow-alpha-50
fill-element-neutral-bold L light-cool-grey-300 D dark-cool-grey-600
fill-element-neutral-soft L light-cool-grey-alpha-100 D global-white-alpha-100
fill-element-neutral-softer L light-cool-grey-alpha-75 D global-white-alpha-50
fill-element-accent-orange-bold L light-orange-300 D dark-orange-600
fill-element-accent-orange-soft L light-orange-alpha-100 D dark-orange-alpha-100
fill-element-accent-orange-softer L light-orange-alpha-75 D dark-orange-alpha-50
fill-element-accent-violet-bold L light-violet-300 D dark-violet-600
fill-element-accent-violet-soft L light-violet-alpha-100 D dark-violet-alpha-100
fill-element-accent-violet-softer L light-violet-alpha-75 D dark-violet-alpha-50
Bundle rule
If a fill token has a matching border with the same name, use them as a pair. If no matching border exists, don’t add one.
Do
Pair fill-element-brand-softer with
border-element-brand-softer — softer always
has a matching border.
Don’t
Add a border to fill-element-brand-soft. Soft has
no matching border token — the element should be borderless.
State tokens
Non-intent fills for generic element states — form controls, selected indicators, and special interactive patterns.
contrast
Darkest neutral fill (nearly black in light, white in dark). Used for neutral primary buttons.
elevated
Selected element on grey surfaces (segmented controls, tabs). Also for slider handles and floating secondary buttons.
ghost-selected
Selected state for ghost elements (no default background). Best on white surfaces like modeless or fixed.
field / field-selected
Form controls: input, checkbox, radio, switch backgrounds and their selected / disabled states.
Preview Semantic name Primitive reference
fill-element-contrast L light-cool-grey-900 D global-white-alpha-1000
fill-element-elevated L global-white-alpha-1000 D dark-cool-grey-100
fill-element-ghost-selected L light-cool-grey-alpha-50 D global-white-alpha-25
fill-element-field L light-cool-grey-alpha-50 D global-white-alpha-25
fill-element-field-disabled L light-cool-grey-alpha-25 D global-black-alpha-150
fill-element-field-selected L light-green-600 D dark-green-600
fill-element-field-selected-disabled L light-green-alpha-150 D dark-green-alpha-150
fill-element-bold-disabled L light-cool-grey-alpha-150 D global-white-alpha-150
fill-element-soft-disabled L light-cool-grey-alpha-50 D global-white-alpha-50
on-bold
Element fills for use on bold-suffix surfaces.
Preview Semantic name Primitive reference
fill-element-on-bold-contrast L light-cool-grey-900 D dark-cool-grey-50
fill-element-on-bold-contrast-disabled L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
fill-element-on-bold-neutral-soft L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
fill-element-on-bold-soft-disabled L light-cool-grey-alpha-75 D light-cool-grey-alpha-75
on-dark
Element fills for use on dark-suffix surfaces. Mirrors the full set of base fills with dark-appropriate primitive references.
Preview Semantic name Primitive reference
fill-element-on-dark-brand-bold L dark-green-600 D dark-green-600
fill-element-on-dark-brand-soft L dark-green-alpha-100 D dark-green-alpha-100
fill-element-on-dark-brand-softer L dark-green-alpha-50 D dark-green-alpha-50
fill-element-on-dark-critical-bold L dark-red-600 D dark-red-600
fill-element-on-dark-critical-soft L dark-red-alpha-100 D dark-red-alpha-100
fill-element-on-dark-critical-softer L dark-red-alpha-50 D dark-red-alpha-50
fill-element-on-dark-info-bold L dark-blue-600 D dark-blue-600
fill-element-on-dark-info-soft L dark-blue-alpha-100 D dark-blue-alpha-100
fill-element-on-dark-info-softer L dark-blue-alpha-50 D dark-blue-alpha-50
fill-element-on-dark-warning-bold L dark-yellow-600 D dark-yellow-600
fill-element-on-dark-warning-soft L dark-yellow-alpha-100 D dark-yellow-alpha-100
fill-element-on-dark-warning-softer L dark-yellow-alpha-50 D dark-yellow-alpha-50
fill-element-on-dark-neutral-bold L dark-cool-grey-600 D dark-cool-grey-600
fill-element-on-dark-neutral-soft L global-white-alpha-100 D global-white-alpha-100
fill-element-on-dark-neutral-softer L global-white-alpha-50 D global-white-alpha-50
fill-element-on-dark-accent-orange-bold L dark-orange-600 D dark-orange-600
fill-element-on-dark-accent-orange-soft L dark-orange-alpha-100 D dark-orange-alpha-100
fill-element-on-dark-accent-orange-softer L dark-orange-alpha-50 D dark-orange-alpha-50
fill-element-on-dark-accent-violet-bold L dark-violet-600 D dark-violet-600
fill-element-on-dark-accent-violet-soft L dark-violet-alpha-100 D dark-violet-alpha-100
fill-element-on-dark-accent-violet-softer L dark-violet-alpha-50 D dark-violet-alpha-50
fill-element-on-dark-contrast L global-white-alpha-1000 D global-white-alpha-1000
fill-element-on-dark-field L global-white-alpha-25 D global-white-alpha-25
fill-element-on-dark-field-disabled L global-black-alpha-150 D global-black-alpha-150
fill-element-on-dark-field-selected L dark-green-600 D dark-green-600
fill-element-on-dark-field-selected-disabled L dark-green-alpha-150 D dark-green-alpha-150
fill-element-on-dark-bold-disabled L global-white-alpha-150 D global-white-alpha-150
fill-element-on-dark-soft-disabled L global-white-alpha-50 D global-white-alpha-50
Element fill interaction states 40
Preview Semantic name Primitive reference
fill-element-brand-bold-hovered L light-green-400 D dark-green-700
fill-element-brand-bold-pressed L light-green-400 D dark-green-700
fill-element-brand-soft-hovered L light-green-alpha-150 D dark-green-alpha-150
fill-element-brand-soft-pressed L light-green-alpha-150 D dark-green-alpha-150
fill-element-critical-bold-hovered L light-red-700 D dark-red-700
fill-element-critical-bold-pressed L light-red-700 D dark-red-700
fill-element-critical-soft-hovered L light-red-alpha-150 D dark-red-alpha-150
fill-element-critical-soft-pressed L light-red-alpha-150 D dark-red-alpha-150
fill-element-info-bold-hovered L light-blue-400 D dark-blue-700
fill-element-info-bold-pressed L light-blue-400 D dark-blue-700
fill-element-info-soft-hovered L light-blue-alpha-150 D dark-blue-alpha-150
fill-element-info-soft-pressed L light-blue-alpha-150 D dark-blue-alpha-150
fill-element-warning-bold-hovered L light-yellow-400 D dark-yellow-700
fill-element-warning-bold-pressed L light-yellow-400 D dark-yellow-700
fill-element-warning-soft-hovered L light-yellow-alpha-150 D dark-yellow-alpha-150
fill-element-warning-soft-pressed L light-yellow-alpha-150 D dark-yellow-alpha-150
fill-element-neutral-bold-hovered L light-cool-grey-400 D dark-cool-grey-700
fill-element-neutral-bold-pressed L light-cool-grey-400 D dark-cool-grey-700
fill-element-neutral-soft-hovered L light-cool-grey-alpha-150 D global-white-alpha-150
fill-element-neutral-soft-pressed L light-cool-grey-alpha-150 D global-white-alpha-150
fill-element-accent-orange-bold-hovered L light-orange-400 D dark-orange-700
fill-element-accent-orange-bold-pressed L light-orange-400 D dark-orange-700
fill-element-accent-orange-soft-hovered L light-orange-alpha-150 D dark-orange-alpha-150
fill-element-accent-orange-soft-pressed L light-orange-alpha-150 D dark-orange-alpha-150
fill-element-accent-violet-bold-hovered L light-violet-400 D dark-violet-700
fill-element-accent-violet-bold-pressed L light-violet-400 D dark-violet-700
fill-element-accent-violet-soft-hovered L light-violet-alpha-150 D dark-violet-alpha-150
fill-element-accent-violet-soft-pressed L light-violet-alpha-150 D dark-violet-alpha-150
fill-element-contrast-hovered L light-cool-grey-800 D global-white-alpha-800
fill-element-contrast-pressed L light-cool-grey-800 D global-white-alpha-800
fill-element-elevated-hovered L light-cool-grey-25 D dark-cool-grey-150
fill-element-elevated-pressed L light-cool-grey-25 D dark-cool-grey-150
fill-element-ghost-hovered L light-cool-grey-alpha-75 D global-white-alpha-50
fill-element-ghost-pressed L light-cool-grey-alpha-50 D global-white-alpha-25
fill-element-field-hovered L light-cool-grey-alpha-25 D global-white-alpha-25
fill-element-field-selected-hovered L light-green-700 D dark-green-700
fill-element-on-bold-contrast-hovered L light-cool-grey-800 D dark-cool-grey-75
fill-element-on-bold-contrast-pressed L light-cool-grey-800 D dark-cool-grey-75
fill-element-on-bold-neutral-soft-hovered L light-cool-grey-alpha-200 D light-cool-grey-alpha-200
fill-element-on-bold-neutral-soft-pressed L light-cool-grey-alpha-200 D light-cool-grey-alpha-200
on-dark fill interaction states 32
Preview Semantic name Primitive reference
fill-element-on-dark-brand-bold-hovered L dark-green-700 D dark-green-700
fill-element-on-dark-brand-bold-pressed L dark-green-700 D dark-green-700
fill-element-on-dark-brand-soft-hovered L dark-green-alpha-150 D dark-green-alpha-150
fill-element-on-dark-brand-soft-pressed L dark-green-alpha-150 D dark-green-alpha-150
fill-element-on-dark-critical-bold-hovered L dark-red-700 D dark-red-700
fill-element-on-dark-critical-bold-pressed L dark-red-700 D dark-red-700
fill-element-on-dark-critical-soft-hovered L dark-red-alpha-150 D dark-red-alpha-150
fill-element-on-dark-critical-soft-pressed L dark-red-alpha-150 D dark-red-alpha-150
fill-element-on-dark-info-bold-hovered L dark-blue-700 D dark-blue-700
fill-element-on-dark-info-bold-pressed L dark-blue-700 D dark-blue-700
fill-element-on-dark-info-soft-hovered L dark-blue-alpha-150 D dark-blue-alpha-150
fill-element-on-dark-info-soft-pressed L dark-blue-alpha-150 D dark-blue-alpha-150
fill-element-on-dark-warning-bold-hovered L dark-yellow-700 D dark-yellow-700
fill-element-on-dark-warning-bold-pressed L dark-yellow-700 D dark-yellow-700
fill-element-on-dark-warning-soft-hovered L dark-yellow-alpha-150 D dark-yellow-alpha-150
fill-element-on-dark-warning-soft-pressed L dark-yellow-alpha-150 D dark-yellow-alpha-150
fill-element-on-dark-neutral-bold-hovered L dark-cool-grey-700 D dark-cool-grey-700
fill-element-on-dark-neutral-bold-pressed L dark-cool-grey-700 D dark-cool-grey-700
fill-element-on-dark-neutral-soft-hovered L global-white-alpha-150 D global-white-alpha-150
fill-element-on-dark-neutral-soft-pressed L global-white-alpha-150 D global-white-alpha-150
fill-element-on-dark-accent-orange-bold-hovered L dark-orange-700 D dark-orange-700
fill-element-on-dark-accent-orange-bold-pressed L dark-orange-700 D dark-orange-700
fill-element-on-dark-accent-orange-soft-hovered L dark-orange-alpha-150 D dark-orange-alpha-150
fill-element-on-dark-accent-orange-soft-pressed L dark-orange-alpha-150 D dark-orange-alpha-150
fill-element-on-dark-accent-violet-bold-hovered L dark-violet-700 D dark-violet-700
fill-element-on-dark-accent-violet-bold-pressed L dark-violet-700 D dark-violet-700
fill-element-on-dark-accent-violet-soft-hovered L dark-violet-alpha-150 D dark-violet-alpha-150
fill-element-on-dark-accent-violet-soft-pressed L dark-violet-alpha-150 D dark-violet-alpha-150
fill-element-on-dark-contrast-hovered L global-white-alpha-800 D global-white-alpha-800
fill-element-on-dark-contrast-pressed L global-white-alpha-800 D global-white-alpha-800
fill-element-on-dark-field-hovered L global-white-alpha-25 D global-white-alpha-25
fill-element-on-dark-field-selected-hovered L dark-green-700 D dark-green-700
Element border
Border tokens for UI elements. The softer variants pair with their matching fill-softer tokens as a bundle. Field borders handle form control states.
Softer borders
Paired with fill-softer tokens. Each intent’s softer fill has a matching softer border — always apply them together.
Preview Semantic name Primitive reference
border-element-brand-softer L light-green-alpha-75 D dark-green-alpha-100
border-element-critical-softer L light-red-alpha-75 D dark-red-alpha-100
border-element-info-softer L light-blue-alpha-75 D dark-blue-alpha-100
border-element-warning-softer L light-yellow-alpha-75 D dark-yellow-alpha-100
border-element-neutral-softer L light-cool-grey-alpha-75 D global-white-alpha-100
border-element-neutral-softer-alt L light-cool-grey-alpha-25 D global-white-alpha-25
border-element-accent-orange-softer L light-orange-alpha-75 D light-orange-alpha-100
border-element-accent-violet-softer L light-violet-alpha-75 D dark-violet-alpha-100
Field states
Borders for form inputs, checkboxes, radios, and other form controls across their visual states.
Preview Semantic name Primitive reference
border-element-field L light-cool-grey-alpha-200 D global-white-alpha-150
border-element-field-hovered L light-cool-grey-alpha-500 D global-white-alpha-500
border-element-field-focused L light-cool-grey-alpha-500 D global-white-alpha-500
border-element-field-error L light-red-500 D dark-red-500
border-element-field-error-hovered L light-red-600 D dark-red-600
border-element-field-disabled L light-cool-grey-alpha-50 D global-white-alpha-50
border-element-focus-ring L light-blue-alpha-200 D dark-blue-alpha-400
on-dark
Preview Semantic name Primitive reference
border-element-on-dark-brand-softer L dark-green-alpha-100 D dark-green-alpha-100
border-element-on-dark-critical-softer L dark-red-alpha-100 D dark-red-alpha-100
border-element-on-dark-info-softer L dark-blue-alpha-100 D dark-blue-alpha-100
border-element-on-dark-warning-softer L dark-yellow-alpha-100 D dark-yellow-alpha-100
border-element-on-dark-neutral-softer L global-white-alpha-100 D global-white-alpha-100
border-element-on-dark-neutral-softer-alt L global-white-alpha-25 D global-white-alpha-25
border-element-on-dark-accent-orange-softer L dark-orange-alpha-100 D dark-orange-alpha-100
border-element-on-dark-accent-violet-softer L dark-violet-alpha-100 D dark-violet-alpha-100
border-element-on-dark-field L global-white-alpha-150 D global-white-alpha-150
border-element-on-dark-field-hovered L global-white-alpha-400 D global-white-alpha-400
border-element-on-dark-field-focused L global-white-alpha-400 D global-white-alpha-400
border-element-on-dark-field-error L dark-red-500 D dark-red-500
border-element-on-dark-field-error-hovered L dark-red-600 D dark-red-600
border-element-on-dark-field-disabled L global-white-alpha-50 D global-white-alpha-50
Border / dividers
Standalone border tokens for dividers, separators, and lines that are not part of an element or surface bundle.
border-neutral border-neutral-dark border-brand border-critical border-info border-warning neutral
The most common divider / separator in the product. Use for section dividers, table rows, list separators.
neutral-dark
A more prominent separator, static across themes.
Pairs with modeless-neutral-dark.
Follows the “Dark” suffix convention.
Preview Semantic name Primitive reference
border-neutral L light-cool-grey-alpha-100 D global-white-alpha-75
border-neutral-dark L light-cool-grey-900 D dark-cool-grey-75
border-brand L light-green-500 D dark-green-500
border-critical L light-red-500 D dark-red-500
border-info L light-blue-500 D dark-blue-500
border-warning L light-yellow-500 D dark-yellow-500
on-bold and on-dark variants
Preview Semantic name Primitive reference
border-on-bold-neutral L light-cool-grey-alpha-100 D light-cool-grey-alpha-100
border-on-dark-brand L dark-green-500 D dark-green-500
border-on-dark-critical L dark-red-500 D dark-red-500
border-on-dark-info L dark-blue-500 D dark-blue-500
border-on-dark-neutral L global-white-alpha-75 D global-white-alpha-75
border-on-dark-warning L dark-yellow-500 D dark-yellow-500
Illustration
Color tokens exclusively for SVG illustrations in the product — onboarding visuals, empty states, error pages. Not for icons. Fill and border are always used as a pair.
Illustration fills
Preview Semantic name Primitive reference
illustration-fill-brand L light-green-100 D dark-green-50
illustration-fill-critical L light-red-100 D dark-red-50
illustration-fill-info L light-blue-100 D dark-blue-50
illustration-fill-warning L light-yellow-100 D dark-yellow-50
illustration-fill-emphasis L light-green-300 D dark-green-600
illustration-fill-emphasis-alt L global-white-alpha-1000 D global-white-alpha-1000
illustration-fill-on-bold-brand L light-green-200 D dark-green-700
illustration-fill-on-dark-brand L light-green-800 D dark-green-100
Illustration borders
Preview Semantic name Primitive reference
illustration-border-brand L light-green-700 D dark-green-600
illustration-border-critical L light-red-700 D dark-red-600
illustration-border-info L light-blue-700 D dark-blue-600
illustration-border-warning L light-yellow-700 D dark-yellow-600
illustration-border-emphasis L light-cool-grey-900 D light-cool-grey-900
illustration-border-emphasis-alt L light-cool-grey-900 D light-cool-grey-900
illustration-border-on-bold-brand L light-green-800 D dark-green-100
illustration-border-on-dark-brand L light-green-300 D dark-green-600
Shadow colors
Low-level color tokens that feed into the composite shadow values
in effects.css. Each shadow has two layers: a
key shadow (directional, stronger) and an
ambient shadow (diffuse, softer). In light mode
shadows are blue-tinted; in dark mode they shift to pure black.
Preview Semantic name Primitive reference
shadow-ambient-action L #00284705 D #0000000A
shadow-ambient-action-hover L #0028470F D #0000001F
shadow-ambient-elevated L #0028470F D #0000001F
shadow-ambient-fixed L #0028470A D #00000014
shadow-ambient-modal L #0028470F D #0000001F
shadow-ambient-modeless L #0028470A D #00000014
shadow-key-action L #0028470A D #00000014
shadow-key-action-hover L #00284714 D #00000029
shadow-key-elevated L #00284714 D #00000029
shadow-key-fixed L #0028470F D #0000001F
shadow-key-modal L #00284714 D #00000029
shadow-key-modeless L #0028470F D #0000001F
Token reference
Full flat list of all semantic color tokens documented on this page. Surface tokens are on the Surface Elevations page.
Content
Preview Semantic name Primitive reference
content-primary L light-cool-grey-alpha-900 D global-white-alpha-1000
content-secondary L light-cool-grey-alpha-600 D global-white-alpha-600
content-tertiary L light-cool-grey-alpha-500 D global-white-alpha-500
content-muted L light-cool-grey-alpha-200 D global-white-alpha-150
content-disabled L light-cool-grey-alpha-400 D global-white-alpha-400
content-primary-inverse L global-white-alpha-1000 D light-cool-grey-alpha-900
content-brand L light-green-600 D dark-green-600
content-critical L light-red-600 D dark-red-600
content-info L light-blue-600 D dark-blue-600
content-warning L light-yellow-600 D dark-yellow-600
content-neutral L light-cool-grey-600 D dark-cool-grey-600
content-accent-orange L light-orange-600 D dark-orange-600
content-accent-violet L light-violet-600 D dark-violet-600
content-brand-contrast L light-green-700 D dark-green-700
content-critical-contrast L light-red-700 D dark-red-700
content-info-contrast L light-blue-700 D dark-blue-700
content-warning-contrast L light-yellow-700 D dark-yellow-700
content-neutral-contrast L light-cool-grey-700 D dark-cool-grey-700
content-accent-orange-contrast L light-orange-700 D dark-orange-700
content-accent-violet-contrast L light-violet-700 D dark-violet-700
content-emphasis L light-green-300 D dark-green-600
content-button-brand-primary L light-green-900 D dark-green-25
content-button-critical-primary L global-white-alpha-1000 D dark-red-25
content-button-info-primary L light-blue-900 D dark-blue-25
content-button-warning-primary L light-yellow-900 D dark-yellow-25
content-button-accent-orange-primary L light-orange-900 D dark-orange-25
content-button-accent-violet-primary L light-violet-900 D dark-violet-25
content-on-bold-primary L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-bold-secondary L light-cool-grey-alpha-600 D light-cool-grey-alpha-600
content-on-bold-tertiary L light-cool-grey-alpha-500 D light-cool-grey-alpha-500
content-on-bold-muted L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
content-on-bold-disabled L light-cool-grey-alpha-400 D light-cool-grey-alpha-400
content-on-bold-emphasis L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-bold-neutral-contrast L light-cool-grey-900 D light-cool-grey-900
content-on-dark-primary L global-white-alpha-1000 D global-white-alpha-1000
content-on-dark-secondary L global-white-alpha-600 D global-white-alpha-600
content-on-dark-tertiary L global-white-alpha-500 D global-white-alpha-500
content-on-dark-muted L global-white-alpha-150 D global-white-alpha-150
content-on-dark-disabled L global-white-alpha-400 D global-white-alpha-400
content-on-dark-primary-inverse L light-cool-grey-alpha-900 D light-cool-grey-alpha-900
content-on-dark-brand L dark-green-600 D dark-green-600
content-on-dark-brand-contrast L dark-green-700 D dark-green-700
content-on-dark-critical L dark-red-600 D dark-red-600
content-on-dark-critical-contrast L dark-red-700 D dark-red-700
content-on-dark-info L dark-blue-600 D dark-blue-600
content-on-dark-info-contrast L dark-blue-700 D dark-blue-700
content-on-dark-warning L dark-yellow-600 D dark-yellow-600
content-on-dark-warning-contrast L dark-yellow-700 D dark-yellow-700
content-on-dark-neutral L global-white-alpha-600 D global-white-alpha-600
content-on-dark-neutral-contrast L global-white-alpha-700 D global-white-alpha-700
content-on-dark-accent-orange L dark-orange-600 D dark-orange-600
content-on-dark-accent-orange-contrast L dark-orange-700 D dark-orange-700
content-on-dark-accent-violet L dark-violet-600 D dark-violet-600
content-on-dark-accent-violet-contrast L dark-violet-700 D dark-violet-700
content-on-dark-button-brand-primary L dark-green-25 D dark-green-25
content-on-dark-button-critical-primary L dark-red-25 D dark-red-25
content-on-dark-button-info-primary L dark-blue-25 D dark-blue-25
content-on-dark-button-warning-primary L dark-yellow-25 D dark-yellow-25
content-on-dark-button-accent-orange-primary L dark-orange-25 D dark-orange-25
content-on-dark-button-accent-violet-primary L dark-violet-25 D dark-violet-25
Element fill
Preview Semantic name Primitive reference
fill-element-brand-bold L light-green-300 D dark-green-600
fill-element-brand-soft L light-green-alpha-100 D dark-green-alpha-100
fill-element-brand-softer L light-green-alpha-75 D dark-green-alpha-50
fill-element-critical-bold L light-red-600 D dark-red-600
fill-element-critical-soft L light-red-alpha-100 D dark-red-alpha-100
fill-element-critical-softer L light-red-alpha-75 D dark-red-alpha-50
fill-element-info-bold L light-blue-300 D dark-blue-600
fill-element-info-soft L light-blue-alpha-100 D dark-blue-alpha-100
fill-element-info-softer L light-blue-alpha-75 D dark-blue-alpha-50
fill-element-warning-bold L light-yellow-300 D dark-yellow-600
fill-element-warning-soft L light-yellow-alpha-100 D dark-yellow-alpha-100
fill-element-warning-softer L light-yellow-alpha-75 D dark-yellow-alpha-50
fill-element-neutral-bold L light-cool-grey-300 D dark-cool-grey-600
fill-element-neutral-soft L light-cool-grey-alpha-100 D global-white-alpha-100
fill-element-neutral-softer L light-cool-grey-alpha-75 D global-white-alpha-50
fill-element-accent-orange-bold L light-orange-300 D dark-orange-600
fill-element-accent-orange-soft L light-orange-alpha-100 D dark-orange-alpha-100
fill-element-accent-orange-softer L light-orange-alpha-75 D dark-orange-alpha-50
fill-element-accent-violet-bold L light-violet-300 D dark-violet-600
fill-element-accent-violet-soft L light-violet-alpha-100 D dark-violet-alpha-100
fill-element-accent-violet-softer L light-violet-alpha-75 D dark-violet-alpha-50
fill-element-contrast L light-cool-grey-900 D global-white-alpha-1000
fill-element-elevated L global-white-alpha-1000 D dark-cool-grey-100
fill-element-ghost-selected L light-cool-grey-alpha-50 D global-white-alpha-25
fill-element-field L light-cool-grey-alpha-50 D global-white-alpha-25
fill-element-field-disabled L light-cool-grey-alpha-25 D global-black-alpha-150
fill-element-field-selected L light-green-600 D dark-green-600
fill-element-field-selected-disabled L light-green-alpha-150 D dark-green-alpha-150
fill-element-bold-disabled L light-cool-grey-alpha-150 D global-white-alpha-150
fill-element-soft-disabled L light-cool-grey-alpha-50 D global-white-alpha-50
fill-element-on-bold-contrast L light-cool-grey-900 D dark-cool-grey-50
fill-element-on-bold-contrast-disabled L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
fill-element-on-bold-neutral-soft L light-cool-grey-alpha-150 D light-cool-grey-alpha-150
fill-element-on-bold-soft-disabled L light-cool-grey-alpha-75 D light-cool-grey-alpha-75
fill-element-on-dark-brand-bold L dark-green-600 D dark-green-600
fill-element-on-dark-brand-soft L dark-green-alpha-100 D dark-green-alpha-100
fill-element-on-dark-brand-softer L dark-green-alpha-50 D dark-green-alpha-50
fill-element-on-dark-critical-bold L dark-red-600 D dark-red-600
fill-element-on-dark-critical-soft L dark-red-alpha-100 D dark-red-alpha-100
fill-element-on-dark-critical-softer L dark-red-alpha-50 D dark-red-alpha-50
fill-element-on-dark-info-bold L dark-blue-600 D dark-blue-600
fill-element-on-dark-info-soft L dark-blue-alpha-100 D dark-blue-alpha-100
fill-element-on-dark-info-softer L dark-blue-alpha-50 D dark-blue-alpha-50
fill-element-on-dark-warning-bold L dark-yellow-600 D dark-yellow-600
fill-element-on-dark-warning-soft L dark-yellow-alpha-100 D dark-yellow-alpha-100
fill-element-on-dark-warning-softer L dark-yellow-alpha-50 D dark-yellow-alpha-50
fill-element-on-dark-neutral-bold L dark-cool-grey-600 D dark-cool-grey-600
fill-element-on-dark-neutral-soft L global-white-alpha-100 D global-white-alpha-100
fill-element-on-dark-neutral-softer L global-white-alpha-50 D global-white-alpha-50
fill-element-on-dark-accent-orange-bold L dark-orange-600 D dark-orange-600
fill-element-on-dark-accent-orange-soft L dark-orange-alpha-100 D dark-orange-alpha-100
fill-element-on-dark-accent-orange-softer L dark-orange-alpha-50 D dark-orange-alpha-50
fill-element-on-dark-accent-violet-bold L dark-violet-600 D dark-violet-600
fill-element-on-dark-accent-violet-soft L dark-violet-alpha-100 D dark-violet-alpha-100
fill-element-on-dark-accent-violet-softer L dark-violet-alpha-50 D dark-violet-alpha-50
fill-element-on-dark-contrast L global-white-alpha-1000 D global-white-alpha-1000
fill-element-on-dark-field L global-white-alpha-25 D global-white-alpha-25
fill-element-on-dark-field-disabled L global-black-alpha-150 D global-black-alpha-150
fill-element-on-dark-field-selected L dark-green-600 D dark-green-600
fill-element-on-dark-field-selected-disabled L dark-green-alpha-150 D dark-green-alpha-150
fill-element-on-dark-bold-disabled L global-white-alpha-150 D global-white-alpha-150
fill-element-on-dark-soft-disabled L global-white-alpha-50 D global-white-alpha-50
Element border
Preview Semantic name Primitive reference
border-element-brand-softer L light-green-alpha-75 D dark-green-alpha-100
border-element-critical-softer L light-red-alpha-75 D dark-red-alpha-100
border-element-info-softer L light-blue-alpha-75 D dark-blue-alpha-100
border-element-warning-softer L light-yellow-alpha-75 D dark-yellow-alpha-100
border-element-neutral-softer L light-cool-grey-alpha-75 D global-white-alpha-100
border-element-neutral-softer-alt L light-cool-grey-alpha-25 D global-white-alpha-25
border-element-accent-orange-softer L light-orange-alpha-75 D light-orange-alpha-100
border-element-accent-violet-softer L light-violet-alpha-75 D dark-violet-alpha-100
border-element-field L light-cool-grey-alpha-200 D global-white-alpha-150
border-element-field-hovered L light-cool-grey-alpha-500 D global-white-alpha-500
border-element-field-focused L light-cool-grey-alpha-500 D global-white-alpha-500
border-element-field-error L light-red-500 D dark-red-500
border-element-field-error-hovered L light-red-600 D dark-red-600
border-element-field-disabled L light-cool-grey-alpha-50 D global-white-alpha-50
border-element-focus-ring L light-blue-alpha-200 D dark-blue-alpha-400
border-element-on-dark-brand-softer L dark-green-alpha-100 D dark-green-alpha-100
border-element-on-dark-critical-softer L dark-red-alpha-100 D dark-red-alpha-100
border-element-on-dark-info-softer L dark-blue-alpha-100 D dark-blue-alpha-100
border-element-on-dark-warning-softer L dark-yellow-alpha-100 D dark-yellow-alpha-100
border-element-on-dark-neutral-softer L global-white-alpha-100 D global-white-alpha-100
border-element-on-dark-neutral-softer-alt L global-white-alpha-25 D global-white-alpha-25
border-element-on-dark-accent-orange-softer L dark-orange-alpha-100 D dark-orange-alpha-100
border-element-on-dark-accent-violet-softer L dark-violet-alpha-100 D dark-violet-alpha-100
border-element-on-dark-field L global-white-alpha-150 D global-white-alpha-150
border-element-on-dark-field-hovered L global-white-alpha-400 D global-white-alpha-400
border-element-on-dark-field-focused L global-white-alpha-400 D global-white-alpha-400
border-element-on-dark-field-error L dark-red-500 D dark-red-500
border-element-on-dark-field-error-hovered L dark-red-600 D dark-red-600
border-element-on-dark-field-disabled L global-white-alpha-50 D global-white-alpha-50
Border / dividers
Preview Semantic name Primitive reference
border-neutral L light-cool-grey-alpha-100 D global-white-alpha-75
border-neutral-dark L light-cool-grey-900 D dark-cool-grey-75
border-brand L light-green-500 D dark-green-500
border-critical L light-red-500 D dark-red-500
border-info L light-blue-500 D dark-blue-500
border-warning L light-yellow-500 D dark-yellow-500
border-on-bold-neutral L light-cool-grey-alpha-100 D light-cool-grey-alpha-100
border-on-dark-brand L dark-green-500 D dark-green-500
border-on-dark-critical L dark-red-500 D dark-red-500
border-on-dark-info L dark-blue-500 D dark-blue-500
border-on-dark-neutral L global-white-alpha-75 D global-white-alpha-75
border-on-dark-warning L dark-yellow-500 D dark-yellow-500
Illustration
Preview Semantic name Primitive reference
illustration-fill-brand L light-green-100 D dark-green-50
illustration-fill-critical L light-red-100 D dark-red-50
illustration-fill-info L light-blue-100 D dark-blue-50
illustration-fill-warning L light-yellow-100 D dark-yellow-50
illustration-fill-emphasis L light-green-300 D dark-green-600
illustration-fill-emphasis-alt L global-white-alpha-1000 D global-white-alpha-1000
illustration-fill-on-bold-brand L light-green-200 D dark-green-700
illustration-fill-on-dark-brand L light-green-800 D dark-green-100
illustration-border-brand L light-green-700 D dark-green-600
illustration-border-critical L light-red-700 D dark-red-600
illustration-border-info L light-blue-700 D dark-blue-600
illustration-border-warning L light-yellow-700 D dark-yellow-600
illustration-border-emphasis L light-cool-grey-900 D light-cool-grey-900
illustration-border-emphasis-alt L light-cool-grey-900 D light-cool-grey-900
illustration-border-on-bold-brand L light-green-800 D dark-green-100
illustration-border-on-dark-brand L light-green-300 D dark-green-600
Shadow
Preview Semantic name Primitive reference
shadow-ambient-action L #00284705 D #0000000A
shadow-ambient-action-hover L #0028470F D #0000001F
shadow-ambient-elevated L #0028470F D #0000001F
shadow-ambient-fixed L #0028470A D #00000014
shadow-ambient-modal L #0028470F D #0000001F
shadow-ambient-modeless L #0028470A D #00000014
shadow-key-action L #0028470A D #00000014
shadow-key-action-hover L #00284714 D #00000029
shadow-key-elevated L #00284714 D #00000029
shadow-key-fixed L #0028470F D #0000001F
shadow-key-modal L #00284714 D #00000029
shadow-key-modeless L #0028470F D #0000001F