The site’s design system, rendering itself: everything below is generated from the token contract in the repo’s DESIGN.md front matter — the same file the build validates and both sites derive their styles from. Measured from lusion.co and enforced by check-design-md.py, including WCAG AA contrast on every component pairing.
Colors
primary#1a2ffb · 6.56:1 on background
on-primary#f0f1fa · 1.00:1 on background
background#f0f1fa · 1.00:1 on background
surface#ffffff · 1.12:1 on background
ink#000000 · 18.67:1 on background
ink-muted#2b2e3a · 12.01:1 on background
inverse-background#000000 · 18.67:1 on background
inverse-ink#f0f1fa · 1.00:1 on background
Typography
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Spacing
xs8px
sm16px
md24px
lg40px
xl64px
2xl96px
section160px
Radii
sm · 10px
md · 15px
lg · 20px
pill · 100px
Components
Button primary1Categorytag
card · surface on background, rounded-lg
footer · inverse panel, rounded-lg
Rendered with the site’s live component classes — if the contract or the implementation changes, this page changes with it.