瑞士国际主义Swiss Style

核心特征

• 严格的网格，内容左对齐、右侧参差
• 巨号无衬线标题，字重粗、字距收紧
• 白底黑字，只用一个强红作为强调色
• 零圆角、零阴影，用细黑线或粗黑线分隔
• 留白大而有节奏，靠对齐而不是装饰建立秩序

色板与字体

英文

Inter（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

原版使用 Helvetica 或 Akzidenz-Grotesk；网页中 Inter、Neue Haas Grotesk 或系统 Helvetica Neue 都是合适替代。

起源与代表作

年代：1950 年代瑞士，代表人物 Josef Müller-Brockmann

瑞士国际主义风格 1950 年代兴起于瑞士苏黎世与巴塞尔，主张用网格、无衬线字体和客观的摄影传达信息。1957 年 Max Miedinger 与 Eduard Hoffmann 设计的 Helvetica 成为它的标志字体；Josef Müller-Brockmann 的音乐会海报与 1981 年的《Grid Systems in Graphic Design》则确立了网格排版的方法。它深刻影响了后来的企业识别、导视系统与网页排版，至今仍是许多极简网站的参照。

AI 设计提示词 · Prompt

瑞士国际主义（Swiss Style）风格界面：页面背景纯白 #FFFFFF，文字油墨黑 #111111，次要文字 #4A4A4A，只用一个强调色瑞士红 #E30613。采用 12 栏网格，所有内容左对齐、右侧参差。标题使用 Inter 800，字号 48–56px，字距 -0.04em，行高 1.0；正文 14–16px，行高 1.5，行宽不超过 60 个字符。零圆角、零阴影、无渐变；用 1px 或 3px 的黑色细线分隔区块，卡片只有顶部一根 3px 黑线，没有底色。按钮为实心瑞士红白字，次按钮为 2px 黑色描边，均为直角。图标用单色灰度，不使用彩色插画。以对齐与留白建立节奏，不加任何装饰。所有文字对比度不低于 4.5:1，红色只用于关键强调。

A Swiss Style (International Typographic Style) interface: pure white page background #FFFFFF, ink black text #111111, secondary text #4A4A4A and a single accent, Swiss red #E30613. Use a 12-column grid with all content left-aligned and ragged right. Headings use Inter 800 at 48–56px with -0.04em letter-spacing and a line height of 1.0; body text is 14–16px with a 1.5 line height and lines no longer than 60 characters. Zero corner radius, no shadows, no gradients; separate blocks with 1px or 3px black rules. Cards have only a 3px black top rule and no fill. The primary button is solid Swiss red with white text, the secondary button has a 2px black outline, both with square corners. Icons are monochrome grayscale with no colored illustrations. Build rhythm through alignment and whitespace, with no decoration. Keep text contrast at least 4.5:1 and use red only for key emphasis.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #ffffff;
  --ds-text: #111111;
  --ds-muted: #4a4a4a;
  --ds-accent: #e30613;
  --ds-rule: #111111;
  --ds-radius: 0;
  --ds-title-tracking: -0.04em;
  --ds-columns: 12;
}

适合与不适合

和相近风格的区别

• 扁平化：瑞士风格用网格、对齐与巨号标题建立秩序，色彩只有黑白加一抹红；扁平化强调明亮高饱和的纯色块与几何图标，色彩更丰富。
• 便当格：瑞士风格是单列左对齐的网格，靠细线与留白分隔，零圆角；便当格是大小不一的圆角格子拼成的模块化布局，格子本身就是容器。
• 野兽派：瑞士风格是严格网格下的秩序，野兽派是刻意的朴素与失序。

常见踩坑

• 巨号标题加负字距在中文里很容易挤在一起，中文标题请把字距放回 0 或略放宽，并保证行高不低于 1.1
• 只靠留白和对齐建立秩序，需要严格遵守网格；稍有错位就会显得粗糙，建议用 CSS Grid 的栏数而不是手写像素
• 红色只做强调，滥用会失去焦点；白底红字小号文字的对比度刚好过线，正文不要使用红色
• 过度冷峻会显得缺乏温度，可以靠高质量的摄影或一小块插画点缀，而不是增加装饰

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题