Lumen · component lab
Every surface, every state
Backdrop
Glass path · refraction unsupported here
Only Chromium resolves an SVG filter inside backdrop-filter. The fallback is the primary design target, not a degradation — flip between them and the difference should read as a change of material, never a loss of one.
Glass variants
One primitive, six geometries. Bezel width is tuned per variant, not scaled — a chip with a panel's bezel reads as a marble.
Buttons
Accent has two roles: a gradient fill under white text, and ember as the only accent ink.
Liquid indicators
The blob stretches in proportion to travel, then settles. That squash is why it reads as liquid.
Chips
Filter state. Active is ink, not accent — accent is reserved for the primary action on screen.
Numbers
Digits roll so the change carries direction. Tabular figures stop the column jittering.
Steppers and toggles
The ring
One mark at three scales: globe marker, map pin, doorway hotspot. Lumen's whole interaction language.
Loading
Skeletons shimmer like light crossing glass, not like a grey pulse.
Wordmark
Monolinear geometric caps — the register of the category. Swap /public/brand/ to rebrand.
Step inside first.
Focus states
Tab through this row. Focus rings are designed, not defaulted.