Swiss Style
瑞士风格
Aliases:瑞士风格瑞士平面设计国际主义排版风格网格排版风格黑白红海报风Helvetica风格International Typographic StyleSwiss Design
What is it
A visual language of objective grids and typography: strict mathematical grids, sans-serif faces, flush-left setting, black and white plus one accent (classically red). Order comes from whitespace and type scale. Decoration is noise; the goal is information read along the shortest path.
Design spec
Typography
Helvetica-style sans; bold uppercase headlines
Color
Paper grey, pure black, signal red #E63312
Border
1px solid black column rules
Shadow
Zero shadows — strictly flat
Spacing
Strict modular grid, consistent gutters
Motion
Near-instant colour swaps within 100ms, no eased movement
States
Hover switches to signal red or knock-out white; focus shows a visible 2px black solid frame; active inverts the block; disabled drops to grey; error uses signal red at a heavier weight
Style in action
See the full page, then try the interactive sceneFull-page preview
IDEAS
BUILD
TOMORROW/
Design for
a better future.
An independent studio for brands and digital experiences. Strategy, design and technology for what comes next.
Explore work →DESIGN
FOR A
BRIGHTER
TOMORROW.
VERTEX STUDIO
Interactive scene
Loading demo…
✓ When to use
- Design systems, museums and institutions that need objective rigor
- Data, documentation and catalog content that is inherently structured
- Posters and covers that thrive on typographic tension
✕ When not to use
- Brands needing warmth, approachability or playfulness
- Unstructured content — a strict grid only amplifies the mess
- Reading contexts dominated by CJK and serif mixes — the idiom misfits
Variants
Zurich School
苏黎世学派
Josef Müller-Brockmann's strict modular grid
Basel School
巴塞尔学派
Emil Ruder and Armin Hofmann — typographic rhythm first
New Swiss
新瑞士
Contemporary web-flavored Swiss with mono type and hairlines
Implementation
gridfont-family: Helveticatext-align: leftletter-spacingborder-top: 2px solidGrid first: a 12-column or simple 3×3 grid that every element snaps to — no arbitrary spacing. One sans family (Helvetica/Inter/Neue Haas); hierarchy from size jumps (e.g. 12/48px), not weight ramps; flush-left text, centered setting banned. Black, white, grey plus a single red that only marks indices and key rules. Separate with two rule weights (2px/1px).
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a typography-led Swiss Style section in the current project. Inspect the existing design tokens and font stacks first; map grid spacing onto the current spacing variables. Requirements: - A 12-column grid every element snaps to; modular spacing - One sans-serif family; hierarchy from size jumps, not weight ramps - Black, white, grey plus a single red reserved for indices and key rules - Flush-left text; 2px/1px rule hierarchy - Dark mode support - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesSimilarA visual language of playing composition with geometry: circle, triangle and square in primary red, yellow and blue plus black, asymmetric yet balanced. Decoration obeys function — every plane and line carries structure, and a poster reads as a study in geometric relations.
StylesSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsAffects