新粗野主义
Neobrutalism
别名:新粗野主义粗野风大黑边风格硬阴影风格新残酷主义Neo-brutalismBrutalist Web Design
这是什么
用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
开发规格
字体
超粗无衬线，全大写
色彩
奶油底 × 纯黑 × 橙 #FF6B00
边框
3px 黑色实线粗边
阴影
5px 5px 0 硬投影（不模糊）
间距
0 圆角，紧凑堆叠
动效
约 100ms 的硬位移按压，无缓动
状态反馈
hover 位移到硬投影位置；focus 用 3px 黑色可见外框；active 继续下压并收起投影；disabled 灰化且不位移；error 用橙红粗边
风格演示
先看整页效果，再试交互场景整页预览
好的创意
让世界更有趣。
我们用设计、内容和技术，
为品牌创造有温度的数字体验。
Design.
More Fun!⤴
IDEAS
MAKE A
BRIGHTER
TOMORROW.
☑ Design
☑ Develop
☑ Create
TogetherEXPLORE
BELONG
交互场景
正在加载演示…
✓ 适用场景
- 面向年轻群体的品牌 活动 开发者工具官网
- 想在千篇一律的精致界面里制造强烈记忆点
- 营销页 作品集 创意社区等低密度高表现力场景
✕ 不适用场景
- 金融 医疗 企业级产品等需要稳重可信的场景
- 长时间使用的生产力工具，高对比装饰易造成视觉疲劳
- 内容密集 数据密集的界面，粗边与大色块挤占信息空间
常见形式
经典硬阴影
Classic Hard Shadow
奶油底色 + 黑边 + 偏移实心阴影
糖果色
Candy
粉 紫 黄等高饱和糖果色块互相碰撞
粗粝噪点
Grunge
加入噪点纹理 倾斜元素与手绘涂鸦
实现要点
border: 2-4px solid #000box-shadow: 4px 4px 0 #000border-radius: 8-16pxbackground: saturate()transition三件套是风格命门：粗黑边（2～4px）、偏移实心阴影（如 4px 4px 0 #000，绝不用 模糊）、明快圆角。配色选高饱和糖果色并大胆撞色。交互反馈很出效果：hover 时 元素位移，active 时把位移吃掉、阴影归零，像真的被按进纸面。噪点可用 SVG feTurbulence 或重复渐变模拟。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用新粗野主义风格（Neobrutalism）实现一个卡片 + 按钮区块。 先检查现有组件与 Design Token，确定是否已有可复用的边框/阴影变量。 要求： - 粗黑描边（2～3px）+ 偏移实心阴影（无模糊） - 高饱和撞色，底色用奶油色系 - 按钮 hover 上浮、active 阴影归零的物理按压感 - 支持深色模式（近黑底，彩色保持高亮） - 过渡动画尊重 prefers-reduced-motion，时长 120ms 内 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件