swiss-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Swiss Design System

瑞士风格设计系统

A design system rooted in the Swiss International Style of the 1950s–60s: grotesque typography, rigorous grid, bold geometric forms, generous whitespace, and restrained color.

本设计系统源自20世纪50-60年代的瑞士国际风格：无衬线排版、严谨网格、醒目几何形态、充足留白以及克制配色。

Six Principles

六大原则

Grid first. Every layout lives on a 12-column grid with an 8px base unit.
Mobile first, always. Design for the smallest viewport first, then expand. Every layout must work at 320px and at 1440px. Use
```
sm:
```
,
```
md:
```
,
```
lg:
```
Tailwind prefixes systematically.
Whitespace is structure. Generous padding and margins are not waste — they are the design.
Opacity, not hue, creates hierarchy. Never introduce a second color to indicate text weight or importance. Use opacity.
One accent. Each project gets exactly one accent color, used sparingly at multiple opacities.
Narrow columns. Body text never exceeds
```
max-w-[60ch]
```
. Wider columns hurt legibility.

网格优先。所有布局均基于12列网格，基础单位为8px。
始终移动端优先。先针对最小视口进行设计，再逐步扩展。所有布局必须适配320px和1440px的视口。系统性地使用
```
sm:
```
、
```
md:
```
、
```
lg:
```
等Tailwind前缀。
留白即结构。充足的内边距和外边距并非浪费——它们本身就是设计的一部分。
用透明度而非色调构建层级。绝不通过引入第二种颜色来区分文本权重或重要性，使用透明度即可。
单一强调色。每个项目仅使用一种强调色，通过不同透明度少量运用。
窄列文本。正文文本宽度永远不超过
```
max-w-[60ch]
```
，过宽的列会损害可读性。

Typography

排版系统

Primary font: IBM Plex Sans (Google Fonts)

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

Fallback chain (in order of preference):

Font	Source	Character
IBM Plex Sans	Google Fonts	Primary. Rational, slightly condensed, 1960s systems rationalism
Hanken Grotesk	Google Fonts	Closest to Neue Haas Grotesk lineage
Barlow	Google Fonts	Condensed Swiss-grid proportions, strong vertical rhythm
Host Grotesk	Google Fonts	Warm grotesque, good at all sizes
DM Sans	Google Fonts	Clean neo-grotesque fallback
system-ui	Built-in	Last resort

css

font-family: 'IBM Plex Sans', 'Hanken Grotesk', 'Barlow', 'Host Grotesk', 'DM Sans', system-ui, sans-serif;

Type scale:

Role	Tailwind	Line height	Max width
Display	`text-7xl font-light tracking-tight`	`leading-none`	unconstrained
H1	`text-5xl font-light tracking-tight`	`leading-tight`	unconstrained
H2	`text-3xl font-light tracking-tight`	`leading-snug`	unconstrained
H3	`text-xl font-normal`	`leading-snug`	unconstrained
Body	`text-base font-normal`	`leading-relaxed`	`max-w-[60ch]`
Small	`text-sm font-normal`	`leading-relaxed`	`max-w-[60ch]`
Caption	`text-xs font-normal tracking-wide uppercase`	`leading-normal`	unconstrained
Mono	`font-mono text-sm`	`leading-relaxed`	`max-w-[60ch]`

Headings:
```
font-light
```
(300) or
```
font-normal
```
(400). Never bold for headings.
Emphasis within body:
```
font-medium
```
(500). Never
```
font-bold
```
(700).
Letter spacing on display/h1:
```
tracking-tight
```
(-0.02em).
Captions and labels:
```
tracking-wide uppercase text-xs
```
.

主字体： IBM Plex Sans（Google Fonts）

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

回退字体链（优先级从高到低）：

字体	来源	特征
IBM Plex Sans	Google Fonts	主字体。理性、略窄，兼具20世纪60年代的系统理性主义风格
Hanken Grotesk	Google Fonts	最接近Neue Haas Grotesk字体谱系
Barlow	Google Fonts	符合瑞士网格比例的窄体字体，垂直韵律感强
Host Grotesk	Google Fonts	温暖风格的无衬线字体，适配所有字号
DM Sans	Google Fonts	简洁的新无衬线回退字体
system-ui	系统内置	最终备选

css

font-family: 'IBM Plex Sans', 'Hanken Grotesk', 'Barlow', 'Host Grotesk', 'DM Sans', system-ui, sans-serif;

字号层级：

用途	Tailwind类	行高	最大宽度
展示文本	`text-7xl font-light tracking-tight`	`leading-none`	无限制
一级标题	`text-5xl font-light tracking-tight`	`leading-tight`	无限制
二级标题	`text-3xl font-light tracking-tight`	`leading-snug`	无限制
三级标题	`text-xl font-normal`	`leading-snug`	无限制
正文	`text-base font-normal`	`leading-relaxed`	`max-w-[60ch]`
小号文本	`text-sm font-normal`	`leading-relaxed`	`max-w-[60ch]`
说明文本	`text-xs font-normal tracking-wide uppercase`	`leading-normal`	无限制
等宽文本	`font-mono text-sm`	`leading-relaxed`	`max-w-[60ch]`

标题：使用
```
font-light
```
（300）或
```
font-normal
```
（400），标题绝不使用粗体。
正文中的强调内容：使用
```
font-medium
```
（500），绝不使用
```
font-bold
```
（700）。
展示文本/一级标题的字间距：
```
tracking-tight
```
（-0.02em）。
说明文本和标签：使用
```
tracking-wide uppercase text-xs
```
。

Color System

配色系统

Stone palette (light mode → dark mode)

石色系配色（浅色模式 → 深色模式）

Role	Light	Dark	Tailwind
Page background	`stone-50`	`stone-950`	`bg-stone-50 dark:bg-stone-950`
Surface / card	`stone-100`	`stone-900`	`bg-stone-100 dark:bg-stone-900`
Subtle surface	`stone-200`	`stone-800`	`bg-stone-200 dark:bg-stone-800`
Border	`stone-200`	`stone-800`	`border-stone-200 dark:border-stone-800`
Subtle border	`stone-100`	`stone-900`	`border-stone-100 dark:border-stone-900`
Primary text	`stone-900`	`stone-50`	`text-stone-900 dark:text-stone-50`
Secondary text	`stone-900/70`	`stone-50/70`	`text-stone-900/70 dark:text-stone-50/70`
Tertiary text	`stone-900/40`	`stone-50/40`	`text-stone-900/40 dark:text-stone-50/40`
Placeholder	`stone-900/30`	`stone-50/30`	`text-stone-900/30 dark:text-stone-50/30`

用途	浅色模式	深色模式	Tailwind类
页面背景	`stone-50`	`stone-950`	`bg-stone-50 dark:bg-stone-950`
表层/卡片	`stone-100`	`stone-900`	`bg-stone-100 dark:bg-stone-900`
次级表层	`stone-200`	`stone-800`	`bg-stone-200 dark:bg-stone-800`
边框	`stone-200`	`stone-800`	`border-stone-200 dark:border-stone-800`
次级边框	`stone-100`	`stone-900`	`border-stone-100 dark:border-stone-900`
主文本	`stone-900`	`stone-50`	`text-stone-900 dark:text-stone-50`
次级文本	`stone-900/70`	`stone-50/70`	`text-stone-900/70 dark:text-stone-50/70`
三级文本	`stone-900/40`	`stone-50/40`	`text-stone-900/40 dark:text-stone-50/40`
占位文本	`stone-900/30`	`stone-50/30`	`text-stone-900/30 dark:text-stone-50/30`

Opacity hierarchy (the core rule)

透明度层级（核心规则）

To make text less dominant, reduce opacity — never change the hue.

Full presence:   text-stone-900          (primary)
Softer:          text-stone-900/70       (secondary, labels)
Quiet:           text-stone-900/40       (tertiary, captions)
Ghosted:         text-stone-900/20       (disabled, placeholder)

Dark mode: replace

stone-900

with

stone-50

. The opacity values stay identical.

如需降低文本的视觉权重，只需降低透明度——绝不改变色调。

完全醒目:   text-stone-900          (主文本)
柔和显示:   text-stone-900/70       (次级文本、标签)
弱化显示:   text-stone-900/40       (三级文本、说明文字)
虚化显示:   text-stone-900/20       (禁用状态、占位文本)

深色模式：将

stone-900

替换为

stone-50

，透明度数值保持不变。

Accent color

强调色

Each project uses one accent color. Default is Swiss poster red.

Name	Hex	Tailwind arbitrary
Swiss Red (default)	`#C8102E`	`[#C8102E]`
Cobalt	`#003B8E`	`[#003B8E]`
Golden	`#F0B429`	`[#F0B429]`
Forest	`#2D6A4F`	`[#2D6A4F]`

Use accent at these opacities only:

Full:    bg-[#C8102E]          text-[#C8102E]
Muted:   bg-[#C8102E]/60       text-[#C8102E]/60
Subtle:  bg-[#C8102E]/20       (backgrounds, tints)
Ghost:   bg-[#C8102E]/10       (very light tints)

每个项目仅使用一种强调色，默认使用瑞士海报红。

名称	十六进制值	Tailwind自定义值
瑞士红（默认）	`#C8102E`	`[#C8102E]`
钴蓝色	`#003B8E`	`[#003B8E]`
金色	`#F0B429`	`[#F0B429]`
森林绿	`#2D6A4F`	`[#2D6A4F]`

仅可使用以下透明度的强调色：

完全醒目:    bg-[#C8102E]          text-[#C8102E]
柔和显示:   bg-[#C8102E]/60       text-[#C8102E]/60
次级背景:  bg-[#C8102E]/20       (背景、淡色)
淡色背景:   bg-[#C8102E]/10       (极浅淡色)

Spacing & Grid

间距与网格

Base unit: 8px. All spacing is a multiple of 8.

Token	Value	Usage
`gap-2`	8px	Tight inline gaps
`gap-4`	16px	Component internal
`gap-8`	32px	Between components
`gap-16`	64px	Between sections
`py-16`	64px	Section padding (minimum)
`py-24`	96px	Section padding (standard)
`py-32`	128px	Section padding (generous)

Grid:

html

<!-- 12-column grid — always mobile-first, columns collapse to full-width on small screens -->
<div class="grid grid-cols-12 gap-4 md:gap-8">
  <div class="col-span-12 md:col-span-8">...</div>
  <div class="col-span-12 md:col-span-4">...</div>
</div>

Max content width:

max-w-5xl

max-w-6xl

with

mx-auto px-4 md:px-8

基础单位： 8px。所有间距均为8px的倍数。

标识	值	用途
`gap-2`	8px	紧凑的内联间距
`gap-4`	16px	组件内部间距
`gap-8`	32px	组件之间的间距
`gap-16`	64px	区块之间的间距
`py-16`	64px	区块内边距（最小值）
`py-24`	96px	区块内边距（标准值）
`py-32`	128px	区块内边距（充足值）

网格：

html

<!-- 12列网格 —— 始终移动端优先，小屏幕下列自动变为全屏宽度 -->
<div class="grid grid-cols-12 gap-4 md:gap-8">
  <div class="col-span-12 md:col-span-8">...</div>
  <div class="col-span-12 md:col-span-4">...</div>
</div>

内容最大宽度： 使用

max-w-5xl

或

max-w-6xl

，搭配

mx-auto px-4 md:px-8

。

Responsive Design

响应式设计

The Swiss grid adapts fluidly across viewports. Every layout decision must be made at two scales: mobile (single column, generous vertical rhythm) and desktop (multi-column, horizontal tension).

Breakpoint strategy:

Prefix	Width	Use for
(none)	0px+	Mobile — single column, full width
`sm:`	640px+	Large phones, small tablets
`md:`	768px+	Tablets, narrow desktop — introduce 2-col layouts
`lg:`	1024px+	Desktop — full 12-col grid, max content width

Mobile layout rules:

All grid columns collapse to
```
col-span-12
```
Section padding reduces:
```
py-16 md:py-24 lg:py-32
```
Horizontal padding tightens:
```
px-4 md:px-8
```
Display type scales down:
```
text-5xl md:text-7xl lg:text-8xl
```
Multi-column nav collapses to hamburger or hidden
Tables scroll horizontally: wrap in
```
overflow-x-auto
```

Side-by-side cards stack vertically:

grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Fluid type pattern:

html

<!-- Scale display type fluidly across viewports -->
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

<!-- Or use clamp() for truly fluid scaling -->
<h1 class="text-[clamp(2rem,6vw,5rem)] font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

Responsive section pattern:

html

<section class="py-16 md:py-24 lg:py-32 border-b border-stone-200 dark:border-stone-800">
  <div class="max-w-6xl mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      ...
    </div>
  </div>
</section>

Touch targets: All interactive elements must be at least 44×44px on mobile. Use

min-h-[44px] min-w-[44px]

for buttons and nav links.

Navigation on mobile: Collapse to a minimal top bar. Hide secondary nav links below

md:

. Never use hamburger menus with deeply nested hierarchies — the Swiss style favors flat, clear navigation.

瑞士网格可流畅适配不同视口。所有布局决策需兼顾两种尺度：移动端（单列布局、充足垂直韵律）和桌面端（多列布局、水平张力）。

断点策略：

前缀	宽度	适用场景
（无）	0px+	移动端 —— 单列、全屏宽度
`sm:`	640px+	大屏手机、小尺寸平板
`md:`	768px+	平板、窄屏桌面 —— 引入双列布局
`lg:`	1024px+	桌面端 —— 完整12列网格、内容最大宽度

移动端布局规则：

所有网格列自动变为
```
col-span-12
```
区块内边距缩减：
```
py-16 md:py-24 lg:py-32
```
水平内边距收紧：
```
px-4 md:px-8
```
展示文本缩小：
```
text-5xl md:text-7xl lg:text-8xl
```
多列导航折叠为汉堡菜单或隐藏
表格可横向滚动：包裹在
```
overflow-x-auto
```
中

并排卡片垂直堆叠：

grid-cols-1 md:grid-cols-2 lg:grid-cols-3

流式文本模式：

html

<!-- 跨视口流畅缩放展示文本 -->
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

<!-- 或使用clamp()实现真正的流式缩放 -->
<h1 class="text-[clamp(2rem,6vw,5rem)] font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

响应式区块模式：

html

<section class="py-16 md:py-24 lg:py-32 border-b border-stone-200 dark:border-stone-800">
  <div class="max-w-6xl mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      ...
    </div>
  </div>
</section>

触摸目标： 移动端所有交互元素尺寸至少为44×44px。按钮和导航链接使用

min-h-[44px] min-w-[44px]

。

移动端导航： 折叠为极简顶部栏。隐藏

md:

以下的次级导航链接。瑞士风格偏好扁平化、清晰的导航，切勿使用带有深层嵌套层级的汉堡菜单。

Dark Mode

深色模式

Use Tailwind's

media

strategy (respects system preference automatically):

// tailwind.config.js
darkMode: 'media'

Every color token has a

dark:

variant. See the stone palette table above. Never use

bg-black

bg-white

— always use stone scale.

使用Tailwind的

media

策略（自动遵循系统偏好）：

// tailwind.config.js
darkMode: 'media'

每个配色标识都有

dark:

变体。详见上方石色系配色表。绝不使用

bg-black

或

bg-white

——始终使用石色系层级。

Gotchas

注意事项

Never use a second color to signal hierarchy. Opacity only.
```
text-stone-900/70
```
, not
```
text-stone-500
```
.
Never exceed
max-w-[60ch]
for body text. Wider columns are illegible.
Never
bg-white
or
bg-black
. Use
```
bg-stone-50
```
/
```
bg-stone-950
```
.
IBM Plex Sans is not a system font. Always include the Google Fonts
```
<link>
```
tag.
One accent per project. Do not introduce a second accent color. Use opacity variations instead.
Headings are light, not bold.
```
font-light
```
for display and h1,
```
font-normal
```
for h2–h3.
No border-radius on structural elements. Inputs, cards, and containers use
```
rounded-none
```
or at most
```
rounded-sm
```
. The Swiss style is rectilinear.
Section padding is generous. Minimum
```
py-16
```
, standard
```
py-24
```
. Never less.
Every layout must work on mobile. Default (no prefix) classes are mobile. Always add
```
md:
```
and
```
lg:
```
variants for larger viewports. Never build desktop-first and try to retrofit mobile.
Tables on mobile need
overflow-x-auto
. Never let a wide table break mobile layout.
Touch targets minimum 44px. Buttons, links, and nav items must be tappable on mobile.
Fluid type, not fixed. Use responsive type classes (
```
text-3xl md:text-5xl
```
) or
```
clamp()
```
— never a single fixed size that works only at one viewport.

绝不使用第二种颜色构建层级。仅使用透明度。使用
```
text-stone-900/70
```
，而非
```
text-stone-500
```
。
正文文本宽度绝不超过
max-w-[60ch]
。过宽的列可读性差。
绝不使用
bg-white
或
bg-black
。使用
```
bg-stone-50
```
/
```
bg-stone-950
```
。
IBM Plex Sans并非系统字体。务必引入Google Fonts的
```
<link>
```
标签。
每个项目仅使用一种强调色。切勿引入第二种强调色，使用透明度变体替代。
标题使用轻量字重，而非粗体。展示文本和一级标题使用
```
font-light
```
，二级至三级标题使用
```
font-normal
```
。
结构元素不使用圆角。输入框、卡片和容器使用
```
rounded-none
```
或最多
```
rounded-sm
```
。瑞士风格为直线型设计。
区块内边距要充足。最小值为
```
py-16
```
，标准值为
```
py-24
```
，切勿更小。
所有布局必须适配移动端。默认（无前缀）类为移动端样式。务必为更大视口添加
```
md:
```
和
```
lg:
```
变体。绝不为桌面端优先设计再适配移动端。
移动端表格需添加
overflow-x-auto
。切勿让宽表格破坏移动端布局。
触摸目标最小尺寸为44px。按钮、链接和导航项在移动端必须可点击。
使用流式文本，而非固定尺寸。使用响应式文本类（
```
text-3xl md:text-5xl
```
）或
```
clamp()
```
——绝不使用仅适配单一视口的固定尺寸。

When to read reference files

参考文件查阅场景

Task	File
Full color token table, CSS custom properties, dark mode details	`references/design-system.md`
Tailwind component patterns: buttons, cards, nav, forms, badges	`references/components.md`
Paste-ready `tailwind.config.js` and CSS `@theme` block	`references/tailwind-config.md`
Applying this system to an existing page, audit checklist	`references/prompting.md`

任务	文件
完整配色标识表、CSS自定义属性、深色模式细节	`references/design-system.md`
Tailwind组件模式：按钮、卡片、导航、表单、徽章	`references/components.md`
可直接粘贴的 `tailwind.config.js` 和CSS `@theme` 块	`references/tailwind-config.md`
将本系统应用于现有页面、审核清单	`references/prompting.md`