Swiss Design 是一套植根于 1950–60 年代瑞士国际主义风格的设计系统，以 Tailwind CSS 为载体，适用于为网页设定视觉风格、清理 UI、套用设计系统等场景。
用途
该技能用于将瑞士国际主义风格应用到网页界面：无衬线粗黑体字型、严谨栅格、大胆几何形态、充足留白与克制的色彩。
六项原则
- 栅格优先：每个布局建立在 12 列栅格与 8px 基准单位之上。
- 始终移动优先：先为最小视口设计，再逐步扩展；每个布局都必须在 320px 与 1440px 下可用，系统化使用 sm:、md:、lg: 前缀。
- 留白即结构：充裕的内边距与外边距不是浪费，而是设计本身。
- 以不透明度而非色相建立层级：不要引入第二种颜色来表示文字权重或重要程度，改用不透明度。
- 单一强调色：每个项目只使用一种强调色，并以多种不透明度少量使用。
- 窄栏：正文不超过 max-w-[60ch]，更宽的栏会损害可读性。
字体
主字体为 IBM Plex Sans（Google Fonts），需引入相应 link 标签（preconnect 与字体样式表）。回退链依次为：IBM Plex Sans、Hanken Grotesk、Barlow、Host Grotesk、DM Sans、system-ui。
字阶涵盖 Display、H1、H2、H3、Body、Small、Caption、Mono，并规定各自的行高与最大宽度。标题使用 font-light（300）或 font-normal（400），从不用粗体；正文内强调使用 font-medium（500），从不用 font-bold（700）。Display 与 H1 字距为 tracking-tight。Caption 与标签为 tracking-wide uppercase text-xs。
排印细节被视为不可协商：使用省略号字符 … 而非三个句点；使用弯引号；加载与进度状态以省略号结尾；数字列与表格使用 tabular-nums；标题使用 text-balance 防止孤字；正文在支持时使用 text-pretty。数值与单位之间、品牌名内部使用不换行空格。
颜色系统
采用 stone 色阶管理浅色与深色模式，覆盖页面背景、表面/卡片、次级表面、边框、次级边框、主文字、次级文字、三级文字、占位符等角色。核心规则是以不透明度建立层级：主文字为完整不透明，次级为 /70，三级为 /40，占位/禁用为 /30 或 /20；深色模式仅将 stone-900 替换为 stone-50，不透明度值保持一致。
每个项目使用一种强调色，默认瑞士海报红 #C8102E，另有 Cobalt #003B8E、Golden #F0B429、Forest #2D6A4F。强调色仅在这些不透明度下使用：完整、Muted（/60）、Subtle（/20）、Ghost（/10）。
间距与栅格
基准单位为 8px，所有间距均为 8 的倍数：gap-2（8px）、gap-4（16px）、gap-8（32px）、gap-16（64px）；区块内边距 py-16（64px，最小）、py-24（96px，标准）、py-32（128px，充裕）。栅格为 12 列，移动优先，小屏塌陷为全宽；内容最大宽度为 max-w-5xl 或 max-w-6xl，配合 mx-auto px-4 md:px-8。
响应式设计
断点策略：无前缀为移动端（单列全宽），sm:（640px+）用于大屏手机与小平板，md:（768px+）用于平板与窄桌面并引入两列布局，lg:（1024px+）用于桌面完整 12 列栅格与最大内容宽度。移动端布局规则包括：所有栅格列塌陷为 col-span-12；区块内边距随断点递减；水平内边距收紧；Display 字号按断点缩放；多列导航塌陷或隐藏；表格横向滚动（包裹于 overflow-x-auto）；并排卡片纵向堆叠（grid-cols-1 md:grid-cols-2 lg:grid-cols-3）。系统给出流式字号模式，可使用响应式类或 clamp()。移动端交互元素最小触摸目标为 44×44px。移动端导航塌陷为极简顶栏，次级导航链接在 md: 以下隐藏，不建议使用深层嵌套的汉堡菜单。
深色模式
使用 Tailwind 的 media 策略（自动遵循系统偏好）：darkMode: 'media'。每个颜色令牌都有 dark: 变体，从不使用 bg-black 或 bg-white，而是使用 stone 色阶。
关于 color-scheme：Tailwind 只重设代码样式，浏览器仍会用自己的默认渲染滚动条、原生表单控件与画布。若未声明 color-scheme，深色模式的瑞士页面会出现浅色滚动条与浅色原生输入框。因此需在 html 上声明 color-scheme: light dark，或通过 meta 标签（在 CSS 之前解析，防止闪烁）；同时设置 theme-color 以匹配页面背景。
注意事项
不使用第二种颜色表示层级，只用不透明度；正文不超过 max-w-[60ch]；不使用 bg-white/bg-black；IBM Plex Sans 非系统字体，必须引入 Google Fonts link；每项目仅一种强调色；标题用 light 而非 bold；结构性元素不使用圆角（rounded-none，最多 rounded-sm）；区块内边距最小 py-16、标准 py-24；每个布局必须适配移动端；移动端表格需 overflow-x-auto；触摸目标最小 44px；字号使用流式而非固定；不出现无替代的 outline-none（使用 focus-visible:ring-2 等）；遵循 prefers-reduced-motion（motion-safe:transition motion-reduce:transition-none，只动画 transform 与 opacity，不用 transition: all）；在 html 上设置 color-scheme: light dark；直引号与三个句点属于缺陷。
行为、无障碍与质量
该技能仅覆盖美学与视觉系统，不涉及无障碍、焦点管理、表单行为、水合、性能或交互质量。对于这些方面，需参考 Vercel Web Interface Guidelines（框架无关且互补）。应用瑞士风格样式后，应获取这些规则并审计结果的无障碍、焦点状态、表单行为、动画安全、性能与国际化，并将发现视为必须修复而非建议。两者重叠之处（排印细节、深色模式、焦点环），以本技能内联的规则优先。
参考文件
按任务查阅：完整颜色令牌表、CSS 自定义属性与深色模式细节见 references/design-system.md；Tailwind 组件模式（按钮、卡片、导航、表单、徽章）见 references/components.md；可直接粘贴的 tailwind.config.js 与 CSS @theme 块见 references/tailwind-config.md；将系统应用到既有页面与审计清单见 references/prompting.md。
以上为该设计系统的完整规范内容；关于价格、收费与具体使用效果等信息，资料中暂未提供。