Spacing Scale
Base unit: 4px. All spacing is a multiple of this base.
xs4pxp-1use: Icon gaps, Tight element pairsavoid: Padding inside cards or panels — use lg, reads as cramped not tight
sm8pxp-2use: Small inner paddingavoid: Gaps between sections — use xl/2xl
md12pxp-3use: Default gap between elementsavoid: Page-level padding — use 3xl
lg16pxp-4use: Section padding, Card paddingavoid: Icon gaps or tight pairs — use xs
xl24pxp-6use: Between sectionsavoid: Inner component padding — use sm/md, too loose inside a component
2xl32pxp-8use: Large section gapsavoid: Default element gap — reads as accidental whitespace, not intentional rhythm
3xl48pxp-12use: Page-level paddingavoid: Inside cards or components — reserve for the outer page shell only
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer