Design System · HeyOz

Six 12-step ramps and the semantic tokens built on them: surfaces, fills, borders and content.

Four roles in five sizes each, body with two more, four weights. Bricolage for display and headings, Geist for everything else.

Padding and gaps. The name is the value: space/16 is 16px.

Corner roundness from square to pill.

Control heights, icon boxes, the touch target and border widths.

The icon grid, its rules, the HeyOz icons and the whole Lucide library redrawn on the grid.

Three durations and three easing curves.

The soft white light that follows the cursor across lit surfaces.

Eight button types, icon buttons and links, in seven sizes, squircle and pill, with their states.

The app side nav, expanded and collapsed, with its menu items and brand picker in every state. Every sidebar uses it, this site included.

The Home screen built from the tokens. Hold Ctrl + Alt and point at anything to see its tokens.