Sizing & Spacing

Spacing scale, border radii, and responsive breakpoints. Uses Tailwind's default 4px base grid with token-driven radii.

Spacing Scale

Built on a 4px base grid. Use p-*, m-*, gap-* utilities.

0.52px

14px

1.56px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

Derived from the --radius token (default 0.5rem). Change this single value to adjust all radii globally.

rounded-sm

calc(var(--radius) - 4px)

Small elements

rounded-md

calc(var(--radius) - 2px)

Inputs, badges

rounded-lg

var(--radius)

Cards, dialogs

rounded-full

9999px

Avatars, pills

Tailwind's default responsive breakpoints. Mobile-first: styles apply at the given width and above.