Design tokens

The semantic layer: every colour, radius, shadow and family a component is allowed to reference, generated from the design's blueprint. Switch the theme in the navbar to see the dark mode.

Palette

The primitive ramps behind every role, 25 to 975, derived from each seed colour in the blueprint. Components never use these directly — pick a role from the sections below. The number is the step; hover a swatch for its value.

primary
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
secondary
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
neutral
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
success
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
warning
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
error
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975
info
  • 25
  • 50
  • 100
  • 150
  • 200
  • 250
  • 300
  • 350
  • 400
  • 450
  • 500
  • 550
  • 600
  • 650
  • 700
  • 750
  • 800
  • 850
  • 900
  • 950
  • 975

Surfaces

Backgrounds, from furthest back to nearest front.

bg-surface-basethe page
bg-surface-raisedcards, sheets, menus
bg-surface-subtlewells and inset areas
from-surface-base to-surface-subtlethe wash behind a page
bg-surface-overlay shadow-meda panel over the backdrop

Text and icons

Foreground content. On-action is for content sitting on a filled action.

Ask for feedback
text-fg-primarybody and headings
Optional
text-fg-secondarysecondary and helper text
Send
text-fg-on-actionlabel on a filled action
Thrive
text-fg-accentbrand text that is not an action
Unavailable
text-fg-disableddisabled labels
Privacy Policy
text-fg-accentinline links

Lines

Dividers and control outlines.

border-border-defaultdefault divider
border-border-strongemphasis, input outlines
border-border-subtlequiet divider
border-border-muteddisabled outline

Action

The primary action and the states it needs to be usable. Secondary and neutral actions follow the same pattern.

bg-action-primaryresting
bg-action-primary-hoverhover
bg-action-primary-activepressed
bg-action-primary-surfaceselected row, quiet button

Secondary action

The second action ramp, standing in for what used to be the accent.

bg-action-secondaryhighlight
bg-action-secondary-surfacehighlight wash

Status

Each status has a fill for text and icons, and a wash for backgrounds.

Answered
text-status-success-fg / bg-status-success-surfaceit worked
Expiring
text-status-warning-fg / bg-status-warning-surfaceneeds attention
Expired
text-status-error-fg / bg-status-error-surfaceit failed, or it destroys
Draft
text-status-info-fg / bg-status-info-surfaceneutral information

Focus

Applied globally, because FE_06 wants focus visible on everything interactive: one colour and the ring width and offset. Tab to the button.

--focus-ring (global :focus-visible)keyboard focus ring

Shape

The blueprint's corners, and the layout roles that pick one per device: a surface is a container on phone and tablet and a page on desktop.

rounded-innera corner inside a corner
rounded-elementa badge, a menu item
rounded-containera card, a panel, a dialog
rounded-pagea sheet, a full-width surface
rounded-surfacecards and panels, per device
rounded-buttonbuttons, icon buttons
rounded-inputfields, selects, search
rounded-chipchips, badges, tags

Elevation

Three heights, tinted with the darkest neutral and stronger in the dark mode.

shadow-lowa card resting on the page
shadow-meda menu or a popover
shadow-higha dialog over everything

Families

The blueprint's three faces, plus mono for code.

Thrive
font-mainevery role but the ones below (Google Sans)
Thrive
font-displaydisplay, subtitle-display, quote (Cooper)
Thrive
font-handwritesubtitle-handwrite (Caveat)
THV-0001
font-monocode, ids, keys

Motion

Only the two loops the loading indicators need. Nothing else animates yet, and the pulse stops under reduced motion.

animate-spinSpinner, Button loading
motion-safe:animate-pulseSkeleton

Type

One utility per type role in the blueprint, each carrying size, line height, letter spacing and weight, and stepping up at the tablet and desktop breakpoints. A utility cannot carry a family, so display, handwrite and code roles also need their font class — or use the Text component, which adds it. Resize the window to see the steps.