新粗野主义Neubrutalism
粗黑描边 + 硬阴影 + 高饱和色块，按下时位移抵消阴影，机械感十足。性格鲜明，但大面积使用会压迫阅读。
典型场景年轻品牌 · 创作者工具 · 活动页
编号38
年代2020s Modern
复杂度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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
粗黑描边 + 硬阴影 + 高饱和色块，按下时位移抵消阴影，机械感十足。性格鲜明，但大面积使用会压迫阅读。
关键词
Bold bordersblack outlinesprimary colorsthick shadowsno gradientsflat colors45° shadowsplayfulGen Z
效果与动效
box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography
设计系统变量
--border-width3px--shadow-offset4px--shadow-color#000--colorshigh saturation--fontbold sans配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)
辅色 / Secondary
Limited accent colors, high contrast combinations, no gradients allowed
强调色在页面底色上的对比度约 3.1:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Gen Z brands
- startups
- creative agencies
- Figma-style apps
- Notion-style interfaces
- tech blogs
避开 / Do Not Use For
- Luxury brands
- finance
- healthcare
- conservative industries (too playful)
框架兼容
tailwindbootstrap
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Hard borders (2-4px),
- Hard offset shadows,
- High saturation colors,
- Bold typography,
- No blurs/gradients,
- Distinctive 'ugly-cute' look
CSS / 技术关键词
border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients
下辖变体：新粗野移动端。
AI 提示词
Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.