新粗野主义
Neobrutalism
别名:新粗野主义粗野风大黑边风格硬阴影风格新残酷主义Neo-brutalismBrutalist Web Design
这是什么
用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
开发规格
字体
超粗无衬线，全大写
色彩
奶油底 × 纯黑 × 橙 #FF6B00
边框
3px 黑色实线粗边
阴影
5px 5px 0 硬投影（不模糊）
间距
0 圆角，紧凑堆叠
动效
约 100ms 的硬位移按压，无缓动
状态反馈
hover 位移到硬投影位置；focus 用 3px 黑色可见外框；active 继续下压并收起投影；disabled 灰化且不位移；error 用橙红粗边
风格演示
同一张页面，直接操作一起创造与开始项目打开简报，填写后整理可继续修改的本地需求；Design / Develop / Create 清单可独立勾选/取消；项目、服务、关于到达作品、服务、团队内容。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 PlayLab 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 PlayLab 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 面向年轻群体的品牌 活动 开发者工具官网
- 想在千篇一律的精致界面里制造强烈记忆点
- 营销页 作品集 创意社区等低密度高表现力场景
✕ 不适用场景
- 金融 医疗 企业级产品等需要稳重可信的场景
- 长时间使用的生产力工具，高对比装饰易造成视觉疲劳
- 内容密集 数据密集的界面，粗边与大色块挤占信息空间
常见形式
经典硬阴影
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。
用当前风格完成 PlayLab 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。 保留 PlayLab 的 47% / 53% 文案与叠窗构图：#ffff13 标题高亮、#f4a1d1 方角 CTA、黄色导航 CTA、#4e96f9 蓝块与 #3bbc8b 绿块。沿用 2px 黑边、无模糊硬投影、倾斜创意窗、笑脸和可勾选清单，不改成 10px 圆角或橙色 BRUTAL* 模板。延续区用现有粉/蓝/绿案例按钮与粗分隔，三个案例加入圆轮、星球和餐盘的 CSS 网点海报，详情复用对应海报；控件采用 100ms 阶梯式按压，弹窗和简报结果采用 180ms 印章式入场；600px 以下文案和 360px 高叠窗分别入流，保持清单可操作。 完整页面操作： 一起创造与开始项目打开简报，填写后整理可继续修改的本地需求；Design / Develop / Create 清单可独立勾选/取消；项目、服务、关于到达作品、服务、团队内容。 静态封面、详情演示与 /style-scenes/neobrutalism/（英文 /en/style-scenes/neobrutalism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件