Design tokens

Spacing

Nova uses a 4px base with an 8px rhythm. Every gap, padding, and margin snaps to the scale — small enough for dense dashboards, generous enough for marketing surfaces.

Philosophy

Rhythm beats precision. When every value is a multiple of 4, layouts feel intentional without a single measurement.

The scale is geometric where it matters (2, 4, 8, 16) and linear where density counts (12, 24). Optical alignment wins over grid-perfect alignment — nudge a caret by 1px when the eye asks for it.

Scale

Token	px	rem	Use
0	0	0rem	Reset
0.5	2	0.125rem	Hairline offsets
1	4	0.25rem	Icon gaps, tight chips
2	8	0.5rem	Inline gaps, compact padding
3	12	0.75rem	Dense card padding
4	16	1rem	Default padding
6	24	1.5rem	Card padding, form gaps
8	32	2rem	Section spacing
12	48	3rem	Group separators
16	64	4rem	Hero blocks
24	96	6rem	Page rhythm

Visualizer

Each bar's width is its token value. Click any bar to copy its Tailwind padding/gap class.

0.52pxCopy gap-0.5

14pxCopy gap-1

28pxCopy gap-2

312pxCopy gap-3

416pxCopy gap-4

624pxCopy gap-6

832pxCopy gap-8

1248pxCopy gap-12

1664pxCopy gap-16

2496pxCopy gap-24

Usage

Use Tailwind spacing utilities — they map directly to the scale.

tsx

<Card className="p-6 space-y-4">
  <div className="flex items-center gap-2">
    <Avatar />
    <span>Ada Lovelace</span>
  </div>
  <p className="text-muted-foreground">Signed in 2 minutes ago</p>
</Card>

Best practices

Prefer gap-* over margins in flex/grid layouts.
Match padding to density: 3–4 for compact, 6 for default, 8+ for marketing.
Keep vertical rhythm consistent inside a section (one primary gap value).