Styles

The decisions underneath every component. Follow them in your own markup and it will match.

• Colour: a neutral core, a primary from the pack, and contrast enforced by the build.
• Typography: system fonts, 16px body, a scale that stays readable on a small phone.
• Spacing and layout: a 4px scale, 48px targets, one column of text.
• Images: how heavy each kind may be, which format, and how to send each screen the size it needs.
• Language and script: diacritics, lang attributes, right-to-left.
• Tokens: every custom property, with its value and what it is for.

The five rules

1. Links are always underlined. Colour alone is not a signal.
2. Focus is a double ring, yellow inside and ink outside, visible on any background.
3. Nothing interactive is under 48px tall. Thumbs on cheap phones are the test.
4. Meaning never depends on colour. Alerts have titles, errors have text, badges have words.
5. Everything works without JavaScript. The script only improves what already works.