# Design System: Dramatic Light

> 戲劇光影設計系統 — 一束聚光燈打在近乎全黑的舞台上：強烈明暗對比、電影海報式的失衡構圖、只用一種深金色說話。整個系統的邏輯是「光決定一切」——不是加陰影做深度，是用光的強弱做深度。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Everything on this page is lit by a single, unforgiving key light against near-total darkness. There is no ambient fill — surfaces exist only where light reaches them, and everything else recedes into the void. The composition borrows from film-festival posters and theatre programs: an oversized, off-center headline; a tiny italic tagline doing the emotional work; huge negative space that makes the one accent color feel expensive instead of loud. This is a system for content that wants to be taken seriously — premieres, prestige case studies, keynote title cards — not for cheerful product UI.

**Atmosphere Keywords:** Cinematic, Noir, Prestige, Austere, Theatrical, High-contrast, Restrained, Nocturnal

**Visual Anchors:**
- Near-black canvas（`#0A0A0C`）with radial spotlight gradients as the only light source
- One accent color used consistently: deep gold（`#C9A227`）— never introduce a second hue
- Oversized condensed display type for hero headlines, set off-center, never centered-and-safe
- Hairline gold borders（1px, low opacity）instead of filled color blocks
- Vignette falloff on every large surface — corners darken toward the void
- Monospace "credit block" typography for fine print, borrowed from movie-poster bottom text

**Mood Board References:**
- 電影節主視覺海報（festival key art）與舞台劇節目冊
- Film noir 打光邏輯：single key light, deep shadow, no fill
- 劇場售票網站的「開演倒數」視覺
- 老式電影開場字卡（title card）的置中留白邏輯，但刻意打破置中

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬛ | Void Black 虛空黑 | `#0A0A0C` | Canvas — page background, the absence of light |
| ⬛ | Stage Charcoal 舞台炭黑 | `#141416` | Surface base — header, section backgrounds, dim panels |
| 🟨 | Spotlight Gold 聚光金 | `#C9A227` | Primary accent — headlines, CTAs, key light, borders |
| 🟫 | Ember Gold 餘燼金 | `#8A6C1F` | Secondary accent — hover/pressed states, muted gold text |
| ⬜ | Ivory White 象牙白 | `#F5F1E8` | Heading text — the "lit" surface color |
| ⚪ | Ash Gray 灰燼灰 | `#9A958A` | Body text, captions — dimly lit, secondary reading |
| ▪️ | Charcoal Line 炭線灰 | `#2A2823` | Hairline borders, dividers, unlit edges |

**Rule:** 只有一種彩色（金）。不加第二種色相——不加紅、不加藍、不加綠。所有「更多顏色」的需求一律用金色的明度變化（Spotlight → Ember）或灰階解決。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Heading 標題 | `#F5F1E8` | h1–h3，"被光照到"的文字 |
| Body 正文 | `#9A958A` | 內文、說明文字 |
| Muted 弱化 | `#6B675E` | caption、時間戳、次要資訊 |
| Accent Text 強調 | `#C9A227` | 連結、標籤文字、關鍵詞 |

### Surface & Depth

| Layer | Background | Border / Glow | Use |
|-------|-----------|----------------|-----|
| Canvas | `#0A0A0C` | — | Page base，永遠是最暗的一層 |
| Stage | `#141416` | — | Header、footer、大區塊底 |
| Surface | `#1C1B1A` | `1px solid rgba(201,162,39,0.25)` | Cards、按鈕、面板 |
| Lit surface (hover) | 同上 + radial gold glow | `1px solid rgba(201,162,39,0.6)` + `0 0 32px rgba(201,162,39,0.18)` | 可互動元件的「被光照到」狀態 |
| Vignette overlay | `radial-gradient(ellipse at center, transparent 0%, #0A0A0C 90%)` | — | 大圖/hero 疊加，四角壓暗 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Bebas Neue', 'Noto Sans TC', sans-serif | Hero 巨型標題 — 電影海報式壓縮體大寫 |
| `--font-serif` | 'Playfair Display', 'Noto Serif TC', serif | h2/h3、tagline — 優雅襯線，戲劇感 |
| `--font-body` | 'Noto Serif TC', 'Playfair Display', serif | 正文 — 中英雙語襯線，維持劇場節目冊的閱讀質感 |
| `--font-mono` | 'JetBrains Mono', monospace | Credit block、hex 標籤、技術性小字 |

**Pairing logic:** Bebas Neue 的極窄大寫字負責海報的「視覺衝擊」；Playfair Display 的高對比襯線負責「這是戲劇/正式場合」；Noto Serif TC 讓中文正文延續同樣的襯線質感而非落回無襯線的日常感；JetBrains Mono 只用在片尾字卡式的技術性文字，絕不用於標題。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero h1 | `clamp(3.5rem, 10vw, 8rem)` | display | 400 | 全大寫、letter-spacing 0.02em、line-height 0.95、刻意偏移不置中 |
| h2 | `2.75rem` | serif | 700 | italic 可選，用於段落轉場 |
| h3 | `1.5rem` | serif | 600 | |
| Tagline | `1.15rem` | serif italic | 400 | letter-spacing 0.04em，色 `#9A958A` |
| Body | `1.05rem` | body | 400 | line-height 1.85 |
| Credit / mono | `0.75rem` | mono | 500 | letter-spacing 0.12em，全大寫 |

### Link Style

- 連結色 `#C9A227`，底線 `1px solid rgba(201,162,39,0.4)`，`text-underline-offset: 5px`
- Hover：文字轉 `#F5F1E8`（變亮，像被打光），底線轉實色 `#C9A227`

---

## 4. Component Stylings

### Spotlight Token（系統核心）

```css
--spotlight-cone: radial-gradient(ellipse 60% 50% at 50% 0%,
  rgba(201,162,39,0.16) 0%, rgba(201,162,39,0.04) 45%, transparent 70%);
--vignette: radial-gradient(ellipse at center,
  transparent 0%, transparent 55%, #0A0A0C 100%);
--hairline: 1px solid rgba(201,162,39,0.25);
--glow-hover: 0 0 32px rgba(201,162,39,0.18);
```

每個「舞台級」大區塊（hero、signature panel）疊兩層：`--spotlight-cone` 在上方製造光源，`--vignette` 在四角壓暗收邊。

### Cards

- 背景 `#1C1B1A` + `--hairline`，無圓角或極小圓角（2–4px）— 舞台不是圓的
- Hover：邊框轉實金 `rgba(201,162,39,0.6)` + `--glow-hover`，`translateY(-2px)`，**不加陰影**（黑底加深色陰影看不見）
- 卡內標題用 serif，內文用 ash gray body

### Buttons

| 變體 | 樣式 |
|------|------|
| Primary | 實心 `#C9A227` 底、`#0A0A0C` 文字（深色文字才在金底上可讀）、無邊框 |
| Secondary | 透明底 + `1px solid #C9A227`、文字 `#C9A227` |
| Disabled | 透明底 + `1px solid #2A2823`、文字 `#6B675E`、`cursor: not-allowed` |

Hover（primary/secondary 皆同）：`background/border` 轉 Ember Gold `#8A6C1F`，`box-shadow: 0 0 24px rgba(201,162,39,0.25)` — 光暈變亮而非位移。

### Tags / Badges

- 透明底 + `1px solid rgba(201,162,39,0.4)` 膠囊，mono 字型、全大寫、letter-spacing 0.1em
- 無語意色系統（系統只有一種彩色）— 用「填色 vs 空心」區分主次：主要標籤填 `rgba(201,162,39,0.12)` 底，次要標籤保持透明

### Signature Component — Poster Credit Block

模仿電影海報底部的製作字卡：等寬字、全大寫、置中、`letter-spacing` 拉開，以 `·` 或直線分隔角色/項目，上方一條 `1px` 金色分隔線。這是系統辨識度最高的元件 — 任何「結尾」「署名」「引用來源」都可以套用這個 pattern 取代一般 footer。

```css
.credit-block {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
  border-top: 1px solid rgba(201,162,39,0.3);
  padding-top: 1.5rem;
}
```

---

## 5. Layout Principles

- **海報式失衡構圖**：Hero 標題不置中，靠左或靠右偏移（`margin-inline: 0 auto` 或反向），留白側就是舞台的「暗場」——留白本身是設計語言，不是待填空間
- **Container**：max-width 1100px，padding 40px（mobile 20px）；hero 例外可 full-bleed 到視窗邊緣
- **垂直節奏**：section 間距 6rem（比一般系統更大）— 暗場需要更多呼吸空間才能維持戲劇性，塞太滿會變成一般的 dark mode UI
- **Grid**：卡片牆 `repeat(auto-fit, minmax(280px, 1fr))`，gap 1.5rem
- **光源一致性**：同一頁面只能有一個「主光源」方向（預設由上而下），不同 section 的 spotlight-cone 都對齊同一個消失點，避免「多顆聚光燈打架」

---

## 6. Depth & Elevation

**深色系統不能靠陰影做深度 — 深色底上的深色陰影看不見。** 這個系統改用「光的強弱」表達層次：

1. 未打光（預設）：`#141416` 底 + `--hairline` — 幾乎融入背景，代表「未被注意的元素」
2. 打光（hover / active）：邊框轉實金 + `--glow-hover` 外光暈（不是陰影，是 `box-shadow` 用金色低透明度模擬光暈，方向不重要，是散射光）
3. 聚光（hero / signature）：`--spotlight-cone` 疊加，中心亮、邊緣用 `--vignette` 壓黑收尾——這是全頁最高層級，只能用一次
4. **絕對不用**黑色陰影表達層次；`box-shadow` 一律用金色低透明度，模擬「被燈光照到才看得見輪廓」

Motion：`transition: border-color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease`——光暈的過渡比位移慢，讓「燈光漸亮」的感覺明顯於「東西在動」。

---

## 7. Do's and Don'ts

### Do's ✅

- 全站只用一種彩色（金）+ 中性灰階，需要更多層次時調金色的明度/透明度
- 大量留白（負空間）＝暗場，是构图的一部分，不是要填滿的空白
- Hero 標題刻意偏移，打破置中的安全感
- 深度一律用「光暈變亮」表達，不用黑色陰影
- 標題全大寫 + 寬字距，強化海報感

### Don'ts ❌

- ❌ 加第二種彩色（紅、藍、綠皆不行）— 系統的力量來自「只有一種光」
- ❌ 用純黑 `#000000` — 畫布是 `#0A0A0C`，太純的黑會吃掉層次
- ❌ 深色陰影做卡片浮起效果 — 在暗底上完全看不見，改用金色光暈
- ❌ 標題置中對齊 — 這是安全牌構圖，違背海報式失衡邏輯
- ❌ 圓角超過 4px — 系統走的是舞台的硬邊，不是友善的圓潤感
- ❌ 讓多個 spotlight-cone 同時出現在同一屏幕 — 會變成多顆燈打架，失去「單一光源」的戲劇性

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤1024px | 卡片牆從 3 欄降 2 欄；hero 標題 `clamp` 下限提高避免過度換行 |
| ≤768px | Hero 標題偏移量收斂為置中偏移 10%（避免手機版跑出視窗）；section 間距從 6rem 降至 3.5rem |
| ≤480px | 卡片牆 1 欄；credit block 分隔符從橫排改直排；按鈕全寬 `width: 100%` |

---

## 9. Agent Prompt Guide

```
Create a page in the "Dramatic Light" style — a cinematic, high-contrast
poster system:

- Canvas: near-black #0A0A0C. Never pure #000000.
- Surfaces: #141416 (stage) for large sections, #1C1B1A for cards/panels,
  with a 1px hairline border rgba(201,162,39,0.25).
- One accent color only: deep gold #C9A227 (primary), #8A6C1F (ember/hover
  variant). Never introduce a second hue — no red, no blue, no green.
- Text: headings #F5F1E8 (ivory), body #9A958A (ash gray), muted #6B675E,
  accent/links #C9A227.
- Fonts: 'Bebas Neue' for the hero headline (clamp(3.5rem, 10vw, 8rem),
  uppercase, letter-spacing 0.02em, line-height 0.95), 'Playfair Display'
  for h2/h3 and italic taglines, 'Noto Serif TC' for bilingual body text
  (1.05rem, line-height 1.85), 'JetBrains Mono' for fine print / credit
  blocks (0.75rem, uppercase, letter-spacing 0.15em).
- Composition: hero headline is OFF-CENTER, never centered — treat it like
  a film festival poster. Large negative space (6rem section spacing) is
  part of the design, not empty space to fill.
- Signature effect: layer a spotlight cone
  `radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,162,39,0.16) 0%,
  rgba(201,162,39,0.04) 45%, transparent 70%)` over a vignette
  `radial-gradient(ellipse at center, transparent 55%, #0A0A0C 100%)`
  on hero/showcase sections only — one spotlight per page.
- Depth rule: NEVER use black box-shadows (invisible on dark backgrounds).
  Depth = light intensity. Default state = hairline border only. Hover/
  active state = border brightens to rgba(201,162,39,0.6) + glow
  `box-shadow: 0 0 32px rgba(201,162,39,0.18)`.
- Buttons: primary = solid #C9A227 fill with #0A0A0C text (dark text on
  gold, never light text on gold). Secondary = transparent with 1px
  #C9A227 border. Corners max 4px radius — hard edges, not rounded.
- Movie-poster credit block for footers/attributions: centered monospace,
  uppercase, letter-spacing 0.15em, ash gray text, 1px gold top border.
```

---

*Original design system created for Design Lab, 2026.*