粗野主义
Brutalism
别名:粗野主义野兽派网页那种很糙的黑白网页超大字不修边幅原始网页风brutalismweb brutalismbrutalist web design
这是什么
用裸露的结构、超大字号和原始对比色强调「反精致」的网页视觉语言。黑白硬切、可见网格、 直角硬边，保留默认 HTML 的诚实感；信息直接砸向读者，拒绝圆角、渐变与装饰性打磨。
开发规格
字体
超粗无衬线或等宽体，字号断崖式对比
色彩
纸白 × 纯黑 × 单一刺眼橙红 #FF3B00
边框
2px 实线直角硬边，圆角一律 0
阴影
不用投影，需要层级时用反色块或粗描边
间距
紧贴网格线的硬切排布，留白大开大合
动效
近似瞬时，无过渡
状态反馈
hover 直接反色；focus 用 2px 黑色实线粗框；active 换成刺眼橙红 #FF3B00；disabled 降为 50% 灰；error 用 #FF3B00 实色块
风格演示
先看整页效果，再试交互场景整页预览
GOOD
IDEAS
NO LIMITS.
我们是一家独立的创意工作室。
专注于品牌、数字体验与实验性项目。
用设计打破常规，探索更多可能。
DESIGN
FOR A MORE
OPEN WORLD.
IDEAS
PEOPLE
CULTURE
交互场景
正在加载演示…
✓ 适用场景
- 设计师作品集、独立出版、艺术机构官网，态度本身就是内容
- 想在同质化的精致界面里用「不修边幅」制造强烈记忆点
- 低密度宣言页、活动页，超大字当海报使
✕ 不适用场景
- 金融、医疗、政务等需要稳重可信的操作型产品
- 长表单与高密度数据后台，硬切对比会加剧阅读疲劳
- 需要传达精细、高端、呵护感的品牌叙事
常见形式
经典粗野
Classic brutalism
黑白灰硬切加单一刺眼强调色，保留默认浏览器气质
软粗野
Soft brutalism
保留原始对比与超大字，但放宽圆角与留白
排印粗野
Typographic brutalism
字号、字重、行距承担全部表现力，几乎不用图形
实现要点
font-size: clamp(2.5rem, 8vw, 6rem)border-radius: 0border: 2px solid currentColorbackground-image: repeating-linear-gradient()font-family: system-ui, monospace命门是「不修边幅」：圆角一律 0，阴影不用或只用硬边框替代，字体走系统栈或等宽体。 背景网格用 repeating-linear-gradient 画出来即可，不必真开 CSS Grid。强调色只留一个 （常见刺眼橙红 #FF3B00），其余全黑白。深色模式反转明度关系但保持同样的硬切。 不要为了「像」粗野而降低文字对比度或打乱阅读顺序。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现 Brutalism 粗野主义视觉风格。 先检查现有组件体系和 Design Token，优先复用当前组件，只替换视觉层。 要求： - 全部圆角 0，无渐变无柔和阴影，层级用粗描边或反色块表达 - 标题超大字号（clamp），系统无衬线或等宽字体 - 背景可见网格线，单一刺眼强调色（如 #FF3B00），其余黑白 - 按钮 hover 反色，不做弹跳位移 - 深色模式反转明度但保持硬切语汇 - 文字对比度不低于 4.5:1，阅读顺序不被装饰打乱 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格替代方案以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件影响组件容易混淆
粗野主义是原始未修饰的网页，黑白为主；新粗野主义是糖果贴纸加粗黑边与硬阴影，色彩喧闹。