Primitives
Content first has 115 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.stone.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.stone.light.50#FFFDF8Used by- color.surface.canvas · light
color.stone.light.100#F6F2EAUsed by- color.surface.sunken · light
- color.action.secondary.hover · light
- color.category.5.subtle · light
- color.disabled.surface · light
color.stone.light.200#E4DDD0Used by- color.border.default · light
- color.disabled.border · light
color.stone.light.300#CFC6B6Used byNothing yet. A spare option, ready if a decision needs it.color.stone.light.400#A39A8BDerived: 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.stone.light.500#7A7062Used by- color.border.strong · light
- color.category.5.@ · light
- color.disabled.text · light
color.stone.light.600#61594DDerived: 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.stone.light.700#4A4339Used by- color.text.secondary · light
color.stone.light.800#2E2A24Used byNothing yet. A spare option, ready if a decision needs it.color.stone.light.900#1F1B16Used by- color.surface.inverse · light
- color.text.primary · light
color.stone.light.950#14110DUsed byNothing yet. A spare option, ready if a decision needs it.color.stone.dark.0#14110DUsed by- color.surface.canvas · dark
- color.text.on-action · dark
color.stone.dark.50#1F1B16Used by- color.surface.default · dark
- color.text.inverse · dark
- color.action.secondary.@ · dark
color.stone.dark.100#2E2A24Used 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.stone.dark.200#4A4339Used by- color.disabled.border · dark
color.stone.dark.300#7A7062Used by- color.border.strong · dark
color.stone.dark.400#A39A8BDerived: 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.stone.dark.500#CFC6B6Used by- color.text.secondary · dark
- color.disabled.text · dark
color.stone.dark.600#D9D1C3Derived: 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.stone.dark.700#E4DDD0Used by- color.category.5.@ · dark
color.stone.dark.800#F6F2EAUsed byNothing yet. A spare option, ready if a decision needs it.color.stone.dark.900#FFFDF8Used by- color.surface.inverse · dark
- color.text.primary · dark
color.stone.dark.950#FFFFFFUsed byNothing yet. A spare option, ready if a decision needs it.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 15
Font families, sizes, weights and line heights.
- Aa
font.size.140.875remUsed by- type.caption.font-size
- Aa
font.size.161remUsed by- type.label.font-size
- Aa
font.size.181.125remUsed by- type.body.font-size
- type.data.font-size
- Aa
font.size.281.75remUsed by- type.heading.font-size
- Aa
font.size.362.25remUsed by- type.title.font-size
- Aa
font.size.442.75remUsed 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.600600Used by- type.display.font-weight
- type.title.font-weight
- type.heading.font-weight
- type.label.font-weight
- ·
font.line-height.1_151.15A ratio of the text size.Used by- type.display.line-height
- type.title.line-height
- ·
font.line-height.1_31.3A ratio of the text size.Used by- type.heading.line-height
- type.label.line-height
- ·
font.line-height.1_451.45A ratio of the text size.Used by- type.caption.line-height
- ·
font.line-height.1_651.65A ratio of the text size.Used by- type.body.line-height
- type.data.line-height
- Aa
font.family.source-serif-4"Source Serif 4", Georgia, serifUsed by- type.display.font-family
- type.title.font-family
- type.heading.font-family
- type.body.font-family
- type.data.font-family
- Aa
font.family.interInter, system-ui, sans-serifUsed by- type.label.font-family
- type.caption.font-family
- Aa
font.family.ibm-plex-mono"IBM Plex 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.201.25remUsed by- space.inset.control-x
space.241.5remUsed by- space.inset.container
space.322remUsed by- space.gap.group
space.644remUsed by- space.gap.section
Size 5
Heights of controls, rows and targets.
size.161remUsed by- size.icon
size.201.25remUsed byNothing yet. A spare option, ready if a decision needs it.size.241.5remUsed byNothing yet. A spare option, ready if a decision needs it.size.402.5remUsed by- size.control.compact
size.483remUsed by- size.control.default
- size.row
Corners 5
Corner options.
radius.00remUsed byNothing yet. A spare option, ready if a decision needs it.radius.80.5remUsed by- radius.control
radius.120.75remUsed by- radius.container
radius.9999999pxUsed by- radius.badge
radius.full9999pxFully round.Used by- radius.round
Borders 2
Line widths.
- ·
border-width.11pxUsed by- border-width.default
- ·
border-width.22pxUsed by- border-width.focus
Shadows 3
Raw shadows that elevation picks from.
shadow.none0px 0px 0px 0px #00000000No shadow: flat surfaces.Used by- elevation.card · light
- elevation.card · dark
shadow.overlay0px 12px 32px 0px #1F1B1629Raw shadow for overlay in light mode.Used by- elevation.overlay · light
shadow.overlay-dark0px 12px 32px 0px #00000080Raw 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 by- motion.duration.feedback
- ·
duration.relaxed320msRelaxed: a slower, springy speed for expressive motion, about 320ms.Used byNothing yet. A spare option, ready if a decision needs it.
Easing 1
The curves motion follows.
- ·
easing.standard0.2, 0, 0, 1The easing for feedback transitions.Used by- motion.easing.standard
Opacity 1
See-through steps.
- ·
opacity.400.4An opacity option.Used by- opacity.disabled