Foundations

Color and contrast

The colors, what each one is for and how to check legibility

Source: tokens/ in the W3C Design Tokens 2025.10 format, built with Style Dictionary. The swatches below use the same variables a product installs

Surfaces and text

Window, tile, nested and text: a neutral base where color appears only with a role. Light theme on the left, dark on the right; click a value to copy it

--window

Window background (the frame around tiles)

Tile

Tile

--tile

Tile

Nested

Nested

--nested

Nested surface inside a tile, chips, fields

ExportRename
ExportRename
--popover

Menus, tooltips, the solid variant of glass

AaBody text
AaBody text
--text

Text

AaCaption, meta
AaCaption, meta
--text-muted

Captions, secondary content

Input field
Input field
--border

Only for input fields and rare dividers

--nav-active

Selected sidebar item (pill, white icon)

--nav-active-foreground

Icon and text on the selected sidebar item

Processing
Processing
--loader

Spinner arc

--skeleton

Skeletons

Product accent

The only thing a product sets itself: main action, selection and focus. Light theme on the left, dark on the right; click a value to copy it

--primary

Accent: main action, selection, focus. Lime

--primary-foreground

Text on accent

Saved
Saved
--primary-ink

Accent as text and icon on a neutral tile

--primary-edge

Selected chip border on white

Focus
Focus
--ring

Focus ring: accent as ink

Roles

Indigo is everything the AI does, Giants is a warning. Role text sits on the soft tone, the saturated tone gets only a glyph. Light theme on the left, dark on the right; click a value to copy it

--indigo

“AI” role: summaries, everything the model does. No text on the saturated tone, icons only

Summary

Beta on Friday

Summary

Beta on Friday

--indigo-soft

Soft AI tone for text: Indigo 60 % with white

AI summary
AI summary
--indigo-ink

AI ink on a neutral tile: icons (Lc 45) and large semibold text (Lc 60)

--giants

“Warning” role: “not recognized”, attention. No text on the saturated tone, icons only

Not recognized

Check the microphone

Not recognized

Check the microphone

--giants-soft

Soft warning tone for text: Giants 45 % with white (Lc 76 with #111)

Attention
Attention
--giants-ink

Warning ink on a neutral tile: icons (Lc 45) and large semibold text (Lc 60)

Summary

Beta on Friday

Summary

Beta on Friday

--on-role

Text on accent, Indigo and Giants

Destructive and record

Red is only for recording and deletion, glyph and text on it are white. Light theme on the left, dark on the right; click a value to copy it

--destructive

Destructive: deletion

--destructive-foreground

Text on destructive

--record

“Record” role: the “Stop” button, the recording dot. Text and glyph on it use --record-foreground; the same red marks destructive in the dark theme

--record-foreground

Glyph and text on recording red: white in both themes