lens
Everything a clear surface is built from.
Principles
Three principles sit under everything in lens. They set how clear looks, and they decide when a component is done.
Clear by subtraction
Adding is easy. A surface is done when the next cut would take away something the reader needs. Whatever is left has earned its place.
That is why lens is small. One spacing scale, a few radii, a short list of colors by name. With that little to choose from there is nowhere to drift, so a dozen surfaces stay one product.
Nothing is arbitrary
Nothing on a clear surface is there because someone liked it. Every size, color, and distance follows from a rule. Get the rules right and it looks right without trying.
A color in lens is a token that carries its own light-dark() pair, so a surface authored once comes out in both themes. Spacing is a step on one scale, and motion is a named duration on a named curve. Layout is a Box, every text node is a Text, and a Text variant sets size, weight, and element instead of a hand-written style.
Details are the design
People trust a clear surface with their money. A detail that is off by a pixel tells them nobody was looking, and makes them wonder what else was missed. Getting it exactly right is the least we owe them.
Spacing, color, radius, and motion props take a token name, never a raw value, and Box and Text have no className to get around that. When a prop is missing, the fix goes in the types, not on the page. Every text color clears AA contrast in both themes, and lint, tests, and an accessibility pass check all of it on every change.
Foundations
The tokens. Every value on every surface traces back to one of these.
Components
What you author with. Each page carries a props table read from the real types and a link to the source.
Effects
The layer behind a surface, when a plain ground is not enough.