# Design System: Brutalism 粗獷主義

> Direction from TypeUI's Brutalism design skill（typeui.sh）；本實作與配色細節為原創撰寫。
>
> 承襲 1950 年代建築粗獷主義（Béton Brut）— 裸露混凝土、結構誠實、拒絕修飾；配色走陶土＋赭石的大地礦物語言，與「新粗獷主義」（neobrutal-pop 的高飽和糖果色塊）是不同支系，這裡沒有彩虹色炸彈，只有材料本身的顏色。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A building that refuses to hide its bones. 1950 年代建築粗獷主義相信結構本身就是裝飾——柱子不包板、管線不藏、模板痕跡留在混凝土表面。這套系統把同一套信念搬進介面：邊框粗到看得見、轉角是直角不是圓角、色彩來自燒製陶土與砂岩礦物而非印刷原色、字重從髮絲細跳到近乎實心黑，跳躍本身就是層級。沒有柔和陰影假裝元件懸浮，沒有漸層假裝深度，沒有 easing 曲線假裝動作是自然發生的——一切變化都是立即、可見、誠實的。

**Atmosphere Keywords:** Raw, Structural, Honest, Monolithic, Confrontational, Material, Grounded, Unapologetic

**Visual Anchors:**
- 3–4px 純黑粗框套在每一個容器上，邊框即結構線，不是裝飾線
- 零圓角（`border-radius: 0`）——矩形就是矩形，沒有任何角落被磨圓
- 陶土紅 + 赭石黃雙主色，來自燒製黏土與氧化鐵，不是印刷原色盤
- Darker Grotesque 100→900 極端字重跨度，同一頁面內粗黑標題與纖細內文並置
- 硬位移陰影（`Npx Npx 0 #000`）或純疊層，零模糊、零透明度
- 無 easing 曲線的即時狀態切換——hover/press 是瞬間發生，不是滑順過場

**Mood Board References:**
- Béton Brut 建築（Le Corbusier 廊香教堂、Barbican Centre 清水混凝土量體）
- 工業級標示系統與模板編號印記
- 未拋光石材、生鐵、氧化銅的材料表面
- 早期網頁的粗黑框表格與等寬字排版（作為「結構誠實」的數位對照）

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟠 | Terracotta 陶土紅 | `#DD614C` | Primary — actions, links, active states, "燒製黏土" |
| 🟡 | Ochre 赭石黃 | `#DAA144` | Secondary — supporting accents, emphasis, "磚石與砂岩" |
| ⬛ | Ink Black 印墨黑 | `#111827` | Text — headings, body, borders, hard shadows, near-black 高對比無妥協 |
| ⬜ | Raw White 生白 | `#FFFFFF` | Surface — cards, panels, "未上漆混凝土" |
| ⚪ | Concrete Gray 混凝土灰 | `#78716C` | Muted — dividers, secondary text, disabled state |
| ◽ | Concrete Light 淺混凝土 | `#E7E5E1` | Alt Surface — 次要面板底、表格斑馬紋、輸入框底 |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#16A34A` | 確認框、通過狀態 — 依然搭配粗框，不因語意色而破例 |
| Warning 警告 | `#D97706` | 注意事項、待處理標籤 |
| Danger 危險 | `#DC2626` | 刪除確認、錯誤訊息、必要欄位 |

**Rule：只有兩個裝飾色（terracotta、ochre）。** 這不是調色盤任選的系統——語意色只在真正表達成功/警告/危險時出現，不作裝飾。與 neobrutal-pop 六色高飽和色塊系統的差異在此：那裡色彩是狂歡道具，這裡色彩是材料標示。

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas 畫布 | `#FFFFFF` | — | 頁面底色，未經修飾的生白 |
| Surface 卡面 | `#FFFFFF` 或 `#E7E5E1` | `3px solid #111827` | 卡片、面板、輸入框 |
| Resting 靜止 | 同上 | `6px 6px 0 #111827` | 預設硬陰影，元件貼地 |
| Hover 抬升 | 同上 | `10px 10px 0 #111827` + `translate(-4px,-4px)` | 立即抬升，無 easing |
| Overlay 遮罩 | `rgba(17,24,39,0.9)` | — | Modal / Lightbox 底，接近全黑不透光 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Darker Grotesque', 'Noto Sans TC', sans-serif | 全站唯一字型 — 靠極端字重範圍（100–900）本身撐出層級，不靠換字型 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、hex 色碼、數值標籤、材料編號 |

**Pairing logic：** Darker Grotesque 是這套系統的唯一主張——同一個字族從 100（髮絲細）到 900（近乎實心黑）都存在，讓「巨大黑體標題 + 纖細灰體內文」並置在同一畫面時，反差本身就是視覺語言，不需要第二個字族來製造對比。中文字重跟隨最接近的英文字重級距（用 Noto Sans TC 對應 300/500/700/900），避免中文因缺乏對應細字重而破壞跳階感。

### Weight Usage

| Weight | Token | Use |
|--------|-------|-----|
| 100 | Hairline | Hero 標語旁的極細裝飾字、材料標籤的次要說明 |
| 200–300 | Thin | 內文本文、說明文字、caption——刻意纖細以對比標題的暴力粗重 |
| 500 | Medium | UI 標籤、按鈕次要文字、表格內容 |
| 700 | Bold | H3、強調文字、按鈕主要文字 |
| 900 | Black | H1/H2、Hero 標語、數字統計、品牌字——系統的視覺重拳 |

### Type Scale

| Element | Size (Desktop) | Weight | Note |
|---------|----------------|--------|------|
| Hero H1 | `clamp(3rem, 9vw, 6.5rem)` | 900 | line-height 0.9，字距 `-0.02em`，desktop-first 超大字級 |
| H2 | `clamp(2rem, 5vw, 3.5rem)` | 900 | line-height 0.95 |
| H3 | 1.75rem | 700 | line-height 1.1，全大寫可選 |
| Body | 18px | 300 | line-height 1.6 — 細字重需要較寬行高維持可讀性 |
| Caption / Label | 0.85rem | 500，全大寫 | 字距 `0.04em` |
| Mono / Code | 0.9rem | 400 (JetBrains Mono) | 色碼、材料編號、數值 |

### Link Style

- 連結色 `#DD614C`（terracotta），`3px` 底線實線，不用漸淡或虛線
- Hover：底線變 `#DAA144`（ochre）+ 背景瞬間填色 `#111827`／反白字——切換無過場，立即發生

---

## 4. Component Stylings

### 結構 Token（系統核心）

```css
--border-hard: 3px solid #111827;
--border-thick: 4px solid #111827;
--shadow-resting: 6px 6px 0 #111827;
--shadow-hover: 10px 10px 0 #111827;
--shadow-pressed: 3px 3px 0 #111827;
--radius: 0;   /* 全站唯一圓角值 — 零 */
```

規則：`border-radius` 全站鎖定 `0`，沒有例外（含按鈕、輸入框、圖片裁切）。陰影一律純色硬位移，零模糊、零透明度。

### Buttons

```css
.br-btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: var(--border-hard);
  border-radius: 0;
  box-shadow: var(--shadow-resting);
  padding: 0.85rem 2rem;
  background: #DD614C;
  color: #FFFFFF;
  cursor: pointer;
  transition: none; /* 無 easing — 狀態切換即時發生 */
}
.br-btn:hover  { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover); }
.br-btn:active { transform: translate(3px,3px);  box-shadow: var(--shadow-pressed); }
.br-btn.secondary { background: #DAA144; }
.br-btn:disabled {
  background: #E7E5E1; color: #78716C;
  box-shadow: none; border-color: #78716C; cursor: not-allowed;
}
```

### Cards

- 白底或淺混凝土底 + `3px solid #111827` + `border-radius: 0`，padding 2rem
- Resting：`6px 6px 0 #111827`；Hover：陰影加倍至 `10px 10px 0` + `translate(-4px,-4px)`——無 transition curve，`transition-timing-function: step-end` 或直接無 transition，切換是瞬間
- 卡片絕不旋轉、絕不錯位——結構誠實不允許「假裝隨手貼上去」的裝飾姿態，這也是與 neobrutal-pop 貼紙式錯位美學的關鍵區隔

### Tags / Badges

```css
.br-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 2px solid #111827;
  border-radius: 0;
  background: #E7E5E1;
}
.br-tag.primary   { background: #DD614C; color: #FFFFFF; }
.br-tag.secondary { background: #DAA144; color: #111827; }
```

方形標籤，零圓角，零旋轉——像材料倉庫的編號牌，不是貼紙。

### Inputs

- 白底 + `3px solid #111827` + `border-radius: 0`，focus 時邊框變 `#DD614C` 且瞬間加粗至 `4px`（無漸變）
- placeholder 用 300 weight 灰字，輸入文字用 500 weight 黑字——同一輸入框內也保留字重反差

---

## 5. Layout Principles

- **Base unit：4px**，Scale：`4 / 8 / 12 / 16 / 24 / 32`——密集區域用小跳階（4/8/12），需要「刻意突兀」的分隔用大跳階（直接從 8 跳到 32），拒絕漸進式間距曲線
- **剛性網格**：CSS Grid 固定欄數，不用 `auto-fit` 製造流動錯覺；欄與欄之間用 `4px` 或 `8px` 純黑分隔線，不是留白
- **容器**：`max-width: 1200px`，padding `32px`（mobile `16px`）
- **緊密 vs 寬闊的反差**：同一頁面內某些區塊（如資料列表）用 `4px/8px` 極致密集排版，緊接著下一區塊（如 Hero 或分節標題）跳到 `32px` 以上的留白——跳階本身要讓人感覺唐突而非漸層過渡
- **分節分隔**：section 之間用整條 `4px` 純黑分隔線，不用漸層淡出或陰影過渡
- **Sticky header**：白底 + 底部 `4px` 黑線，零模糊陰影、零毛玻璃

---

## 6. Depth & Elevation

**零模糊陰影，零漸層。** 深度語言只有「硬位移色塊堆疊」與「粗框分層」兩種手段，沒有第三種：

| State | Shadow | Transform | Note |
|-------|--------|-----------|------|
| Resting 靜止 | `6px 6px 0 #111827` | none | 預設狀態，元件貼在畫布上 |
| Hover 抬升 | `10px 10px 0 #111827` | `translate(-4px,-4px)` | 陰影加倍，瞬間跳變，無 easing 曲線 |
| Pressed 按下 | `3px 3px 0 #111827` | `translate(3px,3px)` | 陰影縮短，瞬間跳變 |
| Disabled 停用 | none | none | 完全去陰影去邊框強調，扁平即失能 |

**允許的 motion 只有 `transform` 位移**，且過場時間極短（0–0.08s）或完全 `transition: none`——粗獷主義不承認「優雅的動作」，狀態變化必須讓人感覺是「發生了」，不是「滑過去了」。禁止 `ease`/`ease-in-out`/任何貝茲曲線；若必須有過場，只用 `linear` 或 `step-end`。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個可視容器一律 3–4px 純黑粗框——這是系統唯一不能省略的筆觸
- `border-radius` 全站鎖定 0，沒有例外
- 陰影一律純色硬位移，數值取整數 px
- 同一頁面內並置 900 weight 標題與 200–300 weight 內文，反差即層級
- 狀態切換（hover/press/focus）瞬間發生，`transition: none` 或極短 `linear`
- 只用陶土紅＋赭石黃兩個裝飾色，語意色（成功/警告/危險）僅在真正表達語意時出現

### Don'ts ❌

- ❌ 任何 `border-radius > 0`（含按鈕、卡片、輸入框、圖片）— 立即背叛「結構誠實」
- ❌ 模糊陰影（`box-shadow` 帶 blur radius）或 `rgba` 透明陰影 — 深度語言只信任硬位移
- ❌ 任何漸層背景（`linear-gradient`/`radial-gradient` 作為裝飾底）— 混凝土不會漸層
- ❌ `ease`/`ease-in-out`/貝茲曲線 easing — 狀態改變必須是瞬間，不是滑順過場
- ❌ 高飽和彩虹色塊或六色以上裝飾色盤（那是 neobrutal-pop 的語言，不是這裡的）— 這裡只有材料色：陶土、赭石、混凝土灰、印墨黑
- ❌ 元件旋轉、貼紙式錯位、手繪不對稱 — 粗獷主義的誠實不需要裝可愛
- ❌ 玻璃擬態、毛玻璃模糊背景 — 混凝土是不透明的實體

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 剛性網格全展開；Hero 標題最大字級 `6.5rem`；卡片牆 3–4 欄 |
| 768–1023px | 卡片牆 2 欄；Hero 標題降至 `clamp(2.5rem,7vw,4rem)`；容器 padding 縮至 24px |
| ≤767px | 卡片牆 1 欄；按鈕全寬；Hero 標題降至 `clamp(2rem,10vw,2.75rem)`；硬陰影位移統一縮至 `4px 4px 0` 避免小螢幕溢出 |
| ≤480px | 邊框寬度從 3–4px 降至 2–3px 維持觸控區域比例；container padding 16px；資訊密集表格改為堆疊卡片 |

Desktop-first：這套系統從超大字級與寬闊留白出發，向下收斂到手機時字級與陰影位移同步縮小，但邊框與零圓角規則在任何尺寸都不妥協。

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示：

```
Create a page in the "Brutalism 粗獷主義" style — 1950s architectural
brutalism translated to interface design:

- Canvas: raw white #FFFFFF, no texture, no gradient
- Every visible container: 3-4px solid #111827 (near-black) border,
  border-radius: 0 — ZERO exceptions, no rounded corners anywhere
- Shadows: hard offset only, ZERO blur, ZERO transparency —
  `box-shadow: 6px 6px 0 #111827` (resting), `10px 10px 0 #111827` +
  translate(-4px,-4px) on hover, `3px 3px 0 #111827` + translate(3px,3px)
  on press. Transitions are instant or linear — never ease/ease-in-out.
- Color palette (only two decorative colors — do NOT add more):
  Terracotta #DD614C (primary), Ochre #DAA144 (secondary),
  plus Success #16A34A / Warning #D97706 / Danger #DC2626 for semantic
  states only, Concrete Gray #78716C for dividers/muted text,
  Concrete Light #E7E5E1 for alt surfaces.
- Fonts: 'Darker Grotesque' for ALL text — use the extreme weight range
  (100 hairline to 900 black) as the hierarchy device: huge 900-weight
  headings (clamp(3rem,9vw,6.5rem), line-height 0.9) directly next to
  thin 200-300 weight body text (18px, line-height 1.6). 'JetBrains Mono'
  for code/hex values/data labels.
- Spacing: 4px base unit, scale 4/8/12/16/24/32. Use abrupt jumps
  (8px straight to 32px) between dense and open zones — no gradual
  progression.
- Never: border-radius on anything, blurred/soft shadows, gradients,
  glassmorphism, easing curves, element rotation or sticker-style
  misalignment, rainbow/high-saturation color-bombing (that is a
  different lineage — neo-brutalist pop, not this).
- Every state change (hover/press/focus) must feel immediate and
  visible, never smooth — that immediacy IS the design philosophy.
```

---

*Direction: typeui.sh — Brutalism. Implementation and palette are original.*