柔和野兽派

柔和野兽派 — 风格参考

骨架仍是硬阴影与零圆角，但换成灰边、灰影与粉彩色。

Theme: light

柔和野兽派保留了野兽派的骨架：零圆角、硬偏移阴影、按下时位移等于偏移并归零。但它把三个最刺眼的参数降了一档——边框从 4px 纯黑降到 2px gray-800，阴影从纯黑降到 20% 的黑，配色从霓虹换成粉彩（pink-400 而非 #ff006e）。结果是一套可以放进企业产品里的野兽派：仍然有物理感，但不再喊叫。底色也从纯白退到浅灰。

Colors

Typography

Inter — 全站唯一字体，500 到 800 三档。标题 800 但不全大写，这是与硬核野兽派的分界。

• Substitute: system-ui, -apple-system, 'Segoe UI', sans-serif
• Weights: 500, 700, 800
• Sizes: 13, 15, 18, 24, 32, 44
• Line height: 1.1 (display), 1.2 (headings), 1.55 (body)
• Letter spacing: -0.02em on display, 0.04em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Border Radius

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

Components

Soft Block Button

Role: 主行动按钮

白底、深灰文字、2px gray-800 描边、零圆角、4px 灰色硬阴影（黑 20%），15px/700、padding 12px 24px。hover 时填充换成柔粉、文字转白、阴影扩到 6px，不上浮也不过量位移；按下时位移 4px 4px 且阴影归零。过渡 150ms ease-out。

• Sizes: padding 12px 24px; label 15px
• States: hover: pink fill, shadow 6px; active: translate 4px, shadow none

Soft Brutal Card

Role: 内容卡与功能卡

白底、2px gray-800 描边、零圆角、内边距 24px、4px 灰色硬阴影。标题 24px/700 深灰，正文 15px/500 灰 60%。hover 时上浮 2px、阴影扩到 6px、描边转柔粉。过渡 150ms。

Quiet Input

Role: 表单输入

白底、2px gray-800 描边、零圆角、padding 10px 14px、15px 字。聚焦时描边转天蓝并加 4px 的灰硬阴影，不改变盒子尺寸。

Pastel Tag

Role: 标签与状态

粉彩填充（柔粉、青柠、天蓝或琥珀之一，取 15% 透明度作底）、零圆角、2px gray-800 描边、13px/700、padding 2px 8px。文字用深灰，不用白色。

Do's and Don'ts

Do

• 2px gray-800 边框，不用纯黑
• 阴影用 20% 黑而不是实色
• 粉彩强调，每屏不超过两种
• 保持零圆角与硬偏移阴影
• 浅灰底，不用纯白
• 过渡 150ms，短促

Don't

• 不要用圆角
• 不要用纯黑边框
• 不要用高饱和纯色
• 不要用纯黑背景
• 不要用渐变
• 不要用模糊阴影

Surfaces

Elevation

• Soft hard shadow: 4px 4px 0 rgba(0,0,0,0.20)
• Hover: 6px 6px 0 rgba(0,0,0,0.24)
• Pressed: none

Imagery

几何图形与粗描边图标。允许把照片处理成粉彩双色调后加 2px 描边。不使用柔和渐变的摄影与装饰插画。

Layout

上限 1120px、容器内边距 24px，区块间距 80px。允许元素轻微错位 4px 制造手工感，但不做旋转。卡片垂直错落 8px，整体保持整齐。

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #1a1a1a
• background: #f5f5f5
• card: #ffffff
• pink: #f472b6
• sky: #38bdf8
• border: #262626

EXAMPLE COMPONENT PROMPTS:

1. 做一个柔和野兽派按钮：白底、#1a1a1a 文字、2px solid #262626 边框、border-radius 0、700 字重 15px、padding 12px 24px、box-shadow 4px 4px 0 rgba(0,0,0,0.2)。hover 时背景 #f472b6、文字白色、阴影扩到 6px 6px 0 rgba(0,0,0,0.24)。active 时 translate(4px,4px) 且阴影 none。transition 150ms ease-out。页面底色 #f5f5f5。

Similar Brands

• Neo-Brutalist — 同一骨架，但硬核版用 4px 纯黑边与霓虹强调
• Corporate Clean — 同样克制的商用语言，但柔和野兽派保留硬阴影与零圆角

Quick Start

:root {
  /* Colors */
  --color-deep-grey: #1a1a1a;
  --color-light-ground: #f5f5f5;
  --color-card-white: #ffffff;
  --color-soft-pink: #f472b6;
  --color-lime: #a3e635;
  --color-sky: #38bdf8;
  --color-amber: #fbbf24;

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

  /* Typography — Scale */
  --text-display: 44px;
  --leading-display: 1.1;
  --tracking-display: -0.02em;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-body: 15px;
  --leading-body: 1.55;
  --text-label: 13px;
  --leading-label: 1.4;
  --tracking-label: 0.04em;

  /* Typography — Weights */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 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: 1120px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 16px;
  --density: comfortable;

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

  /* Surfaces */
  --surface-light-ground: #f5f5f5;
  --surface-card-white: #ffffff;
}