---
version: alpha
name: "Swiss"
description: "黑、白和一个信号红，放在严格的网格上。 Swiss 遵循国际主义设计风格：超大的无衬线字、严格的网格、直角和大量留白。红色是唯一的颜色，只出现在几个精确的位置。"
colors:
  primary: "#D70015"
  on-primary: "#FFFFFF"
  secondary: "#0A0A0A"
  tertiary: "#7A7A7A"
  neutral: "#595959"
  surface: "#FFFFFF"
  on-surface: "#0A0A0A"
typography:
  display-lg:
    fontFamily: "Archivo"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: "Archivo"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: "Archivo"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: "Archivo"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
  body-md:
    fontFamily: "Archivo"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Archivo"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Swiss 遵循国际主义设计风格：超大的无衬线字、严格的网格、直角和大量留白。红色是唯一的颜色，只出现在几个精确的位置。

## Colors

- **primary (#D70015):** 信号红，只用于主要操作和关键高亮。
- **on-primary (#FFFFFF)**
- **secondary (#0A0A0A):** 黑色，作为整块底色做对比区块。
- **tertiary (#7A7A7A):** 中灰，用于次要数据。
- **neutral (#595959):** 中性灰，用于说明和标签。
- **surface (#FFFFFF):** 纯白；深色模式是纯黑。
- **on-surface (#0A0A0A)**

## Typography

全站用 Archivo：标题用粗体、超大字号、紧字距；正文 16px 常规字重。小标签可以全大写并加宽字距。

## Layout

严格的 12 栏网格，最大宽度 1440px，栏间距 16px，间距单位 8px。所有元素对齐网格，有意留出空栏。

## Shapes

全部直角（圆角 0）。1px 细线描边，不用阴影。

## Components

按钮是实心红色或黑色矩形。导航是纯文字。表格和列表只用横线分隔。

## Do's and Don'ts

- 让标题成为页面上最大的元素。
- 在网格里有意留空栏。
- 不要加圆角和阴影。
- 不要把红色当装饰。
