Spacing and layout
For all digital experiences at BlackRock, UX/visual designers use a pre-defined set of spacers to maintain consistency around elements and between components. These measurements are based off an 8 px grid system, and are used for both vertical and horizontal spacing in our designs.
This helps us to maintain structure and consistency throughout our sites.
8px baseline grid and spacing increments
Baseline grids are invisible, vertical lines that are used to create consistent vertical spacing between standard elements, such as an app bar, list item, or typographic layouts. We also use multiples of 8 when defining measurements, spacing, and positioning elements.
How we measure: Always measure from your bounding boxes of text and the borders of components/elements.
Spacing increments
To keep spacing around and in between components consistent throughout your design, try using these recommended spacers. These are meant to be recommendations for layout spacing only.
| Label | Size | Component |
|---|---|---|
| Space-01 | 8 px |  |
| Space-02 | 16 px |  |
| Space-03 | 24 px |  |
| Space-04 | 32 px |  |
| Space-05 | 40 px |  |
| Space-06 | 48 px |  |
| Space-07 | 56 px |  |
| Space-08 | 64 px |  |
| Space-09 | 72 px |  |
| Space-10 | 80 px |  |
| Space-11 | 88 px |  |
| Space-12 | 120 px |  |