{
  "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"
    ]
  },
  "playground": {
    "task": {
      "zh": "探索项目进入精选作品；打开 NORTH / OPEN / FORM 案例并返回；菜单到达 WORK / STUDIO / APPROACH / CONTACT。联系表单校验姓名、邮箱、简介并显示可继续修改的整理结果，不发送邮件；语言入口切换中英文同款页。",
      "en": "Explore work opens selected projects; inspect NORTH / OPEN / FORM and return. The menu reaches WORK / STUDIO / APPROACH / CONTACT. Validate name, email and brief and show an editable local summary without sending email; the language control opens the translated page."
    },
    "checks": [
      {
        "zh": "逐一操作 VERTEX 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use VERTEX’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "完成上述 VERTEX 操作后修改输入或撤销，检查结果与状态同步。",
        "en": "Complete the VERTEX task, then change inputs or undo and inspect the matching result/state."
      },
      {
        "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。",
        "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries."
      }
    ]
  },
  "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": "用当前风格完成 VERTEX 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n直接复用 .vertex-body 的 grid-template-columns: 49% 27% 24%，保留左侧 IDEAS / BUILD / TOMORROW 大字、中间说明与右侧 #ff3511 整块海报。展示字用现有 Atlas Heavy（Anton）/ Atlas Display / Impact 压缩字体栈；左字 8.1cqw、line-height .95，海报字 3.65cqw，正文沿用 Arial 无衬线与 1px 栏线。保留现有字面横向拉伸，不缩放整页。项目延续区用三列案例与红/黑/纸灰案例图，600px 以下首屏与项目改为单列。不要另建 12 列 44px Helvetica 区块，也不要把红色限制为编号/细线；dark/variants 使用现有文档模式选择器。\n\n探索项目进入精选作品；打开 NORTH / OPEN / FORM 案例并返回；菜单到达 WORK / STUDIO / APPROACH / CONTACT。联系表单校验姓名、邮箱、简介并显示可继续修改的整理结果，不发送邮件；语言入口切换中英文同款页。\n\n静态封面、详情演示与 /style-scenes/swiss-style/（英文 /en/style-scenes/swiss-style/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete VERTEX page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nReuse .vertex-body with grid-template-columns: 49% 27% 24%: the IDEAS / BUILD / TOMORROW display, central copy and full #ff3511 poster. Use the existing Atlas Heavy (Anton) / Atlas Display / Impact condensed stack, 8.1cqw/.95 for the left display and 3.65cqw for poster type; retain Arial body copy and 1px column rules. Preserve the existing glyph-width treatment, not whole-page scaling. Continue with three case-study columns and red/black/paper-grey project art, stacking hero and cases below 600px. Do not introduce a 12-column 44px Helvetica section or restrict red to indices/rules; use the existing document dark/variants selectors.\n\nExplore work opens selected projects; inspect NORTH / OPEN / FORM and return. The menu reaches WORK / STUDIO / APPROACH / CONTACT. Validate name, email and brief and show an editable local summary without sending email; the language control opens the translated page.\n\nShare one renderer between static covers, the detail experience and /style-scenes/swiss-style/ (English /en/style-scenes/swiss-style/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion."
    },
    "agent": {
      "zh": "用当前风格完成 VERTEX 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n直接复用 .vertex-body 的 grid-template-columns: 49% 27% 24%，保留左侧 IDEAS / BUILD / TOMORROW 大字、中间说明与右侧 #ff3511 整块海报。展示字用现有 Atlas Heavy（Anton）/ Atlas Display / Impact 压缩字体栈；左字 8.1cqw、line-height .95，海报字 3.65cqw，正文沿用 Arial 无衬线与 1px 栏线。保留现有字面横向拉伸，不缩放整页。项目延续区用三列案例与红/黑/纸灰案例图，600px 以下首屏与项目改为单列。不要另建 12 列 44px Helvetica 区块，也不要把红色限制为编号/细线；dark/variants 使用现有文档模式选择器。\n\n完整页面操作：\n探索项目进入精选作品；打开 NORTH / OPEN / FORM 案例并返回；菜单到达 WORK / STUDIO / APPROACH / CONTACT。联系表单校验姓名、邮箱、简介并显示可继续修改的整理结果，不发送邮件；语言入口切换中英文同款页。\n\n静态封面、详情演示与 /style-scenes/swiss-style/（英文 /en/style-scenes/swiss-style/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete VERTEX page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nReuse .vertex-body with grid-template-columns: 49% 27% 24%: the IDEAS / BUILD / TOMORROW display, central copy and full #ff3511 poster. Use the existing Atlas Heavy (Anton) / Atlas Display / Impact condensed stack, 8.1cqw/.95 for the left display and 3.65cqw for poster type; retain Arial body copy and 1px column rules. Preserve the existing glyph-width treatment, not whole-page scaling. Continue with three case-study columns and red/black/paper-grey project art, stacking hero and cases below 600px. Do not introduce a 12-column 44px Helvetica section or restrict red to indices/rules; use the existing document dark/variants selectors.\n\nFull-page operations:\nExplore work opens selected projects; inspect NORTH / OPEN / FORM and return. The menu reaches WORK / STUDIO / APPROACH / CONTACT. Validate name, email and brief and show an editable local summary without sending email; the language control opens the translated page.\n\nShare one renderer between static covers, the detail experience and /style-scenes/swiss-style/ (English /en/style-scenes/swiss-style/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results."
    }
  },
  "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
    }
  }
}