swiss-design

瑞士设计系统

植根于 20 世纪 50 至 60 年代瑞士国际主义风格的设计系统：哥特式无衬线字体、严谨的网格、大胆的几何形态、宽裕的留白和克制的色彩。

六项原则

1. 网格优先。 所有布局都采用 12 列网格，基准单位为 8px。
2. 始终移动优先。 先针对最小视口设计，再逐步扩展。每种布局都必须适配 320px 和 1440px。系统地使用 Tailwind 前缀 sm:、md:、lg:。
3. 留白即结构。 宽裕的内边距和外边距并非浪费，而是设计本身。
4. 用透明度而非色相建立层级。 绝不要通过引入第二种颜色来表示文本权重或重要性，而应使用透明度。
5. 一种强调色。 每个项目恰好使用一种强调色，并以多种透明度谨慎运用。
6. 窄列。 正文宽度绝不能超过 max-w-[60ch]。过宽的列会降低可读性。

---

排版

主要字体： IBM Plex Sans（Google Fonts）

<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	内置	最后的选择

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	不限
H1	text-5xl font-light tracking-tight	leading-tight	不限
H2	text-3xl font-light tracking-tight	leading-snug	不限
H3	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）。
• 展示标题和 H1 的字间距：使用 tracking-tight（-0.02em）。
• 说明文字和标签：使用 tracking-wide uppercase text-xs。

字体细节

瑞士风格依赖精准的排版。以下规则不可妥协：

• 使用省略号字符 …，绝不使用三个句点 ...。
• 使用弯引号 " " 和 ' '，绝不使用直引号 " '。
• 加载和进度状态以省略号结尾：Loading…、Saving…。
• 数字列和表格使用 font-variant-numeric: tabular-nums（Tailwind：tabular-nums），使数字垂直对齐。
• 标题使用 text-wrap: balance（Tailwind：text-balance）以避免孤行。支持时，正文段落使用 text-pretty。
• 数值与单位之间，以及品牌名称内部，使用不换行空格：10 MB、⌘ K。

---

色彩系统

Stone 调色板（浅色模式 → 深色模式）

角色	浅色	深色	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

不透明度层级（核心规则）

要降低文本的视觉主导性，请降低不透明度，绝不要改变色调。

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)

深色模式：将 stone-900 替换为 stone-50。不透明度值保持不变。

强调色

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

名称	Hex	Tailwind 任意值
瑞士红（默认）	#C8102E	[#C8102E]
钴蓝	#003B8E	[#003B8E]
金色	#F0B429	[#F0B429]
森林绿	#2D6A4F	[#2D6A4F]

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

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)

---

间距与网格

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

Token	值	用途
gap-2	8px	紧凑的行内间距
gap-4	16px	组件内部间距
gap-8	32px	组件之间的间距
gap-16	64px	区块之间的间距
py-16	64px	区块内边距（最小）
py-24	96px	区块内边距（标准）
py-32	128px	区块内边距（宽裕）

网格：

<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。

---

响应式设计

瑞士网格会根据视口流畅地调整。每项布局决策都必须兼顾两种尺度：移动端（单列、宽裕的垂直节奏）和桌面端（多列、横向张力）。

断点策略：

前缀	宽度	用途
（无）	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

流式字体模式：

<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>


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

响应式区块模式：

<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: 以下隐藏次级导航链接。切勿使用层级过深的汉堡菜单——瑞士风格偏好扁平、清晰的导航。

---

深色模式

使用 Tailwind 的 media 策略（自动遵循系统偏好设置）：

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

每个颜色 token 都有对应的 dark: 变体。请参阅上方的 Stone 调色板表。切勿使用 bg-black 或 bg-white，始终使用 Stone 色阶。

color-scheme

Tailwind 只会重新设置代码的样式。浏览器仍会在 CSS 加载前，使用自身的默认样式渲染滚动条、原生表单控件和画布。在深色模式下，如果没有 color-scheme，瑞士风格页面会显示浅色滚动条和浅色模式的原生输入框，与 bg-stone-950 格格不入。

始终在 <html> 上声明两种配色方案：

html { color-scheme: light dark; }

也可以使用 meta 标签（会在 CSS 之前解析，防止闪烁）：

<meta name="color-scheme" content="light dark">

还要设置 <meta name="theme-color">，使其与页面背景一致，让移动浏览器的界面与页面融为一体。

---

注意事项

• 绝不要用第二种颜色来表示层级。 只使用不透明度。使用 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> 标签。
• 每个项目只使用一种强调色。 不要引入第二种强调色。改用不同的不透明度。
• 标题使用较细字重，不要加粗。 展示文字和 h1 使用 font-light，h2–h3 使用 font-normal。
• 结构元素不要使用圆角。 输入框、卡片和容器使用 rounded-none，或最多使用 rounded-sm。瑞士风格以直角为主。
• 区块内边距要充足。 最小值为 py-16，标准值为 py-24。绝不能更小。
• 所有布局都必须适用于移动设备。 默认（无前缀）类适用于移动设备。始终为较大的视口添加 md: 和 lg: 变体。不要先构建桌面版，再试图改造成移动版。
• 移动设备上的表格需要 overflow-x-auto。 绝不要让宽表格破坏移动布局。
• 触控目标至少为 44px。 按钮、链接和导航项在移动设备上必须便于点击。
• 使用流式字体大小，不要固定。 使用响应式字体类（text-3xl md:text-5xl）或 clamp()，绝不要只在某一种视口下适用的单一固定字号。
• 使用 outline-none 时，必须提供替代的焦点样式。 交互元素需要清晰可见的焦点指示器。改用 focus-visible:ring-2 focus-visible:ring-stone-900 dark:focus-visible:ring-stone-50（或强调色）。优先使用 :focus-visible 而不是 :focus，这样只有键盘导航时才会显示焦点环。
• 遵循 prefers-reduced-motion。 如果添加过渡或动画，请使用以下类控制：motion-safe:transition motion-reduce:transition-none。只对 transform 和 opacity 添加动画。绝不要使用 transition: all。
• 在 <html> 上设置 color-scheme: light dark。 否则深色模式下滚动条和原生表单控件仍会保持浅色。
• 直引号和 ... 都是错误的。 使用弯引号和 … 字符。

---

行为、无障碍和质量

此技能是一套美学与视觉系统，不涉及无障碍、焦点管理、表单行为、水合、性能或交互质量。

这些方面请参考 Vercel Web Interface Guidelines。它与框架无关，可作为补充：

• 技能：vercel-labs/agent-skills/web-design-guidelines
• 原始规则：https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

应用瑞士风格后，请获取上述规则，并检查结果中的无障碍、焦点状态、表单行为、动画安全性、性能和国际化。发现的问题必须修复，而非仅作参考。如果两套系统存在重叠（如字体排版细节、深色模式、焦点环），以已内置于此 SKILL.md 的规则为准。

何时阅读参考文件

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