Every plane in a Malevich interface is a surface — from the page canvas to the scrim behind a modal. Five semantic surfaces, built from four primitives.
A surface is any plane that holds content: the page background, a card, a popover, a modal scrim. Malevich names five — canvas, raised, float, overlay and bone — and orders them in a fixed z-stack. Content lives on the canvas; cards rise to raised; transient panels float; overlays cover everything with a dim scrim.
A surface is never one property. It is composed from four primitives — background (the fill), shape (corner radius), elevation (border, shadow and stacking order) and spacing (the padding within and the gaps between). The semantic tokens below bundle sensible defaults of these primitives for each role.
Five role-based surfaces. Each previews in this page's dark scheme; per-scheme fills are in Background below.
The four dimensions a surface is composed from. Change a primitive and you change the surface.
The fill. Each surface resolves to a different value per color-scheme — light and dark shown side by side.
Corner radius. The scale runs from sharp sections to fully-round avatars; each token names the role it serves.
How far a surface lifts off the page — expressed through shadow and border, not a z-index scale. Shadow previews use the light-scheme value on a light stage.
Stacking order has no token scale: surfaces follow a fixed ladder — canvas → raised → float → overlay — and portal overlays (Dialog, Sheet, Popover, Toast) manage their own z-index at runtime.
The padding within a surface and the gaps between surfaces, shown at the -m step. Each token also resolves to -s and -l variants on the same scale.