Introduction
Keystone uses uniform components, elements, and spacing to encourage consistency when designing for digital government experiences.
Spacing is the negative area between elements and components. It is commonly controlled in code with margin and padding. Keystone offers several methods such as tokens and layout components to make implementing spacing in designs easier and more consistent.
Spacing
The Keystone spacing scale complements the layout grid and typography scale by using multiples of two, four, and eight. It includes both small increments needed to create appropriate spatial relationships for detail-level designs as well as larger increments used to control the density of a design.
Each level of the spacing scale has its own token. Spacing tokens can be used inside of components for building and between components for layout spacing.
Spacing Scale
Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all Keystone components.
| Token | REM | PX |
|---|---|---|
space-1 | 0.063 | 1 |
space-2 | 0.125 | 2 |
space-3 | 0.25 | 4 |
space-4 | 0.5 | 8 |
space-5 | 0.75 | 12 |
space-6 | 1 | 16 |
space-7 | 1.25 | 20 |
space-8 | 1.5 | 24 |
space-9 | 2 | 32 |
space-10 | 2.5 | 40 |
space-11 | 3 | 48 |
space-12 | 3.6 | 56 |
space-13 | 4 | 64 |
space-14 | 5 | 80 |
space-15 | 6 | 96 |
space-16 | 7.5 | 120 |