The design system
The same colours and the same components as in the app. This page is the living reference: when something changes in the styling, it changes here first.
Colours
--bg#070c18
--panel#0c1526
--line#1b2a44
--txt#e6edf7
--dim#8a9bb8
--blue#3b82f6
--green#22c55e
--red#ef4444
--amber#f59e0b
Typography
Lede paragraph: larger, lighter, one sentence.
Body paragraph. The font is the system one, so nothing loads from a third party and the page paints immediately.
Secondary text, for notes and asides.
Components
Primary action Secondary action PRO+ annotation only
Card
The block used for feature groups.
Card
Two or three per row on a wide screen, one on a phone.
Warning. The block used for risk and limitations.
Rules
Mobile first: everything is written for 320 pixels first and only then grows. Minimum 4.5:1 contrast on text. No colour carries information alone: next to green and red there is always a word.