Design systems · ClearlyJuly 2nd, 2026
Foundation layer
Thirteen steps, each a clamp() range rather than a value — so the ratio opens as well as the sizes: across the upper scale, a minor third (×1.200) at 320px widening to a major third (×1.250) by 1200px, where it locks. Gradient, blur, elevation, 3D-transform and motion-duration tokens sit on the same footing.
Written so a person and an agent apply it identically — and checked by
measurement rather than by review, which turns out to be the only thing that works. Reading
computed style on live elements found seventeen headings sitting at 1.08:1 and a paid
call-to-action outlined at 1.04:1, one of them caused by the token stylesheet itself. All of
it invisible to the build, to the type checker, and to anyone reading the source.
Open the specimen ↗