# Design System: TingYu's Classical Morandi

## 1. Visual Theme & Atmosphere

This design system embodies a **classical warmth** inspired by Giorgio Morandi's muted palette — colors that feel like they've been filtered through morning light on linen. The philosophy is "handcrafted elegance": every surface should feel like quality stationery, not a tech dashboard. Backgrounds are cream and mint rather than clinical white; purples are dusty and smoky rather than electric; even the darkest tones carry warmth.

Typography anchors the classical identity. **Playfair Display** — a transitional serif with high contrast and delicate hairlines — commands headings, evoking editorial print magazines. **Lora** serves long-form reading with its calligraphic curves. **Noto Sans TC / Noto Serif TC** provide CJK coverage that respects the bilingual (EN/ZH-TW) nature of the content. The result is a system where English speaks in serif elegance and Chinese flows in approachable clarity.

The overall density is **low**. Generous whitespace, soft shadows, and slow fade-in animations create a browsing experience that feels unhurried — like walking through a gallery, not scrolling through a feed. Gold accents (`#C9A96E`) appear sparingly as decorative dividers and highlights, reinforcing the craft-forward identity.

**Key Characteristics:**
- Morandi-inspired muted palette: mint, lavender, cream — all desaturated, all warm
- Classical serif typography: Playfair Display headlines, Lora body, Noto CJK
- Low visual density with generous whitespace and slow reveal animations
- Gold decorative elements as craft signature (dividers, accents, badges)
- Cream canvas (`#F8F7EE`) — paper-like warmth, never clinical white
- Bilingual design: English for concepts, Chinese for storytelling
- Soft shadow system — felt, not seen
- Drop caps and editorial typographic details

## 2. Color Palette & Roles

### Primary Surfaces

| Name | Hex | Role |
|------|-----|------|
| **Mint Ice** | `#E3F3F1` | Hero backgrounds, section highlights, text selection background |
| **Mint Green** | `#C9E4E2` | Secondary surface, hover states on mint, active section indicator |
| **Cream** | `#F8F7EE` | Page background — the default canvas, warm paper tone |
| **Frost** | `#F4F6F7` | Alternate section background, card surface on cream, subtle contrast |

### Accent — Purple Scale

| Name | Hex | Role |
|------|-----|------|
| **Lavender** | `#A186B4` | Primary accent — buttons, links, tags, focus rings, category badges |
| **Deep Purple Gray** | `#745A86` | Hover/active state for lavender elements, dark accent text, nav emphasis |
| **Purple Mist** | `#C4B0D4` | Derived — light purple for badge backgrounds, pill fills, soft highlights |
| **Mist Purple** | `#9585A6` | Derived — dark section background (quotes, CTAs); Morandi grey-violet |
| **Purple Shadow** | `#745A86` | Derived — hover/pressed state only; NOT for backgrounds |

### Accent — Gold (Decorative)

| Name | Hex | Role |
|------|-----|------|
| **Gold** | `#C9A96E` | Decorative dividers, drop cap color, signature accents, star ratings |
| **Gold Light** | `#E8D5A8` | Gold borders, horizontal rules, subtle gold tints on hover |

### Accent — Chocolate (Warm Neutral)

| Name | Hex | Role |
|------|-----|------|
| **Light Chocolate** | `#A08D7A` | Tertiary text, timestamps, metadata, image captions |
| **Chocolate** | `#8B7355` | Warm mid-tone for borders on cream, tag outlines, muted icons |
| **Chocolate Dark** | `#6B5744` | Dark warm neutral — footer text on dark backgrounds, code block borders |

### Text Scale

| Name | Hex | Role |
|------|-----|------|
| **Ink** | `#1A202C` | Primary text — warm near-black, never pure `#000000` |
| **Ink Muted** | `#4A5568` | Secondary text — descriptions, subtitles, body secondary |
| **Ink Light** | `#718096` | Placeholder text, disabled labels, tertiary information |
| **Inverse** | `#FDFCF8` | Text on dark surfaces (purple/chocolate dark backgrounds) |

### Semantic

| Name | Hex | Role |
|------|-----|------|
| **Success** | `#7BAE8E` | Morandi sage green — success states, confirmations |
| **Warning** | `#D4A96A` | Warm amber — warnings, attention (close to gold but distinct) |
| **Error** | `#C07A7A` | Dusty rose-red — errors, destructive actions (muted, not alarming) |
| **Info** | `#7A9EB5` | Steel blue-gray — informational badges, help text |

### Shadows & Depth

| Token | Value | Usage |
|-------|-------|-------|
| **shadow-soft** | `0 4px 20px rgba(26, 32, 44, 0.06)` | Cards, floating elements |
| **shadow-card** | `0 2px 12px rgba(26, 32, 44, 0.04)` | List items, subtle card lift |
| **shadow-elevated** | `0 8px 32px rgba(26, 32, 44, 0.08), 0 2px 8px rgba(26, 32, 44, 0.04)` | Modals, dropdowns, popovers |
| **shadow-inner** | `inset 0 1px 3px rgba(26, 32, 44, 0.06)` | Input fields, pressed buttons |
| **border-whisper** | `1px solid rgba(26, 32, 44, 0.08)` | Card borders, dividers — barely visible structure |

## 3. Typography Rules

### Font Families

| Role | Font | Fallback | Usage |
|------|------|----------|-------|
| **Heading** | Playfair Display | Georgia, serif | All headings (h1–h6), hero text, display |
| **Body (EN)** | Lora | Georgia, serif | Long-form English articles, blog body |
| **Body (UI)** | Noto Sans TC | system-ui, sans-serif | UI text, navigation, buttons, labels |
| **Body (ZH articles)** | Noto Serif TC | serif | Chinese article paragraphs |
| **Monospace** | JetBrains Mono | Consolas, monospace | Code blocks, technical content |

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Playfair Display | 48px (3.00rem) | 700 | 1.15 | -0.5px | Homepage hero, max impact |
| Page Title | Playfair Display | 36px (2.25rem) | 700 | 1.20 | -0.3px | Page headings (h1) |
| Section Heading | Playfair Display | 28px (1.75rem) | 600 | 1.25 | -0.2px | Section titles (h2) |
| Sub-heading | Playfair Display | 22px (1.375rem) | 600 | 1.30 | normal | Subsection titles (h3) |
| Card Title | Playfair Display | 18px (1.125rem) | 600 | 1.35 | normal | Card headings, list titles |
| Body Large | Lora / Noto Serif TC | 18px (1.125rem) | 400 | 1.75 | normal | Article intro, lead paragraphs |
| Body | Lora / Noto Serif TC | 16px (1.00rem) | 400 | 1.70 | normal | Standard article reading |
| UI Text | Noto Sans TC | 16px (1.00rem) | 400 | 1.50 | normal | Interface text, descriptions |
| UI Medium | Noto Sans TC | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI |
| Button | Noto Sans TC | 15px (0.9375rem) | 500 | 1.33 | 0.3px | Button labels, CTAs |
| Caption | Noto Sans TC | 14px (0.875rem) | 400 | 1.50 | normal | Metadata, dates, captions |
| Small | Noto Sans TC | 12px (0.75rem) | 400 | 1.50 | 0.2px | Tags, badges, footnotes |
| Drop Cap | Playfair Display | 64px (4.00rem) | 700 | 1.00 | normal | First letter of articles, color: Gold |

### Principles

- **Serif for soul, sans for structure**: Headings and articles use serif fonts for warmth and editorial gravitas. UI elements use sans-serif for clarity and legibility.
- **Generous line-height**: Body text at 1.70–1.75 creates an airy, unhurried reading rhythm. CJK text especially benefits from this breathing room.
- **Weight restraint**: Headings use 600–700, never 800/900. Body never goes below 400. The narrow weight range creates harmony rather than shouting hierarchy.
- **Drop caps as signature**: The first letter of each article uses Playfair Display at 64px in Gold (`#C9A96E`), establishing an editorial, book-like identity.
- **Negative tracking at display only**: Letter-spacing tightens only above 28px (-0.2px to -0.5px). Body and UI text remain at normal spacing for maximum readability.

## 4. Component Stylings

### Buttons

**Primary (Lavender)**
- Background: `#A186B4` (Lavender)
- Text: `#FDFCF8` (Inverse)
- Padding: 10px 24px
- Radius: 12px (`--radius-warm`)
- Border: none
- Hover: background `#745A86` (Deep Purple Gray), transition 0.2s ease
- Active: background `#5D4670` (Purple Shadow), scale(0.98)
- Focus: `2px solid #A186B4`, offset 2px

**Secondary (Outline)**
- Background: transparent
- Text: `#745A86` (Deep Purple Gray)
- Padding: 10px 24px
- Radius: 12px
- Border: `1.5px solid #A186B4`
- Hover: background `rgba(161, 134, 180, 0.08)`, border `#745A86`
- Active: background `rgba(161, 134, 180, 0.15)`

**Ghost (Text-only)**
- Background: transparent
- Text: `#A186B4`
- Decoration: none; hover adds underline with `text-underline-offset: 4px`
- Use: Inline actions, "Read more →", breadcrumbs

**Gold Accent (Decorative CTA)**
- Background: transparent
- Text: `#C9A96E`
- Border: `1.5px solid #E8D5A8`
- Hover: background `rgba(201, 169, 110, 0.08)`, border `#C9A96E`
- Use: Special occasions — featured work CTAs, premium actions

### Cards

**Standard Card**
- Background: `#FDFCF8` (warm white, slightly darker than page cream)
- Border: `1px solid rgba(26, 32, 44, 0.06)`
- Radius: 12px
- Shadow: `shadow-card` (0 2px 12px rgba(0,0,0,0.04))
- Padding: 24px
- Hover: shadow transitions to `shadow-soft`, translateY(-2px), transition 0.3s ease

**Featured Card**
- Background: `#E3F3F1` (Mint Ice)
- Border: `1px solid #C9E4E2` (Mint Green)
- Radius: 12px
- Shadow: `shadow-soft`
- Gold top-border accent: `border-top: 3px solid #E8D5A8`

**Dark Card (Mist Purple)**
- Background: `#9585A6` (Mist Purple)
- Text: `#FDFCF8` (Inverse)
- Border: none
- Shadow: `0 4px 20px rgba(149, 133, 166, 0.2)`
- Use: Testimonials, pull-quotes, CTAs on cream backgrounds

### Inputs

- Background: `#FDFCF8`
- Border: `1.5px solid rgba(26, 32, 44, 0.12)`
- Radius: 8px
- Padding: 10px 14px
- Focus: border `#A186B4`, shadow `0 0 0 3px rgba(161, 134, 180, 0.15)`
- Placeholder: `#718096` (Ink Light)
- Error: border `#C07A7A`, shadow `0 0 0 3px rgba(192, 122, 122, 0.15)`

### Navigation

- Background: `#F8F7EE` with `backdrop-filter: blur(12px)` on scroll
- Sticky header, border-bottom: `1px solid #E8D5A8` (Gold Light)
- Logo/brand: Playfair Display, 20px, weight 700, color `#1A202C`
- Nav links: Noto Sans TC, 15px, weight 500, color `#4A5568`
- Active link: color `#745A86`, `border-bottom: 2px solid #A186B4`
- Hover: color `#745A86`, transition 0.2s
- Mobile: slide-in drawer with cream background

### Tags & Badges

**Category Badge**
- Background: `rgba(161, 134, 180, 0.12)` (Purple Mist tint)
- Text: `#745A86`
- Padding: 4px 12px
- Radius: 9999px (pill)
- Font: 12px, weight 500

**Gold Badge**
- Background: `rgba(201, 169, 110, 0.12)`
- Text: `#8B7355` (Chocolate)
- Border: `1px solid #E8D5A8`

### Decorative Elements

**Section Divider (Gold Rule)**
- Width: 60px centered
- Height: 2px
- Background: `linear-gradient(90deg, transparent, #C9A96E, transparent)`
- Margin: 32px auto

**Classical Ornament Divider**
- Combination: gold line + centered ornament glyph (✦ or ❧)
- Ornament color: `#C9A96E`
- Line: `1px solid #E8D5A8`

**Hero Section**
- Background: `#E3F3F1` (Mint Ice)
- Top/bottom border: `2px solid #E8D5A8` (Gold Light)
- Padding: 24px (mobile) / 40px (desktop)
- Text centered, classical divider below heading

## 5. Layout Principles

### Spacing Scale (8px base)

| Token | Value | Usage |
|-------|-------|-------|
| `space-1` | 4px | Inline icon gap, badge internal padding |
| `space-2` | 8px | Tight element spacing, tag margins |
| `space-3` | 12px | Form field gaps, compact card padding |
| `space-4` | 16px | Standard element spacing, paragraph gaps |
| `space-5` | 24px | Card padding, section internal spacing |
| `space-6` | 32px | Section separators, major element gaps |
| `space-8` | 48px | Between major page sections |
| `space-10` | 64px | Hero padding, page-level breathing room |
| `space-12` | 80px | Large section separators, top-level spacing |

### Grid

- Max content width: **768px** for article body (optimal serif reading width)
- Max layout width: **1200px** for grid layouts (portfolio, card grids)
- Columns: 1 (mobile) → 2 (tablet 768px) → 3 (desktop 1024px)
- Gutter: 24px (mobile) → 32px (desktop)
- Side margins: 16px (mobile) → 32px (tablet) → auto-centered (desktop)

### Whitespace Philosophy

> "If a surface feels empty, it's working. Whitespace is the frame that makes the content a painting."

- Prefer **vertical breathing room** over horizontal density
- Between sections: minimum 48px, preferred 64px
- Article paragraphs: margin-bottom 1.5em (not 1em)
- No section should feel crowded; if it does, remove elements, don't shrink spacing
- Images in articles use full content-width; never pack them tightly

## 6. Depth & Elevation

### Surface Hierarchy

| Level | Surface | Shadow | Use |
|-------|---------|--------|-----|
| 0 (Canvas) | `#F8F7EE` Cream | none | Page background |
| 1 (Recessed) | `#F4F6F7` Frost | `shadow-inner` | Input fields, recessed panels |
| 2 (Tinted) | `#E3F3F1` Mint Ice | none | Hero sections, highlighted areas |
| 3 (Card) | `#FDFCF8` Warm White | `shadow-card` | Cards, list items |
| 4 (Elevated) | `#FDFCF8` Warm White | `shadow-soft` | Hovered cards, active elements |
| 5 (Floating) | `#FDFCF8` Warm White | `shadow-elevated` | Modals, dropdowns, popovers |

### Principles

- **No hard shadows**: All shadows use warm-tinted rgba (base `26, 32, 44`) at very low opacity (0.04–0.08). Shadows should feel like natural light diffusion, not digital effects.
- **Elevation through tint, not just shadow**: The Mint Ice and Frost colors create visual layers without relying on shadow alone.
- **Two-layer max**: Never stack more than two shadow layers. Complexity undermines the calm aesthetic.
- **Gold borders as elevation cue**: A gold top-border on a card signals "featured" more effectively than deeper shadow.

## 7. Do's and Don'ts

### Do

- Use serif fonts for emotional, narrative content (articles, about pages)
- Let whitespace do the heavy lifting — generous margins, breathing room
- Use gold accents sparingly as signature touches (dividers, drop caps, featured borders)
- Maintain the warm undertone: cream backgrounds, warm near-black text, dusty accents
- Use the mint/purple/chocolate triad as the primary color rhythm
- Apply slow, subtle animations (0.3s–0.7s ease-out) for scroll reveals
- Design bilingual layouts where EN and ZH-TW coexist naturally, not as translations
- Use images at full content width with rounded corners (8px)

### Don't

- Use pure black (`#000000`) for text — always use Ink (`#1A202C`) or warmer
- Use pure white (`#FFFFFF`) for backgrounds — always use Cream (`#F8F7EE`) or Frost (`#F4F6F7`)
- Add neon, saturated, or electric colors — all accents should feel grey-mixed, dusty
- Use sans-serif for article headings — Playfair Display is the editorial anchor
- Create dense, dashboard-like layouts — this is a gallery, not a control panel
- Use heavy borders (2px+ solid dark) — prefer whisper borders or shadow-based edges
- Add aggressive animations (bounce, elastic, spin) — motion should be gentle
- Place more than 3 accent colors on a single surface — the palette is muted, not rainbow
- Use all-caps for body or UI text — reserve for small labels (12px) only, and sparingly
- Make interactive elements look flat — every clickable element needs a visible hover state

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Adjustments |
|------|-------|-------------|
| **Mobile** | < 640px | Single column, 16px margins, stacked navigation |
| **Tablet** | 640–1023px | Two-column grids, 32px margins, condensed hero |
| **Desktop** | 1024–1279px | Three-column grids, full navigation, max content width |
| **Wide** | ≥ 1280px | Centered layout with auto margins, decorative side space |

### Typography Scaling

| Role | Mobile | Tablet | Desktop |
|------|--------|--------|---------|
| Display Hero | 32px | 40px | 48px |
| Page Title | 28px | 32px | 36px |
| Section Heading | 22px | 26px | 28px |
| Body | 16px | 16px | 16px |

### Touch Targets

- Minimum: 44 × 44px (WCAG 2.5.8)
- Buttons: full-width on mobile (< 640px), auto-width on desktop
- Navigation links: 48px row height on mobile
- Card click area: entire card surface, not just text

### Collapsing Strategy

- **Navigation**: Horizontal → hamburger menu at < 768px, slide-in drawer
- **Hero**: Reduces vertical padding from `py-10` to `py-6`
- **Card grids**: 3-col → 2-col → 1-col stacked
- **Side-by-side images**: Grid → stack vertically on mobile
- **Article width**: Fixed at max 768px, centered, with fluid side margins
- **Gold dividers**: Scale from 60px to 40px width on mobile

## 9. Agent Prompt Guide

### Quick Color Reference

```
Page background:     #F8F7EE  (Cream)
Alt background:      #F4F6F7  (Frost)
Hero background:     #E3F3F1  (Mint Ice)
Hero border:         #C9E4E2  (Mint Green)
Primary accent:      #A186B4  (Lavender)
Accent hover/dark:   #745A86  (Deep Purple Gray)
Gold decorative:     #C9A96E  (Gold)
Gold light border:   #E8D5A8  (Gold Light)
Warm neutral:        #A08D7A  (Light Chocolate)
Dark neutral:        #8B7355  (Chocolate)
Primary text:        #1A202C  (Ink)
Secondary text:      #4A5568  (Ink Muted)
Inverse text:        #FDFCF8  (Warm White)
```

### Ready-to-Use Prompts

**"Build a landing page"**
> Use Cream (#F8F7EE) background. Hero section in Mint Ice (#E3F3F1) with Gold Light (#E8D5A8) top/bottom borders. Playfair Display 48px bold heading in Ink (#1A202C). Subtitle in Ink Muted (#4A5568) at 18px Noto Sans TC. Primary CTA button: Lavender (#A186B4) background, white text, 12px radius. Gold ornament divider (60px centered gradient line) between sections. Cards on warm white (#FDFCF8) with soft shadow (0 2px 12px rgba(0,0,0,0.04)). All serif headings, all sans-serif body.

**"Build an article page"**
> Max-width 768px centered on Cream (#F8F7EE). Title in Playfair Display 36px bold. Drop cap: first letter 64px Playfair Display in Gold (#C9A96E). Body text in Lora 16px/1.7 for English, Noto Serif TC for Chinese. Section dividers: 60px centered gold gradient line. Image full-width with 8px radius. Tags as purple pills: rgba(161,134,180,0.12) background, #745A86 text, pill radius. Metadata in Light Chocolate (#A08D7A) 14px. Signature block at bottom: Playfair Display italic, gold divider above.

**"Build a portfolio grid"**
> Three-column grid at 1024px+, two at 768px, one on mobile. 32px gap. Each card: warm white (#FDFCF8) background, whisper border (1px solid rgba(26,32,44,0.06)), 12px radius, soft shadow. Hover: shadow deepens, card lifts 2px, 0.3s ease transition. Image on top, rounded top corners. Title in Playfair Display 18px/600. Category badge: purple pill. Description in Noto Sans TC 14px Ink Muted.

**"Build a dark section"**
> Background: Mist Purple (#9585A6). Text: Warm White (#FDFCF8). Heading: Playfair Display in Warm White. Accent elements in Gold Light (#E8D5A8). Buttons: Gold outline (1.5px solid rgba(232,213,168,0.5)), gold text. Shadow: 0 4px 20px rgba(149,133,166,0.2). Use for testimonials, pull-quotes, or CTAs that need contrast against the cream page. Deep Purple Gray (#745A86) is reserved for hover/pressed states only.

### Palette Mood Keywords

When prompting image generation for this brand, include these keywords:
> Morandi palette, muted tones, dusty pastels, grey-mixed colors, soft natural light, linen texture, classical warmth, editorial elegance, low saturation, analog warmth, watercolor softness