Principles
- Space is the material. Generous margins and section spacing make the brand feel airy and premium. When in doubt, add space, not elements.
- One idea per section. One eyebrow, one headline, a short paragraph, at most one primary action.
- 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.
- 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. Social canvases and safe areas are in 09 · Social media.
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.
