Primitives
Multi-brand has 146 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 98
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.slate.light.0#FFFFFFUsed by- color.surface.default · Aster light
- color.surface.raised · Aster light
- color.text.inverse · Aster light
- color.text.on-action · Aster light
- color.action.secondary.@ · Aster light
- color.surface.default · Birch light
- color.surface.raised · Birch light
- color.text.inverse · Birch light
- color.text.on-action · Birch light
- color.action.secondary.@ · Birch light
- color.surface.default · Coral light
- color.surface.raised · Coral light
- color.text.inverse · Coral light
- color.text.on-action · Coral light
- color.action.secondary.@ · Coral light
color.slate.light.50#F8FAFCUsed by- color.surface.canvas · Aster light
- color.surface.canvas · Birch light
- color.surface.canvas · Coral light
color.slate.light.100#F1F5F9Used by- color.surface.sunken · Aster light
- color.action.secondary.hover · Aster light
- color.disabled.surface · Aster light
- color.surface.sunken · Birch light
- color.action.secondary.hover · Birch light
- color.disabled.surface · Birch light
- color.surface.sunken · Coral light
- color.action.secondary.hover · Coral light
- color.disabled.surface · Coral light
color.slate.light.200#E2E8F0Used by- color.border.default · Aster light
- color.disabled.border · Aster light
- color.border.default · Birch light
- color.disabled.border · Birch light
- color.border.default · Coral light
- color.disabled.border · Coral light
color.slate.light.300#CBD5E1Used byNothing yet. A spare option, ready if a decision needs it.color.slate.light.400#96A3B5Derived: 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.slate.light.500#64748BUsed by- color.border.strong · Aster light
- color.disabled.text · Aster light
- color.border.strong · Birch light
- color.disabled.text · Birch light
- color.border.strong · Coral light
- color.disabled.text · Coral light
color.slate.light.600#4B5A6FDerived: 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 · Aster light
- color.text.muted · Birch light
- color.text.muted · Coral light
color.slate.light.700#334155Used by- color.text.secondary · Aster light
- color.text.secondary · Birch light
- color.text.secondary · Coral light
color.slate.light.800#1E293BUsed byNothing yet. A spare option, ready if a decision needs it.color.slate.light.900#0F172AUsed by- color.surface.inverse · Aster light
- color.text.primary · Aster light
- color.surface.inverse · Birch light
- color.text.primary · Birch light
- color.surface.inverse · Coral light
- color.text.primary · Coral light
color.slate.light.950#020617Used byNothing yet. A spare option, ready if a decision needs it.color.slate.dark.0#020617Used by- color.surface.canvas · Aster dark
- color.text.on-action · Aster dark
- color.surface.canvas · Birch dark
- color.text.on-action · Birch dark
- color.surface.canvas · Coral dark
- color.text.on-action · Coral dark
color.slate.dark.50#0F172AUsed by- color.surface.default · Aster dark
- color.text.inverse · Aster dark
- color.action.secondary.@ · Aster dark
- color.surface.default · Birch dark
- color.text.inverse · Birch dark
- color.action.secondary.@ · Birch dark
- color.surface.default · Coral dark
- color.text.inverse · Coral dark
- color.action.secondary.@ · Coral dark
color.slate.dark.100#1E293BUsed by- color.surface.raised · Aster dark
- color.surface.sunken · Aster dark
- color.border.default · Aster dark
- color.action.secondary.hover · Aster dark
- color.disabled.surface · Aster dark
- color.surface.raised · Birch dark
- color.surface.sunken · Birch dark
- color.border.default · Birch dark
- color.action.secondary.hover · Birch dark
- color.disabled.surface · Birch dark
- color.surface.raised · Coral dark
- color.surface.sunken · Coral dark
- color.border.default · Coral dark
- color.action.secondary.hover · Coral dark
- color.disabled.surface · Coral dark
color.slate.dark.200#334155Used by- color.disabled.border · Aster dark
- color.disabled.border · Birch dark
- color.disabled.border · Coral dark
color.slate.dark.300#64748BUsed by- color.border.strong · Aster dark
- color.border.strong · Birch dark
- color.border.strong · Coral dark
color.slate.dark.400#96A3B5Derived: 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 · Aster dark
- color.text.muted · Birch dark
- color.text.muted · Coral dark
color.slate.dark.500#CBD5E1Used by- color.text.secondary · Aster dark
- color.disabled.text · Aster dark
- color.text.secondary · Birch dark
- color.disabled.text · Birch dark
- color.text.secondary · Coral dark
- color.disabled.text · Coral dark
color.slate.dark.600#D6DEE8Derived: 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.slate.dark.700#E2E8F0Used byNothing yet. A spare option, ready if a decision needs it.color.slate.dark.800#F1F5F9Used byNothing yet. A spare option, ready if a decision needs it.color.slate.dark.900#F8FAFCUsed by- color.surface.inverse · Aster dark
- color.text.primary · Aster dark
- color.surface.inverse · Birch dark
- color.text.primary · Birch dark
- color.surface.inverse · Coral dark
- color.text.primary · Coral dark
color.slate.dark.950#FFFFFFUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.light.100#E0F2F1Used by- color.surface.selected · Aster light
- color.category.1.subtle · Aster light
- color.category.1.subtle · Birch light
- color.category.1.subtle · Coral light
color.teal.light.300#7FCFC6Used byNothing yet. A spare option, ready if a decision needs it.color.teal.light.500#14918AUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.light.600#0F766EUsed by- color.border.focus · Aster light
- color.action.primary.@ · Aster light
- color.category.1.@ · Aster light
- color.category.1.@ · Birch light
- color.category.1.@ · Coral light
color.teal.light.700#0B5B55Used by- color.text.link · Aster light
- color.action.primary.hover · Aster light
color.teal.light.800#08423EUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.dark.100#08423EUsed by- color.surface.selected · Aster dark
- color.category.1.subtle · Aster dark
- color.category.1.subtle · Birch dark
- color.category.1.subtle · Coral dark
color.teal.dark.300#0B5B55Used byNothing yet. A spare option, ready if a decision needs it.color.teal.dark.500#0F766EUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.dark.600#14918AUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.dark.700#7FCFC6Used by- color.text.link · Aster dark
- color.border.focus · Aster dark
- color.action.primary.@ · Aster dark
- color.category.1.@ · Aster dark
- color.category.1.@ · Birch dark
- color.category.1.@ · Coral dark
color.teal.dark.800#E0F2F1Used by- color.action.primary.hover · Aster dark
color.purple.light.100#EDE7FEUsed by- color.category.2.subtle · Aster light
- color.surface.selected · Birch light
- color.category.2.subtle · Birch light
- color.category.2.subtle · Coral light
color.purple.light.300#B79DF7Used byNothing yet. A spare option, ready if a decision needs it.color.purple.light.500#7C4DEBUsed byNothing yet. A spare option, ready if a decision needs it.color.purple.light.600#6D28D9Used by- color.category.2.@ · Aster light
- color.border.focus · Birch light
- color.action.primary.@ · Birch light
- color.category.2.@ · Birch light
- color.category.2.@ · Coral light
color.purple.light.700#5520AAUsed by- color.text.link · Birch light
- color.action.primary.hover · Birch light
color.purple.light.800#3E177DUsed byNothing yet. A spare option, ready if a decision needs it.color.purple.dark.100#3E177DUsed by- color.category.2.subtle · Aster dark
- color.surface.selected · Birch dark
- color.category.2.subtle · Birch dark
- color.category.2.subtle · Coral dark
color.purple.dark.300#5520AAUsed byNothing yet. A spare option, ready if a decision needs it.color.purple.dark.500#6D28D9Used byNothing yet. A spare option, ready if a decision needs it.color.purple.dark.600#7C4DEBUsed byNothing yet. A spare option, ready if a decision needs it.color.purple.dark.700#B79DF7Used by- color.category.2.@ · Aster dark
- color.text.link · Birch dark
- color.border.focus · Birch dark
- color.action.primary.@ · Birch dark
- color.category.2.@ · Birch dark
- color.category.2.@ · Coral dark
color.purple.dark.800#EDE7FEUsed by- color.action.primary.hover · Birch dark
color.orange.light.100#FFEDE5Used by- color.category.3.subtle · Aster light
- color.category.3.subtle · Birch light
- color.surface.selected · Coral light
- color.category.3.subtle · Coral light
color.orange.light.300#F7A67FUsed byNothing yet. A spare option, ready if a decision needs it.color.orange.light.500#E2571DUsed byNothing yet. A spare option, ready if a decision needs it.color.orange.light.600#C2410CUsed by- color.category.3.@ · Aster light
- color.category.3.@ · Birch light
- color.border.focus · Coral light
- color.action.primary.@ · Coral light
- color.category.3.@ · Coral light
color.orange.light.700#9A330AUsed by- color.text.link · Coral light
- color.action.primary.hover · Coral light
color.orange.light.800#732607Used byNothing yet. A spare option, ready if a decision needs it.color.orange.dark.100#732607Used by- color.category.3.subtle · Aster dark
- color.category.3.subtle · Birch dark
- color.surface.selected · Coral dark
- color.category.3.subtle · Coral dark
color.orange.dark.300#9A330AUsed byNothing yet. A spare option, ready if a decision needs it.color.orange.dark.500#C2410CUsed byNothing yet. A spare option, ready if a decision needs it.color.orange.dark.600#E2571DUsed byNothing yet. A spare option, ready if a decision needs it.color.orange.dark.700#F7A67FUsed by- color.category.3.@ · Aster dark
- color.category.3.@ · Birch dark
- color.text.link · Coral dark
- color.border.focus · Coral dark
- color.action.primary.@ · Coral dark
- color.category.3.@ · Coral dark
color.orange.dark.800#FFEDE5Used by- color.action.primary.hover · Coral dark
color.green.light.100#E3F4EAUsed by- color.status.success.subtle · Aster light
- color.category.5.subtle · Aster light
- color.status.success.subtle · Birch light
- color.category.5.subtle · Birch light
- color.status.success.subtle · Coral light
- color.category.5.subtle · Coral 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.@ · Aster light
- color.category.5.@ · Aster light
- color.status.success.@ · Birch light
- color.category.5.@ · Birch light
- color.status.success.@ · Coral light
- color.category.5.@ · Coral 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 · Aster dark
- color.category.5.subtle · Aster dark
- color.status.success.subtle · Birch dark
- color.category.5.subtle · Birch dark
- color.status.success.subtle · Coral dark
- color.category.5.subtle · Coral 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.@ · Aster dark
- color.category.5.@ · Aster dark
- color.status.success.@ · Birch dark
- color.category.5.@ · Birch dark
- color.status.success.@ · Coral dark
- color.category.5.@ · Coral 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 · Aster light
- color.status.warning.subtle · Birch light
- color.status.warning.subtle · Coral 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.@ · Aster light
- color.status.warning.@ · Birch light
- color.status.warning.@ · Coral 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 · Aster dark
- color.status.warning.subtle · Birch dark
- color.status.warning.subtle · Coral 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.@ · Aster dark
- color.status.warning.@ · Birch dark
- color.status.warning.@ · Coral 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 · Aster light
- color.status.danger.subtle · Birch light
- color.status.danger.subtle · Coral 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.@ · Aster light
- color.status.danger.@ · Birch light
- color.status.danger.@ · Coral 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 · Aster dark
- color.status.danger.subtle · Birch dark
- color.status.danger.subtle · Coral 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.@ · Aster dark
- color.status.danger.@ · Birch dark
- color.status.danger.@ · Coral 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 · Aster light
- color.surface.scrim · Birch light
- color.surface.scrim · Coral light
color.black.dark.scrim#000000B3Used by- color.surface.scrim · Aster dark
- color.surface.scrim · Birch dark
- color.surface.scrim · Coral dark
color.blue.light.100#E1ECFFUsed by- color.status.info.subtle · Aster light
- color.category.4.subtle · Aster light
- color.status.info.subtle · Birch light
- color.category.4.subtle · Birch light
- color.status.info.subtle · Coral light
- color.category.4.subtle · Coral 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.4.@ · Aster light
- color.category.4.@ · Birch light
- color.category.4.@ · Coral light
color.blue.light.700#083C93Used by- color.status.info.@ · Aster light
- color.status.info.@ · Birch light
- color.status.info.@ · Coral 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 · Aster dark
- color.category.4.subtle · Aster dark
- color.status.info.subtle · Birch dark
- color.category.4.subtle · Birch dark
- color.status.info.subtle · Coral dark
- color.category.4.subtle · Coral 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.@ · Aster dark
- color.category.4.@ · Aster dark
- color.status.info.@ · Birch dark
- color.category.4.@ · Birch dark
- color.status.info.@ · Coral dark
- color.category.4.@ · Coral 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.130.8125remUsed by- type.caption.font-size
- Aa
font.size.140.875remUsed by- type.label.font-size
- Aa
font.size.161remUsed by- type.body.font-size
- type.data.font-size
- Aa
font.size.201.25remUsed by- type.heading.font-size
- Aa
font.size.241.5remUsed by- type.title.font-size
- Aa
font.size.322remUsed 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.title.font-weight
- type.heading.font-weight
- type.label.font-weight
- Aa
font.weight.700700Used by- type.display.font-weight
- ·
font.line-height.1_21.2A ratio of the text size.Used by- type.display.line-height
- ·
font.line-height.1_251.25A ratio of the text size.Used by- type.title.line-height
- ·
font.line-height.1_31.3A ratio of the text size.Used by- type.heading.line-height
- ·
font.line-height.1_41.4A ratio of the text size.Used by- type.label.line-height
- type.caption.line-height
- ·
font.line-height.1_51.5A ratio of the text size.Used by- type.body.line-height
- type.data.line-height
- Aa
font.family.interInter, system-ui, sans-serifUsed by- type.display.font-family · Aster
- type.title.font-family · Aster
- type.heading.font-family · Aster
- type.body.font-family · Aster
- type.label.font-family · Aster
- type.caption.font-family · Aster
- type.data.font-family · Aster
- Aa
font.family.ibm-plex-mono"IBM Plex Mono", ui-monospace, monospaceUsed byNothing yet. A spare option, ready if a decision needs it. - Aa
font.family.plus-jakarta-sans"Plus Jakarta Sans", system-ui, sans-serifUsed by- type.display.font-family · Birch
- type.title.font-family · Birch
- type.heading.font-family · Birch
- type.body.font-family · Birch
- type.label.font-family · Birch
- type.caption.font-family · Birch
- type.data.font-family · Birch
- Aa
font.family.poppinsPoppins, system-ui, sans-serifUsed by- type.display.font-family · Coral
- type.title.font-family · Coral
- type.heading.font-family · Coral
- type.body.font-family · Coral
- type.label.font-family · Coral
- type.caption.font-family · Coral
- type.data.font-family · Coral
Space 5
The spacing steps gaps and insets pick from.
space.80.5remUsed by- space.gap.tight
space.120.75remUsed by- space.gap.default
space.161remUsed by- space.inset.control-x
- space.inset.cell-x
space.241.5remUsed by- space.gap.group
- space.inset.container
space.483remUsed by- space.gap.section
Size 6
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.362.25remUsed by- size.control.compact
size.442.75remUsed by- size.control.default
size.483remUsed by- size.row
Corners 8
Corner options.
radius.00remUsed byNothing yet. A spare option, ready if a decision needs it.radius.40.25remUsed by- radius.control · Aster
- radius.badge · Aster
radius.80.5remUsed by- radius.container · Aster
radius.120.75remUsed by- radius.control · Birch
radius.161remUsed by- radius.container · Birch
radius.201.25remUsed by- radius.container · Coral
radius.9999999pxUsed by- radius.badge · Birch
- radius.control · Coral
- radius.badge · Coral
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 4
Raw shadows that elevation picks from.
shadow.card0px 2px 8px 0px #0F172A14Raw shadow for card in light mode.Used by- elevation.card · Aster light
- elevation.card · Birch light
- elevation.card · Coral light
shadow.overlay0px 12px 32px 0px #0F172A29Raw shadow for overlay in light mode.Used by- elevation.overlay · Aster light
- elevation.overlay · Birch light
- elevation.overlay · Coral light
shadow.card-dark0px 2px 8px 0px #00000066Raw shadow for card in dark mode.Used by- elevation.card · Aster dark
- elevation.card · Birch dark
- elevation.card · Coral dark
shadow.overlay-dark0px 12px 32px 0px #00000080Raw shadow for overlay in dark mode.Used by- elevation.overlay · Aster dark
- elevation.overlay · Birch dark
- elevation.overlay · Coral 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