14pxClimbUK brand centre
Room to move
A small set of steps for space, three radii, warm shadows, and tap targets that are easy to hit.
Space
Eight steps and a section
Use these steps for every gap, margin and padding. The section step is the space above and below a full-width section.
--climb-space-14px--climb-space-28px--climb-space-312px--climb-space-416px--climb-space-524px--climb-space-632px--climb-space-748px--climb-space-864px--climb-space-section96pxVertical padding of a full section on the web (96px top and bottom).
Shape
Soft corners
10px999pxElevation
Warm shadows, orange glow
Elevation on light grounds (White, Light Grey). Shadows are tinted with Dark Brown, never pure black, and stay soft and low. On dark grounds, raise a surface by moving it one step lighter (Dark Brown to Charcoal) and adding the hairline; a shadow alone disappears there.
Flat: sections, most cards on dark grounds.
Resting cards, inputs, chips.
Hovered cards, sticky bars, dropdowns.
Popovers, menus, floating ticket bar.
Modals and dialogs only.
Edge of a raised Charcoal surface on Dark Brown.
Stage-light glow behind the one primary action on a dark hero or stage screen. Never on light grounds, never on more than one element.
Layout
Breakpoints and the measure
Your window is 0px wide, which is the xs breakpoint. Resize it to watch the marker move.
sm576px
md768px
lg992px
xl1200px
xxl1400px
- Container
- 1320pxWidest content column.
- Measure
- 68chLongest line of body text on promotional pages, cards and subtitles. Written pieces (blog posts, news, newsletters, articles) run to the container.
- Gutter
- 24pxColumn gap.
- Target min
- 44pxSmallest touch target (WCAG 2.2 asks for 24px; we use 44px).
- Target compact
- 24pxCompact target for dense rows (signature icons). WCAG 2.2 AA minimum; use target-min or aaa.layout.target wherever space allows.
Tap targets
Easy to hit
24px is the signature compact size and meets WCAG 2.2 AA. 44px is the AAA size for buttons, menus and anything used on the move. Try both with a finger or a pointer.
Compact, 24px
AAA, 44px
Focus rings are 3px wide with a 3px offset: Orange Tint on dark, Dark Brown on light and on orange. Press Tab on this page to see them.