菜单

Version 1.0

瑞士国际
排版风格
设计系统

萃取自多次交互中逐步成型的设计语言，旨在为未来的网页设计与开发提供一套稳定、可复用、且具有高度识别性的标准规范。

2024 — 2025

Style Guide

01 / 哲学

设计哲学

核心理念在于客观性、清晰性与秩序感。设计的目标不是为了装饰，而是为了信息的准确传达。

内容即形式

设计的形态应由内容决定。去除多余的装饰，让排版本身成为视觉主体。

网格即骨骼

所有元素必须通过网格系统对齐，建立数学般的秩序感。

负空间即呼吸

留白不是空缺，而是设计的一部分，用于引导视线和平衡视觉重量。

极简与对比

通过巨大的字号差异、粗细对比、黑白对比来建立视觉层级。

02 / 色彩

色彩系统

色彩的使用必须极其克制。在瑞士风格中，色彩通常用于强调和导航。

核心色盘

#000000

绝对黑

主文本、边框、标题

#FFFFFF

纯白

页面背景、卡片

#E53935

瑞士红

唯一强调色

辅助灰度

Gray-100

Gray-300

Gray-500

Gray-700

Gray-900

使用原则

— 禁用渐变：所有颜色必须为纯色。
— 黑白为主：页面中 90% 的面积应为黑、白、灰。
— 色块应用：使用黑底白字或红底白字的大色块突出内容。

03 / 字体

字体排版

字体是瑞士风格的灵魂。无衬线字体的几何感与严谨性是首选。

主字体: Inter / Helvetica

中文: Noto Sans SC

等宽: JetBrains Mono

名称	字号	字重	应用场景
Display	72px (4.5rem)	900 (Black)	主标题，极具冲击力
H1	48px (3rem)	900 (Black)	页面主标题
H2	36px (2.25rem)	700 (Bold)	板块标题
H3	24px (1.5rem)	700 (Bold)	卡片标题、小节标题
Body Large	20px (1.25rem)	400 (Regular)	引言、重点段落
Body	16px (1rem)	400 (Regular)	正文
Caption	12px (0.75rem)	500 (Medium)	标签、注释、说明文字

字间距规范

大标题 (>24px)

Letter Spacing: -0.02em 至 -0.03em
收紧字距，增强块面感

小标签

Letter Spacing: 0.1em 至 0.15em
配合全大写 (uppercase)

排版示例

Display / Black 900

Typography

Caption / Medium 500 / Uppercase

SWISS INTERNATIONAL STYLE

04 / 网格

网格系统

网格是不可见的结构骨架，决定了页面的秩序。

12列

24px槽宽

1400px最大宽度

32px侧边距

网格可视化

05 / 组件

核心组件

章节标记

Section Marker

用于标识板块主题，极具识别性。红色下划线是其特征。

极简卡片

卡片标题

这是卡片内容。悬停时产生位移并出现黑色硬阴影。

功能按钮 →

* 请将鼠标悬停在卡片上查看交互效果

数据块

476Days

8.1Score

核对清单

✓

网格对齐检查

✓

色彩克制性检查

留白呼吸感检查

06 / 代码

代码参考

.swiss-ds-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.swiss-ds-section-marker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #E53935;
  text-transform: uppercase;
  border-bottom: 1px solid #E53935;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        swiss: {
          black: '#000000',
          white: '#FFFFFF',
          red: '#E53935',
        }
      },
      fontFamily: {
        sans: ['Inter', 'Noto Sans SC'],
      },
    }
  }
}

瑞士国际排版风格设计系统