Nine colours, six type sizes, three radii. Anything on any screen in this file is one of these.
COLOUR
Ink#14141A
Body#55534C
Muted#6B6B76
Faint#8E8C86
Page#FAFAF9
Surface#FFFFFF
Quiet#F2F0EB
Line#EAE8E3
Expired#C0322B
Expiring#8F5906
Current#1F6B3F
The three status colours are for status only. Nothing else may use them, and status may never be shown by colour alone.
TYPE · INTER
Screen title
28 / 700 / −0.8
Hero sentence
22 / 600 / −0.5
Row title
17 / 600 / −0.3
Body copy, which is the smallest thing a person has to read a sentence of.
16 / 400 / 1.5
Supporting detail
14 / 400
TAB LABEL
11 / 600 — the only size below 14, and never for a sentence
CONTROLS
Primary
Secondary
Disabled
Destructive
Destructive, quiet
Selected
Filter
Expired
12 days
Current
Field, at rest
Field, focused
GEOMETRY
20 hero16 card13 control10 chip
Screen padding 18px
Auth screen padding 22–24px
Gap between cards 9–10px
Primary button 56px
Field 56px
List row min 76px
Tap target never under 44px
No shadows anywhere. Separation is a 1px line or a gap — a shadow reads as dirt on a screen in sunlight.
CREDENTIAL ROW
Working at Heights
Blue Ridge Training
12 days
Used on Home, CrediPack, Offline and the pending list. Name, issuer, one status pill. Nothing else has ever needed to go in it.
READINESS BLOCK
5 of 7 credentials are current
One segment per credential. Above eighteen or so, the meter stops being countable — switch to a bar with a figure beside it.
TAB BAR
Home
CrediPack
Add
Alerts
More
Icons 24px, labels always on. Add is raised 14px and is the only filled shape. Add 22px of safe-area padding below on a real device.
Two rules that hold the rest together.
Status is never carried by colour alone — every status appears as colour, a word and a position. And nothing on a phone screen is smaller than 14px except the 11px tab label, which is never part of a sentence.