新野兽派设计拥抱原始、未经打磨的美学，使用大胆的黑色粗边框、硬边缘阴影、零圆角、高对比色彩组合和刻意的「不完美」布局。它拒绝现代网页设计中抛光的、千篇一律的外观，转而追求个性和直接感。尽管外观粗犷，有效的新野兽派设计需要对层级和可用性的细心把控。
设计 neo-brutalist 作品集网站。所有元素使用 3px solid black 完整边框、无 border-radius 和 4px 4px 0px #000 hard shadow。背景为 #ffffff，强调色为 hot pink #ff006e 与 electric yellow #ccff00。正文使用 monospace，标题使用 bold condensed sans-serif。布局采用刻意不对称的 grid、元素重叠和 -2deg 到 2deg 的旋转卡片。导航为 brutalist text link，并带 underline offset animation。项目卡包含图片、粗体标题和 raw HTML-style tag。使用 shadcn/ui 并覆盖默认样式，构建 neo-brutalist 任务管理器。所有组件的 border-radius 设为 0，边框设为 2px solid black，阴影设为 '4px 4px 0px black'。卡片背景交替使用 yellow #fbbf24 和 pink #f472b6。按钮使用黑色背景与白字，hover 时应用 transform: translate(-2px, -2px) 并改变阴影。包含任务列表、新增任务表单、使用直接色块的 priority tag，以及 drag-to-reorder 交互。在 Next.js 中创建 neo-brutalist 博客。design token 为 border-width 3px、border-color black、border-radius 0 和 shadow '5px 5px 0px #000'。实现 CSS utility .brutal-card，统一应用这套 brutalist treatment。header 使用超大站点标题和实色 highlight background。文章卡排列为 masonry grid，强调色按 #ff006e、#ccff00、#00d9ff、#ff9500 循环；每张卡 hover 时轻微倾斜。代码块使用 monospace，并提供清晰可见的 line-number gutter。使用 TypeScript 生成 neo-brutalist React 组件库。BrutalButton 提供 primary、secondary、danger variants，全部使用粗完整边框与 hard shadow；BrutalCard 无 radius，并使用粗完整强调色边框；BrutalInput 使用粗完整边框和 monospace placeholder；BrutalBadge 为 inline-block、uppercase、小尺寸和实色背景；BrutalModal 居中显示，使用粗完整边框，不使用 backdrop blur，改用纯色 overlay。全部交互元素点击时把阴影从 4px 4px 移到 2px 2px。样式使用 Tailwind CSS。为预算应用设计 neo-brutalist 产品落地页。背景为 #fef6e4，全部区块使用 3px solid #000 完整边框、zero border-radius 和 6px 6px 0px #000 shadow。hero 标题使用 96px uppercase condensed 字体和 #000；sticker badge 使用 #ff006e 背景、白字并旋转 -6deg；CTA 使用 #ccff00，按下时阴影切换为 3px 3px。功能区三张卡片依次使用 #8ecae6、#ffb703、#ffffff 背景。区块之间加入重复文字 marquee，footer 作为一个大型完整边框区块。正文使用 18px monospace；对比度至少 4.5:1，禁止在白色背景上使用 #ccff00 文字。使用 shadcn/ui 构建 neo-brutalist 定价页，并把全部 radius 覆盖为 0。在 #f4f1ea 背景上放置三档卡片，每张卡使用 3px black 完整边框和 5px 5px 0px #000 shadow：Free 为 #ffffff，Pro 为 #ffde59，并让 'BEST DEAL' banner 以 -4deg 穿过顶部角落，Team 为 #a2d2ff。价格使用 56px black extra-bold；功能行以 2px dashed black 完整分隔，并显示 X 或 check glyph。计费 toggle 模拟厚重物理开关，使用 2px 完整边框、hard shadow 和 instant snap，不加 easing。下方 comparison table 使用纯黑表头与白色 uppercase 文字。键盘 focus 使用 3px offset black outline。在 Next.js 中创建 mobile-first neo-brutalist 习惯追踪 UI，基准宽度为 390px。色板使用 background #fffbeb、black #111111、accent #f97316 和 #22d3ee。每张卡使用 2px solid black 完整边框、4px 4px 0px #111 shadow 和 radius 0。顶部栏中的应用名使用 24px uppercase monospace，并配手绘风格 underline SVG。习惯卡垂直排列，gap 16px；点击时切换 28px 粗重 checkbox，完成后填充黑色并显示白色 check，不使用 transition，保持即时机械反馈。streak counter 放在旋转 3deg 的 badge 中。底部 tab bar 分为 4 个等宽单元，各单元使用完整的 2px black 边框建立分隔，当前项反转为黑底白字。触摸目标至少 48px。使用 React 和 TypeScript 生成 neo-brutalist 文档站。布局包含 fixed 260px sidebar，背景 #e9ff70，使用完整的 3px black 边框；导航链接为 14px uppercase monospace，当前页使用实心黑色方形 marker。内容区为 #ffffff 和 max-w-3xl，标题背后使用 #ff006e highlight bar。代码块使用 #111111 背景、#ccff00 monospace 文字、3px black 完整边框、5px 5px 0px #ff006e shadow，并在右上角放带完整边框的 COPY button。表格每个 cell 使用 2px black 完整边框。blockquote-style callout 使用 #8ecae6 背景和粗体 'NOTE:' 前缀。提供 skip-to-content link 与 3px black focus outline。新野兽派是一种设计风格，特点是粗黑边框（2-4px）、硬边缘投影（无模糊）、零圆角、高对比色彩组合、等宽或粗体排版、以及刻意的原始「未完成」美学。它借鉴了建筑野兽派暴露原始结构而非装饰的哲学。
在 Tailwind 配置中添加自定义阴影：boxShadow: { brutal: '4px 4px 0px #000', 'brutal-sm': '2px 2px 0px #000', 'brutal-lg': '6px 6px 0px #000' }。然后使用：'shadow-brutal hover:shadow-brutal-sm active:shadow-brutal-sm hover:translate-x-[2px] hover:translate-y-[2px]' 实现交互按压效果。
由于高对比度和清晰的视觉层级，野兽派设计可以是高度可访问的。大胆的边框和鲜明的色彩差异实际上帮助弱视用户。但需注意：充足的色彩对比度（尤其是明亮的强调色）、可读的字号（等宽字体可能比预期更小）、清晰的焦点指示器。避免使内容难以阅读的旋转或重叠。
最佳区间是 2-4px 的黑色实线。密集 UI（输入框、表格单元、徽标）用 2px，卡片和按钮默认 3px，4-5px 只留给 hero 级容器或页面外框。同类元素的边框粗细要保持一致——同级卡片混用 2px 和 3px 会被读成 bug 而不是设计选择。阴影偏移要与边框粗细匹配：3px 边框配 4-6px 硬阴影（box-shadow: 5px 5px 0px #000，无模糊）。低于 2px 风格会塌成普通扁平设计；超过 6px 在移动端会开始吞掉可用空间。
从暖调米白底色出发（#fef6e4、#fffbeb 或 #f4f1ea——纯白显得太冷冰冰），加上用于所有边框和大部分文字的纯黑 #000。然后从这组验证过的颜色里挑 2-3 个高声量强调色：荧光粉 #ff006e、酸性黄 #ccff00、橙 #f97316、天蓝 #8ecae6、青柠 #a7f432。规则：强调色用于背景和贴纸元素，绝不用于正文文字；每个强调色上都放黑色文字（以上颜色配黑字都能通过 4.5:1）；强调色按卡片轮换，而不是在同一组件里混用多个。