Primitives
Accessible first has 114 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.gray.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.gray.light.50#F7F7F7Used by- color.surface.canvas · light
color.gray.light.100#EDEDEDUsed by- color.surface.sunken · light
- color.action.secondary.hover · light
- color.category.5.subtle · light
- color.disabled.surface · light
color.gray.light.200#D6D6D6Used by- color.border.default · light
- color.disabled.border · light
color.gray.light.300#949494Used byNothing yet. A spare option, ready if a decision needs it.color.gray.light.400#767676Derived: 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.gray.light.500#595959Used by- color.text.muted · light
- color.border.strong · light
- color.category.5.@ · light
- color.disabled.text · light
color.gray.light.600#464646Derived: 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.gray.light.700#333333Used by- color.text.secondary · light
color.gray.light.800#222222Used byNothing yet. A spare option, ready if a decision needs it.color.gray.light.900#141414Used by- color.surface.inverse · light
- color.text.primary · light
color.gray.light.950#0A0A0AUsed byNothing yet. A spare option, ready if a decision needs it.color.gray.dark.0#0A0A0AUsed by- color.surface.canvas · dark
- color.text.on-action · dark
color.gray.dark.50#141414Used by- color.surface.default · dark
- color.text.inverse · dark
- color.action.secondary.@ · dark
color.gray.dark.100#222222Used 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.gray.dark.200#333333Used by- color.disabled.border · dark
color.gray.dark.300#595959Used byNothing yet. A spare option, ready if a decision needs it.color.gray.dark.400#767676Derived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary.Used by- color.border.strong · dark
color.gray.dark.500#949494Used by- color.text.muted · dark
- color.disabled.text · dark
color.gray.dark.600#B4B4B4Derived: 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.secondary · dark
color.gray.dark.700#D6D6D6Used by- color.category.5.@ · dark
color.gray.dark.800#EDEDEDUsed byNothing yet. A spare option, ready if a decision needs it.color.gray.dark.900#F7F7F7Used by- color.surface.inverse · dark
- color.text.primary · dark
color.gray.dark.950#FFFFFFUsed byNothing yet. A spare option, ready if a decision needs it.color.blue.light.100#E1ECFFUsed by- color.surface.selected · light
- color.category.1.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.border.focus · light
- color.action.primary.@ · light
- color.category.1.@ · light
color.blue.light.700#083C93Used by- color.text.link · light
- color.action.primary.hover · light
color.blue.light.800#062C6EUsed byNothing yet. A spare option, ready if a decision needs it.color.blue.dark.100#062C6EUsed by- color.surface.selected · dark
- color.category.1.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.text.link · dark
- color.border.focus · dark
- color.action.primary.@ · dark
- color.category.1.@ · dark
color.blue.dark.800#E1ECFFUsed 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.teal.light.100#E0F2F1Used by- color.status.info.subtle · light
- color.category.2.subtle · 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.category.2.@ · light
color.teal.light.700#0B5B55Used by- color.status.info.@ · light
color.teal.light.800#08423EUsed byNothing yet. A spare option, ready if a decision needs it.color.teal.dark.100#08423EUsed by- color.status.info.subtle · dark
- color.category.2.subtle · 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.status.info.@ · dark
- color.category.2.@ · dark
color.teal.dark.800#E0F2F1Used byNothing yet. A spare option, ready if a decision needs it.
Type 16
Font families, sizes, weights and line heights.
- Aa
font.size.161remUsed by- type.caption.font-size
- Aa
font.size.181.125remUsed by- type.label.font-size
- Aa
font.size.191.1875remUsed by- type.body.font-size
- type.data.font-size
- Aa
font.size.221.375remUsed by- type.heading.font-size
- Aa
font.size.281.75remUsed by- type.title.font-size
- Aa
font.size.362.25remUsed 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.display.font-weight
- type.title.font-weight
- type.heading.font-weight
- type.label.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
- ·
font.line-height.1_51.5A ratio of the text size.Used by- type.caption.line-height
- ·
font.line-height.1_61.6A ratio of the text size.Used by- type.body.line-height
- type.data.line-height
- Aa
font.family.atkinson-hyperlegible"Atkinson Hyperlegible", Verdana, sans-serifUsed by- type.display.font-family
- type.title.font-family
- type.heading.font-family
- type.body.font-family
- type.label.font-family
- type.caption.font-family
- type.data.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 5
The spacing steps gaps and insets pick from.
space.120.75remUsed by- space.gap.tight
space.161remUsed by- space.gap.default
- space.inset.cell-x
space.241.5remUsed by- space.inset.control-x
- space.inset.container
space.322remUsed by- space.gap.group
space.483remUsed by- space.gap.section
Size 6
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.483remUsed by- size.control.compact
size.523.25remUsed by- size.control.default
size.563.5remUsed by- size.row
Corners 5
Corner options.
radius.00remUsed byNothing yet. A spare option, ready if a decision needs it.radius.40.25remUsed by- radius.badge
radius.60.375remUsed by- radius.control
radius.80.5remUsed by- radius.container
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 1
Raw shadows that elevation picks from.
shadow.none0px 0px 0px 0px #00000000No shadow: flat surfaces.Used by- elevation.card · light
- elevation.overlay · light
- elevation.card · dark
- 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.500.5An opacity option.Used by- opacity.disabled