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
The same page, ready to useExplore work opens selected projects; inspect NORTH / OPEN / FORM and return. The menu reaches WORK / STUDIO / APPROACH / CONTACT. Validate name, email and brief and show an editable local summary without sending email; the language control opens the translated page.
Full-page preview · interact directly
What to look for
- 01Use VERTEX’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the VERTEX task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete VERTEX page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets. Reuse .vertex-body with grid-template-columns: 49% 27% 24%: the IDEAS / BUILD / TOMORROW display, central copy and full #ff3511 poster. Use the existing Atlas Heavy (Anton) / Atlas Display / Impact condensed stack, 8.1cqw/.95 for the left display and 3.65cqw for poster type; retain Arial body copy and 1px column rules. Preserve the existing glyph-width treatment, not whole-page scaling. Continue with three case-study columns and red/black/paper-grey project art, stacking hero and cases below 600px. Do not introduce a 12-column 44px Helvetica section or restrict red to indices/rules; use the existing document dark/variants selectors. Full-page operations: Explore work opens selected projects; inspect NORTH / OPEN / FORM and return. The menu reaches WORK / STUDIO / APPROACH / CONTACT. Validate name, email and brief and show an editable local summary without sending email; the language control opens the translated page. Share one renderer between static covers, the detail experience and /style-scenes/swiss-style/ (English /en/style-scenes/swiss-style/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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.
StylesSimilar
A 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