Foundations · Spacing
Spacing & radius
Round 4 (locked): a 4-px base scale. Content-dense, breath at the section level, never airy at the component level.
Espanda is content-dense by design. Reach for tight tokens (1–4) inside components, generous tokens (12–24) at the section level. Skip the in-between sizes — that's where layouts get muddy.
Spacing scale
Visual reference. Each bar shows the actual pixel width of the token.
When to use what
The same scale, with a sentence per token. Refer here when you're picking a value.
| Token | Value | Use for |
|---|---|---|
| 0 | 0px | Reset. Where two elements should touch with no gap. |
| 1 | 4px | Hairline spacing — between an icon and a label, between a meta-line and content. |
| 2 | 8px | Tight inline spacing — chip padding, badge padding, inline icons. |
| 3 | 12px | Compact padding — small button vertical padding, tight form rows. |
| 4 | 16px | Default block spacing — space between paragraphs, default form-field gap. |
| 5 | 20px | Card content padding — comfortable but compact. |
| 6 | 24px | Section padding inside cards, default card padding for spacious cards. |
| 8 | 32px | Section gap — between titled groups within a page. |
| 10 | 40px | Generous block — between distinct content groups. |
| 12 | 48px | Section padding (small page) — vertical breathing room between major sections. |
| 16 | 64px | Section padding (default) — most page-level section gaps. |
| 20 | 80px | Hero / marketing — generous vertical rest. |
| 24 | 96px | Page-level — top and bottom padding on long-form content. |
Radius scale
Seven radius tokens. Default is 8 px. Most components use base or md.
When to use which radius
| Token | Value | Use for |
|---|---|---|
| none | 0 | Sharp corners. Tables, dividers, full-bleed surfaces. |
| sm | 4px | Tight elements — chips, badges, small buttons, code inline. |
| base | 8px | Default radius. Standard inputs, default buttons, alerts. |
| md | 12px | Cards, popovers, dialogs — anything that should feel softly contained. |
| lg | 16px | Larger cards, hero blocks, prominent surfaces. |
| xl | 24px | Marketing hero blocks, splash sections. Use sparingly — too soft for product UI. |
| full | 9999px | Pills, avatars, circular tag dots. |
Composition patterns
Real layout recipes — the standard way to combine spacing tokens. Use these as defaults; deviate only when there's a real reason.
Card padding
6 (24px) all sides · gap-4 (16px) between blocks
Default card padding for product surfaces. Tight enough for density, comfortable enough for readability.
Section gap
mb-16 (64px) between sections · mb-6 (24px) between subsections
The vertical rhythm used throughout this design system site.
Form layout
space-y-4 (16px) between fields · gap-2 (8px) label-to-input · py-3 px-4 input padding
Compact, scannable, never airy.
Hero block
py-20 (80px) vertical · px-8 (32px) horizontal · mb-6 between heading and subheading
Marketing hero. Generous, but not Sarvam-blank.
Inline meta
gap-1 (4px) between icon and label · gap-2 (8px) between meta items
Status chips, breadcrumbs, file metadata, agent labels.
Page padding
px-8 (32px) mobile · md:px-12 · lg:px-16 · xl:px-20 · py-12 (48px) top/bottom
Already applied via the root layout in app/layout.tsx.
Rules of thumb
Pick from the scale. If your gap doesn't fit a token, the design is wrong, not the token.
Skip the in-between values. Don't reach for arbitrary px values. Half-step tokens (between 4–6, 8–12) lead to visual noise.
Tight inside components, generous between sections. Component density is a brand value. Section breathing room is a readability one.
Vertical rhythm follows the scale. Stack blocks at consistent gaps (4, 6, 8, 12, 16) — don't randomly mix 14 px and 18 px.
Radius defaults to base (8 px). Cards use md (12 px). Pills use full. Never reach for xl outside marketing.