# Design System: Enchanted Woodland

> 魔法林地設計系統 — 靈感來自 [alexfisherdesign.ca](https://www.alexfisherdesign.ca/) 的繪本插畫風格，融合魔法森林的溫暖、自然紋理與童話般的異想世界。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Enchanted forest meets clean modern design. Every surface should feel like opening a beautifully illustrated children's book — warm, inviting, and quietly magical. The palette draws from golden afternoon light filtering through forest canopies, mossy woodland floors, cotton-candy sunsets, and the soft fur of woodland creatures.

**Atmosphere Keywords:** Storybook, Whimsical, Warm, Nature-Inspired, Dreamy, Organic, Handcrafted, Cozy

**Visual Anchors:**
- Warm cream canvas reminiscent of aged paper
- Botanical and nature-inspired accent palette
- Generous whitespace that lets illustrations breathe
- Rounded, organic shapes over sharp geometry
- Subtle texture and depth through warm shadows

**Mood Board References:**
- Beatrix Potter illustration palettes
- Hayao Miyazaki background art color grading
- Scandinavian children's book design
- Botanical watercolor journals

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟡 | Golden Afternoon 金色午後 | `#D4A76A` | Primary accent — CTAs, highlights, decorative elements |
| 🟢 | Forest Moss 森林苔蘚 | `#4A6B4E` | Anchor — headers, nav active states, strong emphasis |
| 🩷 | Cotton Candy 棉花糖粉 | `#E8A4B8` | Secondary accent — tags, badges, illustration tints |
| 🟢 | Willow Sage 柳葉鼠尾草 | `#94B49A` | Supporting — borders, dividers, secondary buttons |
| 🟤 | Fawn Beige 小鹿米 | `#C9A882` | Warm neutral — card backgrounds, section tints |
| 🟣 | Storybook Lavender 繪本薰衣草 | `#B5A0CC` | Accent — hover states, decorative, feature highlights |

### Neutral Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬜ | Parchment Cream 羊皮紙 | `#FDF8F0` | Canvas — page background |
| ⬜ | Warm Paper 暖紙 | `#F5EDE0` | Surface — card backgrounds, soft sections |
| ⬜ | Linen 亞麻 | `#EBE3D5` | Surface Strong — hover backgrounds, table rows |
| ⬛ | Woodland Brown 林地棕 | `#2D2118` | Ink — headings, primary text |
| ⬛ | Bark 樹皮 | `#4A3F35` | Body — paragraph text |
| ⬛ | Driftwood 浮木灰 | `#8A7E72` | Muted — captions, placeholders |
| ⬛ | Pebble 卵石 | `#B5ADA3` | Muted Soft — disabled text, ghost elements |

### Derived States

| Base Color | Hover | Active | Light Tint (12%) | Dark Variant |
|-----------|-------|--------|-------------------|--------------|
| Golden Afternoon `#D4A76A` | `#C89A5E` | `#B8884E` | `#FDF5E8` | `#A07840` |
| Forest Moss `#4A6B4E` | `#3F5E43` | `#345038` | `#E8F0E9` | `#2D4430` |
| Cotton Candy `#E8A4B8` | `#DE96AC` | `#D488A0` | `#FDF0F4` | `#C07A90` |
| Willow Sage `#94B49A` | `#86A88E` | `#789C82` | `#EFF5F0` | `#6A8A70` |
| Fawn Beige `#C9A882` | `#BE9C76` | `#B0906A` | `#F8F2EB` | `#A08060` |
| Storybook Lavender `#B5A0CC` | `#A994C2` | `#9D88B8` | `#F4F0F8` | `#8A70A8` |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Meadow Green | `#5B8F5E` | Muted to match storybook tone |
| Warning 警告 | Honeycomb | `#D4A040` | Warm amber, cohesive with gold accent |
| Error 錯誤 | Rose Thorn | `#C47070` | Soft muted red, not alarming |
| Info 資訊 | River Blue | `#7B9DB5` | Cool muted blue, gentle contrast |

### Surface & Depth

| Layer | Background | Shadow Color | Use |
|-------|-----------|-------------|-----|
| Canvas | `#FDF8F0` | — | Page base |
| Surface | `#F5EDE0` | `rgba(45, 33, 24, 0.04)` | Cards, panels |
| Elevated | `#FDF8F0` | `rgba(45, 33, 24, 0.08)` | Dropdowns, modals |
| Dark Section | `#2D2118` | — | Hero, footer, contrast bands |
| Dark Elevated | `#3D3128` | `rgba(0, 0, 0, 0.2)` | Cards on dark bg |

---

## 3. Typography Rules

### Font Stack

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

### 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 | Card titles |
| `display-sm` | Playfair Display | 28px | 600 | 1.2 | -0.3px | Sub-headings |
| `title-lg` | Nunito | 22px | 700 | 1.35 | 0 | Widget headers |
| `title-md` | Nunito | 18px | 700 | 1.4 | 0 | Card subtitles |
| `title-sm` | Nunito | 16px | 600 | 1.4 | 0 | Labels, nav items |
| `body-lg` | Nunito | 18px | 400 | 1.7 | 0 | Lead paragraphs |
| `body-md` | Nunito | 16px | 400 | 1.65 | 0 | Body text |
| `body-sm` | Nunito | 14px | 400 | 1.6 | 0 | Secondary text |
| `caption` | Nunito | 13px | 600 | 1.4 | 0.3px | Captions, meta |
| `caption-upper` | Nunito | 11px | 700 | 1.4 | 1.5px | Overline, category labels |
| `button` | Nunito | 15px | 700 | 1 | 0.3px | Button text |
| `badge` | Nunito | 12px | 700 | 1 | 0.5px | Badge / chip text |

### Drop Cap

```css
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 4px;
  color: #4A6B4E;
}
```

---

## 4. Component Stylings

### Buttons

| Variant | Background | Text | Border | Radius | Padding | Hover |
|---------|-----------|------|--------|--------|---------|-------|
| Primary | `#4A6B4E` | `#FFFFFF` | none | 12px | 14px 28px | `#3F5E43` |
| Secondary | `#D4A76A` | `#2D2118` | none | 12px | 14px 28px | `#C89A5E` |
| Outline | transparent | `#4A6B4E` | 2px `#4A6B4E` | 12px | 12px 26px | bg `#E8F0E9` |
| Ghost | transparent | `#4A3F35` | none | 12px | 14px 28px | bg `#F5EDE0` |
| Accent | `#E8A4B8` | `#2D2118` | none | 12px | 14px 28px | `#DE96AC` |
| Pill | `#F5EDE0` | `#4A3F35` | none | 9999px | 10px 24px | bg `#EBE3D5` |

### Cards

| Variant | Background | Border | Radius | Shadow | Padding |
|---------|-----------|--------|--------|--------|---------|
| Default | `#FDF8F0` | 1px `#EBE3D5` | 16px | `0 2px 8px rgba(45,33,24,0.04)` | 24px |
| Elevated | `#FDF8F0` | none | 16px | `0 4px 16px rgba(45,33,24,0.08)` | 24px |
| Tinted (Gold) | `#FDF5E8` | none | 16px | `0 2px 8px rgba(45,33,24,0.04)` | 24px |
| Tinted (Sage) | `#EFF5F0` | none | 16px | `0 2px 8px rgba(45,33,24,0.04)` | 24px |
| Tinted (Pink) | `#FDF0F4` | none | 16px | `0 2px 8px rgba(45,33,24,0.04)` | 24px |
| Dark | `#3D3128` | none | 16px | `0 4px 16px rgba(0,0,0,0.2)` | 24px |

### Portfolio Grid Card

```
┌──────────────────────┐
│                      │
│   [Illustration]     │  aspect-ratio: 4/3
│                      │
├──────────────────────┤
│ Title (display-sm)   │  padding: 20px
│ Category (caption)   │
│ [Learn More →]       │
└──────────────────────┘
```

- Image hover: `scale(1.03)` with `transition: 0.4s ease`
- Card hover: shadow deepens to `0 8px 24px rgba(45,33,24,0.1)`
- Overflow hidden on image container

### Input Fields

| State | Background | Border | Text |
|-------|-----------|--------|------|
| Default | `#FDF8F0` | 1.5px `#EBE3D5` | `#4A3F35` |
| Focus | `#FDF8F0` | 2px `#4A6B4E` | `#2D2118` |
| Error | `#FDF8F0` | 2px `#C47070` | `#2D2118` |
| Disabled | `#F5EDE0` | 1.5px `#EBE3D5` | `#B5ADA3` |

Radius: 12px, padding: 14px 16px, height: 48px.

### Navigation

| Element | Background | Text | Active Indicator |
|---------|-----------|------|-----------------|
| Top Bar | `#FDF8F0` / transparent | `#4A3F35` | `#4A6B4E` underline (2px) |
| Nav Link | transparent | `#8A7E72` | — |
| Nav Link Active | transparent | `#4A6B4E` | bottom border |
| Nav Link Hover | transparent | `#2D2118` | — |
| Mobile Menu | `#FDF8F0` | `#2D2118` | `#4A6B4E` left border |

### Tags & Badges

| Variant | Background | Text | Radius |
|---------|-----------|------|--------|
| Default | `#F5EDE0` | `#4A3F35` | 9999px |
| Gold | `#FDF5E8` | `#A07840` | 9999px |
| Sage | `#EFF5F0` | `#4A6B4E` | 9999px |
| Pink | `#FDF0F4` | `#C07A90` | 9999px |
| Lavender | `#F4F0F8` | `#8A70A8` | 9999px |

### Decorative Elements

**Section Divider:**
```
◆ ✦ ◆
```
Color: `#D4A76A`, font-size: 14px, letter-spacing: 8px, margin: 48px auto.

**Botanical Border (CSS):**
```css
.botanical-border {
  border: 1px solid #EBE3D5;
  border-image: linear-gradient(90deg, #EBE3D5 0%, #D4A76A 50%, #EBE3D5 100%) 1;
}
```

**Quote Block:**
```css
blockquote {
  border-left: 3px solid #D4A76A;
  padding: 16px 24px;
  background: #FDF5E8;
  border-radius: 0 12px 12px 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #4A3F35;
}
```

---

## 5. Layout Principles

### Spacing System (8px base)

| Token | Value | Use |
|-------|-------|-----|
| `xxs` | 4px | Inline icon gaps |
| `xs` | 8px | Tight element gaps |
| `sm` | 12px | Related element spacing |
| `md` | 16px | Default component padding |
| `lg` | 24px | Card padding, form gaps |
| `xl` | 32px | Section sub-gaps |
| `2xl` | 48px | Section inner padding |
| `3xl` | 64px | Section vertical spacing |
| `section` | 96px | Major section breaks |
| `hero` | 120px | Hero vertical padding |

### Grid System

| Context | Columns | Gap | Max Width |
|---------|---------|-----|-----------|
| Portfolio Grid | 3 (→2 →1) | 24px | 1200px |
| Content | 1 | — | 720px |
| Services | 4 (→2 →1) | 24px | 1200px |
| Footer | 4 (→2 →1) | 32px | 1200px |

### Container

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 720px;
}
```

---

## 6. Depth & Elevation

| Level | Shadow | Use |
|-------|--------|-----|
| Level 0 | none | Flat elements, inline badges |
| Level 1 | `0 1px 3px rgba(45,33,24,0.04)` | Resting cards, input fields |
| Level 2 | `0 2px 8px rgba(45,33,24,0.06)` | Hovered cards, active inputs |
| Level 3 | `0 4px 16px rgba(45,33,24,0.08)` | Dropdowns, popovers |
| Level 4 | `0 8px 32px rgba(45,33,24,0.12)` | Modals, lightbox |
| Level 5 | `0 16px 48px rgba(45,33,24,0.16)` | Full-screen overlays |

All shadows use warm `rgba(45, 33, 24, ...)` — never cool gray or pure black shadows.

---

## 7. Do's and Don'ts

### Do's

1. **Do** use warm cream `#FDF8F0` as page background — never pure white `#FFFFFF`
2. **Do** maintain generous whitespace between sections (96px+) to let content breathe like a book page
3. **Do** use Playfair Display for headings only — never for body text or UI labels
4. **Do** apply rounded corners (12-16px) consistently to maintain the organic, approachable feel
5. **Do** use warm-toned shadows with `rgba(45,33,24,...)` to keep depth cohesive
6. **Do** employ the decorative divider `◆ ✦ ◆` sparingly between major sections
7. **Do** let illustrations be the hero — large, full-width, with generous padding
8. **Do** use tinted card backgrounds (gold/sage/pink) to create visual variety without adding new colors
9. **Do** animate hover states with gentle ease transitions (0.3-0.4s)
10. **Do** pair Forest Moss with Golden Afternoon for CTA combinations

### Don'ts

1. **Don't** use pure black `#000000` for text — use Woodland Brown `#2D2118`
2. **Don't** use sharp corners (0px radius) — minimum 8px for any interactive element
3. **Don't** use more than 2 accent colors on a single page section
4. **Don't** use heavy drop shadows or hard edges — this is a watercolor world, not a blueprint
5. **Don't** set body text in serif (Playfair) — reserve serif for display and pull quotes
6. **Don't** use neon, saturated, or electric colors — all accents should feel like they come from nature
7. **Don't** crowd illustrations with text overlays — let images speak without obstruction
8. **Don't** use pure gray for muted text — warm grays only (Driftwood `#8A7E72`)
9. **Don't** mix more than 3 font weights on a single view
10. **Don't** use animation durations under 0.2s — transitions should feel organic, not snappy

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Layout Changes |
|------|-------|----------------|
| `mobile` | < 640px | 1-column, stacked nav, 16px padding |
| `tablet` | 640–1024px | 2-column grid, hamburger nav optional |
| `desktop` | > 1024px | Full grid, horizontal nav, max-width containers |

### Typography Scaling

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

### Touch Targets

- Minimum tap target: 44 × 44px
- Button min height: 48px on mobile
- Nav links: 48px row height on mobile menu

### Collapsing Strategy

| Element | Mobile Behavior |
|---------|----------------|
| Portfolio Grid | 3-col → 1-col, cards stack vertically |
| Services Grid | 4-col → 1-col |
| Navigation | Horizontal → hamburger overlay |
| Section Padding | 96px → 48px |
| Hero Padding | 120px → 64px |
| Card Padding | 24px → 16px |

---

## 9. Agent Prompt Guide

### Quick Color Reference

```
Canvas:             #FDF8F0  (warm cream)
Surface:            #F5EDE0  (warm paper)
Surface Strong:     #EBE3D5  (linen)
Ink:                #2D2118  (woodland brown)
Body:               #4A3F35  (bark)
Muted:              #8A7E72  (driftwood)
Golden Afternoon:   #D4A76A  (primary accent)
Forest Moss:        #4A6B4E  (anchor green)
Cotton Candy:       #E8A4B8  (soft pink)
Willow Sage:        #94B49A  (sage green)
Fawn Beige:         #C9A882  (warm sand)
Storybook Lavender: #B5A0CC  (soft purple)
Dark Section BG:    #2D2118  (woodland brown)
Dark Elevated:      #3D3128  (warm dark)
```

### Ready-to-Use Prompts

**Portfolio Landing Page:**
```
Build a portfolio landing page with warm cream background (#FDF8F0). Hero section
with Playfair Display 64px heading in Woodland Brown (#2D2118), decorative gold
divider (◆ ✦ ◆ in #D4A76A). Portfolio grid: 3 columns, 16px radius cards with
warm shadow, 4:3 image aspect ratio, hover scale(1.03). Navigation: horizontal
links in Nunito 600, Forest Moss (#4A6B4E) active state. Footer on dark
Woodland Brown (#2D2118) background.
```

**Illustration Gallery:**
```
Create an illustration gallery with masonry grid on Parchment Cream (#FDF8F0).
Cards with 16px radius, image overflow hidden, Playfair Display titles. Category
filter pills (9999px radius) in Forest Moss, Cotton Candy, Golden Afternoon
tints. Hover: card lifts with deeper shadow, image scales 1.03. "Learn More"
links in Forest Moss (#4A6B4E) with arrow animation on hover.
```

**About / Bio Page:**
```
Design an about page with narrow container (720px). Hero image full-width with
16px radius. Drop cap opening paragraph in Forest Moss (#4A6B4E) Playfair
Display. Body text in Nunito 16px/1.65 Bark (#4A3F35). Experience timeline with
golden left border (#D4A76A). Skills badges in tinted pills (sage, pink,
lavender). Contact CTA button: Forest Moss primary, 12px radius.
```

**Dark Feature Section:**
```
Build a dark contrast section with Woodland Brown (#2D2118) background. Heading
in Playfair Display, color Parchment Cream (#FDF8F0). Body text in #B5ADA3.
Accent details in Golden Afternoon (#D4A76A). Cards: #3D3128 background with
16px radius and rgba(0,0,0,0.2) shadow. CTA button: Golden Afternoon background
with dark text. Decorative divider ◆ ✦ ◆ in muted gold.
```

**Services Overview:**
```
Create a 4-column services grid on warm paper (#F5EDE0). Each card: white
(#FDF8F0) background, 16px radius, icon in Forest Moss, title in Playfair
Display display-sm, description in Nunito body-md. Hover: shadow deepens,
subtle border-top appears in card's theme color (rotate: golden, sage, pink,
lavender). CTA at bottom: "Get a Quote" in Forest Moss primary button.
```

### Image Generation Keywords

```
Storybook illustration, watercolor texture, botanical elements, woodland
creatures, soft golden light, dreamy atmosphere, children's book art style,
hand-painted, nature-inspired, muted pastel palette, warm amber glow, forest
canopy, whimsical, organic shapes, gentle brushstrokes, enchanted forest
```