粗野主义Brutalism
裸露的结构、纯色块、粗黑描边与巨大字号，拒绝一切修饰。冲击力优先于精致度，适合表达态度，不适合需要信任感的企业界面。
典型场景艺术项目 · 独立品牌 · 实验性页面
编号04
年代1950s Brutalist
复杂度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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
裸露的结构、纯色块、粗黑描边与巨大字号，拒绝一切修饰。冲击力优先于精致度，适合表达态度，不适合需要信任感的企业界面。
关键词
Rawunpolishedstarkhigh contrastplain textdefault fontsvisible bordersasymmetricanti-design
效果与动效
No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks
设计系统变量
--border-radius0px--transition-duration0s--font-weight700-900--colorsprimary only--border-stylevisible--grid-visibletrue配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF
辅色 / Secondary
Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary
强调色在页面底色上的对比度约 4.0:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Design portfolios
- artistic projects
- counter-culture brands
- editorial/media sites
- tech blogs
避开 / Do Not Use For
- Corporate environments
- conservative industries
- critical accessibility
- customer-facing professional
框架兼容
tailwindbootstrap
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向弱Low
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- No border-radius (0px),
- No transitions (instant),
- Bold typography (700+),
- Pure primary colors used,
- Visible grid/borders,
- Asymmetric layout intentional
CSS / 技术关键词
border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF
下辖变体：动感粗野主义（移动）。
AI 提示词
Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.