瑞士风格
Swiss Style
别名:瑞士风格瑞士平面设计国际主义排版风格网格排版风格黑白红海报风Helvetica风格International Typographic StyleSwiss Design
这是什么
以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
开发规格
字体
Helvetica 式无衬线，全大写粗黑标题
色彩
纸灰底 × 纯黑 × 正红 #E63312
边框
1px 黑色实线分割栏
阴影
无阴影，扁平到极致
间距
严格网格，栏距一致
动效
近似瞬时，颜色切换在 100ms 内，无缓动位移
状态反馈
hover 改用正红或反白；focus 用 2px 黑色可见实线框；active 反色块；disabled 降为灰；error 用正红并加粗
风格演示
先看整页效果，再试交互场景整页预览
IDEAS
BUILD
TOMORROW/
用设计
构建更好的未来
我们是一家专注于品牌与数字体验的设计工作室。通过策略、设计与技术，塑造创新未来。
探索项目 →DESIGN
FOR A
BRIGHTER
TOMORROW.
VERTEX STUDIO
交互场景
正在加载演示…
✓ 适用场景
- 设计系统 博物馆 文化机构，需要客观严谨的秩序感
- 数据 技术文档 目录类内容，结构化信息为主
- 海报 期刊封面等需要强烈排版张力的场景
✕ 不适用场景
- 品牌需要亲和 温暖或娱乐化的情绪
- 内容零散无结构，网格反而放大凌乱感
- 中文与衬线混排为主的阅读场景，风格语言不匹配
常见形式
苏黎世学派
Zurich School
Josef Müller-Brockmann 的严格模数网格
巴塞尔学派
Basel School
Emil Ruder 与 Armin Hofmann，更重字体排印节奏
新瑞士
New Swiss
当代网页化的瑞士风，等宽字与细线引入
实现要点
gridfont-family: Helveticatext-align: leftletter-spacingborder-top: 2px solid先立网格：12 列或简单 3×3，所有元素吸附网格线，禁止任意间距。字体只用 一套无衬线（Helvetica/Inter/Neue Haas），层级靠字号跳跃（如 12/48px） 而非加粗渐变；正文左对齐，禁用居中排版。色彩为黑 白 灰 + 单一强调红， 红只出现在标题标号与关键线上。分隔用粗细两种横线（2px/1px）。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用瑞士风格（Swiss Style）实现一个排版主导的信息区块。 先检查现有 Design Token 与字体栈，网格间距映射到现有间距变量。 要求： - 建立 12 列网格，所有元素吸附网格线，间距成模数 - 单一无衬线字体，层级靠字号跳跃不靠加粗渐变 - 黑白灰 + 单一强调红，红只用于标号与关键线 - 正文左对齐，分隔用 2px/1px 两种横线 - 支持深色模式 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格相似概念用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件影响组件