Direction · P1
Calm
Deep petrol on warm stone. The UI is led by neutrals, with hairlines in place of shadows and a small radius. Brand colour appears only where it means something: the logo, the primary action, the selected state.
IBM Plex Sans with IBM Plex Mono · all 24 gated contrast pairs pass WCAG AA · token sheet
Screens
On a screen, 1 2 3 switch direction in place, ← → step through the screens and H hides the bar.
Logo
Same shape, new colours (G7).
Typeface
An engineered grotesque with humanist warmth. Its I is serifed, its l has a tail and its 0 is narrower than O, so references read character by character. Its figures are tabular by default, and it has its own mono.
- References
- ST-07 · Clause 11.1(l) · Ill-01 · Lot 10, OL1
- Figures
- 1,1804,096711
- Mono
- DA-2024/0117 · M-201 rev D · 0410
Type scale
Each step sets size, line-height, weight and tracking together (D13): one class, text-<step>.
Density
Controls come in sm, md and lg, chosen where they are used (G10). Rows are 52px at minimum.
- control-sm
- 28px
- control-md
- 32px
- control-lg
- 36px
Shape and elevation
Cards are drawn with a 1px outline in line and a shadow-sm; dialogs and popovers lift to shadow-lg.