Style
Swiss grid
A strict grid, big sans-serif type and asymmetric layout do all the work; nothing is there for decoration.
See it live
Example: architecture studio landing page for Raster Atelier, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.
Architecture and town planning since 2009
Order is a form of care.
Raster Atelier is a studio of eleven architects. We design housing, schools and small civic buildings, and we draw every one of them on the same 600 mm grid — from the first sketch to the last door handle.
- Module
- 600 mm
- Buildings finished
- 34
- Architects
- 11
Work
Four recent buildings, newest first. Each one is public: you can walk in and see the grid for yourself.
- 2026
Linden Row Housing
Forty-two homes around a shared court
5 880 m² - 2024
Northgate Primary School
Twelve classrooms and a hall that opens to the yard
3 240 m² - 2023
Quay Street Library
A reading room over the old ferry office
1 150 m² - 2021
Harrow Field Pavilion
Changing rooms and a café for the playing fields
420 m²
Method
Plan, section, detail. Always in that order.
- 1
Plan
We lay the 600 mm grid over the site before we draw a single wall. Rooms take whole squares; corridors take what is left, and usually turn out shorter than anyone expected.
- 2
Section
Then we cut the building through. Ceiling heights, stairs and windows are set in the same module, so daylight falls where the plan said people would sit.
- 3
Detail
Last, the joints. A door frame, a handrail and a tile all start and stop on a grid line. Builders tell us the drawings are easy to read. That is the point.
Bring us a site and a question.
Open studio
Thursdays, 16:00 to 19:00. Bring drawings, photos or just the address.
Canal Side, Westbridge
studio@raster-atelier.example
Copy the idea
Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.
The recipe
Swiss grid — style recipe: the same text the brief copies.
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
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
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Tight letter-spacing at large sizes
The quick brown fox jumps over the lazy dog
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
Spacing and shape
- 8px
- 16px
- 24px
- 48px
- 96px
Spacing follows the grid's gutter; big gaps between sections.
- 0px
- 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