Spacing

Good spacing is invisible. A traveller browsing holidays should feel a sense of ease and openness, not count pixels. That ease comes from one decision made once: every gap, padding and margin is a multiple of 4 px. The result is a rhythm that ties every component together even when they were built by different people at different times.

The scale has nine steps — from the 4 px gap between an icon and its label to the 96 px breathing room inside a full-bleed hero section. Use only these nine values. One-off values like 5 px, 13 px or 19 px break the rhythm in ways that are small individually but cumulative across a full page.

---

Visual scale

Each bar below is exactly as wide as its spacing value. The token and rem equivalent sit to the right.

---

Token reference

---

When to use each step

4 px — the atomic unit

The smallest value in the scale. Used only where two things need to feel attached rather than separate: the gap between a check icon and its label text, the space between a badge background and its border. If you find yourself reaching for 4 px between two distinct components, you probably want 8 px.

8 px — tight internal spacing

The inner padding of small components: chips, filter checkboxes, icon buttons. The gap between items in a dense navigation list. 8 px feels tight on purpose — it groups tightly-related elements without crowding them.

12 px — compact control spacing

Button padding (vertical direction), the gap between stacked form inputs in a compact layout, tab vertical padding. The step where things start to feel comfortably tappable (a 12 px top + 12 px bottom + 16 px type = 40 px minimum tap target).

16 px — the baseline

The default margin when in doubt. If something feels too tight but 24 px feels too loose, 16 px is almost always the answer. Card padding minimum, form field vertical gap, grid gap minimum on mobile. The step that feels neutral — neither tight nor generous.

24 px — generous and readable

The step that makes layouts breathe. Card internal padding on desktop, standard grid gap between cards, spacing between a heading and its first paragraph. If you use 16 px and the layout feels cramped, step up to 24 px before reaching for anything in between.

32 px — between groups

Used to separate visually distinct groups within a section: between the "Accommodation" block and the "Flights" block on a holiday card, or between the header of a collapsible and its expanded content. 32 px says "these two things are related but distinct".

48 px — section separator

The vertical space between major content sections within a page: between the hero and the first card grid, between a grid and a contact module. Enough space to signal a new topic without requiring a horizontal rule.

64 px — page rhythm

Between major page sections on desktop viewports. At this size the spacing itself communicates that you have moved to a genuinely different part of the page. Below tablet width, drop 64 px to 48 px.

96 px — hero breathing room

The padding inside full-bleed hero sections where a large destination image meets the page edge. This amount of space lets the image breathe and prevents text from feeling pinned to the edge. On mobile, reduce to 48 px.

---

Component examples

Card: internal padding

A standard Kuoni holiday card uses space.6 (24 px) for horizontal and vertical padding on all four sides. The gap between the meta row (destination tag, star rating) and the price block uses space.4 (16 px). Icon-to-text alignment inside the meta row uses space.1 (4 px).

Spacing breakdown for this card:

• Content padding: space.6 (24 px) all sides
• Meta row to title: space.4 (16 px)
• Title to body copy: space.1 (4 px)
• Body copy to price block: space.4 (16 px)
• Inside meta row (separator dots): space.1 (4 px)

List items: gap between entries

Stacked items in a vertical list (itinerary days, included extras, filter options) use space.4 (16 px) between them. Dense filter checkboxes use space.2 (8 px). Navigation links inside the sidebar use space.1 (4 px).

Spacing in this list:

• Item vertical padding: space.4 (16 px) top + bottom = 32 px touch target
• Icon-to-label gap: space.2 (8 px)
• List horizontal padding: space.4 (16 px)

Page margins

Content on desktop sits inside a max-width container (1280 px) with space.6 (24 px) gutters on each side. At tablet width the gutter stays at space.6 (24 px). On mobile the gutter drops to space.4 (16 px) to maximise the reading width without the content touching the screen edge.

---

Usage