# Design System: Porcelain Reverie

> 瓷夢囈語設計系統 — 靈感來自 [Nicoletta Ceccoli](https://www.nicolettaceccoli.com/) 的超現實插畫美學，捕捉「天真與黑暗」的矛盾張力：消音粉彩的瓷器質感、褪色童話書的夢境氛圍、以及美麗表面下隱隱不安的哥特暗流。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Beautiful Unease — the art of making something exquisite enough to draw you in, then unsettling enough to hold your gaze. Every surface should feel like a porcelain doll's display case: immaculate, delicate, and faintly uncanny. The palette is desaturated by design — colors filtered through memory, time, and the amber lens of a Victorian daguerreotype.

**Atmosphere Keywords:** Ethereal, Porcelain, Whimsical-Dark, Dreamlike, Storybook-Gothic, Uncanny-Sweet, Faded-Fairy-Tale

**Visual Anchors:**
- Antique ivory canvas like aged storybook pages
- Muted pastels that feel "desaturated on purpose" — sweet but never saccharine
- Dark accents (wine, charcoal) that anchor the narrative tension
- Generous negative space — the gallery white-wall effect
- Delicate serif typography with porcelain-like refinement
- Rounded, soft forms — nothing sharp, nothing aggressive

**Mood Board References:**
- Nicoletta Ceccoli's pop-surrealist illustrations
- Victorian porcelain doll collections
- Faded botanical prints from 19th-century storybooks
- Mark Ryden's pastel surrealism (lighter end)
- Wes Anderson film color grading (Grand Budapest era)
- Antique French children's book covers

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🩷 | Porcelain Rose 瓷肌粉 | `#D4A0A0` | Primary accent — CTAs, highlights, key interactive elements |
| 🟣 | Dreaming Lavender 夢境薰衣草 | `#B8A9C9` | Secondary accent — tags, badges, hover tints, decorative |
| 🔵 | Spectral Blue 幽靈藍 | `#A8C4D7` | Cool balance — info states, links, secondary buttons |
| 🟢 | Faded Moss 苔綠 | `#9BB09B` | Nature accent — success hints, organic decorative elements |
| 🍷 | Gothic Wine 暗酒紅 | `#6B3A4A` | Dark anchor — strong emphasis, dark section headers, drama |
| ⬛ | Smoke Charcoal 煙灰 | `#3A3A3A` | Ink — primary headings, high-contrast text |

### Neutral Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬜ | Antique Ivory 古象牙 | `#F5F0E8` | Canvas — page background, the "aged paper" base |
| ⬜ | Porcelain White 瓷白 | `#FAF7F2` | Surface Light — slightly lighter than canvas for layering |
| ⬜ | Lace Cream 蕾絲奶油 | `#EDE6DB` | Surface Strong — card borders, section dividers, table rows |
| ⬛ | Deep Ink 墨夜 | `#2A2024` | Heading text — near-black with warm undertone |
| ⬛ | Dusk Gray 暮灰 | `#5A4F54` | Body text — readable but softer than pure dark |
| ⬛ | Mist 霧 | `#9A8F94` | Muted — captions, placeholders, disabled text |
| ⬛ | Veil 面紗 | `#C5BEC2` | Muted Soft — ghost elements, subtle borders |

### Derived States

| Base Color | Hover | Active | Light Tint (12%) | Dark Variant |
|-----------|-------|--------|-------------------|--------------|
| Porcelain Rose `#D4A0A0` | `#C99292` | `#BE8484` | `#F9F0F0` | `#A87878` |
| Dreaming Lavender `#B8A9C9` | `#AB9CBE` | `#9E8FB3` | `#F4F1F8` | `#8E7EA8` |
| Spectral Blue `#A8C4D7` | `#98B8CD` | `#88ACC3` | `#EFF5F9` | `#7A9CB5` |
| Faded Moss `#9BB09B` | `#8DA48D` | `#7F987F` | `#F0F4F0` | `#708870` |
| Gothic Wine `#6B3A4A` | `#5E3040` | `#512636` | `#F2EAED` | `#4A2030` |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Faded Garden | `#7A9A7A` | Desaturated green — matches the muted palette |
| Warning 警告 | Amber Dust | `#C9A868` | Warm gold-amber, vintage feel |
| Error 錯誤 | Thorn Rose | `#C07878` | Muted rose-red, alarming but still within the softness |
| Info 資訊 | Spectral Tint | `#8AB0C8` | Cool blue, slightly more saturated for visibility |

### Surface & Depth

| Layer | Background | Shadow Color | Use |
|-------|-----------|-------------|-----|
| Canvas | `#F5F0E8` | — | Page base, aged paper |
| Surface | `#FAF7F2` | `rgba(42, 32, 36, 0.04)` | Cards, panels |
| Elevated | `#FAF7F2` | `rgba(42, 32, 36, 0.08)` | Dropdowns, modals, tooltips |
| Dark Section | `#2A2024` | — | Hero, footer, contrast bands |
| Dark Elevated | `#3A3034` | `rgba(0, 0, 0, 0.2)` | Cards on dark bg |
| Wine Section | `#6B3A4A` | — | Feature highlight, CTA band |

---

## 3. Typography Rules

### Font Stack

| Role | Font | Fallback | Weight |
|------|------|----------|--------|
| Display & Headings | Playfair Display | Georgia, 'Noto Serif TC', serif | 400, 600, 700 |
| Body & UI | Lora | 'Noto Serif TC', Georgia, serif | 400, 500, 600, 700 |
| UI Labels & Nav | Inter | 'Noto Sans TC', -apple-system, sans-serif | 400, 500, 600 |
| Monospace / Code | JetBrains Mono | Consolas, monospace | 400 |

**Rationale:** Double-serif stack (Playfair Display + Lora) creates a cohesive storybook feel. Playfair's high-contrast strokes evoke 18th-century engravings, while Lora's brushed curves add warmth for reading. Inter handles UI chrome without competing with the serif narrative.

### Type Scale

| Token | Font | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|------|--------|-------------|----------------|-----|
| `display-xl` | Playfair Display | 64px | 700 | 1.05 | -1.5px | Hero headlines |
| `display-lg` | Playfair Display | 48px | 700 | 1.1 | -1px | Section titles |
| `display-md` | Playfair Display | 36px | 600 | 1.15 | -0.5px | Subsection titles |
| `heading-lg` | Playfair Display | 28px | 600 | 1.2 | -0.3px | Card titles, major headings |
| `heading-md` | Playfair Display | 22px | 600 | 1.25 | 0 | Subheadings |
| `heading-sm` | Inter | 16px | 600 | 1.3 | 0.5px | Overlines, labels (uppercase) |
| `body-lg` | Lora | 18px | 400 | 1.7 | 0.1px | Featured paragraphs, intros |
| `body-md` | Lora | 16px | 400 | 1.7 | 0.15px | Default body text |
| `body-sm` | Lora | 14px | 400 | 1.6 | 0.2px | Captions, secondary text |
| `caption` | Inter | 12px | 400 | 1.4 | 0.3px | Timestamps, fine print |
| `badge` | Inter | 11px | 600 | 1 | 0.8px | Tags, status badges (uppercase) |

### Drop Cap

```css
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4em;
  float: left;
  line-height: 0.8;
  margin: 4px 12px 0 0;
  color: var(--gothic-wine);
}
```

---

## 4. Component Stylings

### Buttons

| Variant | Background | Text | Border | Hover | Use |
|---------|-----------|------|--------|-------|-----|
| Primary | `#D4A0A0` | `#FFFFFF` | none | `#C99292` | Main CTA |
| Wine | `#6B3A4A` | `#FFFFFF` | none | `#5E3040` | Strong/dark CTA |
| Outline | transparent | `#D4A0A0` | 1.5px `#D4A0A0` | bg `#F9F0F0` | Secondary actions |
| Ghost | transparent | `#5A4F54` | none | bg `#EDE6DB` | Tertiary actions |
| Spectral | `#A8C4D7` | `#2A2024` | none | `#98B8CD` | Info/cool actions |
| Dark Outline | transparent | `#FAF7F2` | 1.5px `#FAF7F2` | bg `rgba(250,247,242,0.1)` | On dark backgrounds |

```css
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 12px 28px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}
```

### Cards

```css
.card {
  background: var(--porcelain-white);
  border: 1px solid var(--lace-cream);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(42, 32, 36, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(42, 32, 36, 0.08);
  transform: translateY(-2px);
}
```

### Input Fields

```css
.input {
  font-family: 'Lora', serif;
  font-size: 16px;
  padding: 12px 16px;
  background: var(--porcelain-white);
  border: 1.5px solid var(--veil);
  border-radius: 8px;
  color: var(--deep-ink);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input:focus {
  border-color: var(--porcelain-rose);
  box-shadow: 0 0 0 3px rgba(212, 160, 160, 0.15);
  outline: none;
}
```

### Navigation

```css
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--dusk-gray);
  text-decoration: none;
  padding: 8px 16px;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--porcelain-rose); }
.nav-link.active {
  color: var(--gothic-wine);
  border-bottom: 2px solid var(--gothic-wine);
}
```

### Tags & Badges

```css
.tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--lavender-tint);
  color: var(--dreaming-lavender-dark);
}
.tag-rose { background: #F9F0F0; color: #A87878; }
.tag-spectral { background: #EFF5F9; color: #7A9CB5; }
.tag-moss { background: #F0F4F0; color: #708870; }
.tag-wine { background: #F2EAED; color: #6B3A4A; }
```

### Decorative Elements

```css
.divider-ornament {
  text-align: center;
  color: var(--porcelain-rose);
  font-size: 14px;
  letter-spacing: 12px;
  margin: 40px 0;
  opacity: 0.6;
}
/* Usage: <div class="divider-ornament">✦ ◆ ✦</div> */

.divider-line {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--porcelain-rose),
    transparent
  );
  margin: 48px 0;
}
```

---

## 5. Layout Principles

### Spacing System (8px base)

| Token | Value | Use |
|-------|-------|-----|
| `space-1` | 4px | Tight gaps (icon-label) |
| `space-2` | 8px | Inline spacing, badge padding |
| `space-3` | 12px | Input padding, small gaps |
| `space-4` | 16px | Default component gap |
| `space-5` | 24px | Card padding, section sub-gap |
| `space-6` | 32px | Section inner padding |
| `space-7` | 48px | Section spacing |
| `space-8` | 64px | Major section breaks |
| `space-9` | 96px | Hero padding, page-level spacing |
| `space-10` | 128px | Full section breathing room |

### Grid

| Property | Value |
|----------|-------|
| Max width | 1200px |
| Columns | 12 |
| Gutter | 24px (desktop) / 16px (mobile) |
| Side margin | 24px min |

### Container Widths

| Type | Width | Use |
|------|-------|-----|
| Narrow | 680px | Long-form reading, articles |
| Default | 960px | General content |
| Wide | 1200px | Grid layouts, gallery |
| Full | 100% | Hero sections, dark bands |

---

## 6. Depth & Elevation

| Level | Shadow | Use |
|-------|--------|-----|
| 0 (Flat) | none | Inline elements, text |
| 1 (Resting) | `0 1px 3px rgba(42, 32, 36, 0.04)` | Default cards, resting state |
| 2 (Raised) | `0 4px 12px rgba(42, 32, 36, 0.06)` | Hovered cards, active panels |
| 3 (Floating) | `0 8px 24px rgba(42, 32, 36, 0.08)` | Dropdowns, popovers |
| 4 (Overlay) | `0 16px 48px rgba(42, 32, 36, 0.12)` | Modals, dialogs |
| 5 (Dramatic) | `0 24px 64px rgba(42, 32, 36, 0.16)` | Feature image frames, hero cards |

**Shadow Color Rule:** Always use warm-tinted shadow base `rgba(42, 32, 36, x)` — never pure black `rgba(0,0,0,x)`. This maintains the warm, porcelain atmosphere.

---

## 7. Do's and Don'ts

### Do ✓

1. **Do** use desaturated, muted versions of all accent colors — the "aged storybook" filter is the core identity
2. **Do** pair Playfair Display headings with Lora body text for a cohesive serif narrative
3. **Do** use generous negative space — every element needs room to breathe like art in a gallery
4. **Do** use Gothic Wine as the "narrative anchor" for dark emphasis — it carries the system's dark undercurrent
5. **Do** use warm-tinted shadows (`rgba(42,32,36,x)`) for all elevation levels
6. **Do** use ornamental dividers (`✦ ◆ ✦`) sparingly between major sections
7. **Do** allow artwork/imagery to dominate — the design system is a frame, not the painting
8. **Do** use the fade-in reveal animation for content loading — matches the dreamlike atmosphere
9. **Do** maintain the 70/20/10 ratio: 70% pastels, 20% dark accents, 10% neutral
10. **Do** use Antique Ivory (`#F5F0E8`) as the default background — never pure white

### Don't ✗

1. **Don't** use fully saturated colors — they break the "muted memory" filter
2. **Don't** use pure black (`#000000`) or pure white (`#FFFFFF`) — use the warm neutral equivalents
3. **Don't** use sharp corners (radius < 8px) on interactive elements — porcelain has no edges
4. **Don't** use aggressive animations (bounce, elastic, overshoot) — movement should be slow and dreamlike
5. **Don't** combine more than 2 accent colors in a single component — visual quiet is the goal
6. **Don't** use the decorative ornament divider more than 3 times per page
7. **Don't** place Porcelain Rose next to Gothic Wine without a neutral buffer — the pink-wine collision is dissonant
8. **Don't** use display typography below 28px — Playfair Display loses its elegance at small sizes
9. **Don't** use drop shadows on text — the system's depth comes from surface elevation, not text effects
10. **Don't** fill all available space — this system breathes through emptiness

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Columns | Gutter | Side Margin |
|------|-------|---------|--------|-------------|
| Mobile | < 640px | 4 | 16px | 16px |
| Tablet | 640–1024px | 8 | 20px | 24px |
| Desktop | 1024–1440px | 12 | 24px | 32px |
| Wide | > 1440px | 12 | 32px | auto (centered 1200px) |

### Typography Scaling

| Token | Desktop | Tablet | Mobile |
|-------|---------|--------|--------|
| `display-xl` | 64px | 48px | 36px |
| `display-lg` | 48px | 36px | 28px |
| `display-md` | 36px | 28px | 24px |
| `heading-lg` | 28px | 24px | 22px |
| `body-lg` | 18px | 17px | 16px |
| `body-md` | 16px | 16px | 15px |

### Touch Targets

| Element | Min Size | Spacing |
|---------|----------|---------|
| Buttons | 44px height | 8px between |
| Nav links | 44px tap area | 4px between |
| Tags | 32px height | 4px between |
| Checkboxes/Radios | 24px visual, 44px tap | 12px label gap |

### Collapsing Strategy

| Component | Desktop | Tablet | Mobile |
|-----------|---------|--------|--------|
| Gallery grid | 3-4 col | 2 col | 1 col |
| Card grid | 3 col | 2 col | 1 col stack |
| Navigation | Horizontal | Horizontal | Hamburger menu |
| Hero | Side-by-side | Stacked | Stacked, reduced padding |
| Sidebar | Visible | Collapsible | Hidden (sheet overlay) |
| Ornament dividers | Full width fade | Shorter | Simplified (`◆`) |

---

## 9. Agent Prompt Guide

### Quick Color Reference

```
PRIMARY:      Porcelain Rose    #D4A0A0  (muted pink, CTAs)
SECONDARY:    Dreaming Lavender #B8A9C9  (ethereal purple, accents)
COOL:         Spectral Blue     #A8C4D7  (moonlight blue, links)
NATURE:       Faded Moss        #9BB09B  (desaturated green, organic)
DARK ANCHOR:  Gothic Wine       #6B3A4A  (narrative tension)
INK:          Smoke Charcoal    #3A3A3A  (headings)
CANVAS:       Antique Ivory     #F5F0E8  (background)
SURFACE:      Porcelain White   #FAF7F2  (cards)
BODY TEXT:    Dusk Gray         #5A4F54  (paragraphs)
MUTED:        Mist              #9A8F94  (captions)
```

### Ready-to-Use Prompts

**Prompt 1 — Landing Page (Porcelain Gallery)**
```
Build a landing page with the Porcelain Reverie design system.
Background: #F5F0E8 (Antique Ivory). Hero section: centered Playfair Display
heading (64px, #2A2024), Lora body (18px, #5A4F54), primary CTA button
(#D4A0A0 bg, white text, 12px radius). Below hero: 3-column card grid on
#FAF7F2 with warm shadow (rgba(42,32,36,0.04)). Section divider: gradient
fade line from transparent → #D4A0A0 → transparent. Dark footer: #2A2024
background with #FAF7F2 text. Typography: Playfair Display headings,
Lora body, Inter UI labels. Ornament: ✦ ◆ ✦ between sections.
```

**Prompt 2 — Article / Long-form Reading**
```
Build a reading page using Porcelain Reverie. Max-width: 680px centered.
Background: #F5F0E8. Drop cap on first paragraph: Playfair Display 4em in
#6B3A4A (Gothic Wine). Body: Lora 16px/1.7, color #5A4F54. Headings:
Playfair Display 600 weight, #2A2024. Pull quotes: left border 3px #B8A9C9,
italic Lora, #6B3A4A text. Image frames: 12px radius, shadow level 2.
Tags: uppercase Inter 11px, #F4F1F8 bg with #8E7EA8 text.
```

**Prompt 3 — Portfolio / Gallery Grid**
```
Build a portfolio grid using Porcelain Reverie. Background: #F5F0E8.
3-column masonry grid, 24px gap. Cards: #FAF7F2 bg, 12px radius, 1px
border #EDE6DB. Image aspect: square (1:1) or portrait (3:4). Hover:
translateY(-2px) + shadow level 3. Title: Playfair Display 22px #2A2024.
Subtitle: Inter 12px uppercase #9A8F94 with 0.5px letter-spacing.
Filter bar: Ghost buttons with Inter 14px. Active filter: #6B3A4A text
with underline.
```

**Prompt 4 — Dark Section (Gothic Feature)**
```
Build a dark feature section using Porcelain Reverie. Background: #2A2024.
Heading: Playfair Display 48px, #FAF7F2. Body: Lora 18px, rgba(250,247,242,0.8).
Accent elements: #D4A0A0 (Porcelain Rose) for links and highlight borders.
CTA: #D4A0A0 bg, white text. Ornamental divider: ✦ ◆ ✦ in
rgba(212,160,160,0.4). Cards on dark: #3A3034 bg, shadow rgba(0,0,0,0.2).
Tags: #F2EAED bg, #6B3A4A text. Padding: 96px vertical.
```

**Prompt 5 — Wine Accent Band**
```
Build a CTA band using Gothic Wine (#6B3A4A) background. Heading: Playfair
Display 36px, #FAF7F2. Subtext: Lora 16px, rgba(250,247,242,0.75).
CTA button: #FAF7F2 bg, #6B3A4A text (inverted). Hover: bg
rgba(250,247,242,0.9). Padding: 64px vertical. Ornament: ✦ in
rgba(250,247,242,0.3) above heading.
```

### Image Generation Keywords

```
Style: ethereal porcelain doll aesthetic, muted pastel palette, dreamlike
atmosphere, pop-surrealism, storybook gothic, Nicoletta Ceccoli inspired

Colors: dusty rose, faded lavender, spectral blue, antique ivory, gothic
wine red, muted moss green, desaturated pastels

Mood: whimsical-dark, uncanny sweetness, beautiful unease, faded fairy tale,
Victorian daguerreotype filter, porcelain fragility

Avoid: saturated neon, harsh contrast, geometric sharp edges, photorealistic,
gritty textures, bright primary colors
```