Print Desk

The Atom design system, rendered live from its own tokens and components — it cannot drift from what ships.

Docs Foundations

Elevation & Depthstable

Plates on paper: depth comes from surface steps and hard offset shadows with zero blur — like printing plates lifted off the page. A fixed six-step z-index scale governs stacking. Values live in tokens/elevation.tokens.json.

elevationshadowdepthz-indexlayering

Principles

Hard shadows only

elevation.plate-sm (2px offset) and plate-md (5px offset) are the entire shadow vocabulary. No soft blurs, no glows — a blurred shadow in this system is a bug, not a style choice.

Surfaces step before shadows lift

Prefer expressing depth with the surface ladder (canvas → surface → raised → inverse) and borders; shadows are reserved for things that genuinely float: menus, popovers, modals, dragged items.

Six layers, no exceptions

z-index is always one of layer.base/sticky/dropdown/overlay/modal/toast (0–500). Intermediate values are never invented; if two things fight at the same layer, the DOM order is wrong, not the scale.

Guidelines

  • shouldDragged items use elevation.plate-md while lifted and return to their resting elevation on drop.
  • mustModal and drawer backdrops use scrim.base; never a bespoke rgba.
  • shouldDo not attach shadows to static content cards by default; the rule border + surface is their resting state, shadow appears on hover only where the card is interactive.