Brand & styles

Surfaces & spacing

Space, corner radii, and elevation.

Corner radii

The shared base radius is 0.625rem. Smaller controls and larger surfaces derive their corners from it.

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-4xl

View code

<div className="rounded-sm border" />
<div className="rounded-lg border" />
<div className="rounded-2xl border" />

Build layouts on a 4px rhythm. Increase the gap between sections to make the hierarchy visible.

4px · 1

8px · 2

12px · 3

16px · 4

24px · 6

32px · 8

48px · 12

64px · 16

View code

<div className="flex flex-col gap-6 p-6">
  {/* Related content */}
</div>