Shape & elevation

Corners round on a consistent scale, shadows are quiet and theme-aware, and most separation is done with a single hairline rather than a shadow.

Corner radius

Radius climbs with the size of the surface: the smallest on an inline code chip, the largest on a bottom sheet. These are recurring literal values in the component styles rather than tokens, so they are documented here by hand and checked against the stylesheet.

5px

8px

12px

16px

20px

Radius	Where
5px	Inline code chips
6px	Code copy button, WCAG criterion chips
7px	Blog tag chips (.post-tag)
8px	Buttons, badges (.badge)
9px	Feed post thumbnails (mobile list)
10px	Code blocks, blockquotes
12px	Cards, feed posts
14px	Compact surfaces, bespoke table cards
16px	Lead post card, mobile role card
20px	Bottom sheets (top corners)
pill	Hero CTAs, language pills, dock

The tag chip and the badge sit a pixel apart, at 7 and 8 pixels. It is a small inconsistency worth either keeping on purpose or closing; for now the docs report both as they ship.

Shadows

Shadows are soft and low. The signature rule is that dark mode does not darken: a black shadow on a dark page reads as nothing, so the dark tokens carry a faint light shadow instead. Each token below is shown on both a light and a dark stage.

--device-shadow Light Dark The phone frame's drop shadow.
--shadow Light Dark Legacy card lift, still on cards and feed posts.
--shadow-hover Light Dark Legacy hover lift.
--shadow-card Light Dark Resting card elevation.
--shadow-lift Light Dark Raised surfaces and hover states.
--shadow-dock Light Dark The floating tab dock.
--sheet-shadow Light Dark Bottom sheets (shadow cast upward).

Borders

The default separator is a one-pixel hairline in the border colour, not a shadow. Cards, tables, sheets and bands are all framed this way. Shadows are reserved for things that genuinely float above the page, like the dock or an open sheet.