Primitives
Brand expressive has 118 primitives. Think of them as option tokens: the raw choices on the shelf, such as a colour ramp or a spacing scale. They carry no meaning on their own.
The meaning comes from decision tokens (semantic tokens), which pick one option and say what it is for: “the primary action”, “a card corner”. In between, each brand’s theme picks a primitive for every brand-dependent decision, in light and dark. Colours come by hue, then mode, then step (color.violet.light.600). Primitives are steps only: each theme decides its own base (@) for every concept, such as color.action.primary.@ beside color.action.primary.hover. Each primitive below lists the decisions that reach it. Change a primitive, and every decision that points at it changes too.
Colour 74
Raw hues. Each has a light ramp and a dark ramp (the same steps, tuned for dark backgrounds). Steps only: each brand theme picks from these and decides its own base (@).
color.taupe.light.0#FFFFFFUsed by- color.surface.default · light
- color.surface.raised · light
- color.text.inverse · light
- color.text.on-action · light
- color.action.secondary.@ · light
color.taupe.light.50#FFF8F3Used by- color.surface.canvas · light
color.taupe.light.100#FCEFE6Used by- color.surface.sunken · light
- color.action.secondary.hover · light
- color.category.5.subtle · light
- color.disabled.surface · light
color.taupe.light.200#F2DCCFUsed by- color.border.default · light
- color.disabled.border · light
color.taupe.light.300#E2C4B3Used byNothing yet. A spare option, ready if a decision needs it.color.taupe.light.400#B5988ADerived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary.Used byNothing yet. A spare option, ready if a decision needs it.color.taupe.light.500#8A6F63Used by- color.border.strong · light
- color.category.5.@ · light
- color.disabled.text · light
color.taupe.light.600#6B544ADerived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary.Used by- color.text.muted · light
color.taupe.light.700#4D3A33Used by- color.text.secondary · light
color.taupe.light.800#33241FUsed byNothing yet. A spare option, ready if a decision needs it.color.taupe.light.900#1F1411Used by- color.surface.inverse · light
- color.text.primary · light
color.taupe.light.950#120B09Used byNothing yet. A spare option, ready if a decision needs it.color.taupe.dark.0#120B09Used by- color.surface.canvas · dark
- color.text.on-action · dark
color.taupe.dark.50#1F1411Used by- color.surface.default · dark
- color.text.inverse · dark
- color.action.secondary.@ · dark
color.taupe.dark.100#33241FUsed by- color.surface.raised · dark
- color.surface.sunken · dark
- color.border.default · dark
- color.action.secondary.hover · dark
- color.category.5.subtle · dark
- color.disabled.surface · dark
color.taupe.dark.200#4D3A33Used by- color.disabled.border · dark
color.taupe.dark.300#8A6F63Used by- color.border.strong · dark
color.taupe.dark.400#B5988ADerived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary.Used by- color.text.muted · dark
color.taupe.dark.500#E2C4B3Used by- color.text.secondary · dark
- color.disabled.text · dark
color.taupe.dark.600#EAD0C1Derived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary.Used byNothing yet. A spare option, ready if a decision needs it.color.taupe.dark.700#F2DCCFUsed by- color.category.5.@ · dark
color.taupe.dark.800#FCEFE6Used byNothing yet. A spare option, ready if a decision needs it.color.taupe.dark.900#FFF8F3Used by- color.surface.inverse · dark
- color.text.primary · dark
color.taupe.dark.950#FFFFFFUsed byNothing yet. A spare option, ready if a decision needs it.color.pink.light.100#FDE4F0Used by- color.surface.selected · light
- color.category.1.subtle · light
color.pink.light.300#F59ACAUsed byNothing yet. A spare option, ready if a decision needs it.color.pink.light.500#EB3E93Used byNothing yet. A spare option, ready if a decision needs it.color.pink.light.600#D61F7AUsed by- color.border.focus · light
- color.action.primary.@ · light
- color.category.1.@ · light
color.pink.light.700#A8165FUsed by- color.text.link · light
- color.action.primary.hover · light
color.pink.light.800#7C1046Used byNothing yet. A spare option, ready if a decision needs it.color.pink.dark.100#7C1046Used by- color.surface.selected · dark
- color.category.1.subtle · dark
color.pink.dark.300#A8165FUsed byNothing yet. A spare option, ready if a decision needs it.color.pink.dark.500#D61F7AUsed byNothing yet. A spare option, ready if a decision needs it.color.pink.dark.600#EB3E93Used byNothing yet. A spare option, ready if a decision needs it.color.pink.dark.700#F59ACAUsed by- color.text.link · dark
- color.border.focus · dark
- color.action.primary.@ · dark
- color.category.1.@ · dark
color.pink.dark.800#FDE4F0Used by- color.action.primary.hover · dark
color.green.light.100#E3F4EAUsed by- color.status.success.subtle · light
- color.category.3.subtle · light
color.green.light.300#5CC283Used byNothing yet. A spare option, ready if a decision needs it.color.green.light.700#1F7A3AUsed by- color.status.success.@ · light
- color.category.3.@ · light
color.green.light.900#123322Used byNothing yet. A spare option, ready if a decision needs it.color.green.dark.100#123322Used by- color.status.success.subtle · dark
- color.category.3.subtle · dark
color.green.dark.300#1F7A3AUsed byNothing yet. A spare option, ready if a decision needs it.color.green.dark.700#5CC283Used by- color.status.success.@ · dark
- color.category.3.@ · dark
color.green.dark.900#E3F4EAUsed byNothing yet. A spare option, ready if a decision needs it.color.amber.light.100#FFF3D6Used by- color.status.warning.subtle · light
- color.category.4.subtle · light
color.amber.light.300#F2B84BUsed byNothing yet. A spare option, ready if a decision needs it.color.amber.light.700#8A5600Used by- color.status.warning.@ · light
- color.category.4.@ · light
color.amber.light.900#3A2A05Used byNothing yet. A spare option, ready if a decision needs it.color.amber.dark.100#3A2A05Used by- color.status.warning.subtle · dark
- color.category.4.subtle · dark
color.amber.dark.300#8A5600Used byNothing yet. A spare option, ready if a decision needs it.color.amber.dark.700#F2B84BUsed by- color.status.warning.@ · dark
- color.category.4.@ · dark
color.amber.dark.900#FFF3D6Used byNothing yet. A spare option, ready if a decision needs it.color.red.light.100#FDE7E7Used by- color.status.danger.subtle · light
color.red.light.300#F28B8BUsed byNothing yet. A spare option, ready if a decision needs it.color.red.light.700#C42B2BUsed by- color.status.danger.@ · light
color.red.light.900#3D1414Used byNothing yet. A spare option, ready if a decision needs it.color.red.dark.100#3D1414Used by- color.status.danger.subtle · dark
color.red.dark.300#C42B2BUsed byNothing yet. A spare option, ready if a decision needs it.color.red.dark.700#F28B8BUsed by- color.status.danger.@ · dark
color.red.dark.900#FDE7E7Used byNothing yet. A spare option, ready if a decision needs it.color.black.light.scrim#0000008CUsed by- color.surface.scrim · light
color.black.dark.scrim#000000B3Used by- color.surface.scrim · dark
color.blue.light.100#E1ECFFUsed by- color.status.info.subtle · light
- color.category.2.subtle · light
color.blue.light.300#8AB4F8Used byNothing yet. A spare option, ready if a decision needs it.color.blue.light.500#1A5DD0Used byNothing yet. A spare option, ready if a decision needs it.color.blue.light.600#0B4FC0Used by- color.category.2.@ · light
color.blue.light.700#083C93Used by- color.status.info.@ · light
color.blue.light.800#062C6EUsed byNothing yet. A spare option, ready if a decision needs it.color.blue.dark.100#062C6EUsed by- color.status.info.subtle · dark
- color.category.2.subtle · dark
color.blue.dark.300#083C93Used byNothing yet. A spare option, ready if a decision needs it.color.blue.dark.500#0B4FC0Used byNothing yet. A spare option, ready if a decision needs it.color.blue.dark.600#1A5DD0Used byNothing yet. A spare option, ready if a decision needs it.color.blue.dark.700#8AB4F8Used by- color.status.info.@ · dark
- color.category.2.@ · dark
color.blue.dark.800#E1ECFFUsed byNothing yet. A spare option, ready if a decision needs it.
Type 18
Font families, sizes, weights and line heights.
- Aa
font.size.140.875remUsed by- type.caption.font-size
- Aa
font.size.150.9375remUsed by- type.label.font-size
- Aa
font.size.171.0625remUsed by- type.body.font-size
- type.data.font-size
- Aa
font.size.281.75remUsed by- type.heading.font-size
- Aa
font.size.402.5remUsed by- type.title.font-size
- Aa
font.size.563.5remUsed by- type.display.font-size
- Aa
font.weight.400400Used by- type.body.font-weight
- type.caption.font-weight
- type.data.font-weight
- Aa
font.weight.700700Used by- type.heading.font-weight
- type.label.font-weight
- Aa
font.weight.800800Used by- type.display.font-weight
- type.title.font-weight
- ·
font.line-height.1_051.05A ratio of the text size.Used by- type.display.line-height
- ·
font.line-height.1_11.1A ratio of the text size.Used by- type.title.line-height
- ·
font.line-height.1_21.2A ratio of the text size.Used by- type.heading.line-height
- ·
font.line-height.1_31.3A ratio of the text size.Used by- type.label.line-height
- ·
font.line-height.1_41.4A ratio of the text size.Used by- type.caption.line-height
- ·
font.line-height.1_551.55A ratio of the text size.Used by- type.body.line-height
- type.data.line-height
- Aa
font.family.bricolage-grotesque"Bricolage Grotesque", system-ui, sans-serifUsed by- type.display.font-family
- type.title.font-family
- type.heading.font-family
- Aa
font.family.dm-sans"DM Sans", system-ui, sans-serifUsed by- type.body.font-family
- type.label.font-family
- type.caption.font-family
- type.data.font-family
- Aa
font.family.dm-mono"DM Mono", ui-monospace, monospaceUsed byNothing yet. A spare option, ready if a decision needs it.
Space 6
The spacing steps gaps and insets pick from.
space.80.5remUsed by- space.gap.tight
space.161remUsed by- space.gap.default
- space.inset.cell-x
space.281.75remUsed by- space.inset.control-x
space.322remUsed by- space.inset.container
space.402.5remUsed by- space.gap.group
space.966remUsed by- space.gap.section
Size 5
Heights of controls, rows and targets.
size.161remUsed byNothing yet. A spare option, ready if a decision needs it.size.201.25remUsed by- size.icon
size.241.5remUsed byNothing yet. A spare option, ready if a decision needs it.size.442.75remUsed by- size.control.compact
size.523.25remUsed by- size.control.default
- size.row
Corners 4
Corner options.
radius.00remUsed byNothing yet. A spare option, ready if a decision needs it.radius.241.5remUsed by- radius.container
radius.9999999pxUsed by- radius.control
- radius.badge
radius.full9999pxFully round.Used by- radius.round
Borders 2
Line widths.
- ·
border-width.22pxUsed by- border-width.default
- ·
border-width.33pxUsed by- border-width.focus
Shadows 4
Raw shadows that elevation picks from.
shadow.card0px 12px 32px 0px #1F141124Raw shadow for card in light mode.Used by- elevation.card · light
shadow.overlay0px 24px 48px 0px #1F141133Raw shadow for overlay in light mode.Used by- elevation.overlay · light
shadow.card-dark0px 12px 32px 0px #00000080Raw shadow for card in dark mode.Used by- elevation.card · dark
shadow.overlay-dark0px 24px 48px 0px #00000099Raw shadow for overlay in dark mode.Used by- elevation.overlay · dark
Duration 3
How long motion takes.
- ·
duration.fast120msFast: the usual convention for feedback, about 120ms.Used byNothing yet. A spare option, ready if a decision needs it. - ·
duration.moderate200msModerate: a calm, easy-to-follow speed, about 200ms.Used byNothing yet. A spare option, ready if a decision needs it. - ·
duration.relaxed320msRelaxed: a slower, springy speed for expressive motion, about 320ms.Used by- motion.duration.feedback
Easing 1
The curves motion follows.
- ·
easing.standard0.34, 1.56, 0.64, 1The easing for feedback transitions.Used by- motion.easing.standard
Opacity 1
See-through steps.
- ·
opacity.400.4An opacity option.Used by- opacity.disabled