# 05 · Layout and shape

## Principles

1. **Space is the material.** Generous margins and section spacing make the brand feel airy and premium. When in doubt, add space, not elements.
2. **One idea per section.** One eyebrow, one headline, a short paragraph, at most one primary action.
3. **Same system everywhere.** Every page, post and document uses the same column, the same spacing, the same corners. A visitor should never notice a change of style as they scroll.
4. **Soft, not rounded-cartoon.** Panels, cards and photos have gently rounded corners; buttons are pills. Nothing has a drop shadow except review cards.

## Shape

| Element | Web | Print (A4) | Social (1080 px canvas) |
| --- | --- | --- | --- |
| Panels, cards, photos, videos | 16 px corners | 3 mm | 32 px |
| Inputs, selector tiles, thumbnails | 12 px | 2 mm | 24 px |
| Buttons, badges, tags, toggles | Pill (999 px) | Pill | Pill |
| Full-bleed hero or band | Square (it runs off the edge) | Square | Square |

## Web grid and spacing

| Property | Desktop | Phone |
| --- | --- | --- |
| Content column | 1320 px max | Full width |
| Side gutter | 40 px | 20 px |
| Section spacing (top and bottom) | 80 px | 56 px |
| Base unit | 8 px | 8 px |
| Text measure | 64 characters max | 64 characters max |
| Gap between cards | 24 px | 16 px |

## Bands: how a page is built

Every section is a **full-width band**. Content sits in the one 1320 px column inside it.

| Band | Ground | Text | Use |
| --- | --- | --- | --- |
| Default | White | Forest Ink / Slate Green | Most sections |
| Alternate | Sand | Forest Ink / Slate Green | Every other section, hero band, material stories |
| Soft green | Pale Sage | Forest Ink, Sage eyebrow | Showroom invitation, review summary |
| Dark panel (rare) | Deep Green | White | Hero text panel on phones, one closing call to action at most |
| Footer | White with a Hairline top rule | Forest Ink / Slate Green | Every page |

- **Bands alternate White and Sand** as you scroll. Never two Sand bands in a row.
- **On a White band**, panels are Sand. **On a Sand band**, cards are White with a Hairline border.
- The header is White with no rule. The announcement bar is Pale Sage with Forest Ink text.

## The hero

| Screen | Layout |
| --- | --- |
| Desktop (1024 px and up) | The photograph fills the hero on a Sand band. The headline sits on the calm side over a short Forest Ink shade behind the text only |
| Phone and tablet (up to 1023 px) | The photograph shows clean, with no shade. Headline, intro and buttons sit on a **Deep Green panel below it** in White, with a White pill button and a White outline pill |

- One headline (40 to 56 px Regular), one intro line (17 to 18 px), two buttons at most.
- Never a flat brown block, never text over a busy part of a photo.

## Print and social

Print grids (brochures, booklets, leaflets, specification sheets, stationery) are in [08 · Print](08-print.md). Social canvases and safe areas are in [09 · Social media](09-digital-marketing.md).

## Don't

- Don't change the column width or spacing from page to page.
- Don't use square-cornered photos or cards (full-bleed images excepted), or 4 px "almost square" corners.
- Don't add drop shadows, frames or outlines to photos.
- Don't place two dark sections next to each other, or use a dark band on most pages at all.
- Don't fill space for the sake of it. Remove before adding.