Spacing & elevation
The 4px spacing grid, radius hierarchy, elevation levels and the density token.
Spacing scale
Tailwind's 4px grid. Six steps do nearly all the work in dense UI; they are highlighted. Pick a step to see it as padding and gap.
Padding …, gap …
12px
Card grids, panel padding on mobile
1<div className="flex gap-3 p-3">2 …3</div>45// 3 × 4px = 12pxRadius
Radius grows with the size of the thing, so nesting reads naturally: a 6px row inside an 11px panel inside a 14px sheet. Values are measured from the rendered examples.
rounded-[5px]Tags, badges, kbd
rounded-mdList items, menu rows
rounded-lgButtons, inputs, selects
rounded-xlPanels, cards, canvases
rounded-2xlThe workspace sheet, sheets
Elevation
Three shadows, each with one job. Resting content is flat and bordered; shadow means floating or clickable.
shadow-liftHover state of clickable cards, paired with -translate-y-px. Never at rest.
shadow-floatMenus, popovers, the command palette: anything that floats above the page.
shadow-sheetThe workspace sheet on the canvas. One per screen.
hover:shadow-lift hover:-translate-y-pxRevenue
Hairline border, flat
Revenue
Heavy shadow at rest
Resting surfaces separate with a 1px border. Shadows mean something moved: it floats, or you are about to click it.
1--shadow-lift: 0 1px 2px rgb(16 18 27 / 0.05), 0 6px 16px -6px rgb(16 18 27 / 0.12);2--shadow-float: 0 0 0 1px var(--sheet-edge), 0 12px 32px -8px rgb(16 18 27 / 0.18), 0 2px 6px rgb(16 18 27 / 0.06);3--shadow-sheet: 0 0 0 1px var(--sheet-edge), 0 1px 2px rgb(16 18 27 / 0.04), 0 8px 24px -12px rgb(16 18 27 / 0.08);Density
Table and list rows use h-(--row-h): 40px comfortable, 32px compact. Settings → Density sets data-density on the html element; the same attribute works on any wrapper, which is how this preview switches on its own.
Row …, --row-h …