Hall 01

Swiss Style

Originated around 1950 · popular on the web around 2008

Take a souvenir

Use ← → to move between slides and F for fullscreen; the caption at the bottom is the narration.

Nº 01IntroSeen this before?Swiss Style

B12Gate numbers at the airport

→ 3Signs in the subway

Clear.The front page of many company websites

This kind of “clean” has a name

Swiss Style

International Typographic Style

Gate numbers, subway signs, a lot of company websites — they all look “clean”. That clean has a name.

Nº 02OriginWhere it came fromSwiss Style

Where it came from

Zurich and Basel, Switzerland

1928The New TypographyJan Tschichold publishes Die neue Typographie, arguing for asymmetric layouts and sans-serif type and laying the theoretical groundwork for the Swiss style.

1957Helvetica is bornMax Miedinger and Eduard Hoffmann design Neue Haas Grotesk, later renamed Helvetica — the typeface most associated with the style.

1958Neue GrafikThe journal Neue Grafik launches and spreads the approach worldwide, giving rise to the name "International Typographic Style".

2008The grid comes to the webCSS grid frameworks such as the 960 Grid System popularize column grids on the web; the later flat design movement inherits much of the Swiss restraint.

It took shape in 1950s Zurich and Basel, where designers wanted layouts as objective as engineering drawings — letting information speak for itself.

Nº 03Rule 01Mathematical gridSwiss Style

01Rule 1

Mathematical grid

Every element aligns to one column grid — asymmetric yet orderly. The grid is the invisible skeleton.

Without “Mathematical grid”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Mathematical grid”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule one: draw the grid first. Every edge snaps to invisible column lines.

Nº 04Rule 02Hierarchy through scaleSwiss Style

02Rule 2

Hierarchy through scale

Hierarchy comes from strong contrast in type size, not from color, icons or decoration. A headline can be as big as a poster.

Without “Hierarchy through scale”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Hierarchy through scale”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule two: size does the ranking. Headlines can be poster-sized; body text stays quietly small.

Nº 05Rule 03Active whitespaceSwiss Style

03Rule 3

Active whitespace

Whitespace is part of the composition. It groups content and guides the eye — it is not "empty space".

Without “Active whitespace”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Active whitespace”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule three: whitespace is not empty space — it groups things and guides the eye.

Nº 06Rule 04Objectivity and restraintSwiss Style

04Rule 4

Objectivity and restraint

Sans-serif type, flush-left ragged-right text, one accent color. The design steps back behind the content.

With “Objectivity and restraint”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule four: be objective. Sans-serif, flush left, one accent color — the design steps back behind the content.

Nº 07Out in the worldOut in the worldSwiss Style

Out in the world

1960sCorporate identity

Multinational companies began to manage everything from letterheads to signage with unified grids, typefaces and logo rules.

1970Subway signage

Massimo Vignelli and Bob Noorda write the graphics standards manual for the New York subway, making sans-serif type and clear hierarchy the common language of public signs.

2000sScreens

Column grids on the web, sans-serif app interfaces and later flat design all inherit its restraint.

Then the method left Switzerland: first corporate identity, then public wayfinding, and finally the screens we look at every day.

Nº 08TodayWhat it looks like todaySwiss Style

What it looks like today

The sample product “Lumen” wearing this style. Scroll and click inside the frame.

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

01Instant searchFull-text search across docs, comments and attachments, ranked by relevance.

02Decision logEvery important decision has a source, a discussion and an owner.

03Works offlineKeep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

On a product page today: one accent color, one grid and big headlines are all it takes.

Nº 09PartsTaking it apartSwiss Style

Buttons

Learn more

Card

Decision log

Why we dropped weekly reports

Replacing weekly reports with short daily async updates cut our meeting time by 30%.

Design team · 3 min readRead more

Form

Pricing

Take it apart: square corners, hairlines, no shadows — state changes use only color and line.

Nº 11Style cardStyle cardSwiss Style

Swiss Style

International Typographic Style

Five words to remember it

01Grid
02Scale
03Whitespace
04Flush left
05Objectivity

In one line: Let the grid speak and the type stand on its own.
Typefaces: Inter Tight
Palette
Layout: 12-column grid with content placed asymmetrically (e.g. a headline spanning 8 columns, body text starting at column 5). Generous whitespace, sections separated by hairlines.
Imagery: Black-and-white photography or geometric shapes, bleeding to full column width. Very few icons; simple line icons only when necessary.
Surface: Square corners, hairlines, no shadows. Separation comes from 1px black rules and whitespace, not from raised cards.
Often confused with: Minimalism · Bauhaus · Flat design

More formats ↓

Five words to remember it: grid, scale, whitespace, flush left, objectivity.

All slides

Pick any slide to jump straight to it.

Nº 01Seen this before?
Nº 02Where it came from
Nº 03Mathematical grid
Nº 04Hierarchy through scale
Nº 05Active whitespace
Nº 06Objectivity and restraint
Nº 07Out in the world
Nº 08What it looks like today
Nº 09Taking it apart
Nº 10The debate
Nº 11Style card

Souvenir shop

Souvenir

Take Swiss Style home to your project

Pick a format and copy it into Claude, Cursor or any AI coding assistant — or download it into your repository.

Format

AI PromptCompact, paste straight into a chatDESIGN.mdFull design spec for your repoCSS variables:root custom propertiesTailwind v4@theme snippet

Souvenir language

中文English

swiss.prompt.md73 lines · 3508 characters

# Swiss Style (International Typographic Style)

You are building a frontend UI. Apply the **Swiss Style** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

An objective design language that communicates through strict grids, sans-serif type and asymmetric layouts. It treats clarity as beauty: strip away ornament, build hierarchy with size, whitespace and alignment, and keep a single accent color.

## Design tokens

### Colors

- `background` `#F5F3EE` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#111111` — primary text
- `muted` `#6B6B6B` — secondary text, captions, placeholders
- `accent` `#E30613` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#111111` — dividers, outlines, input borders

### Typography

- Display / headings: `Inter Tight` (Google Fonts, weights 500 / 700) → fallback `"Helvetica Neue", Helvetica, Arial, sans-serif`
- Body text: `Inter Tight` (Google Fonts, weights 400 / 500) → fallback `"Helvetica Neue", Helvetica, Arial, sans-serif`
- Type scale (px): 12 · 14 · 16 · 20 · 28 · 40 · 64 · 96

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 16 · 24 · 32 · 48 · 64 · 96
- Corner radius (sm / md / lg): 0 / 0 / 0 px
- Border: 1px solid
- Shadows (sm / md / lg): none / none / none

### Motion

- Durations (fast / base): 120ms / 200ms
- Easing: `cubic-bezier(0.2, 0, 0, 1)`

### Signature effects

- `--grid-columns`: `12`

## Do

- Define a 12-column grid first, then align every element to the column lines.
- Build hierarchy with size and weight contrast; keep a headline-to-body size ratio of at least 3:1.
- Set text flush left with a natural ragged right edge.
- Use exactly one accent color across the whole product, and only on the most important element.
- Group content with 1px rules and whitespace.

## Don't

- Do not use rounded corners, shadows, gradients or glass effects.
- Do not center long body text or the overall page layout.
- Do not mix several typefaces or use decorative fonts.
- Do not compensate for unclear hierarchy with icons or illustrations.

## Components

- **Buttons**: Square rectangles. Primary: solid black with white text; secondary: 1px black outline. Primary turns red on hover. Medium weight text, no decorative icons.
- **Cards**: No shadows, no radius. Cards are defined by a 1px black top rule and whitespace; large bold titles, small grey metadata.
- **Forms**: Inputs keep only a 1px black underline or a thin full outline. Labels sit above, flush left, small, uppercase or medium weight. Focus turns the line red.
- **Navigation**: A single row of flush-left text links at the top. Bold brand name on the left; current item marked with an underline or red. No pills, no icons.
- **Layout**: 12-column grid with content placed asymmetrically (e.g. a headline spanning 8 columns, body text starting at column 5). Generous whitespace, sections separated by hairlines.
- **Imagery & icons**: Black-and-white photography or geometric shapes, bleeding to full column width. Very few icons; simple line icons only when necessary.

## Accessibility

- Black on white has excellent contrast, but small grey text in light weights must still reach at least 4.5:1.
- Asymmetric layouts must collapse to a single column on narrow screens, keeping reading order and visual order identical.

_Generated by Style Museum._