1 min lesson
The 90 to 100 in spacing
Use "The 90 to 100 in spacing" to explain each part and the role it plays.
Step 1 of 2
The 90 to 100 in spacingoptical, not just metric
A spacing system on a 4px grid gets you to 90. The last 10 is optical: an icon next to text often needs a hair less leading space than the grid says because its glyph has built-in padding; a chevron looks centered when nudged a pixel toward its visual mass, not its bounding box.
Optical adjustments that read as craft
- Icon + label gap
- Trim 1-2px versus pure-text spacing; icons carry internal padding
- Capital-letter alignment
- Align to the cap height, not the line box, so headings sit true
- Round vs square shapes
- Circles need slight overshoot to look the same size as squares
- Punctuation hang
- Let quotes and bullets hang into the margin for a clean left edge
These are the details a Design Engineer is hired to catch.
Translating Figma faithfully
Figma auto-layout maps cleanly onto Flexbox: direction → flex-direction, gap → gap, padding → padding, hug/fill → width: max-content / flex: 1. Pull spacing and color from the file's variables as tokens rather than eyeballing hex values and check the result against the frame at 100% and 200% zoom.