Off the page.
Most systems reach for shadow to separate things. Alix doesn’t. On a flat, sharp-cornered, architectural system, surfaces sit on hairlines, and elevation is an interface rule. Fixed canvases such as reports, slides, and print stay flat unless an application specification explicitly defines another treatment.
- Default
- No shadow · hairline
- Ramp
- 6 steps · xs–2xl
- In use
- xs · sm · md · lg
- Principle
- Depth = detachment
The flat default
Almost everything has no shadow. Cards, panels, inputs, tables, and the page itself separate with a 1px hairline. A flat, radius-0 system reads as architectural and precise. Use shadow only when a surface has truly left the page.
What elevation is
“Elevation” is borrowed from drafting, the side-on view that shows how high something stands. That’s exactly the model: picture the screen edge-on. The page is the ground plane; every surface has a height above it. Border carries the edge. Shadow carries detachment. Detached surfaces may keep a hairline border while adding the right shadow; the further a surface has detached from the plane, the deeper that shadow reads. Depth is a reading of distance, never decoration.
The ramp
Six steps, deepening evenly. Each is a token; nothing in between. Four are in active use: xs, sm, md, lg. They map to the real heights a surface can take. Slider thumbs and drag handles use shadow-sm, the bridge between xs and md. The top two, xl and 2xl, are defined as reserve headroom but deliberately unused: the system has never needed to lift anything that far.
Elevation in use
A surface’s shadow is set by how detached it is from the page. Resting content stays flat. A small standalone chip barely lifts. An anchored overlay floats just above its control. A modal floats clear of the page. Height chooses the shadow.
No shadow
Resting content, in the flow of the page. Usually separated by a hairline border, never lifted.
shadow-xs
A standalone chip on a busy ground. The faintest lift, usually with a border, just enough to read it as its own object.
shadow-sm
Slider thumbs and drag handles. A small lift between xs and md, often retaining the hairline edge.
shadow-md
Overlays anchored to a control. They open from a trigger and float just above the page, near where they came from.
shadow-lg
Free overlays. They take over the screen on a scrim, detached from the page. The deepest lift the system uses.
Border or shadow
The whole chapter in one decision. Ask only: has this surface left the page? A border defines the edge. Shadow communicates detachment. Resting surfaces normally need only the border. Detached surfaces may keep a hairline border while adding the appropriate shadow. Never use shadow as decoration or as a substitute for missing structure.
Resting surface → border
Cards, panels, inputs, tables, list rows, accordions. They live in the flow and share edges with what’s around them. A 1px border is the separator.
Detached surface → border plus shadow
Menus, tooltips, toasts, popovers, dialogs, drawers. They open on top of the page, dismiss away, and leave content behind them. A shadow reads the lift; a hairline border may still stay with the surface.
Misuse
Elevation goes wrong by being used as decoration rather than as a reading of height. Keep it earned, keep it singular, keep the corners sharp.