Spacing
One scale for every gap, padding and offset in the system. The step is not linear on purpose: near zero the eye distinguishes two pixels, at forty it does not, and a linear scale would spend half its values where nobody can tell them apart.
- A component never invents a gap. If a value is missing from the scale, that is a question to the scale, not a reason for a magic number.
Layout: spacing scale
| Token | Value |
|---|---|
--gr-space-0--gr-space-0 | 0px |
--gr-space-1--gr-space-1 | 4px |
--gr-space-2--gr-space-2 | 8px |
--gr-space-3--gr-space-3 | 12px |
--gr-space-4--gr-space-4 | 16px |
--gr-space-5--gr-space-5 | 20px |
--gr-space-6--gr-space-6 | 24px |
--gr-space-8--gr-space-8 | 32px |
--gr-space-10--gr-space-10 | 40px |
--gr-space-12--gr-space-12 | 48px |
--gr-space-16--gr-space-16 | 64px |
--gr-space-20--gr-space-20 | 80px |
--gr-space-24--gr-space-24 | 96px |
--gr-space-32--gr-space-32 | 128px |
--gr-space-40--gr-space-40 | 160px |
--gr-space-48--gr-space-48 | 192px |
--gr-space-64--gr-space-64 | 256px |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json