Primitives
Dense data has 113 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.slate.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.slate.light.50#F7F8FAUsed by- color.surface.canvas · light
color.slate.light.100#EEF1F5Used by- color.surface.sunken · light
- color.action.secondary.hover · light
- color.category.5.subtle · light
- color.disabled.surface · light
color.slate.light.200#DDE2EAUsed by- color.border.default · light
- color.disabled.border · light
color.slate.light.300#C4CBD6Used byNothing yet. A spare option, ready if a decision needs it.color.slate.light.400#969FADDerived: 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#6B7585Used by- color.border.strong · light
- color.category.5.@ · light
- color.disabled.text · light
color.slate.light.600#535D6DDerived: 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.slate.light.700#3D4655Used by- color.text.secondary · light
color.slate.light.800#262D38Used byNothing yet. A spare option, ready if a decision needs it.color.slate.light.900#161B23Used by- color.surface.inverse · light
- color.text.primary · light
color.slate.light.950#0D1117Used byNothing yet. A spare option, ready if a decision needs it.color.slate.dark.0#0D1117Used by- color.surface.canvas · dark
- color.text.on-action · dark
color.slate.dark.50#161B23Used by- color.surface.default · dark
- color.text.inverse · dark
- color.action.secondary.@ · dark
color.slate.dark.100#262D38Used 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.slate.dark.200#3D4655Used by- color.disabled.border · dark
color.slate.dark.300#6B7585Used by- color.border.strong · dark
color.slate.dark.400#969FADDerived: 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.slate.dark.500#C4CBD6Used by- color.text.secondary · dark
- color.disabled.text · dark
color.slate.dark.600#D0D6E0Derived: 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#DDE2EAUsed by- color.category.5.@ · dark
color.slate.dark.800#EEF1F5Used byNothing yet. A spare option, ready if a decision needs it.color.slate.dark.900#F7F8FAUsed by- color.surface.inverse · dark
- color.text.primary · dark
color.slate.dark.950#FFFFFFUsed byNothing yet. A spare option, ready if a decision needs it.color.violet.light.100#EEEDFEUsed by- color.surface.selected · light
- color.category.1.subtle · light
color.violet.light.300#A9A3F6Used byNothing yet. A spare option, ready if a decision needs it.color.violet.light.500#5B4FE8Used byNothing yet. A spare option, ready if a decision needs it.color.violet.light.600#4B3FD9Used by- color.border.focus · light
- color.action.primary.@ · light
- color.category.1.@ · light
color.violet.light.700#3B31B0Used by- color.text.link · light
- color.action.primary.hover · light
color.violet.light.800#2C2588Used byNothing yet. A spare option, ready if a decision needs it.color.violet.dark.100#2C2588Used by- color.surface.selected · dark
- color.category.1.subtle · dark
color.violet.dark.300#3B31B0Used byNothing yet. A spare option, ready if a decision needs it.color.violet.dark.500#4B3FD9Used byNothing yet. A spare option, ready if a decision needs it.color.violet.dark.600#5B4FE8Used byNothing yet. A spare option, ready if a decision needs it.color.violet.dark.700#A9A3F6Used by- color.text.link · dark
- color.border.focus · dark
- color.action.primary.@ · dark
- color.category.1.@ · dark
color.violet.dark.800#EEEDFEUsed 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 15
Font families, sizes, weights and line heights.
- Aa
font.size.120.75remUsed by- type.label.font-size
- type.caption.font-size
- Aa
font.size.130.8125remUsed by- type.data.font-size
- Aa
font.size.140.875remUsed by- type.body.font-size
- Aa
font.size.161remUsed by- type.heading.font-size
- Aa
font.size.201.25remUsed by- type.title.font-size
- Aa
font.size.241.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.500500Used by- type.label.font-weight
- Aa
font.weight.600600Used by- type.display.font-weight
- type.title.font-weight
- type.heading.font-weight
- ·
font.line-height.161remOn the 4px grid, in rem so it grows with the user's text size.Used by- type.label.line-height
- type.caption.line-height
- type.data.line-height
- ·
font.line-height.201.25remOn the 4px grid, in rem so it grows with the user's text size.Used by- type.heading.line-height
- type.body.line-height
- ·
font.line-height.241.5remOn the 4px grid, in rem so it grows with the user's text size.Used by- type.title.line-height
- ·
font.line-height.281.75remOn the 4px grid, in rem so it grows with the user's text size.Used by- type.display.line-height
- Aa
font.family.ibm-plex-sans"IBM Plex Sans", system-ui, 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
- Aa
font.family.ibm-plex-mono"IBM Plex Mono", ui-monospace, monospaceUsed by- type.data.font-family
Space 5
The spacing steps gaps and insets pick from.
space.40.25remUsed by- space.gap.tight
space.80.5remUsed by- space.gap.default
space.120.75remUsed by- space.inset.control-x
- space.inset.cell-x
space.161remUsed by- space.gap.group
- space.inset.container
space.241.5remUsed by- space.gap.section
Size 4
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 by- size.control.compact
size.322remUsed by- size.control.default
- size.row
Corners 5
Corner options.
radius.00remUsed by- radius.badge
radius.20.125remUsed by- radius.control
radius.40.25remUsed by- radius.container
radius.60.375remUsed byNothing yet. A spare option, ready if a decision needs it.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 8px 24px 0px #0D111729Raw shadow for overlay in light mode.Used by- elevation.overlay · light
shadow.overlay-dark0px 8px 24px 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 by- motion.duration.feedback
- ·
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 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