# Design System: Neon Night

> 霓虹夜設計系統 — 原創設計系統，靈感取自東京巷弄的霓虹招牌、復古電子遊樂場招牌燈與 synthwave 美學。把「深夜街角一盞剛點亮的玻璃霓虹管」搬進網頁介面。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Every element behaves like a lit glass tube bent into shape and mounted on a dark wall after closing time. The canvas is always near-black — light only exists where a component chooses to emit it. Depth is not built from blur-and-offset shadows but from *how much a surface glows*: resting elements hum quietly, active elements flare. Nothing is ever pure white or pure black; everything carries a cool violet-black undertone that makes the neon hues read as genuinely luminous rather than pasted on.

**Atmosphere Keywords:** Nocturnal, Electric, Retro-futuristic, Synthwave, Arcade-signage, Humming, After-hours, Glass-tube

**Visual Anchors:**
- Near-black canvas `#0A0A12` — light must be earned, not assumed
- Thin bright border (1–2px) + layered outer glow on every interactive surface — the "lit glass tube" signature
- Multi-stop `text-shadow` / `box-shadow` stacking (tight core + mid bloom + wide ambient halo) on all neon elements
- Display headings set in a geometric tech typeface, always glowing, never flat
- Faint background grid / scanline texture suggesting a rain-slicked night street or a CRT signage panel
- Two neon hues never touch directly — a dark gutter (canvas color) always separates them

**Mood Board References:**
- 亞洲不夜城的招牌霓虹燈巷弄
- 80 年代電子遊樂場立牌與街機大字
- Synthwave / outrun 專輯封面美學
- 玻璃霓虹燈管工藝（氬氣管、氖氣管的實體發光質感）

---

## 2. Color Palette & Roles

### Core Palette（原創霓虹六色）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🩵 | 電光青 Electric Cyan | `#00F0FF` | Primary — 主要 CTA、連結、招牌主色發光 |
| 🩷 | 霓虹洋紅 Neon Magenta | `#FF2E9A` | Secondary — 強調標籤、次要按鈕、裝飾發光 |
| 🟢 | 螢光萊姆 Neon Lime | `#C6FF3D` | Accent / Success — 上線狀態、成功回饋、招牌「OPEN」感 |
| 🟣 | 紫外光 UV Violet | `#B24BFF` | Tertiary — 卡片邊框變化色、次要裝飾發光 |
| 🟠 | 警示琥珀 Signal Amber | `#FF9F1A` | Warning — 警示文字、限定/稀有標籤 |
| 🔴 | 危險紅光 Danger Flare | `#FF3355` | Danger — 錯誤狀態、危險警示框 |

**Rule:** 每種霓虹色只用於「發光的那個東西」本身（邊框＋文字＋glow）；絕不把霓虹色當大面積填色背景使用 — 那會讓它讀成普通色塊而不是光源。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#F1F0FF` | headings, body — 帶冷紫調的近白，非純白 |
| Text Muted 次要 | `#8B89A8` | captions, meta, disabled 說明文字 |
| Text Dim 極暗 | `#4A4860` | 裝飾性極小字、版權列 |

### Surface & Depth

| Layer | Background | Border / Glow | Use |
|-------|-----------|----------------|-----|
| Canvas 畫布 | `#0A0A12` | 細網格紋（見 §5） | Page base，光必須從這裡「長出來」 |
| Surface 卡面 | `#12121C` | `1px solid rgba(0,240,255,0.35)` + outer glow | Cards, panels |
| Surface Elevated 抬升面 | `#181828` | 同上但 glow 強度加倍 | Hover / active 狀態 |
| Overlay 疊層 | `rgba(6,6,14,0.9)` | — | Modal / lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Orbitron', 'Rajdhani', sans-serif | 大標題、招牌字、按鈕文字 — 幾何科技感 |
| `--font-body` | 'Rajdhani', 'Noto Sans TC', sans-serif | 正文、UI 標籤、說明文字 — 保持可讀又不失未來感 |
| `--font-mono` | 'Share Tech Mono', monospace | 數據讀數、色碼、座標資訊 |

**Pairing logic:** Orbitron 的等寬字懷、方正字形是「招牌廠字」的第一印象，只用在短字串（標題、按鈕）才不會犧牲可讀性；Rajdhani 的窄體幾何造型延續科技感但拉高 x-height 撐起長段落閱讀；Share Tech Mono 負責一切看起來像「儀表板讀數」的地方。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.4rem, 6vw, 3.6rem) | display | 700 | letter-spacing 0.02em，永遠帶 glow |
| h2 | 2rem | display | 600 | letter-spacing 0.03em |
| h3 | 1.4rem | display | 600 | |
| Body | 17px（mobile 16px） | body | 400 | line-height 1.7 |
| Caption / tag | 0.8–0.95rem | body | 600 | letter-spacing 0.05em，常大寫 |
| Data / mono | 0.85rem | mono | 400 | |

### Link Style

- 連結色 `#00F0FF`，無底線，靜態時 `text-shadow: 0 0 4px rgba(0,240,255,0.6)`（微光）
- **Hover：glow 強度升級**至完整三層 `text-shadow`（見 §4），並加 1px 底線；離開瞬間 glow 平滑衰減（`transition: text-shadow 0.25s ease`）

---

## 4. Component Stylings

### Neon Glow（系統核心 token — 招牌的靈魂）

```css
/* 文字發光 — 三層堆疊：緊核心 / 中暈 / 遠環境光 */
--glow-text-cyan:
  0 0 4px #00F0FF,
  0 0 12px rgba(0, 240, 255, 0.8),
  0 0 28px rgba(0, 240, 255, 0.5),
  0 0 48px rgba(0, 240, 255, 0.25);

--glow-text-magenta:
  0 0 4px #FF2E9A,
  0 0 12px rgba(255, 46, 154, 0.8),
  0 0 28px rgba(255, 46, 154, 0.5),
  0 0 48px rgba(255, 46, 154, 0.25);

/* 邊框玻璃管發光 — box-shadow 內外雙層 */
--glow-box-cyan:
  0 0 6px rgba(0, 240, 255, 0.6),
  0 0 18px rgba(0, 240, 255, 0.35),
  0 0 36px rgba(0, 240, 255, 0.15),
  inset 0 0 10px rgba(0, 240, 255, 0.12);

--tube-border-cyan: 1.5px solid #00F0FF;
```

### Cards

- `--surface: #12121C` 底 + `1.5px solid` 對應霓虹色 + 對應 `--glow-box-*`（強度降至 60%：僅 2 層 shadow）
- Hover：邊框 glow 升到完整 4 層強度 + `translateY(-3px)`，`transition: box-shadow 0.25s ease, transform 0.25s ease`
- 卡片內文字不發光（只有標題發光），避免整卡過曝

### Buttons

| 變體 | Style |
|------|-------|
| Primary | 透明底 + `--tube-border-cyan` + 文字 `--glow-text-cyan`（弱化 2 層），hover 時邊框與文字 glow 都升到完整 4 層 + 背景浮現 `rgba(0,240,255,0.08)` |
| Secondary | 同結構，色改 Magenta |
| Disabled | `opacity: 0.35`，移除所有 glow（`text-shadow: none; box-shadow: none;`），border 改 `--text-dim` |

### Tags / Badges

- 膠囊形（`border-radius: 999px`）、透明底、1px 對應色細框 + 弱 glow（僅 core + mid 兩層）
- 文字全大寫、`letter-spacing: 0.08em`、mono 或 display 字體
- 語意分類：青＝資訊、萊姆＝成功/上線、琥珀＝警示、紅＝危險、紫＝實驗性、洋紅＝精選

### 招牌面板 Signature Component — Neon Sign Panel

- 深色面板（`--surface-elevated`）+ 四周細發光框（動態色，可用多色漸層 `border-image` 或偽元素疊加）
- 內部標題文字套用完整 4 層 glow，並加極慢 `flicker` keyframe（0.6s 內兩次極短暗滅，模擬啟動瞬間的老式霓虹管閃爍，之後保持穩定常亮 — 絕不整段持續閃爍到讓人不適）
- 面板背景疊加低透明度網格紋，強化「掛在牆上的招牌」錯覺

### Dividers

- 細發光橫線：`height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor;` 依段落配色切換色相
- 裝飾分隔：小型菱形／六角形發光節點置中，兩側延伸細光線

---

## 5. Layout Principles

- **暗畫布為預設**：所有版面 `background: #0A0A12`，元件靠「發光」而非「色塊面積」建立視覺重量
- **聚光構圖**：主要內容置中，四周留大量暗空間（負空間 ≥ 40%），讓發光元件成為視覺焦點而非被鄰近元素稀釋
- **背景網格紋**：`background-image: linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px); background-size: 40px 40px;` 模擬夜間電子看板底紋，透明度極低（≤0.05）不可搶戲
- **單欄置中內容區**：max-width 1080px，padding 40px（mobile 20px）
- **卡片牆**：`repeat(auto-fit, minmax(260px, 1fr))` grid，gap 1.5rem — 讓每張招牌卡保持獨立發光而不擠壓
- **暗溝分隔原則**：任兩個不同霓虹色的相鄰元件之間，至少保留與畫布同色的 16px 間距（暗溝），避免色光互相污染

---

## 6. Depth & Elevation

**No conventional drop shadows.** 這個系統的深度語言是「發光強度與層數」，離觀者越近（越重要/越 active）光暈越厚：

| 狀態 | Glow 層數 | 說明 |
|------|-----------|------|
| Resting 靜置 | 2 層（core + mid），透明度降至 40–60% | 元件「通電但待機」 |
| Hover / Focus 抬升 | 4 層完整強度（core + mid + far + ambient） | 元件「被觸發，全亮」 |
| Active / Selected 選中 | 4 層強度 + 輕微 `scale(1.02)` | 常駐高亮，不需 hover 也保持 |
| Disabled 熄燈 | 0 層，`opacity: 0.35` | 招牌「壞掉的那一管」 |

Motion：`transition: box-shadow 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease`。唯一允許的持續動畫是招牌面板的一次性 `flicker`（開場模擬通電），其餘一律靜止發光 — 避免長時間動態造成閱讀疲勞。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個發光元素都用多層堆疊 `text-shadow` / `box-shadow`（至少 core + mid 兩層），單層光暈太扁平不像真實霓虹
- 暗畫布 `#0A0A12` 是唯一合法背景基準，所有 surface 只能比它亮一階
- 霓虹色只用在邊框、文字、圖示這類「線性/細節」元素上
- 兩種霓虹色相鄰時，用暗色溝渠（≥16px 畫布色間距）隔開
- Hover/active 用「glow 強度升級」表達回饋，取代位移或色塊變化

### Don'ts ❌

- ❌ 純白 `#FFFFFF` 文字不發光 — 沒有 glow 的白字在這系統裡看起來像故障，一律用 `#F1F0FF` + 至少一層 text-shadow
- ❌ 讓霓虹色大面積填色當背景 — 會讀成普通飽和色塊，失去「光源」的錯覺
- ❌ 傳統模糊灰階陰影（`box-shadow: 0 4px 8px rgba(0,0,0,.2)`）— 立刻破壞霓虹系統的發光邏輯
- ❌ 兩個不同色相的霓虹元素直接貼邊無間距 — 色光會視覺打架
- ❌ 讓 flicker／閃爍動畫持續超過開場一次 — 長時間閃爍是干擾不是氛圍
- ❌ 圓角過大或過度柔和（>16px）的招牌元件 — 玻璃管招牌的轉角是收緊的，不是泡泡形

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 卡片牆 3–4 欄；hero 標題滿版置中，網格紋完整顯示 |
| 768–1023px | 卡片牆 2 欄；hero 字級略縮（clamp 自動處理） |
| ≤767px | 卡片牆 1 欄；按鈕列改直排；glow 層數維持不變（行動裝置不因效能刪減發光層，改用 `will-change: box-shadow` 優化） |
| ≤480px | body 16px；container padding 收至 16px；招牌面板內距縮至 1rem |

---

## 9. Agent Prompt Guide

```
Create a page in the "Neon Night" style — a cyberpunk neon-signage aesthetic:

- Canvas: near-black #0A0A12 background with a faint 40px cyan grid texture
  (two linear-gradients, rgba(0,240,255,0.04), 1px lines, background-size 40px 40px)
- Fonts: 'Orbitron' for headings/buttons/display text (700 weight, letter-spacing 0.02-0.03em),
  'Rajdhani' for body text (400, line-height 1.7, 17px), 'Share Tech Mono' for
  data/readouts/hex codes — all via Google Fonts
- Core neon colors (use as border + text + glow only, NEVER as large fill backgrounds):
  Electric Cyan #00F0FF (primary), Neon Magenta #FF2E9A (secondary),
  Neon Lime #C6FF3D (success), UV Violet #B24BFF (tertiary),
  Signal Amber #FF9F1A (warning), Danger Flare #FF3355 (danger)
- Text color: #F1F0FF (never pure white), muted #8B89A8
- Signature glow — every emphasized text/border uses layered shadow, e.g. for cyan:
  text-shadow: 0 0 4px #00F0FF, 0 0 12px rgba(0,240,255,0.8),
    0 0 28px rgba(0,240,255,0.5), 0 0 48px rgba(0,240,255,0.25);
  box-shadow: 0 0 6px rgba(0,240,255,0.6), 0 0 18px rgba(0,240,255,0.35),
    0 0 36px rgba(0,240,255,0.15), inset 0 0 10px rgba(0,240,255,0.12);
- Borders: thin 1-1.5px solid neon color ("lit glass tube"), never thick
- Cards: background #12121C, resting glow at ~50% intensity (2 shadow layers),
  hover glow at full 4-layer intensity + translateY(-3px)
- Buttons: transparent fill, glowing border + text, hover brightens glow and adds
  faint tinted background (8% opacity)
- Never let two different neon hues touch directly — keep a 16px dark gutter between them
- No conventional drop shadows (no gray blurred box-shadow) — depth = glow intensity only
- Corners tight, max 12-16px border-radius except pill-shaped tags (999px)
- Optional: one signature signal panel with a one-time flicker keyframe on load,
  then settle to steady glow — never loop the flicker continuously
```

---

*Original design system created for Design Lab, 2026*