Token reference

Blurs

Used with backdropBlur and blur properties

Base tokens

sm

4px

base

8px

md

12px

lg

16px

xl

24px

2xl

40px

3xl

64px

Breakpoints

Used with responsive styles and container queries

Base tokens

sm

480px

md

768px

lg

1024px

xl

1280px

2xl

1536px

Colors

Used with color, backgroundColor, borderColor, fill, stroke, outlineColor, accentColor, and other color-related properties

Semantic tokens

neutral.surface

var(--colors-neutral-surface)

neutral.surface.hover

var(--colors-neutral-surface-hover)

neutral.surface.active

var(--colors-neutral-surface-active)

neutral.surface.subtler

var(--colors-neutral-surface-subtler)

neutral.surface.subtler.hover

var(--colors-neutral-surface-subtler-hover)

neutral.surface.subtler.active

var(--colors-neutral-surface-subtler-active)

neutral.surface.subtle

var(--colors-neutral-surface-subtle)

neutral.surface.subtle.hover

var(--colors-neutral-surface-subtle-hover)

neutral.surface.subtle.active

var(--colors-neutral-surface-subtle-active)

neutral.surface.highlight

var(--colors-neutral-surface-highlight)

neutral.surface.highlight.hover

var(--colors-neutral-surface-highlight-hover)

neutral.surface.highlight.active

var(--colors-neutral-surface-highlight-active)

neutral.surface.strong

var(--colors-neutral-surface-strong)

neutral.surface.strong.hover

var(--colors-neutral-surface-strong-hover)

neutral.surface.strong.active

var(--colors-neutral-surface-strong-active)

neutral.surface.inverted

var(--colors-neutral-surface-inverted)

neutral.surface.inverted.hover

var(--colors-neutral-surface-inverted-hover)

neutral.surface.inverted.active

var(--colors-neutral-surface-inverted-active)

neutral.surface.raised

var(--colors-neutral-surface-raised)

neutral.surface.raised.hover

var(--colors-neutral-surface-raised-hover)

neutral.surface.raised.active

var(--colors-neutral-surface-raised-active)

neutral.surface.sunken

var(--colors-neutral-surface-sunken)

neutral.surface.sunken.hover

var(--colors-neutral-surface-sunken-hover)

neutral.surface.sunken.active

var(--colors-neutral-surface-sunken-active)

neutral.surface.overlay

var(--colors-neutral-surface-overlay)

neutral.surface.overlay.hover

var(--colors-neutral-surface-overlay-hover)

neutral.surface.overlay.active

var(--colors-neutral-surface-overlay-active)

neutral.surface.backdrop

var(--colors-neutral-surface-backdrop)

neutral.border

var(--colors-neutral-border)

neutral.border.hover

var(--colors-neutral-border-hover)

neutral.border.active

var(--colors-neutral-border-active)

neutral.border.subtler

var(--colors-neutral-border-subtler)

neutral.border.subtler.hover

var(--colors-neutral-border-subtler-hover)

neutral.border.subtler.active

var(--colors-neutral-border-subtler-active)

neutral.border.subtle

var(--colors-neutral-border-subtle)

neutral.border.subtle.hover

var(--colors-neutral-border-subtle-hover)

neutral.border.subtle.active

var(--colors-neutral-border-subtle-active)

neutral.border.strong

var(--colors-neutral-border-strong)

neutral.border.strong.hover

var(--colors-neutral-border-strong-hover)

neutral.border.strong.active

var(--colors-neutral-border-strong-active)

neutral.border.inverted

var(--colors-neutral-border-inverted)

neutral.border.inverted.hover

var(--colors-neutral-border-inverted-hover)

neutral.border.inverted.active

var(--colors-neutral-border-inverted-active)

neutral.fg

var(--colors-neutral-fg)

neutral.fg.hover

var(--colors-neutral-fg-hover)

neutral.fg.active

var(--colors-neutral-fg-active)

neutral.fg.subtler

var(--colors-neutral-fg-subtler)

neutral.fg.subtler.hover

var(--colors-neutral-fg-subtler-hover)

neutral.fg.subtler.active

var(--colors-neutral-fg-subtler-active)

neutral.fg.subtle

var(--colors-neutral-fg-subtle)

neutral.fg.subtle.hover

var(--colors-neutral-fg-subtle-hover)

neutral.fg.subtle.active

var(--colors-neutral-fg-subtle-active)

neutral.fg.strong

var(--colors-neutral-fg-strong)

neutral.fg.strong.hover

var(--colors-neutral-fg-strong-hover)

neutral.fg.strong.active

var(--colors-neutral-fg-strong-active)

neutral.fg.inverted

var(--colors-neutral-fg-inverted)

neutral.fg.inverted.hover

var(--colors-neutral-fg-inverted-hover)

neutral.fg.inverted.active

var(--colors-neutral-fg-inverted-active)

accent.surface

var(--colors-accent-surface)

accent.surface.hover

var(--colors-accent-surface-hover)

accent.surface.active

var(--colors-accent-surface-active)

accent.surface.subtler

var(--colors-accent-surface-subtler)

accent.surface.subtler.hover

var(--colors-accent-surface-subtler-hover)

accent.surface.subtler.active

var(--colors-accent-surface-subtler-active)

accent.surface.subtle

var(--colors-accent-surface-subtle)

accent.surface.subtle.hover

var(--colors-accent-surface-subtle-hover)

accent.surface.subtle.active

var(--colors-accent-surface-subtle-active)

accent.surface.highlight

var(--colors-blue-5)

accent.surface.highlight.hover

var(--colors-blue-6)

accent.surface.highlight.active

var(--colors-blue-7)

accent.surface.strong

var(--colors-accent-surface-strong)

accent.surface.strong.hover

var(--colors-accent-surface-strong-hover)

accent.surface.strong.active

var(--colors-accent-surface-strong-active)

accent.surface.inverted

var(--colors-accent-surface-inverted)

accent.surface.inverted.hover

var(--colors-accent-surface-inverted-hover)

accent.surface.inverted.active

var(--colors-accent-surface-inverted-active)

accent.border

var(--colors-accent-border)

accent.border.hover

var(--colors-accent-border-hover)

accent.border.active

var(--colors-accent-border-active)

accent.border.subtler

var(--colors-accent-border-subtler)

accent.border.subtler.hover

var(--colors-accent-border-subtler-hover)

accent.border.subtler.active

var(--colors-accent-border-subtler-active)

accent.border.subtle

var(--colors-accent-border-subtle)

accent.border.subtle.hover

var(--colors-accent-border-subtle-hover)

accent.border.subtle.active

var(--colors-accent-border-subtle-active)

accent.border.strong

var(--colors-accent-border-strong)

accent.border.strong.hover

var(--colors-accent-border-strong-hover)

accent.border.strong.active

var(--colors-accent-border-strong-active)

accent.border.inverted

var(--colors-accent-border-inverted)

accent.border.inverted.hover

var(--colors-accent-border-inverted-hover)

accent.border.inverted.active

var(--colors-accent-border-inverted-active)

accent.fg

var(--colors-accent-fg)

accent.fg.hover

var(--colors-accent-fg-hover)

accent.fg.active

var(--colors-accent-fg-active)

accent.fg.subtler

var(--colors-accent-fg-subtler)

accent.fg.subtler.hover

var(--colors-accent-fg-subtler-hover)

accent.fg.subtler.active

var(--colors-accent-fg-subtler-active)

accent.fg.subtle

var(--colors-accent-fg-subtle)

accent.fg.subtle.hover

var(--colors-accent-fg-subtle-hover)

accent.fg.subtle.active

var(--colors-accent-fg-subtle-active)

accent.fg.strong

var(--colors-accent-fg-strong)

accent.fg.strong.hover

var(--colors-accent-fg-strong-hover)

accent.fg.strong.active

var(--colors-accent-fg-strong-active)

accent.fg.inverted

var(--colors-accent-fg-inverted)

accent.fg.inverted.hover

var(--colors-accent-fg-inverted-hover)

accent.fg.inverted.active

var(--colors-accent-fg-inverted-active)

brand.surface

var(--colors-brand-surface)

brand.surface.hover

var(--colors-brand-surface-hover)

brand.surface.active

var(--colors-brand-surface-active)

brand.surface.subtler

var(--colors-brand-surface-subtler)

brand.surface.subtler.hover

var(--colors-brand-surface-subtler-hover)

brand.surface.subtler.active

var(--colors-brand-surface-subtler-active)

brand.surface.subtle

var(--colors-brand-surface-subtle)

brand.surface.subtle.hover

var(--colors-brand-surface-subtle-hover)

brand.surface.subtle.active

var(--colors-brand-surface-subtle-active)

brand.surface.highlight

var(--colors-blue-5)

brand.surface.highlight.hover

var(--colors-blue-6)

brand.surface.highlight.active

var(--colors-blue-7)

brand.surface.strong

var(--colors-brand-surface-strong)

brand.surface.strong.hover

var(--colors-brand-surface-strong-hover)

brand.surface.strong.active

var(--colors-brand-surface-strong-active)

brand.surface.inverted

var(--colors-brand-surface-inverted)

brand.surface.inverted.hover

var(--colors-brand-surface-inverted-hover)

brand.surface.inverted.active

var(--colors-brand-surface-inverted-active)

brand.border

var(--colors-brand-border)

brand.border.hover

var(--colors-brand-border-hover)

brand.border.active

var(--colors-brand-border-active)

brand.border.subtler

var(--colors-brand-border-subtler)

brand.border.subtler.hover

var(--colors-brand-border-subtler-hover)

brand.border.subtler.active

var(--colors-brand-border-subtler-active)

brand.border.subtle

var(--colors-brand-border-subtle)

brand.border.subtle.hover

var(--colors-brand-border-subtle-hover)

brand.border.subtle.active

var(--colors-brand-border-subtle-active)

brand.border.strong

var(--colors-brand-border-strong)

brand.border.strong.hover

var(--colors-brand-border-strong-hover)

brand.border.strong.active

var(--colors-brand-border-strong-active)

brand.border.inverted

var(--colors-brand-border-inverted)

brand.border.inverted.hover

var(--colors-brand-border-inverted-hover)

brand.border.inverted.active

var(--colors-brand-border-inverted-active)

brand.fg

var(--colors-brand-fg)

brand.fg.hover

var(--colors-brand-fg-hover)

brand.fg.active

var(--colors-brand-fg-active)

brand.fg.subtler

var(--colors-brand-fg-subtler)

brand.fg.subtler.hover

var(--colors-brand-fg-subtler-hover)

brand.fg.subtler.active

var(--colors-brand-fg-subtler-active)

brand.fg.subtle

var(--colors-brand-fg-subtle)

brand.fg.subtle.hover

var(--colors-brand-fg-subtle-hover)

brand.fg.subtle.active

var(--colors-brand-fg-subtle-active)

brand.fg.strong

var(--colors-brand-fg-strong)

brand.fg.strong.hover

var(--colors-brand-fg-strong-hover)

brand.fg.strong.active

var(--colors-brand-fg-strong-active)

brand.fg.inverted

var(--colors-brand-fg-inverted)

brand.fg.inverted.hover

var(--colors-brand-fg-inverted-hover)

brand.fg.inverted.active

var(--colors-brand-fg-inverted-active)

brandSecondary.surface

var(--colors-brand-secondary-surface)

brandSecondary.surface.hover

var(--colors-brand-secondary-surface-hover)

brandSecondary.surface.active

var(--colors-brand-secondary-surface-active)

brandSecondary.surface.subtler

var(--colors-brand-secondary-surface-subtler)

brandSecondary.surface.subtler.hover

var(--colors-brand-secondary-surface-subtler-hover)

brandSecondary.surface.subtler.active

var(--colors-brand-secondary-surface-subtler-active)

brandSecondary.surface.subtle

var(--colors-brand-secondary-surface-subtle)

brandSecondary.surface.subtle.hover

var(--colors-brand-secondary-surface-subtle-hover)

brandSecondary.surface.subtle.active

var(--colors-brand-secondary-surface-subtle-active)

brandSecondary.surface.highlight

var(--colors-orange-5)

brandSecondary.surface.highlight.hover

var(--colors-orange-6)

brandSecondary.surface.highlight.active

var(--colors-orange-7)

brandSecondary.surface.strong

var(--colors-brand-secondary-surface-strong)

brandSecondary.surface.strong.hover

var(--colors-brand-secondary-surface-strong-hover)

brandSecondary.surface.strong.active

var(--colors-brand-secondary-surface-strong-active)

brandSecondary.surface.inverted

var(--colors-brand-secondary-surface-inverted)

brandSecondary.surface.inverted.hover

var(--colors-brand-secondary-surface-inverted-hover)

brandSecondary.surface.inverted.active

var(--colors-brand-secondary-surface-inverted-active)

brandSecondary.border

var(--colors-brand-secondary-border)

brandSecondary.border.hover

var(--colors-brand-secondary-border-hover)

brandSecondary.border.active

var(--colors-brand-secondary-border-active)

brandSecondary.border.subtler

var(--colors-brand-secondary-border-subtler)

brandSecondary.border.subtler.hover

var(--colors-brand-secondary-border-subtler-hover)

brandSecondary.border.subtler.active

var(--colors-brand-secondary-border-subtler-active)

brandSecondary.border.subtle

var(--colors-brand-secondary-border-subtle)

brandSecondary.border.subtle.hover

var(--colors-brand-secondary-border-subtle-hover)

brandSecondary.border.subtle.active

var(--colors-brand-secondary-border-subtle-active)

brandSecondary.border.strong

var(--colors-brand-secondary-border-strong)

brandSecondary.border.strong.hover

var(--colors-brand-secondary-border-strong-hover)

brandSecondary.border.strong.active

var(--colors-brand-secondary-border-strong-active)

brandSecondary.border.inverted

var(--colors-brand-secondary-border-inverted)

brandSecondary.border.inverted.hover

var(--colors-brand-secondary-border-inverted-hover)

brandSecondary.border.inverted.active

var(--colors-brand-secondary-border-inverted-active)

brandSecondary.fg

var(--colors-brand-secondary-fg)

brandSecondary.fg.hover

var(--colors-brand-secondary-fg-hover)

brandSecondary.fg.active

var(--colors-brand-secondary-fg-active)

brandSecondary.fg.subtler

var(--colors-brand-secondary-fg-subtler)

brandSecondary.fg.subtler.hover

var(--colors-brand-secondary-fg-subtler-hover)

brandSecondary.fg.subtler.active

var(--colors-brand-secondary-fg-subtler-active)

brandSecondary.fg.subtle

var(--colors-brand-secondary-fg-subtle)

brandSecondary.fg.subtle.hover

var(--colors-brand-secondary-fg-subtle-hover)

brandSecondary.fg.subtle.active

var(--colors-brand-secondary-fg-subtle-active)

brandSecondary.fg.strong

var(--colors-brand-secondary-fg-strong)

brandSecondary.fg.strong.hover

var(--colors-brand-secondary-fg-strong-hover)

brandSecondary.fg.strong.active

var(--colors-brand-secondary-fg-strong-active)

brandSecondary.fg.inverted

var(--colors-brand-secondary-fg-inverted)

brandSecondary.fg.inverted.hover

var(--colors-brand-secondary-fg-inverted-hover)

brandSecondary.fg.inverted.active

var(--colors-brand-secondary-fg-inverted-active)

information.surface

var(--colors-information-surface)

information.surface.hover

var(--colors-information-surface-hover)

information.surface.active

var(--colors-information-surface-active)

information.surface.subtler

var(--colors-information-surface-subtler)

information.surface.subtler.hover

var(--colors-information-surface-subtler-hover)

information.surface.subtler.active

var(--colors-information-surface-subtler-active)

information.surface.subtle

var(--colors-information-surface-subtle)

information.surface.subtle.hover

var(--colors-information-surface-subtle-hover)

information.surface.subtle.active

var(--colors-information-surface-subtle-active)

information.surface.highlight

var(--colors-purple-5)

information.surface.highlight.hover

var(--colors-purple-6)

information.surface.highlight.active

var(--colors-purple-7)

information.surface.strong

var(--colors-information-surface-strong)

information.surface.strong.hover

var(--colors-information-surface-strong-hover)

information.surface.strong.active

var(--colors-information-surface-strong-active)

information.surface.inverted

var(--colors-information-surface-inverted)

information.surface.inverted.hover

var(--colors-information-surface-inverted-hover)

information.surface.inverted.active

var(--colors-information-surface-inverted-active)

information.border

var(--colors-information-border)

information.border.hover

var(--colors-information-border-hover)

information.border.active

var(--colors-information-border-active)

information.border.subtler

var(--colors-information-border-subtler)

information.border.subtler.hover

var(--colors-information-border-subtler-hover)

information.border.subtler.active

var(--colors-information-border-subtler-active)

information.border.subtle

var(--colors-information-border-subtle)

information.border.subtle.hover

var(--colors-information-border-subtle-hover)

information.border.subtle.active

var(--colors-information-border-subtle-active)

information.border.strong

var(--colors-information-border-strong)

information.border.strong.hover

var(--colors-information-border-strong-hover)

information.border.strong.active

var(--colors-information-border-strong-active)

information.border.inverted

var(--colors-information-border-inverted)

information.border.inverted.hover

var(--colors-information-border-inverted-hover)

information.border.inverted.active

var(--colors-information-border-inverted-active)

information.fg

var(--colors-information-fg)

information.fg.hover

var(--colors-information-fg-hover)

information.fg.active

var(--colors-information-fg-active)

information.fg.subtler

var(--colors-information-fg-subtler)

information.fg.subtler.hover

var(--colors-information-fg-subtler-hover)

information.fg.subtler.active

var(--colors-information-fg-subtler-active)

information.fg.subtle

var(--colors-information-fg-subtle)

information.fg.subtle.hover

var(--colors-information-fg-subtle-hover)

information.fg.subtle.active

var(--colors-information-fg-subtle-active)

information.fg.strong

var(--colors-information-fg-strong)

information.fg.strong.hover

var(--colors-information-fg-strong-hover)

information.fg.strong.active

var(--colors-information-fg-strong-active)

information.fg.inverted

var(--colors-information-fg-inverted)

information.fg.inverted.hover

var(--colors-information-fg-inverted-hover)

information.fg.inverted.active

var(--colors-information-fg-inverted-active)

success.surface

var(--colors-success-surface)

success.surface.hover

var(--colors-success-surface-hover)

success.surface.active

var(--colors-success-surface-active)

success.surface.subtler

var(--colors-success-surface-subtler)

success.surface.subtler.hover

var(--colors-success-surface-subtler-hover)

success.surface.subtler.active

var(--colors-success-surface-subtler-active)

success.surface.subtle

var(--colors-success-surface-subtle)

success.surface.subtle.hover

var(--colors-success-surface-subtle-hover)

success.surface.subtle.active

var(--colors-success-surface-subtle-active)

success.surface.highlight

var(--colors-green-5)

success.surface.highlight.hover

var(--colors-green-6)

success.surface.highlight.active

var(--colors-green-7)

success.surface.strong

var(--colors-success-surface-strong)

success.surface.strong.hover

var(--colors-success-surface-strong-hover)

success.surface.strong.active

var(--colors-success-surface-strong-active)

success.surface.inverted

var(--colors-success-surface-inverted)

success.surface.inverted.hover

var(--colors-success-surface-inverted-hover)

success.surface.inverted.active

var(--colors-success-surface-inverted-active)

success.border

var(--colors-success-border)

success.border.hover

var(--colors-success-border-hover)

success.border.active

var(--colors-success-border-active)

success.border.subtler

var(--colors-success-border-subtler)

success.border.subtler.hover

var(--colors-success-border-subtler-hover)

success.border.subtler.active

var(--colors-success-border-subtler-active)

success.border.subtle

var(--colors-success-border-subtle)

success.border.subtle.hover

var(--colors-success-border-subtle-hover)

success.border.subtle.active

var(--colors-success-border-subtle-active)

success.border.strong

var(--colors-success-border-strong)

success.border.strong.hover

var(--colors-success-border-strong-hover)

success.border.strong.active

var(--colors-success-border-strong-active)

success.border.inverted

var(--colors-success-border-inverted)

success.border.inverted.hover

var(--colors-success-border-inverted-hover)

success.border.inverted.active

var(--colors-success-border-inverted-active)

success.fg

var(--colors-success-fg)

success.fg.hover

var(--colors-success-fg-hover)

success.fg.active

var(--colors-success-fg-active)

success.fg.subtler

var(--colors-success-fg-subtler)

success.fg.subtler.hover

var(--colors-success-fg-subtler-hover)

success.fg.subtler.active

var(--colors-success-fg-subtler-active)

success.fg.subtle

var(--colors-success-fg-subtle)

success.fg.subtle.hover

var(--colors-success-fg-subtle-hover)

success.fg.subtle.active

var(--colors-success-fg-subtle-active)

success.fg.strong

var(--colors-success-fg-strong)

success.fg.strong.hover

var(--colors-success-fg-strong-hover)

success.fg.strong.active

var(--colors-success-fg-strong-active)

success.fg.inverted

var(--colors-success-fg-inverted)

success.fg.inverted.hover

var(--colors-success-fg-inverted-hover)

success.fg.inverted.active

var(--colors-success-fg-inverted-active)

warning.surface

var(--colors-warning-surface)

warning.surface.hover

var(--colors-warning-surface-hover)

warning.surface.active

var(--colors-warning-surface-active)

warning.surface.subtler

var(--colors-warning-surface-subtler)

warning.surface.subtler.hover

var(--colors-warning-surface-subtler-hover)

warning.surface.subtler.active

var(--colors-warning-surface-subtler-active)

warning.surface.subtle

var(--colors-warning-surface-subtle)

warning.surface.subtle.hover

var(--colors-warning-surface-subtle-hover)

warning.surface.subtle.active

var(--colors-warning-surface-subtle-active)

warning.surface.highlight

var(--colors-yellow-5)

warning.surface.highlight.hover

var(--colors-yellow-6)

warning.surface.highlight.active

var(--colors-yellow-7)

warning.surface.strong

var(--colors-warning-surface-strong)

warning.surface.strong.hover

var(--colors-warning-surface-strong-hover)

warning.surface.strong.active

var(--colors-warning-surface-strong-active)

warning.surface.inverted

var(--colors-warning-surface-inverted)

warning.surface.inverted.hover

var(--colors-warning-surface-inverted-hover)

warning.surface.inverted.active

var(--colors-warning-surface-inverted-active)

warning.border

var(--colors-warning-border)

warning.border.hover

var(--colors-warning-border-hover)

warning.border.active

var(--colors-warning-border-active)

warning.border.subtler

var(--colors-warning-border-subtler)

warning.border.subtler.hover

var(--colors-warning-border-subtler-hover)

warning.border.subtler.active

var(--colors-warning-border-subtler-active)

warning.border.subtle

var(--colors-warning-border-subtle)

warning.border.subtle.hover

var(--colors-warning-border-subtle-hover)

warning.border.subtle.active

var(--colors-warning-border-subtle-active)

warning.border.strong

var(--colors-warning-border-strong)

warning.border.strong.hover

var(--colors-warning-border-strong-hover)

warning.border.strong.active

var(--colors-warning-border-strong-active)

warning.border.inverted

var(--colors-warning-border-inverted)

warning.border.inverted.hover

var(--colors-warning-border-inverted-hover)

warning.border.inverted.active

var(--colors-warning-border-inverted-active)

warning.fg

var(--colors-warning-fg)

warning.fg.hover

var(--colors-warning-fg-hover)

warning.fg.active

var(--colors-warning-fg-active)

warning.fg.subtler

var(--colors-warning-fg-subtler)

warning.fg.subtler.hover

var(--colors-warning-fg-subtler-hover)

warning.fg.subtler.active

var(--colors-warning-fg-subtler-active)

warning.fg.subtle

var(--colors-warning-fg-subtle)

warning.fg.subtle.hover

var(--colors-warning-fg-subtle-hover)

warning.fg.subtle.active

var(--colors-warning-fg-subtle-active)

warning.fg.strong

var(--colors-warning-fg-strong)

warning.fg.strong.hover

var(--colors-warning-fg-strong-hover)

warning.fg.strong.active

var(--colors-warning-fg-strong-active)

warning.fg.inverted

var(--colors-warning-fg-inverted)

warning.fg.inverted.hover

var(--colors-warning-fg-inverted-hover)

warning.fg.inverted.active

var(--colors-warning-fg-inverted-active)

danger.surface

var(--colors-danger-surface)

danger.surface.hover

var(--colors-danger-surface-hover)

danger.surface.active

var(--colors-danger-surface-active)

danger.surface.subtler

var(--colors-danger-surface-subtler)

danger.surface.subtler.hover

var(--colors-danger-surface-subtler-hover)

danger.surface.subtler.active

var(--colors-danger-surface-subtler-active)

danger.surface.subtle

var(--colors-danger-surface-subtle)

danger.surface.subtle.hover

var(--colors-danger-surface-subtle-hover)

danger.surface.subtle.active

var(--colors-danger-surface-subtle-active)

danger.surface.highlight

var(--colors-red-5)

danger.surface.highlight.hover

var(--colors-red-6)

danger.surface.highlight.active

var(--colors-red-7)

danger.surface.strong

var(--colors-danger-surface-strong)

danger.surface.strong.hover

var(--colors-danger-surface-strong-hover)

danger.surface.strong.active

var(--colors-danger-surface-strong-active)

danger.surface.inverted

var(--colors-danger-surface-inverted)

danger.surface.inverted.hover

var(--colors-danger-surface-inverted-hover)

danger.surface.inverted.active

var(--colors-danger-surface-inverted-active)

danger.border

var(--colors-danger-border)

danger.border.hover

var(--colors-danger-border-hover)

danger.border.active

var(--colors-danger-border-active)

danger.border.subtler

var(--colors-danger-border-subtler)

danger.border.subtler.hover

var(--colors-danger-border-subtler-hover)

danger.border.subtler.active

var(--colors-danger-border-subtler-active)

danger.border.subtle

var(--colors-danger-border-subtle)

danger.border.subtle.hover

var(--colors-danger-border-subtle-hover)

danger.border.subtle.active

var(--colors-danger-border-subtle-active)

danger.border.strong

var(--colors-danger-border-strong)

danger.border.strong.hover

var(--colors-danger-border-strong-hover)

danger.border.strong.active

var(--colors-danger-border-strong-active)

danger.border.inverted

var(--colors-danger-border-inverted)

danger.border.inverted.hover

var(--colors-danger-border-inverted-hover)

danger.border.inverted.active

var(--colors-danger-border-inverted-active)

danger.fg

var(--colors-danger-fg)

danger.fg.hover

var(--colors-danger-fg-hover)

danger.fg.active

var(--colors-danger-fg-active)

danger.fg.subtler

var(--colors-danger-fg-subtler)

danger.fg.subtler.hover

var(--colors-danger-fg-subtler-hover)

danger.fg.subtler.active

var(--colors-danger-fg-subtler-active)

danger.fg.subtle

var(--colors-danger-fg-subtle)

danger.fg.subtle.hover

var(--colors-danger-fg-subtle-hover)

danger.fg.subtle.active

var(--colors-danger-fg-subtle-active)

danger.fg.strong

var(--colors-danger-fg-strong)

danger.fg.strong.hover

var(--colors-danger-fg-strong-hover)

danger.fg.strong.active

var(--colors-danger-fg-strong-active)

danger.fg.inverted

var(--colors-danger-fg-inverted)

danger.fg.inverted.hover

var(--colors-danger-fg-inverted-hover)

danger.fg.inverted.active

var(--colors-danger-fg-inverted-active)

chart.categorical.1

var(--colors-chart-categorical-1)

chart.categorical.1.hover

var(--colors-chart-categorical-1-hover)

chart.categorical.1.active

var(--colors-chart-categorical-1-active)

chart.categorical.2

var(--colors-chart-categorical-2)

chart.categorical.2.hover

var(--colors-chart-categorical-2-hover)

chart.categorical.2.active

var(--colors-chart-categorical-2-active)

chart.categorical.3

var(--colors-chart-categorical-3)

chart.categorical.3.hover

var(--colors-chart-categorical-3-hover)

chart.categorical.3.active

var(--colors-chart-categorical-3-active)

chart.categorical.4

var(--colors-chart-categorical-4)

chart.categorical.4.hover

var(--colors-chart-categorical-4-hover)

chart.categorical.4.active

var(--colors-chart-categorical-4-active)

chart.categorical.5

var(--colors-chart-categorical-5)

chart.categorical.5.hover

var(--colors-chart-categorical-5-hover)

chart.categorical.5.active

var(--colors-chart-categorical-5-active)

chart.categorical.6

var(--colors-chart-categorical-6)

chart.categorical.6.hover

var(--colors-chart-categorical-6-hover)

chart.categorical.6.active

var(--colors-chart-categorical-6-active)

chart.categorical.7

var(--colors-chart-categorical-7)

chart.categorical.7.hover

var(--colors-chart-categorical-7-hover)

chart.categorical.7.active

var(--colors-chart-categorical-7-active)

chart.categorical.8

var(--colors-chart-categorical-8)

chart.categorical.8.hover

var(--colors-chart-categorical-8-hover)

chart.categorical.8.active

var(--colors-chart-categorical-8-active)

chart.sequential.1

var(--colors-chart-sequential-1)

chart.sequential.1.hover

var(--colors-chart-sequential-1-hover)

chart.sequential.1.active

var(--colors-chart-sequential-1-active)

chart.sequential.2

var(--colors-chart-sequential-2)

chart.sequential.2.hover

var(--colors-chart-sequential-2-hover)

chart.sequential.2.active

var(--colors-chart-sequential-2-active)

chart.sequential.3

var(--colors-chart-sequential-3)

chart.sequential.3.hover

var(--colors-chart-sequential-3-hover)

chart.sequential.3.active

var(--colors-chart-sequential-3-active)

chart.sequential.4

var(--colors-chart-sequential-4)

chart.sequential.4.hover

var(--colors-chart-sequential-4-hover)

chart.sequential.4.active

var(--colors-chart-sequential-4-active)

chart.sequential.5

var(--colors-chart-sequential-5)

chart.sequential.5.hover

var(--colors-chart-sequential-5-hover)

chart.sequential.5.active

var(--colors-chart-sequential-5-active)

chart.diverging.negative.1

var(--colors-chart-diverging-negative-1)

chart.diverging.negative.1.hover

var(--colors-chart-diverging-negative-1-hover)

chart.diverging.negative.1.active

var(--colors-chart-diverging-negative-1-active)

chart.diverging.negative.2

var(--colors-chart-diverging-negative-2)

chart.diverging.negative.2.hover

var(--colors-chart-diverging-negative-2-hover)

chart.diverging.negative.2.active

var(--colors-chart-diverging-negative-2-active)

chart.diverging.negative.3

var(--colors-chart-diverging-negative-3)

chart.diverging.negative.3.hover

var(--colors-chart-diverging-negative-3-hover)

chart.diverging.negative.3.active

var(--colors-chart-diverging-negative-3-active)

chart.diverging.negative.4

var(--colors-chart-diverging-negative-4)

chart.diverging.negative.4.hover

var(--colors-chart-diverging-negative-4-hover)

chart.diverging.negative.4.active

var(--colors-chart-diverging-negative-4-active)

chart.diverging.neutral

var(--colors-chart-diverging-neutral)

chart.diverging.neutral.hover

var(--colors-chart-diverging-neutral-hover)

chart.diverging.neutral.active

var(--colors-chart-diverging-neutral-active)

chart.diverging.positive.1

var(--colors-chart-diverging-positive-1)

chart.diverging.positive.1.hover

var(--colors-chart-diverging-positive-1-hover)

chart.diverging.positive.1.active

var(--colors-chart-diverging-positive-1-active)

chart.diverging.positive.2

var(--colors-chart-diverging-positive-2)

chart.diverging.positive.2.hover

var(--colors-chart-diverging-positive-2-hover)

chart.diverging.positive.2.active

var(--colors-chart-diverging-positive-2-active)

chart.diverging.positive.3

var(--colors-chart-diverging-positive-3)

chart.diverging.positive.3.hover

var(--colors-chart-diverging-positive-3-hover)

chart.diverging.positive.3.active

var(--colors-chart-diverging-positive-3-active)

chart.diverging.positive.4

var(--colors-chart-diverging-positive-4)

chart.diverging.positive.4.hover

var(--colors-chart-diverging-positive-4-hover)

chart.diverging.positive.4.active

var(--colors-chart-diverging-positive-4-active)

chart.grid.line

var(--colors-chart-grid-line)

chart.grid.axis

var(--colors-chart-grid-axis)

illustrations.face

var(--colors-purple-5)

illustrations.detail

var(--colors-orange-5)

illustrations.shadow

var(--colors-blue-9)

illustrations.highlight

var(--colors-blue-5)

illustrations.stroke

var(--colors-neutral-slate-12)

illustrations.outline

var(--colors-neutral-slate-0)

Base tokens

neutralSlate.0

#ffffff

neutralSlate.1

#fbfcff

neutralSlate.2

#f7f9fe

neutralSlate.3

#edf0f8

neutralSlate.4

#e4e8f2

neutralSlate.5

#dbe1ee

neutralSlate.6

#d3dae9

neutralSlate.7

#c6cfe2

neutralSlate.8

#b0bcd5

neutralSlate.9

#828ea6

neutralSlate.10

#78839a

neutralSlate.11

#5b6477

neutralSlate.12

#1a1f2b

neutralSlate.13

#0f1219

neutralSlate.A0

#ffffffcc

neutralSlate.A1

#00409902

neutralSlate.A2

#0040e008

neutralSlate.A3

#002b9c12

neutralSlate.A4

#0026851b

neutralSlate.A5

#002b8724

neutralSlate.A6

#0029802c

neutralSlate.A7

#00297e39

neutralSlate.A8

#0027784f

neutralSlate.A9

#00194a7d

neutralSlate.A10

#00154187

neutralSlate.A11

#000e2ca4

neutralSlate.A12

#000613e5

neutralSlate.A13

#030407f2

neutralSand.0

#ffffff

neutralSand.1

#fdfdfc

neutralSand.2

#f9f9f8

neutralSand.3

#f1f0ef

neutralSand.4

#e9e8e6

neutralSand.5

#e2e1de

neutralSand.6

#dad9d6

neutralSand.7

#cfceca

neutralSand.8

#bcbbb5

neutralSand.9

#8d8d86

neutralSand.10

#82827c

neutralSand.11

#63635e

neutralSand.12

#21201c

neutralSand.13

#0f1219

neutralSand.A0

#ffffffcc

neutralSand.A1

#55550003

neutralSand.A2

#25250007

neutralSand.A3

#20100010

neutralSand.A4

#1f150019

neutralSand.A5

#1f180021

neutralSand.A6

#19130029

neutralSand.A7

#19140035

neutralSand.A8

#1915014a

neutralSand.A9

#0f0f0079

neutralSand.A10

#0c0c0083

neutralSand.A11

#080800a1

neutralSand.A12

#060500e3

neutralSand.A13

#020203f2

blue.1

#f8fafc

blue.2

#f1f6fb

blue.3

#e4f0fb

blue.4

#d4e9fd

blue.5

#c2dffb

blue.6

#add2f5

blue.7

#92c1ee

blue.8

#68aae6

blue.9

#0091eb

blue.10

#0084d9

blue.11

#0072c9

blue.12

#04365b

blue.A1

#3c7d4004

blue.A2

#1471a30b

blue.A3

#077dd518

blue.A4

#0383f328

blue.A5

#017dee3a

blue.A6

#0377e050

blue.A7

#0170d76b

blue.A8

#0271d596

blue.A9

#0091eb

blue.A10

#0084d9

blue.A11

#0072c9

blue.A12

#003358fb

purple.1

#faf9fc

purple.2

#f7f4fc

purple.3

#f1e9fd

purple.4

#eadefd

purple.5

#e1d1fb

purple.6

#d6c1f7

purple.7

#c8acf0

purple.8

#b691e8

purple.9

#a96af1

purple.10

#9d5de3

purple.11

#7b3fb9

purple.12

#431e69

purple.A1

#bc3d4004

purple.A2

#8a1aaa09

purple.A3

#7c0ae614

purple.A4

#7006ef1f

purple.A5

#6502e82c

purple.A6

#5e02dd3c

purple.A7

#5b01d051

purple.A8

#5a02ca6d

purple.A9

#6e00e794

purple.A10

#6600d3a1

purple.A11

#5101a2c0

purple.A12

#2a0055e1

green.1

#f5fbfa

green.2

#edf9f7

green.3

#d4f6f1

green.4

#bbf2ea

green.5

#a1eae0

green.6

#86ded3

green.7

#61cec1

green.8

#00baab

green.9

#00c2b3

green.10

#00b6a8

green.11

#00766b

green.12

#01453f

green.A1

#21d84907

green.A2

#0ec9770f

green.A3

#03d6a628

green.A4

#04d6ae42

green.A5

#02cbaa5c

green.A6

#01bca177

green.A7

#01b19b9d

green.A8

#00baab

green.A9

#00c2b3

green.A10

#00b6a8

green.A11

#00766b

green.A12

#00443efe

red.1

#fbf9f8

red.2

#fdf2f1

red.3

#ffe6e2

red.4

#ffd2c9

red.5

#ffc2b7

red.6

#ffb4a9

red.7

#f5a296

red.8

#ea897c

red.9

#ff6b5c

red.10

#f25f51

red.11

#cc3d33

red.12

#592b25

red.A1

#fc8f0007

red.A2

#ffe9e480

red.A3

#ffe6e2

red.A4

#ffd2c9

red.A5

#ffc2b7

red.A6

#ffb4a9

red.A7

#ec220069

red.A8

#da1c0083

red.A9

#ff6b5c

red.A10

#ee1600ae

red.A11

#c10e00cc

red.A12

#3e0700da

orange.1

#fcf9f8

orange.2

#fef2ee

orange.3

#ffe6db

orange.4

#ffd3bd

orange.5

#ffc3a8

orange.6

#ffb290

orange.7

#ff9e78

orange.8

#f78255

orange.9

#ff8a5c

orange.10

#f37f51

orange.11

#bf501f

orange.12

#5f270f

orange.A1

#fff1e440

orange.A2

#ffefe9c0

orange.A3

#ffe6db

orange.A4

#ffd3bd

orange.A5

#ffc3a8

orange.A6

#ffb290

orange.A7

#ff9e78

orange.A8

#f54500aa

orange.A9

#ff8a5c

orange.A10

#ef4500ae

orange.A11

#b63800e0

orange.A12

#551a00f0

yellow.1

#fefdf9

yellow.2

#fffae6

yellow.3

#fff4ba

yellow.4

#ffeb9e

yellow.5

#ffe077

yellow.6

#ffd04f

yellow.7

#f0c251

yellow.8

#deaa00

yellow.9

#e0ac00

yellow.10

#d5a100

yellow.11

#9b7100

yellow.12

#483a1a

yellow.A1

#d5aa0006

yellow.A2

#ffcc0019

yellow.A3

#ffd70045

yellow.A4

#ffcb0061

yellow.A5

#ffc50088

yellow.A6

#ffbb00b0

yellow.A7

#e9a600ae

yellow.A8

#deaa00

yellow.A9

#e0ac00

yellow.A10

#d5a100

yellow.A11

#9b7100

yellow.A12

#332400e5

neutralSlateDark.0

#04080b

neutralSlateDark.1

#0f1116

neutralSlateDark.2

#17191e

neutralSlateDark.3

#1f222a

neutralSlateDark.4

#252a33

neutralSlateDark.5

#2b313c

neutralSlateDark.6

#333a47

neutralSlateDark.7

#3f4758

neutralSlateDark.8

#556078

neutralSlateDark.9

#636e86

neutralSlateDark.10

#707b92

neutralSlateDark.11

#abb4c6

neutralSlateDark.12

#eceef3

neutralSlateDark.13

#fbfcff

neutralSlateDark.A0

#00000080

neutralSlateDark.A1

#0f1116

neutralSlateDark.A2

#f2f4f909

neutralSlateDark.A3

#c9d6fe16

neutralSlateDark.A4

#bfd9fe20

neutralSlateDark.A5

#b9d4fd2a

neutralSlateDark.A6

#bad3fe36

neutralSlateDark.A7

#b7cefd49

neutralSlateDark.A8

#b4ccfd6c

neutralSlateDark.A9

#bdd2ff7b

neutralSlateDark.A10

#c5d8ff88

neutralSlateDark.A11

#dde9ffc1

neutralSlateDark.A12

#f8fafff2

neutralSlateDark.A13

#fffffff2

neutralSandDark.0

#0a0a09

neutralSandDark.1

#111110

neutralSandDark.2

#191918

neutralSandDark.3

#222221

neutralSandDark.4

#2a2a28

neutralSandDark.5

#31312e

neutralSandDark.6

#3b3a37

neutralSandDark.7

#494844

neutralSandDark.8

#62605b

neutralSandDark.9

#6f6d66

neutralSandDark.10

#7c7b74

neutralSandDark.11

#b5b3ad

neutralSandDark.12

#eeeeec

neutralSandDark.13

#fafaf8

neutralSandDark.A0

#00000080

neutralSandDark.A1

#111110

neutralSandDark.A2

#f4f4f309

neutralSandDark.A3

#f6f6f513

neutralSandDark.A4

#fefef31b

neutralSandDark.A5

#fbfbeb23

neutralSandDark.A6

#fffaed2d

neutralSandDark.A7

#fffbed3c

neutralSandDark.A8

#fff9eb57

neutralSandDark.A9

#fffae965

neutralSandDark.A10

#fffdee73

neutralSandDark.A11

#fffcf4b0

neutralSandDark.A12

#fffffded

neutralSandDark.A13

#fafaf8

blueDark.1

#09121b

blueDark.2

#0f1a24

blueDark.3

#0a2942

blueDark.4

#00345b

blueDark.5

#01416d

blueDark.6

#114f7e

blueDark.7

#1f6094

blueDark.8

#2674b3

blueDark.9

#0091eb

blueDark.10

#0084dd

blueDark.11

#71bbfe

blueDark.12

#c7e4ff

blueDark.A1

#003ceb06

blueDark.A2

#10a1f610

blueDark.A3

#008efb31

blueDark.A4

#0087fe4c

blueDark.A5

#0090fd60

blueDark.A6

#149cff72

blueDark.A7

#2da3ff8a

blueDark.A8

#31a3ffac

blueDark.A9

#009dfeea

blueDark.A10

#0098ffda

blueDark.A11

#71bcfffe

blueDark.A12

#c7e4ff

purpleDark.1

#130e1a

purpleDark.2

#1c1426

purpleDark.3

#2c1b40

purpleDark.4

#392156

purpleDark.5

#442864

purpleDark.6

#503373

purpleDark.7

#63428b

purpleDark.8

#8155b5

purpleDark.9

#a96af1

purpleDark.10

#9d5de3

purpleDark.11

#ce9eff

purpleDark.12

#e8d9ff

purpleDark.A1

#dc00e305

purpleDark.A2

#c83cf912

purpleDark.A3

#b049ff2e

purpleDark.A4

#a64bfc47

purpleDark.A5

#ad56fd56

purpleDark.A6

#b266ff66

purpleDark.A7

#b672fe81

purpleDark.A8

#b575feaf

purpleDark.A9

#b370fff0

purpleDark.A10

#b067fee1

purpleDark.A11

#ce9eff

purpleDark.A12

#e8d9ff

greenDark.1

#0b1312

greenDark.2

#101c1a

greenDark.3

#0b2d2a

greenDark.4

#003b36

greenDark.5

#024842

greenDark.6

#0d5750

greenDark.7

#146a61

greenDark.8

#127f75

greenDark.9

#00c2b3

greenDark.10

#00b6a8

greenDark.11

#33d5c5

greenDark.12

#a5f1e6

greenDark.A1

#00bb0003

greenDark.A2

#25fb6b0c

greenDark.A3

#00ffc11e

greenDark.A4

#00ffcc2d

greenDark.A5

#00ffd53b

greenDark.A6

#09ffdb4b

greenDark.A7

#1dfddd60

greenDark.A8

#16ffe376

greenDark.A9

#00ffe8be

greenDark.A10

#00ffe8b1

greenDark.A11

#3affead2

greenDark.A12

#aefff3f0

redDark.1

#160f0e

redDark.2

#1f1412

redDark.3

#3a1410

redDark.4

#50110d

redDark.5

#611913

redDark.6

#71261f

redDark.7

#8a362e

redDark.8

#b3473d

redDark.9

#ff6b5c

redDark.10

#f25f51

redDark.11

#ff9081

redDark.12

#fed2cc

redDark.A1

#ef000008

redDark.A2

#ff3e0011

redDark.A3

#fe22002e

redDark.A4

#fc120046

redDark.A5

#fd290e58

redDark.A6

#fd442c69

redDark.A7

#ff5a4583

redDark.A8

#fe604faf

redDark.A9

#ff6b5c

redDark.A10

#fe6354f2

redDark.A11

#ff9081

redDark.A12

#ffd3cdfe

orangeDark.1

#15100d

orangeDark.2

#1e1512

orangeDark.3

#361a10

orangeDark.4

#4a1b07

orangeDark.5

#59230c

orangeDark.6

#693019

orangeDark.7

#814027

orangeDark.8

#a65332

orangeDark.9

#ff8a5c

orangeDark.10

#f37f51

orangeDark.11

#ff9668

orangeDark.12

#fbd7ca

orangeDark.A1

#ea000007

orangeDark.A2

#ff510010

orangeDark.A3

#fb48002a

orangeDark.A4

#fe3a003f

orangeDark.A5

#fe4b004f

orangeDark.A6

#ff631e60

orangeDark.A7

#fd743a7a

orangeDark.A8

#fe7a43a1

orangeDark.A9

#ff8a5c

orangeDark.A10

#fe8454f3

orangeDark.A11

#ff9668

orangeDark.A12

#ffdacdfb

yellowDark.1

#13110b

yellowDark.2

#1c180f

yellowDark.3

#2c2208

yellowDark.4

#3c2900

yellowDark.5

#493300

yellowDark.6

#564106

yellowDark.7

#69531a

yellowDark.8

#856924

yellowDark.9

#fcc100

yellowDark.10

#f1b700

yellowDark.11

#ffcb2c

yellowDark.12

#fee7b5

yellowDark.A1

#bb110003

yellowDark.A2

#fba6000c

yellowDark.A3

#ffa7001d

yellowDark.A4

#fb94002f

yellowDark.A5

#ffa2003c

yellowDark.A6

#ffb7004a

yellowDark.A7

#fdc2295f

yellowDark.A8

#fdc4387d

yellowDark.A9

#ffc300fc

yellowDark.A10

#ffc100f0

yellowDark.A11

#ffcb2c

yellowDark.A12

#ffe8b6fe

black.A1

rgba(0, 0, 0, 0.05)

black.A2

rgba(0, 0, 0, 0.1)

black.A3

rgba(0, 0, 0, 0.15)

black.A4

rgba(0, 0, 0, 0.2)

black.A5

rgba(0, 0, 0, 0.3)

black.A6

rgba(0, 0, 0, 0.4)

black.A7

rgba(0, 0, 0, 0.5)

black.A8

rgba(0, 0, 0, 0.6)

black.A9

rgba(0, 0, 0, 0.7)

black.A10

rgba(0, 0, 0, 0.8)

black.A11

rgba(0, 0, 0, 0.9)

black.A12

rgba(0, 0, 0, 0.95)

white.A1

rgba(255, 255, 255, 0.05)

white.A2

rgba(255, 255, 255, 0.1)

white.A3

rgba(255, 255, 255, 0.15)

white.A4

rgba(255, 255, 255, 0.2)

white.A5

rgba(255, 255, 255, 0.3)

white.A6

rgba(255, 255, 255, 0.4)

white.A7

rgba(255, 255, 255, 0.5)

white.A8

rgba(255, 255, 255, 0.6)

white.A9

rgba(255, 255, 255, 0.7)

white.A10

rgba(255, 255, 255, 0.8)

white.A11

rgba(255, 255, 255, 0.9)

white.A12

rgba(255, 255, 255, 0.95)

transparent

rgba(255,255,255,0)

Durations

Used with transitionDuration and animationDuration properties

Base tokens

short

150ms

base

200ms

long

300ms

extraLong

500ms

Easings

Used with transitionTimingFunction and animationTimingFunction properties

Base tokens

easeIn

cubic-bezier(0.8, 0, 0.8, 1)

easeOut

cubic-bezier(0.2, 0, 0, 1)

easeInOut

cubic-bezier(0.15, 1, 0.3,1)

Fonts

Used with fontFamily property

Semantic tokens

ui

var(--font-intermission), var(--fonts-sans)

prose

var(--font-intermission), var(--fonts-sans)

display

var(--font-intermission), var(--fonts-sans)

code

var(--font-ibm-plex-mono), var(--fonts-mono)

Base tokens

sans

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

serif

ui-serif, Georgia, Cambria, Times New Roman, Times, serif

mono

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Fontsizes

Used with fontSize property

Base tokens

xs

0.75rem

sm

0.875rem

md

1rem

lg

clamp(1.125rem, 1.0147rem + 0.3676vw, 1.25rem)

xl

clamp(1.25rem, 1.0294rem + 0.7353vw, 1.5rem)

2xl

clamp(1.5rem, 1.0588rem + 1.4706vw, 2rem)

3xl

clamp(1.75rem, 1.0882rem + 2.2059vw, 2.5rem)

4xl

clamp(2rem, 1.1176rem + 2.9412vw, 3rem)

5xl

clamp(2.25rem, 0.7059rem + 5.1471vw, 4rem)

6xl

clamp(2.5rem, 0.5147rem + 6.6176vw, 4.75rem)

7xl

clamp(2.75rem, -0.1176rem + 9.5588vw, 6rem)

bpsm.xs

12px

bpsm.sm

14px

bpsm.md

16px

bpsm.lg

18px

bpsm.xl

20px

bpsm.2xl

24px

bpsm.3xl

28px

bpsm.4xl

32px

bpsm.5xl

36px

bpsm.6xl

40px

bpsm.7xl

44px

bpmd.lg

20px

bpmd.xl

22px

bpmd.2xl

28px

bpmd.3xl

34px

bpmd.4xl

40px

bpmd.5xl

50px

bpmd.6xl

58px

bpmd.7xl

72px

bplg.lg

20px

bplg.xl

24px

bplg.2xl

32px

bplg.3xl

40px

bplg.4xl

48px

bplg.5xl

64px

bplg.6xl

76px

bplg.7xl

96px

Fontweights

Used with fontWeight property

Base tokens

thin

100

extralight

200

light

300

normal

400

medium

500

semibold

600

bold

700

extrabold

800

black

900

Letterspacings

Used with letterSpacing property

Semantic tokens

display

var(--letter-spacings-tighter)

ui

var(--letter-spacings-tight)

prose

var(--letter-spacings-tight)

code

var(--letter-spacings-normal)

Base tokens

tightest

-0.03em

tighter

-0.02em

tight

-0.01em

normal

0

loose

0.01em

looser

0.02em

loosest

0.03em

Lineheights

Used with lineHeight property

Semantic tokens

display

var(--line-heights-tighter)

ui

var(--line-heights-tight)

prose

var(--line-heights-normal)

code

var(--line-heights-loose)

Base tokens

tightest

1

tighter

1.2

tight

1.35

normal

1.5

loose

1.625

looser

1.75

loosest

2

Radii

Used with borderRadius property

Semantic tokens

sm

var(--radii-100)

md

var(--radii-200)

lg

var(--radii-300)

full

var(--radii-round)

Base tokens

none

0px

025

2px

050

4px

075

6px

100

8px

150

12px

200

16px

300

24px

400

32px

round

9999px

Spacing

Used with margin, padding, gap, inset, space, and other spacing-related properties

Base tokens

025

2px

050

4px

075

6px

100

8px

150

12px

200

16px

250

20px

300

24px

400

32px

500

40px

600

48px

800

64px

1000

80px

1200

96px

1600

128px

Sizes

Used with width, height, maxWidth, maxHeight, flexBasis, and other dimension properties

Semantic tokens

025

var(--spacing-025)

050

var(--spacing-050)

075

var(--spacing-075)

100

var(--spacing-100)

150

var(--spacing-150)

200

var(--spacing-200)

250

var(--spacing-250)

300

var(--spacing-300)

400

var(--spacing-400)

500

var(--spacing-500)

600

var(--spacing-600)

800

var(--spacing-800)

1000

var(--spacing-1000)

1200

var(--spacing-1200)

1600

var(--spacing-1600)

full

100%

min

min-content

max

max-content

fit

fit-content

prose

65ch

Base tokens

0

0px

xs

320px

sm

384px

md

448px

lg

512px

xl

576px

2xl

672px

3xl

768px

4xl

896px

5xl

1024px

6xl

1152px

7xl

1280px

8xl

1440px

Shadows

Used with boxShadow and textShadow properties

Semantic tokens

raised

var(--shadows-raised)

overlay

var(--shadows-overlay)

modal

var(--shadows-modal)

sunken

var(--shadows-sunken)

Textstyles

Semantic tokens

display.prose.1

display.prose.2

display.prose.3

display.prose.4

display.prose.5

display.prose.6

display.prose

display.ui.1

display.ui.2

display.ui.3

display.ui.4

display.ui.5

display.ui.6

display.ui

ui

ui.meta

prose

prose.lead

code

Previous page

← Overview

Next page

Overview →