# Design System: Creative 漫畫波普

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

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A pop-art poster that woke up as a website. Headlines shout, colors sweep between blue and violet like ink bleeding across a comic panel, and every CTA is built to be impossible to scroll past. This system trades restraint for impact on purpose — it exists for the first three seconds of attention, not for quiet documentation reading.

**Atmosphere Keywords:** Loud, Kinetic, Punchy, High-Energy, Comic, Pop-Art, Bold, Fast

**Visual Anchors:**
- Comic-book display type with irregular, hand-lettered energy for every headline
- Blue-to-violet gradient sweeps across hero backgrounds, CTAs, and decorative accents
- Halftone dot textures as a signature comic-print backdrop
- Thick black comic-ink outlines on badges and callout shapes
- Starburst / jagged shapes for "new" or high-impact moments
- Tight clusters of related elements, then dramatic open space between sections — scan, breathe, scan

**Mood Board References:**
- 普普藝術海報（Lichtenstein 式網點印刷質感）
- 漫畫分鏡與對話框
- 演唱會／街頭活動宣傳海報的高飽和配色
- 街機遊戲片頭的爆炸字效

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🔵 | 動能藍 Kinetic Blue | `#3B82F6` | Primary — CTAs, links, active states |
| 🟣 | 電光紫 Volt Violet | `#8B5CF6` | Secondary — gradient endpoint, supporting accents |
| ⬛ | 標題黑 Headline Black | `#111827` | Text — headings, body |
| ⬜ | 印刷白 Print White | `#FFFFFF` | Surface — page and card background |

### Derived Palette（衝擊色，原創設計）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟡 | 動感黃 Kinetic Yellow | `#FCD34D` | Starburst badges, halftone highlight dots, "new" markers |
| ⬛ | 漫畫墨黑 Comic Ink | `#0A0A0A` | Thick outline strokes on badges, speech bubbles, panel borders |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#16A34A` | Confirmations, positive feedback |
| Warning 警示 | `#D97706` | Caution states |
| Danger 衝擊紅 | `#DC2626` | Errors — doubles as a high-impact accent on urgency badges |

**Rule:** Blue and violet always move together — as a gradient, or as adjacent blocks — they never sit as two flat, disconnected fills on the same surface. Yellow and Comic Ink are strictly ornamental (outlines, bursts, halftones), never body backgrounds.

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | `'Bangers', 'ZCOOL KuaiLe', cursive` | Headlines, hero, buttons, badges — comic-lettered energy for Latin glyphs, a playful rounded CJK companion fills Chinese glyphs |
| `--font-body` | `'Noto Sans TC', sans-serif` | Body copy, descriptions, forms |
| `--font-mono` | `'IBM Plex Mono', monospace` | Code, pricing tables, technical specs |

**Pairing logic:** Bangers renders at a single visual weight with no CJK glyphs, so hierarchy comes from size + color, not weight — exactly matching the reference's "single-weight type hierarchy." ZCOOL KuaiLe was chosen as its CJK companion because it shares Bangers' rounded, hand-lettered playfulness rather than defaulting to a plain sans, keeping the comic voice intact even in Chinese headlines.

### Scale

| Element | Size | Font | Weight |
|---------|------|------|--------|
| Hero / h1 | 32px (clamp 28–44px) | display | single-weight |
| h2 | 24px | display | single-weight |
| h3 | 20px | body | 700 |
| Body | 16px | body | 400 |
| Lead body | 20px | body | 400 |
| Caption | 12–14px | body | 500 |

### Link Style

- Links: Kinetic Blue, bold, no underline
- Hover: color sweeps to Volt Violet via `transition: color`, no underline — the color shift itself is the affordance

---

## 4. Component Stylings

### Halftone Backdrop（系統核心 token）

```css
--halftone: radial-gradient(circle, rgba(17,24,39,0.12) 1.5px, transparent 1.5px);
background-size: 14px 14px;
```

Applied behind hero sections and comic-panel components for authentic print-comic texture. Always layered under a solid or gradient fill, never used alone as a full background.

### Buttons (CTA)

- Primary: blue-to-violet gradient fill, white display-font label, 3px Comic Ink border, `box-shadow: 4px 4px 0 #0A0A0A` (hard comic-panel offset, no blur)
- Hover: `translate(-2px, -2px)`, shadow grows to `6px 6px 0`
- Active: `translate(2px, 2px)`, shadow shrinks to `2px 2px 0` — the "stamped down" comic-panel click

### Speech Bubble Callout

- White fill, 3px Comic Ink border, rounded rect + CSS-triangle tail (`::after` border trick)
- Used for testimonials, tips, or any "someone is saying this" moment

### Starburst Badge

```css
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
```

Kinetic Yellow fill, Comic Ink outline, display-font label inside — used for "NEW," "HOT," or price-drop moments. One per viewport maximum.

### Cards

- White surface, 3px Comic Ink border, 12px radius, `box-shadow: 4px 4px 0 #0A0A0A`
- Top-left corner carries a small halftone-dot accent square

### Tags & Badges

- Pill, display font, uppercase, Comic Ink border, alternating blue/violet/yellow fills

---

## 5. Layout Principles

- **4px spacing scale** (4/8/12/16/24/32) — tight clusters (4–12px) group related elements, wide gaps (24–32px) separate sections
- **Section-as-moment** — each landing-page section is visually self-contained, framed by generous top/bottom padding (48px+) so the page reads as a sequence of poster panels
- **Gradient as directional flow** — sweep blue→violet left-to-right or top-to-bottom to guide the eye from hero to CTA
- **One starburst per view** — impact elements stay rare so they keep their punch
- **Comic-ink borders unify chrome** — cards, buttons, and badges all share the same 3px Comic Ink border weight

---

## 6. Depth & Elevation

Depth reads as "cut-out comic panel," not soft elevation:

1. **Flat (default):** 3px Comic Ink border only, no shadow
2. **Popped (cards, badges):** hard offset shadow `4px 4px 0 #0A0A0A`, zero blur
3. **Pressed (button active):** shadow shrinks and shifts to `2px 2px 0`, element translates toward the shadow origin
4. **Hero backdrop:** halftone texture layered under a blue-violet gradient — the only place texture substitutes for a shadow

Motion: `transform`/`box-shadow` at 0.12s ease — snappy, comic-panel-cut motion, no easing that feels soft or bouncy.

---

## 7. Do's and Don'ts

### Do's ✅

- Build hierarchy with size and color only — Bangers has one weight, don't fight it
- Keep every hard shadow at exactly `4px 4px 0` (or its pressed `2px 2px 0`) in Comic Ink — never blur
- Let blue and violet move together as a gradient rather than sitting as separate flat blocks
- Use halftone texture behind hero/panel sections for authentic print-comic feel
- Cap starburst badges at one per view so "NEW" still means something

### Don'ts ❌

- ❌ Soft drop shadows or glassmorphism — breaks the cut-paper comic-panel logic
- ❌ Bangers below 16px — legibility collapses at caption sizes, use Noto Sans TC instead
- ❌ Yellow or Comic Ink as a body background — both are ornamental only
- ❌ More than one starburst badge visible at once
- ❌ Pastel or desaturated versions of the palette — this system is loud on purpose

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | 2-col grids → 1-col; hero halftone density reduces (`background-size: 10px 10px`) to avoid moiré on small screens |
| ≤480px | h1 clamps to 28px; buttons go full-width; starburst badge scales down 25% |
| Reduced motion | Hover translate/shadow-grow effects reduce to opacity-only feedback when `prefers-reduced-motion: reduce` |

---

## 9. Agent Prompt Guide

```
Create a page in the "Creative 漫畫波普" style — comic-book pop-art energy:

- Palette: kinetic blue #3B82F6 (primary), volt violet #8B5CF6 (secondary),
  used together as a gradient sweep; kinetic yellow #FCD34D and comic ink
  #0A0A0A as ornamental accents only (bursts, outlines, halftones);
  headline black #111827 (text), print white #FFFFFF (surface),
  success #16A34A / warning #D97706 / danger #DC2626
- Fonts: 'Bangers' for all headlines/buttons/badges (single weight — build
  hierarchy with size + color), 'Noto Sans TC' for body copy,
  'IBM Plex Mono' for data/code
- Core technique: 3px solid Comic Ink (#0A0A0A) borders on every card/
  button/badge, paired with a hard offset shadow `4px 4px 0 #0A0A0A`
  (zero blur). Active/pressed state shrinks the shadow to `2px 2px 0` and
  translates the element toward it
- Halftone dot texture (radial-gradient, 14px tile) behind hero/panel
  backdrops, layered under the blue-violet gradient
- Signature elements: speech-bubble callouts (CSS triangle tail) and a
  starburst badge (clip-path polygon) — max one starburst per view
- Spacing: 4px base scale, tight clusters (4-12px) inside sections, wide
  gaps (24-32px) between sections
```

---

*Direction: typeui.sh · 2026*