# Design System: Fantasy 紋章史詩

> Direction from TypeUI's Fantasy design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** An illuminated manuscript brought to a modern screen. Every surface should feel forged, embossed, or sealed with wax — buttons read like struck medallions, cards read like enchanted scrolls, and gold only appears where something has been earned. This is not "medieval clip-art" — it's the premium, restrained heraldry of a crest carved in stone: royal blue for structure and trust, gold spent sparingly as reward currency.

**Atmosphere Keywords:** Epic, Heraldic, Stately, Premium, Earned, Forged, Illuminated, Reverent

**Visual Anchors:**
- Royal blue as the structural color — borders, active states, navigation, the "steel" of the system
- Heraldic gold used only for achievement, featured content, and premium badges — never for mundane chrome
- Blackletter-inspired display type (New Rocker) for headings and UI chrome, dialed back to a clear manuscript serif for long-form body copy
- Wax-seal and shield motifs as signature ornaments (clip-path shields, sealed badges)
- Generous 8pt-grid spacing — cathedral breathing room, not corridor cramping
- Hard, deep-set shadows that read as "carved" rather than "floating" (no soft ambient blur)

**Mood Board References:**
- 紋章盾牌與貴族家徽的藍金配色
- 泥金裝飾手抄本（illuminated manuscript）的邊框與大寫字母
- 蠟封信件與皇家詔書
- 史詩奇幻遊戲的成就徽章與任務日誌

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🔵 | 皇家藍 Royal Blue | `#0250CC` | Primary — actions, links, active states, structural borders |
| 🟡 | 紋章金 Heraldic Gold | `#FDC800` | Secondary — rewards, featured content, premium badges only |
| ⬛ | 墨玄黑 Ink Black | `#111827` | Text — headings, body, borders |
| ⬜ | 羊皮紙白 Parchment White | `#FFFFFF` | Surface — cards, containers, base background |

### Derived Palette（衍生色，原創設計）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🌑 | 夜幕靛 Ink Midnight | `#0B1120` | Deep banners, hero backdrop, footer — the "night sky behind the crest" |
| 🟤 | 陳年羊皮 Aged Parchment | `#F5EFE0` | Secondary surface — table stripes, quiet panel fill |
| 🟨 | 暗金 Dim Gold | `#B8930A` | Gold-on-gold borders, pressed/active gold states |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 任務完成 | `#16A34A` | Quest-complete states, positive confirmations |
| Warning 警示 | `#D97706` | Caution, pending actions |
| Danger 危險 | `#DC2626` | Errors, destructive actions |

**Rule:** Gold is a reward, not decoration. If gold appears on more than one element in a single viewport that isn't an achievement, featured tag, or CTA, pull it back to royal blue.

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | `'New Rocker', 'Noto Serif TC', serif` | Headings, buttons, tags, badges, hero — blackletter drama for Latin glyphs, manuscript serif fills CJK glyphs automatically via font-fallback |
| `--font-body` | `'Noto Serif TC', serif` | Body copy — long-form text needs the clarity New Rocker's single ornate weight can't give |
| `--font-mono` | `'IBM Plex Mono', monospace` | Code, stat tables, item data |

**Pairing logic:** New Rocker has no CJK glyphs, so it is scoped to short, punchy Latin display text (h1–h3, button labels, badge text). Because CSS font-fallback resolves per-glyph, a heading like "Fantasy 紋章史詩" renders "Fantasy" in New Rocker and "紋章史詩" in Noto Serif TC automatically — no manual switching required. This is the system's "ornate at scale, clear up close" rule in practice.

### Scale

| Element | Size | Font | Weight |
|---------|------|------|--------|
| Hero / h1 | 32px (clamp 28–40px) | display | 700 |
| h2 | 24px | display | 700 |
| h3 | 20px | display | 600 |
| Body | 16px | body | 400 |
| Lead body | 20px | body | 400 |
| Caption / fine print | 12–14px | body | 400 |

### Link Style

- Links are royal blue, no underline at rest
- Hover: underline appears in heraldic gold, 2px, offset 3px — "the crest lights up"

---

## 4. Component Stylings

### Heraldic Crest Badge（招牌元件）

```css
--shield-clip: polygon(50% 0%, 100% 20%, 100% 60%, 50% 100%, 0% 60%, 0% 20%);
```

A shield-shaped badge (clip-path hexagon/shield) in ink midnight with a 2px gold border, used for achievements, ranks, and "featured" markers. Gold only lives on the border and icon — the fill stays dark so the gold reads as light hitting metal.

### Buttons

- **Primary:** Royal blue fill, white display-font label, 8px radius, `box-shadow: 0 3px 0 #01308C` (a "struck medallion" hard-edge shadow, not blur). Hover lifts 1px and shadow grows to `0 4px 0`. Active presses down to `0 1px 0`.
- **Secondary (Gold/Reward):** Heraldic gold fill, ink-black text, same hard shadow using Dim Gold. Reserved for CTAs that represent a reward or completion.
- **Ghost:** Transparent, 2px royal-blue border, blue text.

### Cards (Scroll Cards)

- Parchment-white surface, 1px royal-blue-at-20%-opacity border, 8px radius, `box-shadow: 0 2px 8px rgba(11,17,32,0.12)`
- Top edge carries a 3px royal-blue-to-gold gradient bar — the "illuminated capital" cue
- Hover: border brightens to full-opacity royal blue, shadow deepens

### Tags & Badges

- Pill shape, display font, 12–14px, uppercase tracking
- `.tag-reward` — gold fill, ink text (use sparingly)
- `.tag-standard` — royal-blue-10% fill, royal-blue text
- `.tag-danger` / `.tag-success` — semantic fills at 12% opacity with solid-color text

### Data / Stat Tables

- IBM Plex Mono for all numeric cells
- Header row: ink-midnight background, gold text, letter-spacing 0.04em
- Row dividers: 1px aged-parchment

---

## 5. Layout Principles

- **8pt baseline grid** — every margin, padding, and gap is a multiple of 8px; this is a hard rule, not a suggestion
- **Generous breathing room** — section padding starts at 64px (desktop), never below 32px (mobile); ornate typography needs air
- **Single accent per view** — gold appears in at most one focal region per screen so it stays earned
- **Structural borders in royal blue** — section dividers, card outlines, and nav borders all use blue-at-low-opacity, never gray
- **Center-weighted hero** — hero content max-width 720px, centered, flanked by generous midnight-ink negative space

---

## 6. Depth & Elevation

Depth reads as "carved and sealed," never "floating glass":

1. **Flat (default):** 1px royal-blue border only
2. **Struck (buttons):** hard offset shadow `0 3px 0`, no blur, color-matched to the fill (blue shadow under blue, gold shadow under gold)
3. **Raised (cards on hover):** soft shadow `0 2px 8px rgba(11,17,32,0.12)` deepening to `0 6px 16px` — still restrained, never a glow
4. **Sealed (modals/overlays):** ink-midnight overlay at 85% opacity behind a gold-bordered parchment panel

Motion: `transform`/`box-shadow` transitions at 0.15s ease. No bounce, no glow pulses — this system's confidence comes from stillness, not animation.

---

## 7. Do's and Don'ts

### Do's ✅

- Keep gold rare — one hero CTA, one achievement badge, one featured card per view
- Use New Rocker only for short display text; hand every paragraph to Noto Serif TC
- Give every interactive element a hard, color-matched offset shadow instead of blur
- Maintain the 8pt grid without exception
- Use shield/crest clip-paths for badges and rank indicators

### Don'ts ❌

- ❌ Gold as a background color for large surfaces — it becomes gaudy instead of precious
- ❌ Soft ambient/glow shadows — this system is carved stone, not glass
- ❌ New Rocker at body-text length — illegible past a headline
- ❌ Mixing in unrelated warm neutrals (beige/tan) — the only "parchment" tone is the one defined here
- ❌ Rounded, bubbly shapes — corners stay crisp (max 8px radius) to preserve the forged, heraldic feel

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | Section padding drops from 64px→40px; 2-col grids → 1-col; nav collapses to a bordered hamburger toggle |
| ≤480px | Hero h1 clamps to 28px; card padding 24px→16px; stat tables scroll horizontally inside a bordered frame |
| Print | Not a primary target — if printed, midnight-ink backgrounds convert to a 2px border box to save ink |

---

## 9. Agent Prompt Guide

```
Create a page in the "Fantasy 紋章史詩" style — heraldic epic-fantasy UI:

- Palette: royal blue #0250CC (primary/structural), heraldic gold #FDC800
  (secondary — reward/featured ONLY, use sparingly), ink black #111827 (text),
  parchment white #FFFFFF (surface), ink midnight #0B1120 (deep backdrops),
  success #16A34A / warning #D97706 / danger #DC2626 for semantic states
- Fonts: 'New Rocker' for headings/buttons/tags (short Latin text only),
  'Noto Serif TC' for all body copy and CJK text, 'IBM Plex Mono' for
  code/data/stats
- Buttons: solid fill, hard offset shadow `0 3px 0` in a matching darker
  shade (never blur), 8px radius, press down on :active
- Cards: white surface, thin royal-blue border, 3px blue-to-gold top bar,
  8px radius, soft shadow only on hover
- Signature element: shield-shaped badge (clip-path hexagon) in ink
  midnight with a 2px gold border for achievements/ranks
- Spacing: strict 8pt grid, generous section padding (64px desktop)
- Shadows: hard, color-matched, never glow. Corners: crisp, max 8px radius
- Icons: simple line icons or emoji; avoid rounded/bubbly shapes
```

---

*Direction: typeui.sh · 2026*