# 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 — passes AA

## Type
- Headings: Inter, weights 700 and 900 — Tight letter-spacing at large sizes
- Body: Inter, weights 400 and 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