Foundations

Every scope answers the same five questions. This is the answer that sets each scope's values; open a scope for all five, its tokens and its specimen.

How it looks

TypographyValuesSmallSmall body text fits more rows on the screen.

AaAaAa

ColorValuesMutedMuted color keeps attention on the data.

ShapeValuesSlightly roundedSmall corners keep dense rows straight.

ElevationValuesSubtleSubtle shadows keep the grid crisp.

How it feels to use

SpacingValuesCompactCompact spacing shows more records.

MotionValuesFastFast feedback keeps up with experts.

IconographyValuesMatch the textIcons match the label so they do not outweigh it.

⚠︎ Delete

AccessibilityValuesCompact, for a pointerMouse and keyboard; compact targets are enough.

Where it runs and how it speaks

ThemingValuesLight and darkLight first, always; dark ships as standard for night shifts.

NamingValuesLowercase words in pathsLowercase paths read the same in CSS, JSON and Figma.

button/primary/background

Voice and toneValuesTerseExperts want short labels and short messages.

Save

ComponentsValuesOnly when the meaning changesRepeated screens stay identical when a component changes only with its meaning.

58of 62 in the catalogue