Three candidate design languages (spec P1), each drawn on the same real screens with invented, production-length data. Every screen is the same markup: a direction is only its tokens, so what you see change is exactly what the direction decides. Pick one, or take dimensions from different directions, typeface included.
Open any screen and press 1, 2 or 3 to switch direction in place. All three pass the contrast gate (G17).
Today's language, done properly. The logo keeps #346DFF as the control. One cool neutral ramp replaces the gray and slate mix, Geist gets a real type scale, and controls and corners tighten.
Geist
and Geist Mono
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
and IBM Plex Mono
Built to be read on site, in daylight, on a phone. Ink is near-black and lines are strong. Type and controls are a size up, and the brand is a saturated cobalt. Status tags carry a 3:1 edge.
Atkinson Hyperlegible Next
and Atkinson Hyperlegible Mono
The values each direction sets. Any row can be taken from any column.
| Dimension | Evolution | Calm | Field |
|---|---|---|---|
| Typeface | Geist | IBM Plex Sans | Atkinson Hyperlegible Next |
| Brand fill | #255aeb | #005f6e | #0044e8 |
| Logo | #346dff · #ffb526 · #3ab56b | #005f6e · #ca924f · #478f59 | #1a61ff · #ffb000 · #009539 |
| Ink on canvas | #1d232c on #f9fafd | #26221d on #fcfaf8 | #0c0f15 on #eff1f4 |
| Body text | 400 14px/20px | 400 14px/21px | 400 16px/24px |
| Controls sm · md · lg | 28 · 32 · 40px | 28 · 32 · 36px | 36 · 40 · 48px |
| Table row, minimum | 52px | 52px | 64px |
| Radius sm · md · lg | 4 · 6 · 10px | 2 · 3 · 5px | 4 · 8 · 12px |
| Tag shape | Pill | 3px corners | 6px corners |
| Input edge on panel | 3.12:1 | 3.12:1 | 5.21:1 |
| Status tag edge | 1.31:1 (decorative) | 1.32:1 (decorative) | 3.46:1 (meets 3:1) |
Geist is the control. Calm and Field each propose a face that fits their stance. File names and references are read character by character, so the glyphs below are the test.
| Check | Evolution Il1 0O Ill-01 · 0410 · 11.1(l) | Calm Il1 0O Ill-01 · 0410 · 11.1(l) | Field Il1 0O Ill-01 · 0410 · 11.1(l) |
|---|---|---|---|
| OFL licence, self-hosted from Fontsource | |||
| Variable font IBM Plex Mono ships static weights only. | |||
| Tabular figures | |||
| I, l and 1 tell apart Geist's I and l are both plain strokes. | |||
| 0 and O tell apart | |||
| Latin Extended | |||
| Its own mono |
DocuCert Home at 390px, the same data in each direction.
6 applications · newest activity first
Rev 2 · sent 21 Oct
08:12 today · Grace uploaded FS-07 Fire damper installation certificate (AS 1668.1)
Rev 1 · sent 2 Oct
Yesterday 16:40 · Ravi uploaded B4 Termite management certificate
Rev 1 · sent 14 Oct
Tue 27 Oct · Jess commented on A2 Waterproofing certificate — wet areas, levels 1 and 2
Received
Mon 26 Oct · Mateo opened the List
Continue the draft on a tablet or computer.
6 applications · newest activity first
Rev 2 · sent 21 Oct
08:12 today · Grace uploaded FS-07 Fire damper installation certificate (AS 1668.1)
Rev 1 · sent 2 Oct
Yesterday 16:40 · Ravi uploaded B4 Termite management certificate
Rev 1 · sent 14 Oct
Tue 27 Oct · Jess commented on A2 Waterproofing certificate — wet areas, levels 1 and 2
Received
Mon 26 Oct · Mateo opened the List
Continue the draft on a tablet or computer.
6 applications · newest activity first
Rev 2 · sent 21 Oct
08:12 today · Grace uploaded FS-07 Fire damper installation certificate (AS 1668.1)
Rev 1 · sent 2 Oct
Yesterday 16:40 · Ravi uploaded B4 Termite management certificate
Rev 1 · sent 14 Oct
Tue 27 Oct · Jess commented on A2 Waterproofing certificate — wet areas, levels 1 and 2
Received
Mon 26 Oct · Mateo opened the List
Continue the draft on a tablet or computer.