Visualize every measurement token Lumino ships — spacing, type, radii, shadows, z-index, grid. Useful for code review, for new designers, and for catching an off-by-one between Figma and production.
Lumino uses a 4px base. Every gap you'll ever set should come from this scale.
Modular scale at 1.2× ratio, anchored at 15px body. Numbers on the right are px / line-height.
Every corner on the system, at production scale.
Four elevation tiers. Shadow is warm-tinted in light themes, cooler in dark — check --shadow-tint.
Seven reserved layers. Never hard-code a z-value — use a token.
Tune columns and baseline height — useful for checking a mockup against a production grid.
Drop this bookmarklet into your browser. Click it on any page to overlay Lumino's 4px baseline grid and a pixel ruler on your cursor. Esc to dismiss.