Design system & conventions
Token values read directly from the published library. Conventions counted from the product file. Where a rule and the file disagree, the count is shown so the disagreement is visible rather than assumed.
01Colour
31 variables in one collection, one mode. Bind colours to variables — never hardcode a hex value. Names do not always predict appearance, so the value is shown alongside every name.
Core
Greys — ordered dark to light, 0 → 6
Semantic
Special button pairs — base and hover
Used for specific promotional or programme surfaces, not for standard product buttons.
Known issue: Dark05, Dark10 and Dark60
all resolve to #001B36 — identical to Black. They read as
intended opacity steps that were never given distinct values. Avoid until resolved.
02Typography
One family: Avenir Next. Letter-spacing is −2% on every style except the uppercase caption. Line-height is 110% for headers, 140% for body, 100% for buttons and tags. Specimens below render at true size.
Two naming traps. Style names repeat the family segment —
Universal/P1/P1 - Regular, not Universal/P1. And a style
named “Regular” uses Avenir Next Medium; “Semibold” uses Demi Bold.
There is no Semibold weight in the family.
Desktop headers
Mobile headers
Body — P1 to P3, and caption
most-used style, 4,873×
Buttons and tags — 100% line-height
03Elevation
Six elevation styles. Below/* casts downward at 10% black,
Above/* upward at 8% — used for bottom bars. Rendered here at true values.
Shown on a light stage in both themes — these shadows are defined for the product's light surfaces.
04Borders
Borders are not strokes. They are effect styles built from a zero-blur spread shadow plus a soft drop shadow. This matters when reproducing them — a stroke will not match.
05Grids & canvas
| Grid | Columns | Gutter | Margin |
|---|---|---|---|
| Mobile | 4 | 16 | 16 |
| Tablet | 6 | 16 | 32 |
| Desktop | 12 | 16 | 64 |
| Target | Size | Content width | Evidence |
|---|---|---|---|
| Mobile | 375 × 812 fixed | 343 (16 side padding) | 1,194 frames |
| Desktop | 1440 × 960 | 400 one-col · 1200 two-col | 579; 817 (404), 881 (133) |
| Tablet | 840 wide | — | ~64 frames. Rare. |
Half-width mobile card is 164. Desktop header height 79. Icons default to 20 × 20. Corner radius: 100 pills and buttons, 12 / 16 cards, 8 small elements.
06Spacing
Spacing is a hierarchy, not a single scale. The correct gap depends entirely on what the container is — measured by role across roughly 24,000 mobile and 14,000 desktop auto-layout containers.
| Role | Gap | Padding ↕ | Padding ↔ |
|---|---|---|---|
| Screen content, block → block | 32 24 · 16 | 24 16 | 16 24 |
| Title → subtitle | 4 8 · 2 · 12 | 24 · 8 | 8 · 24 · 16 |
| Card, internal | 8 12 · 16 · 4 | 12 16 · 8 · 14 | 12 16 · 8 · 24 |
| List, item → item | 16 12 · 8 | 8 | 16 |
| Row — icon + label | 8 12 · 4 · 16 | 4 · 8 · 10 | 4 · 24 · 12 |
| Button area | 8 | 10 | 56 · 12 · 16 |
| Role | Gap | Padding ↕ | Padding ↔ |
|---|---|---|---|
| Screen content, block → block | 40 60 · 24 · 48 | 60 24 · 40 | 80 136 |
| Title → subtitle | 4 8 · 2 · 16 | 10 24 | 10 24 · 16 |
| Card, internal | 12 8 · 16 · 10 | 12 10 · 16 | 12 16 · 24 |
| List, item → item | 12 16 · 8 · 24 | 40 · 60 · 80 | 136 80 |
| Row | 8 12 · 16 · 4 | 8 · 4 · 10 | 4 · 14 · 10 |
| Button area | 8 16 | 10 | 16 · 12 · 56 |
Why some spacing looks wrong
Gaps tighten monotonically with nesting depth. Most spacing that reads as off is a value borrowed from the wrong tier — a 32 inside a card, or an 8 between page sections.
Not an 8-point grid. 10, 14, 6 and 5 appear tens of thousands of times. Do not “correct” spacing to multiples of 8 — match the tier and the neighbours.
Sanctioned gaps 2 4 8 12 16 24 32 40 60 · padding
4 8 10 12 14 16 24 56 80 136
07Screen anatomy
Measured across 673 mobile screens, excluding 409 frames that are flattened artwork rather than designed screens.
Layer order, back to front
Buttons are bottom-anchored. 440 of 556 screens place the lowest button within 20px of the bottom edge; 88.7% within 50px. A primary action floating mid-screen is wrong.
Screen-level layout is split — 51.3% absolute, 48.7% vertical auto-layout. Match the neighbours. Inside the content area, auto-layout always. The background gradient is always absolutely positioned, outside the layout flow.
09Flow lines
Flows between screens are top-level vectors. A white 12pt line between two screens is a flow connection, not decoration.
#FFFFFF, 12pt strokeThe standard flow connection.497 of 553#C83739 — Dark RedConditional or error branches.31#06845A — Dark GreenSuccess or alternate paths.14Both branch colours are design system variables, not ad-hoc picks — Dark Red
and Dark Green.
10Never
Each of these exists in the file but is a mistake or a foreign import, not a convention. Do not reproduce them; flag them when found.
Body/Small, Body/Regular, Title2/Regular, Text/Regular/NormalLeaked in from community UI kits.93Material Blur, OLD/Card - Dropshadow, .Zone3511How work lands
Nothing existing is ever modified. New and changed work goes into a new section, clearly labelled, for manual review.
🤖 Created by Claude as instructed — … — dateunmistakableThe file already establishes this habit — sections named Original Copy and New Designs keep untouched originals beside new work.
Standing caveats. Designed ≠ shipped — whether a screen exists in ST_MSK says nothing about whether it reached members. No PHI in any output. Clinical content needs licensed review. Claude accelerates; Claude does not approve.