Colors

Semantic colors, tints, and status inks. Pass a token name to backgroundColor, color, or borderColor on Box.

Every color is a light-dark() pair, so it resolves for the active color-scheme on its own. The theme toggle shows the other half of each pair.

Tints are alpha cuts of a color, named by their percentage. Status inks and fills are the emerald, amber, and rose the product uses for success, warning, and danger.

Colors

Surfaces, copy, and frames. Any of these works on backgroundColor, color, and borderColor.

background

The page

foreground

Copy on the page

card

A raised surface

cardForeground

Copy on a card

popover

A floating surface

popoverForeground

Copy on a popover

primary

The action ink

primaryInk

The action ink as text, lifted on dark

primaryForeground

Copy on primary

secondary

A quiet surface

secondaryForeground

Copy on secondary

muted

Skeletons and quiet fills

mutedForeground

De-emphasised copy

accent

Hover and selection fill

accentForeground

Copy on accent

destructive

Danger actions

destructiveForeground

Copy on destructive

destructiveInk

Destructive text on its tints

border

Dividers and frames

input

Input frames

ring

Focus rings

outline

Hairline outlines

outlineStrong

Stronger outlines

surface1

Translucent surface, one step

surface2

Translucent surface, two steps

sidebar

The sidebar

sidebarForeground

Copy in the sidebar

sidebarPrimary

Primary in the sidebar

sidebarPrimaryForeground

Copy on sidebar primary

sidebarAccent

Active and hover rows

sidebarAccentForeground

Copy on an active row

sidebarBorder

Sidebar dividers

sidebarRing

Sidebar focus rings

chart1

Chart series 1

chart2

Chart series 2

chart3

Chart series 3

chart4

Chart series 4

chart5

Chart series 5

Tints

Alpha cuts. The number is the percentage.

foreground6

Foreground at 6%

foreground8

Foreground at 8%

foreground10

Foreground at 10%

foreground30

Foreground at 30%

foreground50

Foreground at 50%

foreground70

Foreground at 70%

accent25

Accent at 25%

destructive10

Destructive at 10%

destructive20

Destructive at 20%

destructive25

Destructive at 25%

success25

Success fill at 25%

warning10

Warning fill at 10%

warning25

Warning fill at 25%

danger10

Danger fill at 10%

black50

Black at 50%, dialog backdrops

background70

Background at 70%, frosted bars

white10

White at 10%, avatar rims

ring30

Ring at 30%

ring40

Ring at 40%

foreground40

Foreground at 40%

foreground60

Foreground at 60%

foreground80

Foreground at 80%

primary80

Primary at 80%, the button hover

secondary80

Secondary at 80%, the secondary button hover

muted40

Muted at 40%, the avatar frame

muted50

Muted at 50%, row and ghost hovers

input30

Input at 30%, the outline button hover in dark

destructive30

Destructive at 30%

destructive40

Destructive at 40%, the invalid ring in dark

destructive50

Destructive at 50%, the invalid border in dark

mutedForeground30

Muted foreground at 30%, the hero tagline

Status fills

Backgrounds for badges and callouts. backgroundColor only.

successFill

Emerald 500

warningFill

Amber 500

dangerFill

Rose 500

Status inks

Text and icon colors for status. color only.

successInk

Emerald 800 on light, 400 on dark

warningInk

Amber 800 on light, 400 on dark

dangerInk

Rose 800 on light, 400 on dark