Spacing
Space is not only vital to design, but part of BT's visual identity. Sufficient whitespace allows content to breathe and prevents overloading of the viewport.
Spacing scale
Arc uses a 4px subgrid, which means all space is a multiple of 4. You should design to multiples of 4 when designing or developing new components.
Vertical spacing
Vertical spacing is the space between two elements or components stacked vertically. It follows a more restrictive scale to ensure consistent vertical rhythm and balance with text content.
The scale is derived from Arc's typographic line-height scale and aligned to our 4px subgrid.
| Size | Example |
|---|---|
| 4px | |
| 8px | |
| 12px | |
| 16px | |
| 20px | |
| 24px | |
| 28px | |
| 32px | |
| 40px | |
| 48px | |
| 64px | |
| 96px | |
| 128px |
Components
VerticalSpace
Use VerticalSpace to create spacing between two vertically stacked components using the Arc vertical spacing scale. Available in React.js and Figma.
In Figma
- Use auto layout with 4px increments where possible.
- Use the VerticalSpace component to compose pages. This component appears hidden. Toggle visibility by toggling the Layout Grid (Menu > View > Layout Grid).
Usage guidelines
Design components to the 4px subgrid.
When designing a new component, use increments of 4px for the internal spacing. This helps keep it visually aligned with Arc components.
Give elements plenty of breathing room.
Use whitespace to allow elements to breathe, bringing greater clarity to the page. Cramming in too much content can overwhelm the user.
Avoid using custom vertical spacing values.
It's important to use the vertical spacing scale between two vertically stacked components. This ensures a consistent vertical rhythm and balances the space with text content.