瑞士现代主义 2.0Swiss Modernism 2.0
在经典网格上做现代化处理：12 栏、8px 基准单位、非对称排版、单一强调色。理性、克制、可无限扩展。
典型场景设计工作室 · 文化机构 · 产品官网
编号50
年代1950s Swiss + 2020s
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
在经典网格上做现代化处理：12 栏、8px 基准单位、非对称排版、单一强调色。理性、克制、可无限扩展。
关键词
Grid systemHelveticamodularasymmetricinternational stylerationalcleanmathematical spacing
别名
Swiss Modernism
效果与动效
display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy
设计系统变量
--grid-columns12--grid-gap1rem--base-unit8px--font-primaryInter--color-text#000000--color-bg#FFFFFF--accentsingle vibrant配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
#000000, #FFFFFF, #F5F5F5, single vibrant accent only
辅色 / Secondary
Minimal secondary, accent for emphasis only, no gradients
强调色在页面底色上的对比度约 3.7:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Corporate sites
- architecture
- editorial
- SaaS
- museums
- professional services
- documentation
避开 / Do Not Use For
- Playful brands
- children's sites
- entertainment
- gaming
- emotional storytelling
框架兼容
tailwindbootstrapfoundation
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- 12-column grid strict,
- Spacing mathematical,
- Typography hierarchy clear,
- Single accent only,
- No decorations,
- High contrast verified
CSS / 技术关键词
display: grid, grid-template-columns: repeat(12, 1fr), gap: 1rem (8px base unit), font-family: Inter/Helvetica, font-weight: 400-700, color: #000/#FFF, single accent
AI 提示词
Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.