# Spacing and radius

> Consistent spacing and corners are what make a screen feel calm instead of busy. One shared scale, so nothing is arbitrary.

Your product takes its spacing and radius scales from its DESIGN.md. Where DESIGN.md defines none, the codebase's theme tokens decide. Where neither does, the **shadcn/ui default token scales** apply. This site adopts those defaults for spacing, radius, and elevation, deliberately unmodified, and the specimens below show them.

Every deviation you don't make is consistency you get for free, and the defaults are a vocabulary AI agents already know. The default values live in the shadcn documentation; standards TOK-1, TOK-2, and TOK-3 bind every product to the tokens it resolves this way.

*(interactive element omitted — view it on the page)*

## Rhythm, not monotony

The scale gives you values; rhythm is still your job. Related items group tighter than unrelated ones. One spacing value everywhere is an AI-slop tell (SLP-7).

## Radius

Corner radii come from your product's radius scale (TOK-3); this site uses the shadcn default. Cards top out around 12–16px; reserve full-pill for tags and buttons. Nested radii: child radius ≤ parent radius, concentric so curves align.

*(interactive element omitted — view it on the page)*

## Usage

```tsx
{/* padding step 4 = 16px, gap step 2 = 8px, radius lg */}
<div className="p-4 gap-2 rounded-lg" />
```

## Best practices

- Do: Use your product's scale through its utilities or tokens, such as p-4, gap-2, and rounded-lg on this site.
- Do: Group related items more tightly than unrelated ones (SLP-7).
- Do: Keep a child's radius at or below its parent's, so curves stay concentric.
- Don't: Reach for an off-scale value for margin, padding, or gap (TOK-2), or radius (TOK-3).
- Don't: Use one spacing value everywhere — flat rhythm is an AI-slop tell (SLP-7).

## Related

### Agent skill

- `/dx-harness:dx-design-polish`: Reviews the visual craft of a page: spacing, type, radius, colour, and shadow. Proposes ranked fixes.

[All skills](/harness/skills)

### In the catalogue

- [TOK-2](/standards/catalog/tok-2) (L1): All spacing values come from the spacing scale DESIGN.md defines (else the codebase's, else the shadcn/Tailwind default scale)
- [TOK-3](/standards/catalog/tok-3) (L1): Corner radii come from the radius scale DESIGN.md defines (else the codebase's, else the shadcn default radius scale)
- [SLP-7](/standards/catalog/slp-7) (L2): Spacing has rhythm — related items grouped tighter than unrelated ones