Colour
Surface
color.surface.defaultcolor.surface.subtlecolor.surface.raisedcolor.surface.inversecolor.surface.dangercolor.surface.successText
color.text.defaultcolor.text.subtlecolor.text.inversecolor.text.actioncolor.text.on-actioncolor.text.dangercolor.text.successcolor.text.disabledAction
color.action.primary.defaultcolor.action.primary.hovercolor.action.primary.activecolor.action.primary.disabledcolor.action.secondary.defaultcolor.action.secondary.hovercolor.action.secondary.activecolor.action.secondary.disabledBorder
color.border.defaultcolor.border.subtlecolor.border.strongcolor.border.focus-visiblecolor.border.invalidTypography
font.size.display · font.family.heading · font.weight.heading · font.line-height.headingEnsemble
font.size.headlineA system that grows on request
font.size.titleTokens carry the brand
font.size.lead · font.family.bodyOne attribute on the root element switches palette, type, shape, density and motion.
font.size.body · font.weight.body · font.line-height.bodyRunning text sits on the body family and line height. Emphasis uses font.weight.strong. Components never see a raw value; they read semantic names, and each brand decides what those names mean.
font.size.captionCaptions, labels and metadata.
font.family.code--troupe-color-surface-default
Space
Density is three separate axes: inset (padding inside), stack (vertical gap), inline (horizontal gap).
Inset
space.inset.xsspace.inset.smspace.inset.mdspace.inset.lgspace.inset.xlStack
xssmmdlgxlspace.stack.*Inline
space.inline.xsspace.inline.smspace.inline.mdspace.inline.lgRadius and shadow
Control
radius.controlContainer
radius.containerIndicator
radius.indicatorRaised
shadow.raisedOverlay
shadow.overlayBorder
border.width.defaultborder.width.strongborder.width.focus-visibleFocus ring
border.offset.focus-visibleMotion
Each button plays one motion type with its motion.duration.* and motion.easing.* pair.