Swiss Style (International Typographic Style) 瑞士国际主义风格（Swiss / International Typographic Style）
Swiss Style treats graphic design as engineering: content locked to a mathematical grid, set in one neutral grotesk (Helvetica, Akzidenz-Grotesk), aligned flush left, ragged right, printed black on white with a single flat accent — classically Swiss red. Photography is objective documentation, never illustration; decoration is abolished. Crystallized in 1950s Switzerland, it became the default voice of corporate identity and wayfinding, and its grid logic still underpins most 'clean' interfaces.
瑞士国际主义风格把平面设计当作工程：内容锁定在数学网格上，用一种中性 grotesk 字体排印（Helvetica、Akzidenz-Grotesk），左对齐、右侧自然参差，白纸黑字只配一个扁平强调色 —— 经典是瑞士红。摄影是客观记录，绝不是插画；装饰被彻底废除。它于 1950 年代在瑞士成形，随后成为企业识别与导视系统的默认语言，其网格逻辑至今仍支撑着大多数「干净」的界面。
Scope: Covers the typographic discipline — grid system, neutral grotesk type, flush-left setting, objective photography — wherever it surfaces, from posters to app UIs. The wider 'Swiss design' umbrella (furniture, watches, architecture) stays out; the Minimalism boundary is drawn in confusedWith.
范围：涵盖这套字体排印纪律 —— 网格系统、中性 grotesk、左对齐排印、客观摄影 —— 无论它出现在海报还是应用界面里。更广义的「瑞士设计」（家具、手表、建筑）不在范围内；与极简主义的分界见 confusedWith。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Mathematical grid system数学网格系统 layout defining定义特征
Every edge and baseline locks to an underlying column grid — classically 4–12 columns with constant gutters, plus a vertical baseline rhythm (e.g. 8px steps). An element that misses its grid line is a defect, not a choice.
每条边、每条基线都锁定在底层分栏网格上 —— 经典为 4–12 栏、栏距恒定，外加纵向基线节奏（如 8px 步进）。没落在网格线上的元素被视为缺陷，而不是选择。
-
One neutral grotesk单一中性 grotesk typography defining定义特征
Helvetica, Akzidenz-Grotesk, or Univers (Inter or Arial on the web) carries everything alone; hierarchy comes from size and weight only — 700 headlines against 400 body — never from decorative faces.
Helvetica、Akzidenz-Grotesk 或 Univers（Web 上用 Inter 或 Arial）独自包打一切；层级只来自字号和字重 —— 700 的标题对 400 的正文 —— 绝不靠装饰性字体。
-
Flush left, ragged right左对齐，右侧参差 layout defining定义特征
All text hangs from a hard left axis and the right edge is left to rag. Justified blocks and centered headlines break the discipline instantly.
所有文字挂在一条强左轴上，右缘放任参差。两端对齐的文本块和居中标题会立刻破坏这套纪律。
-
Black, white, one accent黑、白、一个强调色 color defining定义特征
Paper-white ground (#fff or #f4f4f0), near-black ink (#111), and exactly one flat accent — classic Swiss red #e30613. No gradients, no second hue.
纸白地（#fff 或 #f4f4f0）、近黑墨色（#111），外加恰好一个扁平强调色 —— 经典是瑞士红 #e30613。不要渐变，不要第二个色相。
-
Objective photography客观摄影 imagery defining定义特征
Documentary black-and-white photos, cropped to rectangular grid modules and treated as factual records that replace illustration. Filters, duotones, and staged whimsy are foreign.
纪实的黑白照片裁进网格的矩形模块，作为取代插画的事实记录。滤镜、双色调和摆拍的趣味都是外来物。
-
Asymmetric balance不对称的平衡 layout supporting辅助特征
A heavy typographic mass in one corner counterweighed by empty space elsewhere; the composition balances through grid position, never mirror symmetry.
一角的厚重字体块由他处的留白来配平；构图靠网格位置取得平衡，绝不靠镜像对称。
-
Which single accent选哪个强调色 color variable可变特征
Swiss red is the cliché; the rule is one flat accent per composition — blue or orange versions stay Swiss as long as the rest of the discipline holds.
瑞士红是老套路；规则是每个构图只用一个扁平强调色 —— 蓝色或橙色版本只要其余纪律还在，依然是瑞士风格。
-
Ornament and softness装饰与软处理 surface avoid避免
Drop shadows, gradients, rounded corners, serifs, textures — decoration of any kind marks another school. Swiss surfaces are flat paper and ink.
投影、渐变、圆角、衬线、肌理 —— 任何装饰都标志着另一个流派。瑞士风格的表面就是平纸和油墨。
Often confused with: Minimalism最容易混淆：极简主义
Swiss Style (International Typographic Style)瑞士国际主义风格（Swiss / International Typographic Style）
Minimalism极简主义
This is Swiss Style because it is a complete discipline, not an absence: an explicit mathematical grid, one neutral grotesk set flush left, and objective photography — the page is organized by rules, not merely emptied.
这是瑞士国际主义风格，因为它是一套完整纪律而不是「少」：明确的数学网格、单一中性 grotesk 左对齐排印、客观摄影 —— 页面是被规则组织起来的，不只是被清空。
It would become Minimalism if you kept the white space but dropped the system — center the type, switch to a serif or a rounded face, or place elements by feel instead of snapping them to grid lines — because then only the emptiness remains.
如果留着留白但丢掉体系 —— 把文字居中、换用衬线或圆体、凭手感摆放元素而不是吸附到网格线上 —— 就变成极简主义了，因为那时剩下的只有空。
Compare: Swiss Style (International Typographic Style) vs Minimalism →对比页 →
In code — optional starting points代码写法 —— 可选起点
The skeleton: 12-column grid, one grotesk, text hangs left
.poster { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; color: #111; background: #fff; text-align: left; }Flush-left headline, tight tracking, one Swiss-red accent
.poster h1 { grid-column: 1 / 9; margin: 0; font-size: 96px; font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; }
.poster .accent { color: #e30613; }Same skeleton as utilities
<section class="grid grid-cols-12 gap-6 bg-white font-sans text-left text-neutral-900">
<h1 class="col-span-8 text-8xl font-bold leading-none tracking-tight">Grid <span class="text-[#e30613]">Systems</span></h1>
</section>Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface as a Swiss Style composition. Defining signals: an explicit 12-column grid, 24px gutters, every edge and baseline snapping to it on an 8px rhythm; one neutral grotesk (Helvetica, Arial, or Inter) with hierarchy by size and weight only — 16px body, 72–96px headlines at weight 700, line-height 0.95, letter-spacing -0.02em; all text flush left, ragged right — never justified, never centered; flat paper ground #ffffff, near-black ink #111111, one flat accent — Swiss red #e30613 — spent on one element (marker, rule, or word); imagery as documentary black-and-white photography cropped to grid rectangles; box-shadow: none, border-radius: 0, no gradients, no textures. Keep accent hue and photo subject flexible. Balance asymmetrically: the big type mass sits off-center, white space counterweighs it. Do not drift into Minimalism; the decisive difference is that Swiss is a system, not an absence — center the type or pick a serif and you have left it. Keep contrast at 4.5:1 (black/white is 21:1; #e30613 on white ~4.9:1), visible keyboard focus, and reduced-motion support.
按瑞士国际主义风格（Swiss Style）创建这个界面。定义性信号：明确的 12 栏网格，24px 栏距，每条边、每条基线都吸附到网格上，纵向按 8px 节奏；单一中性 grotesk（Helvetica、Arial 或 Inter），层级只来自字号和字重 —— 正文 16px，标题 72–96px、字重 700、line-height 0.95、letter-spacing -0.02em；所有文字左对齐、右侧参差 —— 绝不两端对齐，绝不居中；扁平纸白地 #ffffff，近黑墨色 #111111，只用一个扁平强调色 —— 瑞士红 #e30613 —— 花在一个元素上（记号方块、分隔线或一个词）；图像用纪实黑白摄影，裁进网格矩形；box-shadow: none，border-radius: 0，不要渐变，不要肌理。强调色的色相和摄影主题保持灵活。构图要不对称地平衡：大字块偏离中心，让留白来配重。不要滑向极简主义；决定性区别在于瑞士风格是一套体系而不是「少」 —— 把文字居中或换上衬线，你就已经离开了它。对比度保持 4.5:1（黑白配是 21:1；#e30613 配白约 4.9:1），键盘焦点可见，支持 reduced-motion。
Accessibility & misuse可访问性与误用
The black-on-white core is a strength — #111 on #fff measures 21:1 — but Swiss red #e30613 on white is only ~4.9:1: fine for text, yet pairings like red on black fail, so measure every accent combination before shipping.
黑白主干是优势 —— #111 配 #fff 实测 21:1 —— 但瑞士红 #e30613 配白只有约 4.9:1：用于文字没问题，但红配黑之类的组合会翻车，每个强调色组合在交付前都要实测。
Poster habits do not all transfer: 9–10px captions under 96px headlines are illegible on screen, so keep body text at 16px or above and captions at 12px or above. The ragged-right setting genuinely helps here — it reads easier than justified text for many readers, including people with dyslexia, so discipline and accessibility agree for once.
海报习惯不能照搬到屏幕：96px 标题下配 9–10px 的图注在屏幕上没法读，正文保持 16px 以上、图注 12px 以上。右侧参差的排法在这里反而是真帮忙 —— 对包括失读症读者在内的许多人来说，它比两端对齐更好读，纪律和可访问性难得地达成一致。
A rigid 12-column grid can shatter under 200% text zoom; build it with relative units and minmax() so columns reflow instead of clipping. Motion is minimal by nature in this style, but any scroll-triggered grid reveals still need a prefers-reduced-motion fallback.
死板的 12 栏网格在 200% 文字缩放下可能崩坏；用相对单位和 minmax() 搭建，让栏能重排而不是裁切。这个风格天然动效很少，但任何滚动触发的网格显现动画仍然需要 prefers-reduced-motion 兜底。
Origin起源
Crystallized in Switzerland in the 1950s around two poles — Ernst Keller's teaching at the Kunstgewerbeschule Zürich, and the Basel school where Armin Hofmann and Emil Ruder taught, with Max Bill carrying the Bauhaus inheritance — and codified by Josef Müller-Brockmann, whose 'Grid Systems in Graphic Design' (1981) remains the manual. Its voice, Helvetica, was drawn by Max Miedinger with Eduard Hoffmann at the Haas foundry in 1957 (renamed from Neue Haas Grotesk in 1960); its elder cousin Akzidenz-Grotesk dates to 1896. The journal Neue Grafik (1958–1965) exported the system worldwide, where it became the default language of corporate identity, posters, and wayfinding.
1950 年代在瑞士围绕两极成形 —— 一极是 Ernst Keller 在苏黎世工艺美术学校（Kunstgewerbeschule Zürich）的教学，另一极是 Armin Hofmann 与 Emil Ruder 任教的巴塞尔学校，Max Bill 则承接了包豪斯的衣钵 —— 由 Josef Müller-Brockmann 集大成，他的《Grid Systems in Graphic Design》（1981）至今仍是案头手册。它的声音 Helvetica 由 Max Miedinger 与 Eduard Hoffmann 于 1957 年在 Haas 铸字厂绘制（1960 年由 Neue Haas Grotesk 更名）；它的前辈 Akzidenz-Grotesk 可追溯至 1896 年。杂志《Neue Grafik》（1958–1965）把这套体系输出到全世界，使其成为企业识别、海报与导视的默认语言。