Pixel-precise spacing outside the token scale
Using arbitrary spacing values like `13px` or `padding: 22px 14px` breaks the 4px base unit and creates inconsistent visual rhythm.
The wrong way
Tweaking margins and padding to exact pixel values that don't appear anywhere in the spacing scale.
.card {
margin: 13px 0 7px;
padding: 22px 14px;
}Why
The spacing scale isn't pedantry — it's why one designer's section and another's card visually agree without coordination. Off-scale values feel "almost right" in isolation but accumulate into visual noise across a product. If a design genuinely needs a value outside the scale, that's a signal: either rethink the layout, or propose a new scale step through governance. "Just this once" is how scales die.
The right way
Use the spacing tokens. Every margin and padding should resolve to a scale value.
.card {
margin: var(--spacing-12) 0 var(--spacing-8);
padding: var(--spacing-24) var(--spacing-16);
}