Colors

Our color system is built on semantic tokens for consistent, meaningful usage across our products.

Semantic colors

Semantic colors provide meaning and consistency across our interface.

Neutral

Neutral color scale for foundational UI elements like backgrounds, borders, and text

Surface

Surface colors for layered UI backgrounds like cards, modals, and panels

Default

neutral.surface

Base background color for primary surfaces

Hover

neutral.surface.hover

Hover state for default surface

Active

neutral.surface.active

Active/pressed state for default surface

Subtler

Lighter background color for secondary or less prominent surfaces

Default

neutral.surface.subtler

Base color for subtle surfaces

Hover

neutral.surface.subtler.hover

Hover state for subtle surfaces

Active

neutral.surface.subtler.active

Active/pressed state for subtle surfaces

Subtle

Lighter background color for secondary or less prominent surfaces

Default

neutral.surface.subtle

Base color for subtle surfaces

Hover

neutral.surface.subtle.hover

Hover state for subtle surfaces

Active

neutral.surface.subtle.active

Active/pressed state for subtle surfaces

Highlight

Highlighted neutral background color for high emphasis

Default

neutral.surface.highlight

Base color for highlighted neutral backgrounds

Hover

neutral.surface.highlight.hover

Hover state for highlighted neutral backgrounds

Active

neutral.surface.highlight.active

Active/pressed state for highlighted neutral backgrounds

Strong

Darker background color for emphasized or prominent surfaces

Default

neutral.surface.strong

Base color for strong surfaces

Hover

neutral.surface.strong.hover

Hover state for strong surfaces

Active

neutral.surface.strong.active

Active/pressed state for strong surfaces

Inverted

Inverted background color for high emphasis

Default

neutral.surface.inverted

Base color for inverted surfaces

Hover

neutral.surface.inverted.hover

Hover state for inverted surfaces

Active

neutral.surface.inverted.active

Active/pressed state for inverted surfaces

Raised

Background color for elevated elements like popovers and dropdowns

Default

neutral.surface.raised

Base color for raised surfaces

Hover

neutral.surface.raised.hover

Hover state for raised surfaces

Active

neutral.surface.raised.active

Active/pressed state for raised surfaces

Sunken

Background color for inset or depressed elements like input fields and well components

Default

neutral.surface.sunken

Base color for sunken surfaces

Hover

neutral.surface.sunken.hover

Hover state for sunken surfaces

Active

neutral.surface.sunken.active

Active/pressed state for sunken surfaces

Overlay

Background color for overlaid elements like modals and tooltips

Default

neutral.surface.overlay

Base color for overlay surfaces

Hover

neutral.surface.overlay.hover

Hover state for overlay surfaces

Active

neutral.surface.overlay.active

Active/pressed state for overlay surfaces

Backdrop

neutral.surface.backdrop

Semi-transparent background color for modal backdrops and overlays

Border

Border colors for separating and outlining UI elements

Default

neutral.border

Standard border color for common UI elements

Hover

neutral.border.hover

Hover state for default borders

Active

neutral.border.active

Active/pressed state for default borders

Subtler

subtler border color for less prominent boundaries and dividers

Default

neutral.border.subtler

Base color for subtler borders

Hover

neutral.border.subtler.hover

Hover state for subtler borders

Active

neutral.border.subtler.active

Active/pressed state for subtler borders

Subtle

Lighter border color for less prominent boundaries and dividers

Default

neutral.border.subtle

Base color for subtle borders

Hover

neutral.border.subtle.hover

Hover state for subtle borders

Active

neutral.border.subtle.active

Active/pressed state for subtle borders

Strong

Darker border color for emphasized boundaries and focused states

Default

neutral.border.strong

Base color for strong borders

Hover

neutral.border.strong.hover

Hover state for strong borders

Active

neutral.border.strong.active

Active/pressed state for strong borders

Inverted

Inverted border color for high emphasis

Default

neutral.border.inverted

Base color for inverted borders

Hover

neutral.border.inverted.hover

Hover state for inverted borders

Active

neutral.border.inverted.active

Active/pressed state for inverted borders

Foreground

Text colors for content and labels across different emphasis levels

Default

neutral.fg

Primary text color for body content and labels

Hover

neutral.fg.hover

Hover state for default text

Active

neutral.fg.active

Active/pressed state for default text

Subtler

subtler text color for less prominent content

Default

neutral.fg.subtler

Base color for subtler text

Hover

neutral.fg.subtler.hover

Hover state for subtler text

Active

neutral.fg.subtler.active

Active/pressed state for subtler text

Subtle

Secondary text color for supporting content and less important information

Default

neutral.fg.subtle

Base color for subtle text

Hover

neutral.fg.subtle.hover

Hover state for subtle text

Active

neutral.fg.subtle.active

Active/pressed state for subtle text

Strong

Emphasized text color for headings and important content

Default

neutral.fg.strong

Base color for strong text

Hover

neutral.fg.strong.hover

Hover state for strong text

Active

neutral.fg.strong.active

Active/pressed state for strong text

Inverted

Inverted text color for high emphasis

Default

neutral.fg.inverted

Base color for inverted text

Hover

neutral.fg.inverted.hover

Hover state for inverted text

Active

neutral.fg.inverted.active

Active/pressed state for inverted text

Accent

Accent color scale for interactive elements and highlights

Surface

Surface colors for accent UI backgrounds like cards, modals, and panels

Default

accent.surface

Base background color for primary accent surfaces

Hover

accent.surface.hover

Hover state for default accent surface

Active

accent.surface.active

Active/pressed state for default accent surface

Subtler

Lighter background color for secondary or less prominent accent surfaces

Default

accent.surface.subtler

Base color for subtler accent surfaces

Hover

accent.surface.subtler.hover

Hover state for subtler accent surfaces

Active

accent.surface.subtler.active

Active/pressed state for subtler accent surfaces

Subtle

Lighter background color for secondary or less prominent accent surfaces

Default

accent.surface.subtle

Base color for subtle accent surfaces

Hover

accent.surface.subtle.hover

Hover state for subtle accent surfaces

Active

accent.surface.subtle.active

Active/pressed state for subtle accent surfaces

Highlight

Highlighted accent background color for high emphasis

Default

accent.surface.highlight

Base color for highlighted accent backgrounds

Hover

accent.surface.highlight.hover

Hover state for highlighted accent backgrounds

Active

accent.surface.highlight.active

Active/pressed state for highlighted accent backgrounds

Strong

Darker background color for emphasized or prominent accent surfaces

Default

accent.surface.strong

Base color for strong accent surfaces

Hover

accent.surface.strong.hover

Hover state for strong accent surfaces

Active

accent.surface.strong.active

Active/pressed state for strong accent surfaces

Inverted

Inverted background color for high accent emphasis

Default

accent.surface.inverted

Base color for inverted accent surfaces

Hover

accent.surface.inverted.hover

Hover state for inverted accent surfaces

Active

accent.surface.inverted.active

Active/pressed state for inverted accent surfaces

Border

Border colors for separating and outlining accent UI elements

Default

accent.border

Standard border color for common accent UI elements

Hover

accent.border.hover

Hover state for default accent borders

Active

accent.border.active

Active/pressed state for default accent borders

Subtler

Subtler accent border color for less prominent boundaries and dividers

Default

accent.border.subtler

Base color for subtler accent borders

Hover

accent.border.subtler.hover

Hover state for subtler accent borders

Active

accent.border.subtler.active

Active/pressed state for subtler accent borders

Subtle

Lighter accent border color for less prominent boundaries and dividers

Default

accent.border.subtle

Base color for subtle accent borders

Hover

accent.border.subtle.hover

Hover state for subtle accent borders

Active

accent.border.subtle.active

Active/pressed state for subtle accent borders

Strong

Darker accent border color for emphasized boundaries and focused states

Default

accent.border.strong

Base color for strong accent borders

Hover

accent.border.strong.hover

Hover state for strong accent borders

Active

accent.border.strong.active

Active/pressed state for strong accent borders

Inverted

Inverted accent border color for high emphasis

Default

accent.border.inverted

Base color for inverted accent borders

Hover

accent.border.inverted.hover

Hover state for inverted accent borders

Active

accent.border.inverted.active

Active/pressed state for inverted accent borders

Foreground

Text colors for content and labels with accent emphasis

Default

accent.fg

Primary text color for accent body content and labels

Hover

accent.fg.hover

Hover state for default accent text

Active

accent.fg.active

Active/pressed state for default accent text

Subtler

Subtler accent text color for less prominent content

Default

accent.fg.subtler

Base color for subtler accent text

Hover

accent.fg.subtler.hover

Hover state for subtler accent text

Active

accent.fg.subtler.active

Active/pressed state for subtler accent text

Subtle

Secondary accent text color for supporting content and less important information

Default

accent.fg.subtle

Base color for subtle accent text

Hover

accent.fg.subtle.hover

Hover state for subtle accent text

Active

accent.fg.subtle.active

Active/pressed state for subtle accent text

Strong

Emphasized accent text color for headings and important content

Default

accent.fg.strong

Base color for strong accent text

Hover

accent.fg.strong.hover

Hover state for strong accent text

Active

accent.fg.strong.active

Active/pressed state for strong accent text

Inverted

Inverted accent text color for high emphasis

Default

accent.fg.inverted

Base color for inverted accent text

Hover

accent.fg.inverted.hover

Hover state for inverted accent text

Active

accent.fg.inverted.active

Active/pressed state for inverted accent text

Brand

Brand color scale for interactive elements and highlights

Surface

Surface colors for brand UI backgrounds like cards, modals, and panels

Default

brand.surface

Base background color for primary brand surfaces

Hover

brand.surface.hover

Hover state for default brand surface

Active

brand.surface.active

Active/pressed state for default brand surface

Subtler

Lighter background color for secondary or less prominent brand surfaces

Default

brand.surface.subtler

Base color for subtler brand surfaces

Hover

brand.surface.subtler.hover

Hover state for subtler brand surfaces

Active

brand.surface.subtler.active

Active/pressed state for subtler brand surfaces

Subtle

Lighter background color for secondary or less prominent brand surfaces

Default

brand.surface.subtle

Base color for subtle brand surfaces

Hover

brand.surface.subtle.hover

Hover state for subtle brand surfaces

Active

brand.surface.subtle.active

Active/pressed state for subtle brand surfaces

Highlight

Highlighted brand background color for high emphasis

Default

brand.surface.highlight

Base color for highlighted brand backgrounds

Hover

brand.surface.highlight.hover

Hover state for highlighted brand backgrounds

Active

brand.surface.highlight.active

Active/pressed state for highlighted brand backgrounds

Strong

Darker background color for emphasized or prominent brand surfaces

Default

brand.surface.strong

Base color for strong brand surfaces

Hover

brand.surface.strong.hover

Hover state for strong brand surfaces

Active

brand.surface.strong.active

Active/pressed state for strong brand surfaces

Inverted

Inverted background color for high brand emphasis

Default

brand.surface.inverted

Base color for inverted brand surfaces

Hover

brand.surface.inverted.hover

Hover state for inverted brand surfaces

Active

brand.surface.inverted.active

Active/pressed state for inverted brand surfaces

Border

Border colors for brand elements

Default

brand.border

Default border color for brand elements

Hover

brand.border.hover

Hover state for brand borders

Active

brand.border.active

Active/pressed state for brand borders

Subtler

Subtler brand border color for less prominent boundaries and dividers

Default

brand.border.subtler

Base color for subtler brand borders

Hover

brand.border.subtler.hover

Hover state for subtler brand borders

Active

brand.border.subtler.active

Active/pressed state for subtler brand borders

Subtle

Lighter brand border color for less prominent boundaries and dividers

Default

brand.border.subtle

Base color for subtle brand borders

Hover

brand.border.subtle.hover

Hover state for subtle brand borders

Active

brand.border.subtle.active

Active/pressed state for subtle brand borders

Strong

Darker brand border color for emphasized boundaries and focused states

Default

brand.border.strong

Base color for strong brand borders

Hover

brand.border.strong.hover

Hover state for strong brand borders

Active

brand.border.strong.active

Active/pressed state for strong brand borders

Inverted

Inverted brand border color for high emphasis

Default

brand.border.inverted

Base color for inverted brand borders

Hover

brand.border.inverted.hover

Hover state for inverted brand borders

Active

brand.border.inverted.active

Active/pressed state for inverted brand borders

Foreground

Text colors for brand elements

Default

brand.fg

Default text color for brand elements

Hover

brand.fg.hover

Hover state for brand text

Active

brand.fg.active

Active/pressed state for brand text

Subtler

Subtler brand text color for less prominent content

Default

brand.fg.subtler

Base color for subtler brand text

Hover

brand.fg.subtler.hover

Hover state for subtler brand text

Active

brand.fg.subtler.active

Active/pressed state for subtler brand text

Subtle

Subtle text color for softer brand emphasis

Default

brand.fg.subtle

Base color for subtle brand text

Hover

brand.fg.subtle.hover

Hover state for subtle brand text

Active

brand.fg.subtle.active

Active/pressed state for subtle brand text

Strong

Strong text color for high brand emphasis

Default

brand.fg.strong

Base color for strong brand text

Hover

brand.fg.strong.hover

Hover state for strong brand text

Active

brand.fg.strong.active

Active/pressed state for strong brand text

Inverted

Inverted text color for high emphasis

Default

brand.fg.inverted

Base color for inverted text

Hover

brand.fg.inverted.hover

Hover state for inverted text

Active

brand.fg.inverted.active

Active/pressed state for inverted text

Brandsecondary

Seceondary brand color scale for interactive elements and highlights

Surface

Surface colors for secondary brand UI backgrounds like cards, modals, and panels

Default

brandSecondary.surface

Base background color for secondary brand surfaces

Hover

brandSecondary.surface.hover

Hover state for default secondary brand surface

Active

brandSecondary.surface.active

Active/pressed state for default secondary brand surface

Subtler

Lighter background color for secondary or less prominent secondary brand surfaces

Default

brandSecondary.surface.subtler

Base color for subtler secondary brand surfaces

Hover

brandSecondary.surface.subtler.hover

Hover state for subtler secondary brand surfaces

Active

brandSecondary.surface.subtler.active

Active/pressed state for subtler secondary brand surfaces

Subtle

Lighter background color for secondary or less prominent secondary brand surfaces

Default

brandSecondary.surface.subtle

Base color for subtle secondary brand surfaces

Hover

brandSecondary.surface.subtle.hover

Hover state for subtle secondary brand surfaces

Active

brandSecondary.surface.subtle.active

Active/pressed state for subtle secondary brand surfaces

Highlight

Highlighted secondary brand background color for high emphasis

Default

brandSecondary.surface.highlight

Base color for highlighted secondary brand backgrounds

Hover

brandSecondary.surface.highlight.hover

Hover state for highlighted secondary brand backgrounds

Active

brandSecondary.surface.highlight.active

Active/pressed state for highlighted secondary brand backgrounds

Strong

Darker background color for emphasized or prominent secondary brand surfaces

Default

brandSecondary.surface.strong

Base color for strong secondary brand surfaces

Hover

brandSecondary.surface.strong.hover

Hover state for strong secondary brand surfaces

Active

brandSecondary.surface.strong.active

Active/pressed state for strong secondary brand surfaces

Inverted

Inverted background color for high secondary brand emphasis

Default

brandSecondary.surface.inverted

Base color for inverted secondary brand surfaces

Hover

brandSecondary.surface.inverted.hover

Hover state for inverted secondary brand surfaces

Active

brandSecondary.surface.inverted.active

Active/pressed state for inverted secondary brand surfaces

Border

Border colors for secondary brand elements

Default

brandSecondary.border

Default border color for secondary brand elements

Hover

brandSecondary.border.hover

Hover state for secondary brand borders

Active

brandSecondary.border.active

Active/pressed state for secondary brand borders

Subtler

Subtler secondary brand border color for less prominent boundaries and dividers

Default

brandSecondary.border.subtler

Base color for subtler secondary brand borders

Hover

brandSecondary.border.subtler.hover

Hover state for subtler secondary brand borders

Active

brandSecondary.border.subtler.active

Active/pressed state for subtler secondary brand borders

Subtle

Lighter secondary brand border color for less prominent boundaries and dividers

Default

brandSecondary.border.subtle

Base color for subtle secondary brand borders

Hover

brandSecondary.border.subtle.hover

Hover state for subtle secondary brand borders

Active

brandSecondary.border.subtle.active

Active/pressed state for subtle secondary brand borders

Strong

Darker secondary brand border color for emphasized boundaries and focused states

Default

brandSecondary.border.strong

Base color for strong secondary brand borders

Hover

brandSecondary.border.strong.hover

Hover state for strong secondary brand borders

Active

brandSecondary.border.strong.active

Active/pressed state for strong secondary brand borders

Inverted

Inverted secondary brand border color for high emphasis

Default

brandSecondary.border.inverted

Base color for inverted secondary brand borders

Hover

brandSecondary.border.inverted.hover

Hover state for inverted secondary brand borders

Active

brandSecondary.border.inverted.active

Active/pressed state for inverted secondary brand borders

Foreground

Text colors for secondary brand elements

Default

brandSecondary.fg

Default text color for secondary brand elements

Hover

brandSecondary.fg.hover

Hover state for secondary brand text

Active

brandSecondary.fg.active

Active/pressed state for secondary brand text

Subtler

Subtler secondary brand text color for less prominent content

Default

brandSecondary.fg.subtler

Base color for subtler secondary brand text

Hover

brandSecondary.fg.subtler.hover

Hover state for subtler secondary brand text

Active

brandSecondary.fg.subtler.active

Active/pressed state for subtler secondary brand text

Subtle

Subtle text color for softer secondary brand emphasis

Default

brandSecondary.fg.subtle

Base color for subtle secondary brand text

Hover

brandSecondary.fg.subtle.hover

Hover state for subtle secondary brand text

Active

brandSecondary.fg.subtle.active

Active/pressed state for subtle secondary brand text

Strong

Strong text color for high secondary brand emphasis

Default

brandSecondary.fg.strong

Base color for strong secondary brand text

Hover

brandSecondary.fg.strong.hover

Hover state for strong secondary brand text

Active

brandSecondary.fg.strong.active

Active/pressed state for strong secondary brand text

Inverted

Inverted text color for high emphasis

Default

brandSecondary.fg.inverted

Base color for inverted text

Hover

brandSecondary.fg.inverted.hover

Hover state for inverted text

Active

brandSecondary.fg.inverted.active

Active/pressed state for inverted text

Information

Information color scale for interactive elements and highlights

Surface

Surface colors for information UI backgrounds

Default

information.surface

Base color for default information background

Hover

information.surface.hover

Hover state for default information background

Active

information.surface.active

Active/pressed state for default information background

Subtler

Lighter background color for secondary or less prominent information surfaces

Default

information.surface.subtler

Base color for subtler information surfaces

Hover

information.surface.subtler.hover

Hover state for subtler information surfaces

Active

information.surface.subtler.active

Active/pressed state for subtler information surfaces

Subtle

Subtle information background color for softer emphasis

Default

information.surface.subtle

Base color for subtle information surfaces

Hover

information.surface.subtle.hover

Hover state for subtle information surfaces

Active

information.surface.subtle.active

Active/pressed state for subtle information surfaces

Highlight

Highlighted information background color for high emphasis

Default

information.surface.highlight

Base color for highlighted information backgrounds

Hover

information.surface.highlight.hover

Hover state for highlighted information backgrounds

Active

information.surface.highlight.active

Active/pressed state for highlighted information backgrounds

Strong

Strong information background color for high emphasis

Default

information.surface.strong

Base color for strong information background

Hover

information.surface.strong.hover

Hover state for strong information background

Active

information.surface.strong.active

Active/pressed state for strong information background

Inverted

Inverted background color for high information emphasis

Default

information.surface.inverted

Base color for inverted information surfaces

Hover

information.surface.inverted.hover

Hover state for inverted information surfaces

Active

information.surface.inverted.active

Active/pressed state for inverted information surfaces

Border

Border colors for information UI elements

Default

information.border

Default information border color

Hover

information.border.hover

Hover state for information border

Active

information.border.active

Active/pressed state for information border

Subtler

subtler information border color for less prominent content

Default

information.border.subtler

Base color for subtler information border

Hover

information.border.subtler.hover

Hover state for subtler information border

Active

information.border.subtler.active

Active/pressed state for subtler information border

Subtle

Subtle information border color for softer emphasis

Default

information.border.subtle

Base color for subtle information border

Hover

information.border.subtle.hover

Hover state for subtle information border

Active

information.border.subtle.active

Active/pressed state for subtle information border

Strong

Strong information border color for high emphasis

Default

information.border.strong

Base color for strong information border

Hover

information.border.strong.hover

Hover state for strong information border

Active

information.border.strong.active

Active/pressed state for strong information border

Inverted

Inverted information border color for high emphasis

Default

information.border.inverted

Base color for inverted information borders

Hover

information.border.inverted.hover

Hover state for inverted information borders

Active

information.border.inverted.active

Active/pressed state for inverted information borders

Foreground

Text colors for content and labels with information emphasis

Default

information.fg

Primary text color for information body content and labels

Hover

information.fg.hover

Hover state for default information text

Active

information.fg.active

Active/pressed state for default information text

Subtler

Subtler information text color for less prominent content

Default

information.fg.subtler

Base color for subtler information text

Hover

information.fg.subtler.hover

Hover state for subtler information text

Active

information.fg.subtler.active

Active/pressed state for subtler information text

Subtle

Secondary information text color for supporting content and less important information

Default

information.fg.subtle

Base color for subtle information text

Hover

information.fg.subtle.hover

Hover state for subtle information text

Active

information.fg.subtle.active

Active/pressed state for subtle information text

Strong

Emphasized information text color for headings and important content

Default

information.fg.strong

Base color for strong information text

Hover

information.fg.strong.hover

Hover state for strong information text

Active

information.fg.strong.active

Active/pressed state for strong information text

Inverted

Inverted information text color for high emphasis

Default

information.fg.inverted

Base color for inverted information text

Hover

information.fg.inverted.hover

Hover state for inverted information text

Active

information.fg.inverted.active

Active/pressed state for inverted information text

Success

Success color scale for positive states and actions

Surface

Surface colors for success UI backgrounds

Default

success.surface

Base color for default success background

Hover

success.surface.hover

Hover state for default success background

Active

success.surface.active

Active/pressed state for default success background

Subtler

Lighter background color for secondary or less prominent success surfaces

Default

success.surface.subtler

Base color for subtler success surfaces

Hover

success.surface.subtler.hover

Hover state for subtler success surfaces

Active

success.surface.subtler.active

Active/pressed state for subtler success surfaces

Subtle

Lighter background color for secondary or less prominent success surfaces

Default

success.surface.subtle

Base color for subtle success surfaces

Hover

success.surface.subtle.hover

Hover state for subtle success surfaces

Active

success.surface.subtle.active

Active/pressed state for subtle success surfaces

Highlight

Highlighted success background color for high emphasis

Default

success.surface.highlight

Base color for highlighted success backgrounds

Hover

success.surface.highlight.hover

Hover state for highlighted success backgrounds

Active

success.surface.highlight.active

Active/pressed state for highlighted success backgrounds

Strong

Darker background color for emphasized or prominent success surfaces

Default

success.surface.strong

Base color for strong success surfaces

Hover

success.surface.strong.hover

Hover state for strong success surfaces

Active

success.surface.strong.active

Active/pressed state for strong success surfaces

Inverted

Inverted background color for high success emphasis

Default

success.surface.inverted

Base color for inverted success surfaces

Hover

success.surface.inverted.hover

Hover state for inverted success surfaces

Active

success.surface.inverted.active

Active/pressed state for inverted success surfaces

Border

Border colors for success UI elements

Default

success.border

Standard border color for common success UI elements

Hover

success.border.hover

Hover state for default success borders

Active

success.border.active

Active/pressed state for default success borders

Subtler

Subtler success border color for less prominent boundaries and dividers

Default

success.border.subtler

Base color for subtler success borders

Hover

success.border.subtler.hover

Hover state for subtler success borders

Active

success.border.subtler.active

Active/pressed state for subtler success borders

Subtle

Lighter success border color for less prominent boundaries and dividers

Default

success.border.subtle

Base color for subtle success borders

Hover

success.border.subtle.hover

Hover state for subtle success borders

Active

success.border.subtle.active

Active/pressed state for subtle success borders

Strong

Darker success border color for emphasized boundaries and focused states

Default

success.border.strong

Base color for strong success borders

Hover

success.border.strong.hover

Hover state for strong success borders

Active

success.border.strong.active

Active/pressed state for strong success borders

Inverted

Inverted success border color for high emphasis

Default

success.border.inverted

Base color for inverted success borders

Hover

success.border.inverted.hover

Hover state for inverted success borders

Active

success.border.inverted.active

Active/pressed state for inverted success borders

Foreground

Text colors for content and labels with success emphasis

Default

success.fg

Primary text color for success body content and labels

Hover

success.fg.hover

Hover state for default success text

Active

success.fg.active

Active/pressed state for default success text

Subtler

Subtler success text color for less prominent content

Default

success.fg.subtler

Base color for subtler success text

Hover

success.fg.subtler.hover

Hover state for subtler success text

Active

success.fg.subtler.active

Active/pressed state for subtler success text

Subtle

Secondary success text color for supporting content and less important information

Default

success.fg.subtle

Base color for subtle success text

Hover

success.fg.subtle.hover

Hover state for subtle success text

Active

success.fg.subtle.active

Active/pressed state for subtle success text

Strong

Emphasized success text color for headings and important content

Default

success.fg.strong

Base color for strong success text

Hover

success.fg.strong.hover

Hover state for strong success text

Active

success.fg.strong.active

Active/pressed state for strong success text

Inverted

Inverted success text color for high emphasis

Default

success.fg.inverted

Base color for inverted success text

Hover

success.fg.inverted.hover

Hover state for inverted success text

Active

success.fg.inverted.active

Active/pressed state for inverted success text

Warning

Warning color scale for cautionary states and alerts

Surface

Surface colors for warning UI backgrounds

Default

warning.surface

Base color for default warning background

Hover

warning.surface.hover

Hover state for default warning background

Active

warning.surface.active

Active/pressed state for default warning background

Subtler

Lighter background color for secondary or less prominent warning surfaces

Default

warning.surface.subtler

Base color for subtler warning surfaces

Hover

warning.surface.subtler.hover

Hover state for subtler warning surfaces

Active

warning.surface.subtler.active

Active/pressed state for subtler warning surfaces

Subtle

Lighter background color for secondary or less prominent warning surfaces

Default

warning.surface.subtle

Base color for subtle warning surfaces

Hover

warning.surface.subtle.hover

Hover state for subtle warning surfaces

Active

warning.surface.subtle.active

Active/pressed state for subtle warning surfaces

Highlight

Highlighted warning background color for high emphasis

Default

warning.surface.highlight

Base color for highlighted warning backgrounds

Hover

warning.surface.highlight.hover

Hover state for highlighted warning backgrounds

Active

warning.surface.highlight.active

Active/pressed state for highlighted warning backgrounds

Strong

Darker background color for emphasized or prominent warning surfaces

Default

warning.surface.strong

Base color for strong warning surfaces

Hover

warning.surface.strong.hover

Hover state for strong warning surfaces

Active

warning.surface.strong.active

Active/pressed state for strong warning surfaces

Inverted

Inverted background color for high warning emphasis

Default

warning.surface.inverted

Base color for inverted warning surfaces

Hover

warning.surface.inverted.hover

Hover state for inverted warning surfaces

Active

warning.surface.inverted.active

Active/pressed state for inverted warning surfaces

Border

Border colors for warning UI elements

Default

warning.border

Standard border color for common warning UI elements

Hover

warning.border.hover

Hover state for default warning borders

Active

warning.border.active

Active/pressed state for default warning borders

Subtler

Subtler warning border color for less prominent boundaries and dividers

Default

warning.border.subtler

Base color for subtler warning borders

Hover

warning.border.subtler.hover

Hover state for subtler warning borders

Active

warning.border.subtler.active

Active/pressed state for subtler warning borders

Subtle

Lighter warning border color for less prominent boundaries and dividers

Default

warning.border.subtle

Base color for subtle warning borders

Hover

warning.border.subtle.hover

Hover state for subtle warning borders

Active

warning.border.subtle.active

Active/pressed state for subtle warning borders

Strong

Darker warning border color for emphasized boundaries and focused states

Default

warning.border.strong

Base color for strong warning borders

Hover

warning.border.strong.hover

Hover state for strong warning borders

Active

warning.border.strong.active

Active/pressed state for strong warning borders

Inverted

Inverted warning border color for high emphasis

Default

warning.border.inverted

Base color for inverted warning borders

Hover

warning.border.inverted.hover

Hover state for inverted warning borders

Active

warning.border.inverted.active

Active/pressed state for inverted warning borders

Foreground

Text colors for warning UI elements

Default

warning.fg

Default text color for warning elements

Hover

warning.fg.hover

Hover state for warning text

Active

warning.fg.active

Active/pressed state for warning text

Subtler

Subtler warning text color for less prominent content

Default

warning.fg.subtler

Base color for subtler warning text

Hover

warning.fg.subtler.hover

Hover state for subtler warning text

Active

warning.fg.subtler.active

Active/pressed state for subtler warning text

Subtle

Subtle warning text color for less prominent content

Default

warning.fg.subtle

Base color for subtle warning text

Hover

warning.fg.subtle.hover

Hover state for subtle warning text

Active

warning.fg.subtle.active

Active/pressed state for subtle warning text

Strong

Strong warning text color for high emphasis

Default

warning.fg.strong

Base color for strong warning text

Hover

warning.fg.strong.hover

Hover state for strong warning text

Active

warning.fg.strong.active

Active/pressed state for strong warning text

Inverted

Inverted warning text color for high emphasis

Default

warning.fg.inverted

Base color for inverted warning text

Hover

warning.fg.inverted.hover

Hover state for inverted warning text

Active

warning.fg.inverted.active

Active/pressed state for inverted warning text

Danger

Danger color scale for error states and destructive actions

Surface

Surface colors for danger UI backgrounds

Default

danger.surface

Base background color for primary danger surfaces

Hover

danger.surface.hover

Hover state for default danger surface

Active

danger.surface.active

Active/pressed state for default danger surface

Subtler

Lighter background color for secondary or less prominent danger surfaces

Default

danger.surface.subtler

Base color for subtler danger surfaces

Hover

danger.surface.subtler.hover

Hover state for subtler danger surfaces

Active

danger.surface.subtler.active

Active/pressed state for subtler danger surfaces

Subtle

Lighter background color for secondary or less prominent danger surfaces

Default

danger.surface.subtle

Base color for subtle danger surfaces

Hover

danger.surface.subtle.hover

Hover state for subtle danger surfaces

Active

danger.surface.subtle.active

Active/pressed state for subtle danger surfaces

Highlight

Highlighted danger background color for high emphasis

Default

danger.surface.highlight

Base color for highlighted danger backgrounds

Hover

danger.surface.highlight.hover

Hover state for highlighted danger backgrounds

Active

danger.surface.highlight.active

Active/pressed state for highlighted danger backgrounds

Strong

Darker background color for emphasized or prominent danger surfaces

Default

danger.surface.strong

Base color for strong danger surfaces

Hover

danger.surface.strong.hover

Hover state for strong danger surfaces

Active

danger.surface.strong.active

Active/pressed state for strong danger surfaces

Inverted

Inverted background color for high danger emphasis

Default

danger.surface.inverted

Base color for inverted danger surfaces

Hover

danger.surface.inverted.hover

Hover state for inverted danger surfaces

Active

danger.surface.inverted.active

Active/pressed state for inverted danger surfaces

Border

Border colors for danger UI elements

Default

danger.border

Standard border color for common danger UI elements

Hover

danger.border.hover

Hover state for default danger borders

Active

danger.border.active

Active/pressed state for default danger borders

Subtler

Subtler danger border color for less prominent boundaries and dividers

Default

danger.border.subtler

Base color for subtler danger borders

Hover

danger.border.subtler.hover

Hover state for subtler danger borders

Active

danger.border.subtler.active

Active/pressed state for subtler danger borders

Subtle

Lighter danger border color for less prominent boundaries and dividers

Default

danger.border.subtle

Base color for subtle danger borders

Hover

danger.border.subtle.hover

Hover state for subtle danger borders

Active

danger.border.subtle.active

Active/pressed state for subtle danger borders

Strong

Darker danger border color for emphasized boundaries and focused states

Default

danger.border.strong

Base color for strong danger borders

Hover

danger.border.strong.hover

Hover state for strong danger borders

Active

danger.border.strong.active

Active/pressed state for strong danger borders

Inverted

Inverted danger border color for high emphasis

Default

danger.border.inverted

Base color for inverted danger borders

Hover

danger.border.inverted.hover

Hover state for inverted danger borders

Active

danger.border.inverted.active

Active/pressed state for inverted danger borders

Foreground

Text colors for danger UI elements

Default

danger.fg

Default text color for danger elements

Hover

danger.fg.hover

Hover state for danger text

Active

danger.fg.active

Active/pressed state for danger text

Subtler

Subtler danger text color for less prominent content

Default

danger.fg.subtler

Base color for subtler danger text

Hover

danger.fg.subtler.hover

Hover state for subtler danger text

Active

danger.fg.subtler.active

Active/pressed state for subtler danger text

Subtle

Subtle danger text color for less prominent content

Default

danger.fg.subtle

Base color for subtle danger text

Hover

danger.fg.subtle.hover

Hover state for subtle danger text

Active

danger.fg.subtle.active

Active/pressed state for subtle danger text

Strong

Strong danger text color for high emphasis

Default

danger.fg.strong

Base color for strong danger text

Hover

danger.fg.strong.hover

Hover state for strong danger text

Active

danger.fg.strong.active

Active/pressed state for strong danger text

Inverted

Inverted danger text color for high emphasis

Default

danger.fg.inverted

Base color for inverted danger text

Hover

danger.fg.inverted.hover

Hover state for inverted danger text

Active

danger.fg.inverted.active

Active/pressed state for inverted danger text

Chart

Color scales for data visualization

Categorical

Distinct colors for categorical data visualization where each color represents a different category

1

Primary blue

Default

chart.categorical.1

Hover

chart.categorical.1.hover

Active

chart.categorical.1.active

2

Vibrant green for strong contrast with blue

Default

chart.categorical.2

Hover

chart.categorical.2.hover

Active

chart.categorical.2.active

3

Rich purple for depth

Default

chart.categorical.3

Hover

chart.categorical.3.hover

Active

chart.categorical.3.active

4

Warm orange for contrast with cool tones

Default

chart.categorical.4

Hover

chart.categorical.4.hover

Active

chart.categorical.4.active

5

Energetic red

Default

chart.categorical.5

Hover

chart.categorical.5.hover

Active

chart.categorical.5.active

6

Lighter blue variant

Default

chart.categorical.6

Hover

chart.categorical.6.hover

Active

chart.categorical.6.active

7

Lighter green variant

Default

chart.categorical.7

Hover

chart.categorical.7.hover

Active

chart.categorical.7.active

8

Lighter purple variant

Default

chart.categorical.8

Hover

chart.categorical.8.hover

Active

chart.categorical.8.active

Sequential

Sequential colors for data visualization where each color represents a different value or range

1

Strongest emphasis - highest value

Default

chart.sequential.1

Hover

chart.sequential.1.hover

Active

chart.sequential.1.active

2

High emphasis

Default

chart.sequential.2

Hover

chart.sequential.2.hover

Active

chart.sequential.2.active

3

Medium emphasis

Default

chart.sequential.3

Hover

chart.sequential.3.hover

Active

chart.sequential.3.active

4

Low emphasis

Default

chart.sequential.4

Hover

chart.sequential.4.hover

Active

chart.sequential.4.active

5

Lowest emphasis

Default

chart.sequential.5

Hover

chart.sequential.5.hover

Active

chart.sequential.5.active

Diverging

Diverging colors for data visualization where each color represents a different value or range from negative to positive

Negative

Colors representing negative values, with deeper reds indicating greater negative magnitude

1

Low negative

Default

chart.diverging.negative.1

Hover

chart.diverging.negative.1.hover

Active

chart.diverging.negative.1.active

2

Medium negative

Default

chart.diverging.negative.2

Hover

chart.diverging.negative.2.hover

Active

chart.diverging.negative.2.active

3

High negative

Default

chart.diverging.negative.3

Hover

chart.diverging.negative.3.hover

Active

chart.diverging.negative.3.active

4

Maximum negative

Default

chart.diverging.negative.4

Hover

chart.diverging.negative.4.hover

Active

chart.diverging.negative.4.active

Neutral

Neutral midpoint

Default

chart.diverging.neutral

Hover

chart.diverging.neutral.hover

Active

chart.diverging.neutral.active

Positive

Colors representing positive values, with deeper greens indicating greater positive magnitude

1

Low positive

Default

chart.diverging.positive.1

Hover

chart.diverging.positive.1.hover

Active

chart.diverging.positive.1.active

2

Medium positive

Default

chart.diverging.positive.2

Hover

chart.diverging.positive.2.hover

Active

chart.diverging.positive.2.active

3

High positive

Default

chart.diverging.positive.3

Hover

chart.diverging.positive.3.hover

Active

chart.diverging.positive.3.active

4

Maximum positive

Default

chart.diverging.positive.4

Hover

chart.diverging.positive.4.hover

Active

chart.diverging.positive.4.active

Grid

Colors for chart grid elements

Line

chart.grid.line

Color for grid lines

Axis

chart.grid.axis

Color for axis lines and labels

Illustrations

Colors for illustrations and decorative elements

Face

illustrations.face

Face color for spot illustrations

Detail

illustrations.detail

Detail color for spot illustrations

Shadow

illustrations.shadow

Shadow color for spot illustrations

Highlight

illustrations.highlight

Highlight color for spot illustrations

Stroke

illustrations.stroke

Stroke color for spot illustrations

Outline

illustrations.outline

Outline color for spot illustrations to make them look like stickers

Base colors

Our foundational color palette that powers our semantic color system.

Neutralslate

Versatile neutral scale for typography, surfaces, and UI elements

A10

A11

A12

A13

Neutralsand

Neutral sand scale for typography, surfaces, and UI elements

A10

A11

A12

A13

Blue

Primary blue scale for high emphasis and interactive elements

A10

A11

A12

Purple

Rich purple scale for high emphasis and premium elements

A10

A11

A12

Green

Fresh green scale for modern and engaging interfaces

A10

A11

A12

Red

Energetic red scale for high emphasis and attention

A10

A11

A12

Orange

Warm orange scale for high emphasis and attention

A10

A11

A12

Yellow

Warm yellow scale for warnings and attention

A10

A11

A12

Neutralslatedark

Versatile neutral scale for typography, surfaces, and UI elements (Dark Mode)

A10

A11

A12

A13

Neutralsanddark

Versatile neutral scale for typography, surfaces, and UI elements (Dark Mode)

A10

A11

A12

A13

Bluedark

Primary blue scale for high emphasis and interactive elements (Dark Mode)

A10

A11

A12

Purpledark

Rich purple scale for high emphasis and premium elements (Dark Mode)

A10

A11

A12

Greendark

Fresh green scale for modern and engaging interfaces (Dark Mode)

A10

A11

A12

Reddark

Energetic red scale for high emphasis and attention (Dark Mode)

A10

A11

A12

Orangedark

Warm orange scale for high emphasis and attention (Dark Mode)

A10

A11

A12

Yellowdark

Warm yellow scale for emphasis and interaction (Dark Mode)

A10

A11

A12

Black

Black scale for overlays and shadows

A10

A11

A12

White

White scale for highlights and overlays

A10

A11

A12

Transparent

Transparent color

← Changelog

Spacing →