新野兽派

新野兽派 — 风格参考

黑框、硬阴影、零圆角：界面由一块块压不扁的实体组成。

Theme: light

新野兽派从建筑取来态度：结构外露，材料不加装饰。网页上的做法是给每个元素一个 2px 到 4px 的纯黑外框、一层无模糊的偏移阴影、以及零圆角，让平面产生真实厚度。交互也必须是物理的——hover 时阴影变大、元素向左上抬起（Brutal Snap）；active 时元素位移量正好等于阴影偏移量，阴影归零，像被手掌压平（Physical Crushing）。颜色只有黑白打底，加四支高饱和强调色，每支承担一个固定职能，不做渐变、不做半透明。

Colors

Typography

sans-serif — 所有标题，权重固定 900。标题的力量来自字重与紧缩字距，不来自字号堆叠。

• Substitute: Inter, 'Helvetica Neue', Arial, sans-serif
• Weights: 700, 900
• Sizes: 24, 32, 48, 64, 72
• Line height: 0.95 (display), 1.05 (headings), 1.6 (body)
• Letter spacing: -0.02em on display, 0.12em on uppercase labels

mono — 正文、标签、按钮与数据。等宽字体让界面读起来像终端输出，是这套风格的第二识别点。

• Substitute: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
• Weights: 400, 700
• Sizes: 12, 14, 16
• Line height: 1.1 (display), 1.2 (headings), 1.6 (body)
• Letter spacing: -0.01em on display, 0.12em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: compact

Spacing Scale

Border Radius

• Page max-width: 1280px
• Section gap: 80px
• Card padding: 24px
• Element gap: 16px

Components

Block Button

Role: 主行动按钮

白底、2px 墨黑描边、直角、4px 硬阴影（偏移 4px 4px，模糊 0）。字号 12px、字重 700、全大写、字距 0.12em、等宽；padding 12px 24px。hover 时阴影增到 10px、元素向左上位移 4px，背景瞬间硬切到酸柠绿，持续时间 150ms ease-out。按下时元素右下位移 6px，阴影归零。

• Sizes: padding 12px 24px; label 12px
• States: hover: shadow 10px, translate -4px -4px, hard-cut fill; active: translate 6px 6px, shadow none

Brutal Card

Role: 内容卡片与商品卡

白底、2px 墨黑描边、直角、8px 硬阴影。内边距 24px，卡片间距 32px。hover 时元素上移 4px、阴影增到 10px，阴影色可切到荧光粉，过渡 150ms ease-out。

• States: hover: translate -4px -4px, shadow 10px

Mono Label

Role: 分类标签与状态徽标

墨黑填充、白字、直角、无描边。12px 等宽、字重 700、全大写、字距 0.12em；padding 4px 8px。反色用途时改为白底黑框。

• Sizes: padding 4px 8px; label 12px

Hard Input

Role: 表单输入

白底、2px 墨黑描边、直角、无阴影。14px 等宽、padding 12px 16px。聚焦时出现 4px 硬阴影并保持描边宽度不变，不改变尺寸以避免布局抖动。

• States: focus: 4px hard shadow, border width unchanged

Marquee Bar

Role: 页面顶部或底部的滚动条

墨黑底、白字、直角、无阴影。16px 等宽、全大写、字距 0.12em、上下 padding 8px，内容横向匀速滚动，间隔用 4px 实心方块分隔。

Do's and Don'ts

Do

• 所有元素使用 2px 到 4px 纯黑边框，绝不用灰色边框
• 阴影必须是零模糊的硬偏移，4px 与 8px 两档
• 保持直角，任何圆角都会削弱实体感
• hover 增大阴影，active 位移等于阴影偏移并把阴影归零
• 标题固定 900 字重，正文用等宽字体
• 交互时长 150ms ease-out，硬切而不是淡入

Don't

• 不要使用任何圆角（rounded-lg、rounded-full 等）
• 不要用模糊阴影（shadow-lg、shadow-xl），它们会毁掉物理感
• 不要用渐变，包括按钮与背景
• 不要用灰色或半透明边框
• 不要在 hover 上用 opacity 过渡代替硬切
• 不要在 active 时只位移不归零阴影

Surfaces

Elevation

• Hard offset sm: 4px 4px 0 0 #000000
• Hard offset lg: 8px 8px 0 0 #000000
• Hover lift: 10px 10px 0 0 #000000
• Pressed: none

Imagery

不用摄影。用粗描边的几何图形、点阵与棋盘格、像素化的图标，全部单色或四支强调色之一。任何图像都必须能画成 2px 线条与实心块，出现渐变或柔光就破坏风格。

Layout

12 栏、上限 1280px，容器内边距 16px 到 32px。区块间距 80px，卡片间距 32px。允许元素相对网格偏移 4px 到 8px 制造碰撞感，但同一区块内偏移方向保持一致。标题与正文的对齐必须是硬对齐，不做居中柔化。

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #000000
• background: #ffffff
• border: #000000
• accent: #ff006e
• hoverFill: #ccff00
• secondaryPanel: #f4f4f4

EXAMPLE COMPONENT PROMPTS:

1. 做一个主按钮：白底、2px 纯黑描边、直角、box-shadow 4px 4px 0 0 #000。文字 12px 等宽、700、全大写、字距 0.12em，padding 12px 24px。hover 时 box-shadow 变 10px 10px 0 0 #000，transform 位移 -4px -4px，背景切到 #ccff00，transition 150ms ease-out。active 时 transform 位移 6px 6px，box-shadow 变 none。
2. 做一个卡片网格：三列，间距 32px。每张卡白底、2px 纯黑描边、直角、8px 硬阴影，内边距 24px，内部依次是 12px 全大写等宽标签（墨黑底白字）、32px 900 字重标题、14px 等宽正文。hover 时卡片位移 -4px -4px，阴影变 10px。

Similar Brands

• Gumroad — 同样的黑框硬阴影与彩色强调，交互也是硬切而非渐变
• Figma Config — 用等宽标签与粗描边图形堆出印刷海报式的版面

Quick Start

:root {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-hot-pink: #ff006e;
  --color-acid-lime: #ccff00;
  --color-electric-cyan: #00d9ff;
  --color-tangerine: #ff9500;

  /* Typography — Font Families */
  --font-sans: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'mono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 72px;
  --leading-display: 0.95;
  --tracking-display: -0.02em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.02em;
  --text-heading: 32px;
  --leading-heading: 1.1;
  --tracking-heading: -0.01em;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --text-body: 16px;
  --leading-body: 1.6;
  --text-body-sm: 14px;
  --leading-body-sm: 1.6;
  --text-label: 12px;
  --leading-label: 1.4;
  --tracking-label: 0.12em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 16px;
  --density: compact;

  /* Border Radius */
  --radius-cards: 0;
  --radius-buttons: 0;
  --radius-inputs: 0;
  --radius-badges: 0;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-slab: #f4f4f4;
}