# Swiss grid — style recipe

## The idea

- A strict grid, big sans-serif type and asymmetric layout do all the work; nothing is there for decoration.

## Use it when

- Architecture, design and engineering studios
- Portfolios where the work should speak
- Information-heavy pages that need calm order

## Avoid it when

- The brand needs warmth or softness
- Content is mostly long-form storytelling

## Principles

- Everything sits on a visible 12-column grid
- Type is the main image: very large headings, small body text
- Layouts are asymmetric — text hangs from a strong left edge
- One accent colour, used rarely and boldly
- Flush-left, ragged-right text; never centred blocks
- Space and alignment create hierarchy, not boxes or shadows

## Colour

- Paper white (background): #ffffff
- Light grey (surface): #f2f2f2
- Ink (text): #111111
- Graphite (muted): #555555
- Signal red (accent): #d40d12
- Rule black (border): #111111
- Text on background contrast: 18.88:1

## Type

- Headings: Inter, weights 700, 900 — Tight letter-spacing at large sizes
- Body: Inter, weights 400, 500 — Small and regular; let the headings shout
- Scale: 13px, 16px, 20px, 32px, 56px, 96px
- One family in many sizes and weights; contrast comes from size, not from mixing faces.

## Spacing and shape

- Base unit: 8px
- Spacing steps: 8px, 16px, 24px, 48px, 96px
- Spacing follows the grid's gutter; big gaps between sections.
- Corner radii: 0px
- Borders: Thin black rules to separate, never boxes
- Shadows: None

## Imagery and motion

- Imagery: Few, large, cropped images or pure typography; numbers and diagrams welcome.
- Motion: None, or a short opacity fade; nothing bounces.

## Do

- Align every element to the grid
- Make one heading much bigger than everything else
- Use the red accent for one thing per screen

## Don't

- No rounded corners or drop shadows
- No centred layouts
- No more than one typeface