极简主义 / 瑞士风格Minimalism & Swiss Style
以网格、留白和字号层级建立秩序,只用黑白灰加一个强调色。信息密度可控、装饰为零,适合需要长期阅读与高频操作的专业界面。
典型场景企业后台 · 文档站 · 专业工具
编号01
年代1950s Swiss
复杂度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
同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
以网格、留白和字号层级建立秩序,只用黑白灰加一个强调色。信息密度可控、装饰为零,适合需要长期阅读与高频操作的专业界面。
关键词
Cleansimplespaciousfunctionalwhite spacehigh contrastgeometricsans-serifgrid-basedessential
别名
MinimalMinimalismMinimalism (Frame)
效果与动效
Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
设计系统变量
--spacing2rem--border-radius0px--font-weight400-700--shadownone--accent-colorsingle primary only配色方案
色值取自风格数据,不足时补充主题令牌主色 / Primary
Monochromatic, Black #000000, White #FFFFFF
辅色 / Secondary
Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent
强调色在页面底色上的对比度约 4.7:1,可用于正文与图标。
适用场景
适合 / Best For
- Enterprise apps
- dashboards
- documentation sites
- SaaS platforms
- professional tools
避开 / Do Not Use For
- Creative portfolios
- entertainment
- playful brands
- artistic experiments
框架兼容
tailwindbootstrapmui
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向中Medium
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Grid-based layout 12-16 columns,
- Typography hierarchy clear,
- No unnecessary decorations,
- text contrast measured against the chosen project target,
- Mobile responsive grid
CSS / 技术关键词
display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary
下辖变体:瑞士现代主义 2.0、极简单色。
AI 提示词
Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.