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
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn