Radius & Elevation

One variable sets every corner, six soft shadows set every height, and in dark mode the surfaces themselves get lighter as they rise. Depth without the drama.

Radius scaleCopy Anchor Link

Every rounded-* class is a multiple of --radius (0.75rem). Drag the slider to feel it: change the one variable in src/styles.css and the whole UI gets rounder or sharper.

:root {
  --radius: 0.75rem;
}

Corners nestCopy Anchor Link

Inner radius = outer radius − padding. Copy the outer radius onto the inner box and the corners bulge like a badly packed suitcase. That's why menus are rounded-lg with p-1 and their items are rounded-sm.

<div className="rounded-lg p-1">
  <button className="rounded-sm px-2 py-1.5">Edit</button>
</div>

Shadow scaleCopy Anchor Link

Shadows are soft and low-alpha: they hint at height instead of shouting it. The higher something floats, the bigger its shadow. Flip to dark mode and they almost vanish. That's on purpose, see below.

Where things liveCopy Anchor Link

Each level has its own surface, radius and shadow. In light mode the shadow carries the depth. In dark mode shadows disappear, so each layer gets lighter instead: background → card → popover. Dialogs share one scrim from modal-scrim.ts, so every modal dims the page the same way.

Border or shadow?Copy Anchor Link

Content that stays in the page flow gets a hairline border. Anything that floats above it gets a shadow and a faint ring-1 ring-foreground/10, so it still has an edge in dark mode.

RelatedCopy Anchor Link