Foundation

Base tokens for color, typography and spacing.

Color roles

Components use semantic roles instead of their own shades.

Background--bgMain fill
Surface--surfaceContent group
Line--lineBorder and divider
Text--textHeading and value
Muted--mutedSecondary label
Accent--accentLink and priority
OK--okSuccess state
Warning--warnNeeds attention
Error--errorNeeds a fix

Usage

Pick a role by meaning. Do not copy a computed color value into a local class.

Themes

The dark, light and print themes change role values. Components keep the same names.

Typography

A fixed scale separates secondary labels, body text and three heading levels.

32 / 34Page heading
24 / 27Section heading
18 / 23Local heading
14 / 21

Body text explains the state and the next action.

12 / 18

Secondary label · local data

Sample markup

Rule

Use Onest for text and controls. Keep Geologica for short headings and numbers. Sizes do not scale fluidly between breakpoints.

Accessibility

The heading level sets document structure, not visual size. Keep one h1 per page.

Scale
Service--type-service · 12 px
Body--type-body · 14 px
Lede--type-lede · 16 px
Local--type-local · 18 px
Section--type-section · 24 px, 22 px up to 520 px wide
Page--type-page · 32 px, 28 px up to 520 px wide

Spacing

A tight scale sets the gaps inside groups and between separate areas.

4
8
12
16
20
24
32

Rhythm

Gaps inside a group are smaller than gaps between neighboring groups. For an even gap between sibling elements, use .stack with a --stack-gap value from this scale.

Limits

Do not fit font, line and icon sizes to the spacing scale.