# Design System: Neobrutal Pop

> 新粗獷主義 — 高飽和色塊、純黑粗框、零模糊硬陰影、貼紙式排版。拒絕柔和、拒絕漸層、拒絕「安全」的設計語言，把 90 年代 zine 文化與 indie SaaS 的自信搬進網頁。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Neobrutalism treats the browser like a photocopier, not a canvas. Nothing is soft, nothing is subtle, nothing apologizes for being loud. Every element is a solid color block wrapped in a thick black outline, stacked with a hard offset shadow that never blurs — the shadow is a second flat shape, not a lighting effect. The layout deliberately breaks the polite grid: blocks overlap, badges sit crooked, headlines crash into the frame edge. This is not sloppiness — it is a controlled, repeatable system of intentional misalignment that reads as confident rather than broken.

**Atmosphere Keywords:** Loud, Raw, Confident, Analog-digital, Sticker-culture, Undesigned-on-purpose, High-contrast, DIY

**Visual Anchors:**
- 純黑 3–4px 邊框套在每一個可視元件上 — 沒有例外，這是系統的統一筆觸
- 零模糊硬位移陰影（`Npx Npx 0 #000`）— 深度語言只有「疊起來的紙板」一種
- 高飽和原色色塊當背景（黃/粉/青/萊姆/紫/橙）
- 貼紙式元件：小角度旋轉（±2°~6°）、堆疊、鋸齒/膠囊徽章
- 巨大 Archivo Black 展示字，字重死重、字距收緊
- 刻意錯位的網格 — 卡片、標籤故意不對齊基準線，當作特徵而非瑕疵

**Mood Board References:**
- Gumroad 早期首頁與 indie SaaS 登陸頁的粗獷風復興
- Zine / 龐克海報排版（拼貼、貼紙、膠帶感）
- Figma community 的 neobrutalism UI kit 熱潮（2023–2026）
- 街頭塗鴉海報的高對比原色印刷

---

## 2. Color Palette & Roles

### Core Palette（六色原創高飽和色）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟡 | Riot Yellow 暴走黃 | `#FFE500` | Primary — hero 背景、主要 CTA、最高強調 |
| 🩷 | Punch Pink 拳擊粉 | `#FF3EA5` | Secondary — 徽章、次要 CTA、貼紙強調 |
| 🔵 | Volt Cyan 伏特青 | `#00E5FF` | Info — 連結、資訊標籤、卡片邊角點綴 |
| 🟢 | Turbo Lime 渦輪萊姆 | `#B4FF39` | Success / 標籤 — 完成狀態、正向徽章 |
| 🟣 | Riot Violet 暴走紫 | `#8C1EFF` | Tertiary — 裝飾色塊、特殊徽章 |
| 🟠 | Blaze Orange 烈焰橙 | `#FF5C00` | Warning / Danger — 警示、限時標籤 |

**Rule:** 原色只用色塊、邊框內填色、徽章底色，絕不做細字文字色（對比不足）；深色文字一律疊在原色塊上，不用原色本身當字色。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Ink Black 純黑字 | `#0D0D0D` | 標題、正文、所有邊框、硬陰影 |
| Text Muted 次要字 | `#3A3A3A` | caption、輔助說明（絕不用灰階漸淡到低對比） |
| Text Inverse 反白字 | `#FFFDF7` | 深底（如 Riot Violet、Ink Black 背景）上的文字 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Turbo Lime | `#B4FF39` | 完成徽章、確認狀態 |
| Warning 警告 | Blaze Orange | `#FF5C00` | 限時、注意事項 |
| Danger 危險 | `#FF1744` | 錯誤、刪除確認（獨立於裝飾色盤，避免語意混淆） |
| Info 資訊 | Volt Cyan | `#00E5FF` | 提示框、次要連結 |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas 畫布 | `#FFFDF7`（微暖白，非冷白） | — | 頁面底色 |
| Surface 卡面 | `#FFFFFF` 或任一原色塊 | `4px solid #0D0D0D` | 卡片、按鈕、徽章 |
| Resting 靜止 | 同上 | `4px 4px 0 #0D0D0D` | 預設硬陰影 |
| Hover 抬升 | 同上 | `8px 8px 0 #0D0D0D` + `translate(-2px,-2px)` | 互動反饋 |
| Pressed 按下 | 同上 | `2px 2px 0 #0D0D0D` + `translate(2px,2px)` | 點擊瞬間 |
| Overlay 遮罩 | `rgba(13,13,13,0.85)` | — | Modal / Lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Archivo Black', 'Noto Sans TC', sans-serif | 展示字 — H1/H2、hero 標語、超大數字 |
| `--font-body` | 'Space Grotesk', 'Noto Sans TC', sans-serif | 正文、UI 標籤、按鈕、表格 |
| `--font-mono` | 'Space Mono', 'JetBrains Mono', monospace | 色碼、標籤數值、technical caption |

**Pairing logic:** Archivo Black 的死重字重負責「這是一記重拳」的第一印象；Space Grotesk 幾何感的中等字重扛住長內容的可讀性，兩者字寬對比明顯，堆疊時視覺落差本身就是層級。中文一律搭配 Noto Sans TC 粗體維持同等視覺重量，不用細字重中文夾在粗獷英文標題裡。

### Type Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero H1 | `clamp(2.8rem, 8vw, 5.5rem)` | display | 400（本身即最重字重） | line-height 0.95，字距 `-0.02em` |
| H2 | 2.5rem | display | 400 | line-height 1.0 |
| H3 | 1.5rem | body | 700 | 全大寫，字距 `0.02em` |
| Body | 17px（mobile 16px） | body | 500 | line-height 1.6 |
| Label / Tag | 0.85rem | body | 700 | 全大寫 |
| Mono / Code | 0.9rem | mono | 400 | 色碼、hex 值 |

### Link / Hover Style

- 連結：`background: var(--riot-yellow); border: 2px solid #0D0D0D; padding: 0 4px;` — 連結本身就是一塊迷你貼紙，不用底線
- Hover：`transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #0D0D0D;` — 抬升即回饋，不用顏色漸變過場

---

## 4. Component Stylings

### 硬陰影 Token（系統核心）

```css
--border-hard: 4px solid #0D0D0D;
--shadow-resting: 4px 4px 0 #0D0D0D;
--shadow-hover: 8px 8px 0 #0D0D0D;
--shadow-pressed: 2px 2px 0 #0D0D0D;
--radius-sharp: 4px;   /* 唯一允許的圓角，僅用於小型徽章邊緣防割手 */
--radius-pill: 999px;  /* 例外：pill 形狀徽章 */
```

規則：所有陰影一律無模糊、無透明度、純色偏移；`border-radius` 除 pill 徽章外一律 ≤4px，卡片與按鈕近乎直角。

### Cards

```css
.nb-card {
  background: #FFFFFF;
  border: var(--border-hard);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-resting);
  padding: 1.75rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nb-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hover);
}
```

卡片牆刻意讓奇數卡片 `rotate(-1.5deg)`、偶數卡片 `rotate(1deg)`，製造「隨手貼上去」的錯位感。

### Buttons

```css
.nb-btn {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  border: var(--border-hard);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-resting);
  padding: 0.75rem 1.75rem;
  background: var(--riot-yellow);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.nb-btn:hover  { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); }
.nb-btn:active { transform: translate(2px,2px);  box-shadow: var(--shadow-pressed); }
.nb-btn:disabled {
  background: #E0E0E0; color: #9A9A9A;
  box-shadow: none; transform: none; cursor: not-allowed;
}
```

Primary 用 Riot Yellow 底，Secondary 用白底黑框，Danger 用 `#FF1744` 底 + 反白字。

### Tags / Badges / Stickers

```css
.nb-sticker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border: 3px solid #0D0D0D;
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 #0D0D0D;
  transform: rotate(-3deg);
}
```

貼紙式徽章交錯正負旋轉角度（-6°~+6°），永遠保留黑框 + 硬陰影；數字徽章例外用 `--radius-sharp` 方形而非圓形，強化「印章」感。

### 招牌硬陰影處理（Signature Treatment）

系統的唯一視覺語言就是「純色塊 + 黑框 + 純色硬陰影」三件套，資陰影永遠是與邊框同色（純黑），永遠整數 px，永遠 0 模糊：

```css
box-shadow: 6px 6px 0 #0D0D0D; /* 標準 */
box-shadow: 4px 4px 0 #0D0D0D; /* 密集區域用較短位移 */
box-shadow: 10px 10px 0 #0D0D0D; /* Hero 級大型元件 */
```

---

## 5. Layout Principles

- **容器**：`max-width: 1180px`，兩側 padding 24px（mobile 16px）— 比古典系統寬，因為色塊需要呼吸空間才不會糊成一片
- **網格**：主要用 12 欄 CSS Grid，但元件刻意「溢出」欄位 4–8px 或輕微旋轉，破壞絕對對齊感——這是系統性作法，不是隨機：每個溢出值鎖定在 `{-8px, -4px, 4px, 8px}` 集合內，確保「亂中有序」
- **間距**：區塊間距一律用 `3rem` / `4rem` 大跳階，不用 8px 微調系統的漸進間距——粗獷風需要塊狀留白而非精緻節奏
- **卡片牆**：`repeat(auto-fit, minmax(260px, 1fr))`，gap `1.5rem`；奇偶卡片交錯旋轉角度製造貼紙感
- **色塊背景分區**：不同 section 直接切換整段背景色（黃→白→青→紫），用黑色 4px 分隔線而非漸層過渡
- **Sticky header**：純白底 + 底部 4px 黑線，無陰影模糊、無毛玻璃

---

## 6. Depth & Elevation

**絕不使用模糊陰影（NO blur shadows, ever）。** 這個系統的深度只有一種語言：硬位移色塊堆疊，像把厚紙板一層層貼上去。

| State | Shadow | Transform | Note |
|-------|--------|-----------|------|
| Resting 靜止 | `4px 4px 0 #0D0D0D` | none | 預設狀態，元件貼地 |
| Hover 抬升 | `8px 8px 0 #0D0D0D` | `translate(-4px, -4px)` | 陰影加倍 + 元件反向位移，製造「浮起」錯覺 |
| Pressed 按下 | `2px 2px 0 #0D0D0D` | `translate(2px, 2px)` | 陰影縮短 + 元件順向位移，製造「壓下」錯覺 |
| Disabled 停用 | none | none | 完全去陰影去邊框強調，扁平即失能 |

Motion 統一 `transform + box-shadow` 於 0.08–0.12s linear/ease，**不用** opacity 淡入淡出或 blur 轉場——粗獷風的動效必須乾脆，不能柔滑。

---

## 7. Do's and Don'ts

### Do's ✅

- 每一個可視容器都套 3–4px 純黑邊框 — 這是系統唯一不能省略的筆觸
- 陰影永遠是純色硬位移（`Npx Npx 0 #000`），數值取整數
- 用高飽和原色做整塊背景分區，色塊之間用黑線分隔而非漸變
- 貼紙/徽章元件給 ±2°~6° 的小角度旋轉，製造手貼感
- 展示字用死重字重（Archivo Black），字距收緊、行高壓縮到接近 1

### Don'ts ❌

- ❌ 任何模糊陰影（`box-shadow` 帶 blur radius 或 `rgba` 透明度）— 立即破壞硬陰影語言
- ❌ 漸層背景、玻璃擬態（glassmorphism）、柔和過場動畫
- ❌ `border-radius` 超過 8px（pill 形狀徽章除外）— 大圓角是另一個世界的語言
- ❌ 低飽和莫蘭迪色、灰階漸層當主色 — 這個系統只信任滿飽和原色
- ❌ 細字重（<500）用在標題或按鈕文字 — 粗獷風不允許纖細字重
- ❌ 元件完全對齊網格線、零旋轉零錯位 — 「太整齊」等於背叛系統精神

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 12 欄網格全展開；卡片牆 3–4 欄；Hero 標題最大字級 |
| 768–1023px | 卡片牆 2 欄；容器 padding 縮至 20px；貼紙旋轉角度減半避免擁擠 |
| ≤767px | 卡片牆 1 欄；按鈕全寬；Hero 字級降至 `clamp(2.2rem,10vw,3rem)`；硬陰影位移統一縮到 `3px 3px 0` 避免小螢幕溢出 |
| ≤480px | 貼紙徽章取消旋轉（`rotate(0)`）防止觸控誤觸區域跑版；container padding 14px |

---

## 9. Agent Prompt Guide

```
Create a page in the "Neobrutal Pop" style — high-saturation neobrutalism:

- Canvas background: warm off-white #FFFDF7 (never cold white, never gray)
- Every visible container: 3-4px solid #0D0D0D (near-black) border,
  border-radius 4px max (except pill-shaped badges = 999px)
- Shadows: hard offset only, ZERO blur radius, ZERO transparency —
  `box-shadow: 6px 6px 0 #0D0D0D` (resting), `8px 8px 0 #0D0D0D` + translate(-4px,-4px) on hover,
  `2px 2px 0 #0D0D0D` + translate(2px,2px) on press. Never use rgba or blurred shadows.
- Color palette (pick from these 6 punchy originals, used as solid background
  blocks, never as fine text color):
  Riot Yellow #FFE500, Punch Pink #FF3EA5, Volt Cyan #00E5FF,
  Turbo Lime #B4FF39, Riot Violet #8C1EFF, Blaze Orange #FF5C00
- Text: ink black #0D0D0D on light/color surfaces, off-white #FFFDF7 on dark surfaces
- Fonts: 'Archivo Black' for display headings (line-height ~0.95, tight tracking),
  'Space Grotesk' 500-700 for body/UI/buttons (uppercase labels), 'Space Mono' for
  code/hex values. Load via Google Fonts.
- Buttons/cards/badges: sticker-like — rotate small components ±2deg to 6deg,
  keep the black border + hard shadow on every one
- Layout: deliberately break perfect grid alignment — offset elements by
  -8px/-4px/4px/8px from the grid line as a controlled, repeatable pattern,
  not randomness. Large spacing jumps (3rem/4rem) between sections, each
  section can switch to a full flat color background separated by a 4px
  black rule (no gradient transitions).
- Never: blurred/soft shadows, gradients, glassmorphism, border-radius >8px
  on cards/buttons, thin font weights on headings, perfectly aligned grids.
```

---

*Original design system created for Design Lab, 2026*