design language · 04

depth.

things do not stack in usva; they sit at depths in the fog. six surface roles make the strata, and depth is told three ways at once, a lighter surface, a hairline, and a soft dark shadow, never a hard edge.

the cross-section

the six strata, each painted with its real surface token. switch the theme and watch how each register does depth differently: kajo leans on translucency, savi on a wider surface delta and less shadow. switch the scrim on to see the layer an overlay dims the world with.

overlaya dialog, a popover. it floats clear of everything
surface-2raised again: a row in a card, a hovered cell
surfacea card, a panel, lifted off the ground
bgthe ground. one per document
sunkenbelow the ground: wells, code, inset areas

radius follows importance

the corner radius is not a habit applied evenly. the bigger the moment, the rounder the corner: a chip is nearly sharp, a hero panel is soft.

sm
md
lg
xl
2xl
3xl

glow is for the living

a shadow is elevation. a glow is not: it is held back for one thing, and that thing is something alive, a live control, a running process, the accent doing its one job. spend it on decoration and it stops meaning anything the moment it is needed.