以网格为骨架，以排版为语言，以克制为美德。 Swiss Order 是一套基于国际主义平面设计原则构建的视觉语言系统， 适用于需要高密度信息传达与清晰层级关系的场景。
瑞士秩序风格拒绝一切装饰性元素。内容即设计，结构即美感。 每一条分割线、每一处留白，都服务于信息的流动而非视觉的愉悦。
这套风格适合以下场景：技术文档、数据仪表盘、企业报告、 学术展示，以及任何需要在高密度信息与可读性 之间寻求精确平衡的界面。它不适合需要温度感、故事感或情绪渲染的场合。
网格不是限制，是自由的前提。当结构足够清晰， 内容才能真正被看见。
好的设计是尽可能少的设计。Dieter Rams — 十项设计原则，1970s
少，但要更好。
所有文本使用同一字族：Helvetica Neue。 层级通过字号、字重和字距来区分，而非换用字体。 标题行距保持 1.1 的超紧状态，营造压缩感与力量感。
卡片使用实线边框而非阴影。强调色版本反转配色，保持同等视觉权重。 所有内间距精确对齐网格基线，圆角为零。
当每一个元素都是必要的，整体的力量就会从克制中涌现。 移除所有可以移除的，直到不能再少。
强调色卡片用于引导注意力焦点。 整个系统中最多出现 1-2 张此类卡片，保持稀缺性。
深色卡片适用于代码片段、终端输出或需要 与浅色内容形成强烈对比的数据展示场景。
所有内容对齐 4 列 32px 间距的数学网格。 间距单位为 8px 倍数：16, 24, 32, 48, 64, 80。
表格标题用全大写小字号强调，正文 14px，行间分割线轻灰色。 Hover 状态背景微变，不使用颜色变化以外的任何特效。
| Design Token | CSS 变量 | 值 | 分类 | 用途 |
|---|---|---|---|---|
| White | --white | #ffffff | Core | 背景、反色文字 |
| Black | --black | #1a1a1a | Core | 正文、边框、标题 |
| Red | --red | #e63329 | Core | 强调、标签、分割线 |
| Gray Mid | --gray-mid | #666666 | Type | 次级文字、辅助信息 |
| Gray Light | --gray-light | #cccccc | Type | 禁用状态、占位符 |
| Gray Rule | --gray-rule | #e0e0e0 | Layout | 分割线、边框 |
| Gray BG | --gray-bg | #f5f5f5 | Layout | 背景填充、引用块 |
| Leading Tight | --leading-tight | 1.1 | Type | 大标题行距 |
| Leading Body | --leading-body | 1.65 | Type | 正文行距 |
| Max Width | --max-width | 1200px | Layout | 容器最大宽度 |
代码块使用深黑底色，等宽字体，语法高亮采用低饱和度配色方案。 关键字用红色强调，与整体系统保持一致。
/* Swiss Order — Design Tokens */ :root { /* Color */ --white: #ffffff; --black: #1a1a1a; --red: #e63329; --gray-mid: #666666; /* Typography */ --font-stack: "Helvetica Neue", Arial, "PingFang SC", sans-serif; --leading-tight: 1.1; /* 标题 — 超紧 */ --leading-body: 1.65; /* 正文 — 舒适 */ /* Layout */ --grid-cols: 4; --gap: 32px; --max-width: 1200px; } /* 零圆角 — 方正严格 */ .card { border: 1px solid var(--black); border-radius: 0; /* Never round */ padding: 28px; }
整个系统只使用 7 个颜色值。 三个基础色（白、黑、红）构成所有意义，四个灰度值处理层次关系。 颜色不承担装饰功能，只传达语义。