{
  "id": "swiss-style",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "瑞士风格",
    "en": "Swiss Style"
  },
  "aliases": [
    "瑞士风格",
    "瑞士平面设计",
    "国际主义排版风格",
    "网格排版风格",
    "黑白红海报风",
    "Helvetica风格",
    "International Typographic Style",
    "Swiss Design"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。",
    "en": "A visual language of objective grids and typography: strict mathematical grids, sans-serif faces, flush-left setting, black and white plus one accent (classically red). Order comes from whitespace and type scale. Decoration is noise; the goal is information read along the shortest path."
  },
  "use_when": [
    {
      "zh": "设计系统 博物馆 文化机构，需要客观严谨的秩序感",
      "en": "Design systems, museums and institutions that need objective rigor"
    },
    {
      "zh": "数据 技术文档 目录类内容，结构化信息为主",
      "en": "Data, documentation and catalog content that is inherently structured"
    },
    {
      "zh": "海报 期刊封面等需要强烈排版张力的场景",
      "en": "Posters and covers that thrive on typographic tension"
    }
  ],
  "avoid_when": [
    {
      "zh": "品牌需要亲和 温暖或娱乐化的情绪",
      "en": "Brands needing warmth, approachability or playfulness"
    },
    {
      "zh": "内容零散无结构，网格反而放大凌乱感",
      "en": "Unstructured content — a strict grid only amplifies the mess"
    },
    {
      "zh": "中文与衬线混排为主的阅读场景，风格语言不匹配",
      "en": "Reading contexts dominated by CJK and serif mixes — the idiom misfits"
    }
  ],
  "tags": [
    "swiss",
    "grid",
    "typography",
    "objectivity",
    "helvetica"
  ],
  "variants": [
    {
      "id": "zurich",
      "name": {
        "zh": "苏黎世学派",
        "en": "Zurich School"
      },
      "note": {
        "zh": "Josef Müller-Brockmann 的严格模数网格",
        "en": "Josef Müller-Brockmann's strict modular grid"
      }
    },
    {
      "id": "basel",
      "name": {
        "zh": "巴塞尔学派",
        "en": "Basel School"
      },
      "note": {
        "zh": "Emil Ruder 与 Armin Hofmann，更重字体排印节奏",
        "en": "Emil Ruder and Armin Hofmann — typographic rhythm first"
      }
    },
    {
      "id": "new-swiss",
      "name": {
        "zh": "新瑞士",
        "en": "New Swiss"
      },
      "note": {
        "zh": "当代网页化的瑞士风，等宽字与细线引入",
        "en": "Contemporary web-flavored Swiss with mono type and hairlines"
      }
    }
  ],
  "applicable_components": [
    "card",
    "table",
    "navbar",
    "button",
    "pagination"
  ],
  "related": [
    {
      "id": "minimalism",
      "relation": "similar_to"
    },
    {
      "id": "editorial",
      "relation": "similar_to"
    },
    {
      "id": "bauhaus",
      "relation": "similar_to"
    },
    {
      "id": "card",
      "relation": "affects"
    },
    {
      "id": "table",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "swiss-style",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "sources": [
    {
      "name": "Wikipedia — International Typographic Style",
      "url": "https://en.wikipedia.org/wiki/International_Typographic_Style"
    },
    {
      "name": "Design reviewed — Swiss Style Principles",
      "url": "https://www.designreviewed.com/swiss-style/"
    }
  ],
  "implementation": {
    "css": [
      "grid",
      "font-family: Helvetica",
      "text-align: left",
      "letter-spacing",
      "border-top: 2px solid"
    ],
    "notes": {
      "zh": "先立网格：12 列或简单 3×3，所有元素吸附网格线，禁止任意间距。字体只用 一套无衬线（Helvetica/Inter/Neue Haas），层级靠字号跳跃（如 12/48px） 而非加粗渐变；正文左对齐，禁用居中排版。色彩为黑 白 灰 + 单一强调红， 红只出现在标题标号与关键线上。分隔用粗细两种横线（2px/1px）。",
      "en": "Grid first: a 12-column or simple 3×3 grid that every element snaps to — no arbitrary spacing. One sans family (Helvetica/Inter/Neue Haas); hierarchy from size jumps (e.g. 12/48px), not weight ramps; flush-left text, centered setting banned. Black, white, grey plus a single red that only marks indices and key rules. Separate with two rule weights (2px/1px)."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用瑞士风格（Swiss Style）设计界面：严格网格排版、无衬线字体、左对齐、 黑白加单色强调红，层级靠字号对比与留白建立。",
      "en": "\"Design an interface in Swiss Style: strict grid typography, sans-serif, flush-left, black-and-white with a single red accent, hierarchy from scale contrast and whitespace.\""
    },
    "design": {
      "zh": "瑞士风格设计规范：白色底 黑色 Helvetica（或 Inter）；建立 12 列网格并 让所有元素对齐；标题字号与正文形成 4 倍以上跳跃；强调色仅用一个红色 #E30613，用于标号与粗横线；留白宽松且成模数（8 的倍数）；无阴影 无 渐变 无圆角（或极小圆角）；深色模式为近黑底 反白字 红色保留。",
      "en": "\"Swiss style spec: white ground, black Helvetica (or Inter); a 12-column grid everything aligns to; headings at 4x+ body size; one red #E30613 for indices and heavy rules only; generous modular whitespace (multiples of 8); no shadows, gradients or big radii. Dark mode: near-black ground, inverted text, red retained.\""
    },
    "implementation": {
      "zh": "用 CSS 实现瑞士风格：外层 .swiss-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }；标题 font-family: \"Helvetica Neue\", Arial; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em；分隔线 .rule { border-top: 2px solid #000 } 与 .rule-thin { border-top: 1px solid #ccc }；编号用红色等宽小字。",
      "en": "\"Implement Swiss style in CSS: .swiss-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }; headings in 'Helvetica Neue', Arial, 44px/1.05, letter-spacing -0.02em; .rule { border-top: 2px solid #000 } and .rule-thin { border-top: 1px solid #ccc }; indices in small red mono type.\""
    },
    "agent": {
      "zh": "在当前项目中用瑞士风格（Swiss Style）实现一个排版主导的信息区块。\n\n先检查现有 Design Token 与字体栈，网格间距映射到现有间距变量。\n要求：\n- 建立 12 列网格，所有元素吸附网格线，间距成模数\n- 单一无衬线字体，层级靠字号跳跃不靠加粗渐变\n- 黑白灰 + 单一强调红，红只用于标号与关键线\n- 正文左对齐，分隔用 2px/1px 两种横线\n- 支持深色模式\n- 不新增任何依赖\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement a typography-led Swiss Style section in the current project.\n\nInspect the existing design tokens and font stacks first; map grid spacing onto the current spacing variables.\nRequirements:\n- A 12-column grid every element snaps to; modular spacing\n- One sans-serif family; hierarchy from size jumps, not weight ramps\n- Black, white, grey plus a single red reserved for indices and key rules\n- Flush-left text; 2px/1px rule hierarchy\n- Dark mode support\n- No new dependencies\nRun existing project checks when done and list the modified files."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "Helvetica 式无衬线，全大写粗黑标题",
      "en": "Helvetica-style sans; bold uppercase headlines"
    },
    "color": {
      "zh": "纸灰底 × 纯黑 × 正红 #E63312",
      "en": "Paper grey, pure black, signal red #E63312"
    },
    "border": {
      "zh": "1px 黑色实线分割栏",
      "en": "1px solid black column rules"
    },
    "shadow": {
      "zh": "无阴影，扁平到极致",
      "en": "Zero shadows — strictly flat"
    },
    "spacing": {
      "zh": "严格网格，栏距一致",
      "en": "Strict modular grid, consistent gutters"
    },
    "motion": {
      "zh": "近似瞬时，颜色切换在 100ms 内，无缓动位移",
      "en": "Near-instant colour swaps within 100ms, no eased movement"
    },
    "states": {
      "zh": "hover 改用正红或反白；focus 用 2px 黑色可见实线框；active 反色块；disabled 降为灰；error 用正红并加粗",
      "en": "Hover switches to signal red or knock-out white; focus shows a visible 2px black solid frame; active inverts the block; disabled drops to grey; error uses signal red at a heavier weight"
    }
  },
  "preview": {
    "order": 2,
    "keywords": {
      "en": "GRID. CLARITY. IMPACT.",
      "zh": "网格 · 清晰 · 有力的表达"
    },
    "url": "https://vertex.studio",
    "scene": "vertex",
    "brand": "VERTEX",
    "nav": [
      {
        "zh": "WORK",
        "en": "WORK"
      },
      {
        "zh": "STUDIO",
        "en": "STUDIO"
      },
      {
        "zh": "APPROACH",
        "en": "APPROACH"
      },
      {
        "zh": "CONTACT",
        "en": "CONTACT"
      }
    ],
    "navExt": [
      {
        "zh": "EN / 中文",
        "en": "EN / 中文"
      }
    ],
    "heroTitle": {
      "zh": "IDEAS",
      "en": "IDEAS"
    },
    "heroTitle2": {
      "zh": "BUILD TOMORROW",
      "en": "BUILD TOMORROW"
    },
    "heroSub": {
      "zh": "用设计构建更好的未来",
      "en": "Build a better tomorrow through design"
    },
    "cta": {
      "zh": "探索项目 →",
      "en": "Explore projects →"
    },
    "tokens": {
      "bg": "#F2F1ED",
      "fg": "#101010",
      "sub": "#5B5B55",
      "accent": "#E63312",
      "accentFg": "#fff",
      "card": "#FFFFFF",
      "cardBorder": "#101010",
      "radius": "0px",
      "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif",
      "upper": true
    }
  }
}