Design style

Swiss grid

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

serious
technical
balanced
classic
neutral

See it live

Raster Atelier is a fictional architecture studio landing page, written for this library to show the Swiss gridstyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Swiss grid recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# 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

Design in the "Swiss grid" style.
The idea: A strict grid, big sans-serif type and asymmetric layout do all the work; nothing is there for decoration.
It suits: Architecture, design and engineering studios.
It suits: Portfolios where the work should speak.
It suits: Information-heavy pages that need calm order.
Do not choose it when: The brand needs warmth or softness.
Do not choose it when: Content is mostly long-form storytelling.
Follow this rule: Everything sits on a visible 12-column grid.
Follow this rule: Type is the main image: very large headings, small body text.
Follow this rule: Layouts are asymmetric — text hangs from a strong left edge.
Follow this rule: One accent colour, used rarely and boldly.
Follow this rule: Flush-left, ragged-right text; never centred blocks.
Follow this rule: Space and alignment create hierarchy, not boxes or shadows.
Use #ffffff (Paper white) as the background colour.
Use #f2f2f2 (Light grey) as the surface colour.
Use #111111 (Ink) as the text colour.
Use #555555 (Graphite) as the muted colour.
Use #d40d12 (Signal red) as the accent colour.
Use #111111 (Rule black) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 18.88:1.
Use Inter in weights 700 and 900 for headings: Tight letter-spacing at large sizes.
Use Inter in weights 400 and 500 for body text: Small and regular; let the headings shout.
Use only these type sizes: 13px, 16px, 20px, 32px, 56px, 96px.
Type: One family in many sizes and weights; contrast comes from size, not from mixing faces.
Space things on a 8px base with the steps 8px, 16px, 24px, 48px, 96px.
Spacing: Spacing follows the grid's gutter; big gaps between sections.
Use corner radii of 0px.
Borders: Thin black rules to separate, never boxes.
Shadows: None.
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.
Do: Make one heading much bigger than everything else.
Do: Use the red accent for one thing per screen.
Avoid: rounded corners or drop shadows.
Avoid: centred layouts.
Avoid: more than one typeface.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #ffffff;
  --color-surface: #f2f2f2;
  --color-text: #111111;
  --color-muted: #555555;
  --color-accent: #d40d12;
  --color-border: #111111;
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 96px;
  --radius-1: 0px;
}

Download brief (.md)Download tokens (.css)

The 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

Palette

Paper whitebackground #ffffff
Light greysurface #f2f2f2
Inktext #111111
Graphitemuted #555555
Signal redaccent #d40d12
Rule blackborder #111111

Text on background: 18.88:1 — passes AA

Type

Headings · Inter · 700, 900

The quick brown fox jumps over the lazy dog

Tight letter-spacing at large sizes

Body · Inter · 400, 500

The quick brown fox jumps over the lazy dog

Small and regular; let the headings shout

96pxThe quick brown fox jumps over the lazy dog
56pxThe quick brown fox jumps over the lazy dog
32pxThe quick brown fox jumps over the lazy dog
20pxThe quick brown fox jumps over the lazy dog
16pxThe quick brown fox jumps over the lazy dog
13pxThe quick brown fox jumps over the lazy dog

One family in many sizes and weights; contrast comes from size, not from mixing faces.

Spacing and shape

Spacing on a 8px base

8px
16px
24px
48px
96px

Spacing follows the grid's gutter; big gaps between sections.

Corners, borders and shadows

Borders: Thin black rules to separate, never boxes
Shadows: None

Do and don't

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

Swiss grid

See it live

Structure, then everything else

Index of work

Practice

One module

Structure on show

Nothing added

Studio

Visit

Hours

New projects

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't