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.
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.
Usage
{/* padding step 4 = 16px, gap step 2 = 8px, radius lg */}
<div className="p-4 gap-2 rounded-lg" />Best practices
- DoUse your product's scale through its utilities or tokens, such as p-4, gap-2, and rounded-lg on this site.
- DoGroup related items more tightly than unrelated ones (SLP-7).
- DoKeep a child's radius at or below its parent's, so curves stay concentric.
- Don'tReach for an off-scale value for margin, padding, or gap (TOK-2), or radius (TOK-3).
- Don'tUse one spacing value everywhere — flat rhythm is an AI-slop tell (SLP-7).