# Design System: Petal Cream 花瓣奶霜

## 1. Visual Theme & Atmosphere

**Petal Cream** is a whimsical, feminine design system inspired by the handmade warmth of an illustrator's studio. Soft cream canvases serve as the backdrop for delicate blush accents and warm taupe textures, creating a space that feels like opening a beautiful stationery box.

The design philosophy follows the **"Canvas Strategy"**: keep the environment neutral and warm so that colorful content — illustrations, artwork, photography — becomes the hero. The brand itself whispers; the art sings.

**Core Qualities:**
- 🌸 **Whimsical** — playful decorative elements, hand-drawn character
- 🎀 **Feminine** — soft blush tones, gentle curves, generous whitespace
- ✋ **Artisanal** — handwritten typography, imperfect warmth, human touch
- ☁️ **Nurturing** — low-contrast, low-pressure, comfort-first palette

**Mood**: A sunlit craft room with dried flowers, cream-colored paper, and watercolor swatches scattered across a wooden desk.

---

## 2. Color Palette & Roles

### Core Palette

| Name | 中文名 | HEX | Role |
|------|--------|-----|------|
| **Cream Canvas** | 奶油畫布 | `#F5F0EB` | Primary background — warm paper-like base |
| **Blush Petal** | 花瓣粉 | `#E8C4C4` | Primary accent — feminine warmth, CTAs, highlights |
| **Warm Taupe** | 暖灰褐 | `#C4B5A7` | Secondary — dividers, borders, supporting elements |
| **Charcoal Ink** | 墨炭灰 | `#3A3535` | Text — warm near-black, readable without harshness |

### Extended Palette

| Name | 中文名 | HEX | Role |
|------|--------|-----|------|
| **Petal Light** | 淡花瓣 | `#F4E2E2` | Blush tint — badge backgrounds, card tints, soft highlights |
| **Petal Deep** | 深花瓣 | `#D4A0A0` | Blush hover/active — interactive states |
| **Rose Gold** | 玫瑰金 | `#D4A98C` | Warm accent — decorative elements, special badges |
| **Taupe Light** | 淺灰褐 | `#DDD4CB` | Light border — card edges, subtle separators |
| **Taupe Deep** | 深灰褐 | `#A89888` | Dark support — secondary text, muted labels |
| **Canvas Warm** | 暖畫布 | `#EDE5DC` | Card surface — elevated surface on cream background |
| **Ivory White** | 象牙白 | `#FDFBF9` | Lightest surface — modal/overlay backgrounds |
| **Ink Soft** | 柔墨灰 | `#6B6262` | Secondary text — captions, timestamps, metadata |

### Semantic Colors

| Role | Name | HEX | Note |
|------|------|-----|------|
| **Success** | Sage Bloom 鼠尾草 | `#8FB5A3` | Muted sage — keeps the soft aesthetic |
| **Warning** | Honey Amber 蜂蜜琥珀 | `#D4B896` | Warm amber — gentle alert, not alarming |
| **Error** | Soft Rose 柔玫瑰 | `#D49494` | Rose pink — error without aggression |
| **Info** | Dusty Blue 灰藍 | `#94AEC4` | Muted blue — informational, calm |

### Interactive States

| State | Method | Example (Blush Petal) |
|-------|--------|----------------------|
| **Default** | Base color | `#E8C4C4` |
| **Hover** | Saturation +5%, Lightness -10% | `#DEB0B0` |
| **Active** | Saturation +5%, Lightness -20% | `#D49A9A` |
| **Focus ring** | Base color @ 30% opacity | `rgba(232, 196, 196, 0.3)` |
| **Disabled** | Base color @ 40% opacity | `rgba(232, 196, 196, 0.4)` |

### Dark Section Palette

For contrast sections or dark mode contexts:

| Role | HEX | Note |
|------|-----|------|
| Dark Background | `#3A3535` | Charcoal Ink as bg |
| Dark Surface | `#4A4444` | Elevated surface on dark |
| Dark Text | `#F5F0EB` | Cream Canvas as text |
| Dark Accent | `#E8C4C4` | Blush Petal stays the same |
| Dark Muted | `#A89888` | Taupe Deep for secondary text |

---

## 3. Typography Rules

### Font Stack

| Role | Font | Weight | Fallback |
|------|------|--------|----------|
| **Display / Brand** | Caveat | 700 | cursive |
| **Heading** | Quicksand | 600, 700 | sans-serif |
| **Body** | Nunito | 400, 600 | sans-serif |
| **CJK** | Noto Sans TC | 400, 700 | sans-serif |
| **Monospace** | JetBrains Mono | 400 | monospace |

### Type Scale

| Level | Size (desktop) | Size (mobile) | Weight | Font | Line Height | Letter Spacing |
|-------|---------------|---------------|--------|------|-------------|----------------|
| **Display** | 48px / 3rem | 36px / 2.25rem | 700 | Caveat | 1.2 | 0 |
| **H1** | 36px / 2.25rem | 28px / 1.75rem | 700 | Quicksand | 1.3 | -0.01em |
| **H2** | 28px / 1.75rem | 24px / 1.5rem | 700 | Quicksand | 1.3 | -0.005em |
| **H3** | 22px / 1.375rem | 20px / 1.25rem | 600 | Quicksand | 1.4 | 0 |
| **H4** | 18px / 1.125rem | 16px / 1rem | 600 | Quicksand | 1.4 | 0.01em |
| **Body** | 16px / 1rem | 16px / 1rem | 400 | Nunito | 1.7 | 0.01em |
| **Body Bold** | 16px / 1rem | 16px / 1rem | 600 | Nunito | 1.7 | 0.01em |
| **Small** | 14px / 0.875rem | 14px / 0.875rem | 400 | Nunito | 1.6 | 0.01em |
| **Caption** | 12px / 0.75rem | 12px / 0.75rem | 400 | Nunito | 1.5 | 0.02em |
| **Badge** | 11px / 0.6875rem | 11px / 0.6875rem | 600 | Quicksand | 1.2 | 0.05em |

### CJK Typography

```css
font-family: 'Quicksand', 'Noto Sans TC', sans-serif; /* headings */
font-family: 'Nunito', 'Noto Sans TC', sans-serif;     /* body */
font-family: 'Caveat', cursive;                         /* display only */
```

CJK text uses Noto Sans TC for friendliness and readability. Avoid Noto Serif TC — the brand is whimsical, not classical.

---

## 4. Component Stylings

### Buttons

**Primary (Blush Petal)**
```css
background: #E8C4C4;
color: #3A3535;
border: none;
border-radius: 24px;
padding: 12px 28px;
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.02em;
transition: all 0.25s ease;
/* Hover: background #DEB0B0, transform translateY(-1px), shadow */
/* Active: background #D49A9A, transform translateY(0) */
```

**Outline (Taupe Border)**
```css
background: transparent;
color: #3A3535;
border: 1.5px solid #C4B5A7;
border-radius: 24px;
padding: 11px 27px;
/* Hover: border-color #A89888, background rgba(196,181,167,0.08) */
```

**Ghost (Text Only)**
```css
background: transparent;
color: #D4A0A0;
border: none;
padding: 8px 16px;
text-decoration: underline;
text-underline-offset: 3px;
/* Hover: color #C48888 */
```

**Accent (Rose Gold)**
```css
background: #D4A98C;
color: #FDFBF9;
border: none;
border-radius: 24px;
padding: 12px 28px;
/* Hover: background #C49878 */
```

### Cards

```css
background: #FDFBF9;        /* Ivory White surface */
border: 1px solid #DDD4CB;  /* Taupe Light border */
border-radius: 16px;
padding: 24px;
box-shadow: 0 2px 8px rgba(58, 53, 53, 0.04);
transition: all 0.3s ease;
/* Hover: box-shadow 0 4px 16px rgba(58,53,53,0.08), translateY(-2px) */
```

**Card with Blush Tint**
```css
background: #F4E2E2;        /* Petal Light */
border: 1px solid #E8C4C4;
```

### Input Fields

```css
background: #FDFBF9;
border: 1.5px solid #DDD4CB;
border-radius: 12px;
padding: 12px 16px;
font-family: 'Nunito', sans-serif;
font-size: 16px;
color: #3A3535;
transition: border-color 0.2s ease;
/* Focus: border-color #E8C4C4, box-shadow 0 0 0 3px rgba(232,196,196,0.2) */
/* Placeholder: color #A89888 */
```

### Navigation

```css
/* Top bar */
background: #F5F0EB;
border-bottom: 1px solid #DDD4CB;
padding: 16px 24px;

/* Nav links */
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 14px;
color: #6B6262;
letter-spacing: 0.02em;
/* Active: color #3A3535, border-bottom 2px solid #E8C4C4 */
/* Hover: color #3A3535 */
```

### Tags & Badges

```css
/* Soft badge */
background: #F4E2E2;
color: #D4A0A0;
border-radius: 20px;
padding: 4px 12px;
font-family: 'Quicksand', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;

/* Outline badge */
background: transparent;
border: 1px solid #C4B5A7;
color: #A89888;
```

### Decorative Elements

**Heart Divider** — Signature motif
```html
<div class="heart-divider">♡ ♡ ♡</div>
```
```css
.heart-divider {
  text-align: center;
  color: #E8C4C4;
  font-size: 14px;
  letter-spacing: 12px;
  padding: 24px 0;
  opacity: 0.7;
}
```

**Petal Separator** — Thin line with petal accent
```css
.petal-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, #E8C4C4, transparent);
  margin: 40px auto;
  max-width: 200px;
}
```

**Dotted Whimsy Divider**
```css
.whimsy-divider {
  border: none;
  border-top: 2px dotted #DDD4CB;
  margin: 32px 0;
}
```

---

## 5. Layout Principles

### Spacing System (8px base)

| Token | Value | Usage |
|-------|-------|-------|
| `--space-1` | 4px | Tight inline gaps |
| `--space-2` | 8px | Icon padding, badge gaps |
| `--space-3` | 12px | Input padding, small card gaps |
| `--space-4` | 16px | Card padding, list gaps |
| `--space-5` | 24px | Section inner padding |
| `--space-6` | 32px | Between components |
| `--space-7` | 48px | Between sections |
| `--space-8` | 64px | Major section breaks |
| `--space-9` | 96px | Hero/page-level spacing |

### Grid

```css
max-width: 1120px;        /* Content max width */
padding: 0 24px;          /* Side padding */
gap: 24px;                /* Default grid gap */

/* Product grid: 4 col (desktop) → 2 col (tablet) → 1 col (mobile) */
/* Content grid: 3 col (desktop) → 2 col (tablet) → 1 col (mobile) */
/* Feature blocks: 3 col (desktop) → stacked (mobile) */
```

### Whitespace Philosophy

Generous whitespace is a core brand trait. When in doubt, add more space, not less. Sections should feel like they breathe. The whitespace itself communicates calm and care.

---

## 6. Depth & Elevation

| Level | Shadow | Usage |
|-------|--------|-------|
| **0 — Flat** | none | Backgrounds, inline elements |
| **1 — Whisper** | `0 1px 3px rgba(58,53,53,0.04)` | Cards at rest, inputs |
| **2 — Soft** | `0 2px 8px rgba(58,53,53,0.06)` | Hover cards, dropdowns |
| **3 — Float** | `0 4px 16px rgba(58,53,53,0.08)` | Modals, popovers |
| **4 — Lift** | `0 8px 32px rgba(58,53,53,0.12)` | Dialogs, hero cards |

**Surface Layers:**
| Surface | Background | Border | Shadow |
|---------|-----------|--------|--------|
| Base (page) | `#F5F0EB` Cream Canvas | — | — |
| Card | `#FDFBF9` Ivory White | `#DDD4CB` | Level 1 |
| Overlay | `#FDFBF9` Ivory White | — | Level 3 |
| Tinted | `#F4E2E2` Petal Light | `#E8C4C4` | Level 1 |
| Dark | `#3A3535` Charcoal Ink | — | — |

---

## 7. Do's and Don'ts

### ✓ Do's

1. **Do use Cream Canvas (#F5F0EB) as the default page background** — never pure white #FFFFFF
2. **Do keep decorative elements subtle** — heart dividers at 70% opacity, thin separator lines
3. **Do use generous whitespace between sections** — minimum 48px, prefer 64-96px
4. **Do use Caveat font only for display/brand text** — headlines and decorative callouts, never body
5. **Do pair Blush Petal with Charcoal Ink for CTAs** — soft background, dark readable text
6. **Do use fully rounded buttons (24px radius)** — pill-shaped buttons match the gentle aesthetic
7. **Do let colorful content be the hero** — product images, illustrations should be the brightest elements
8. **Do use warm shadows (rgba of Charcoal Ink)** — never pure black or cool-toned shadows
9. **Do include at least one heart/petal decorative element per major section**
10. **Do use the gradient separator for elegant section breaks**

### ✗ Don'ts

1. **Don't use pure black (#000000)** — always use Charcoal Ink #3A3535 or softer
2. **Don't use pure white (#FFFFFF) as page background** — use Cream Canvas #F5F0EB or Ivory White #FDFBF9
3. **Don't use sharp corners (0px radius)** — minimum 8px, prefer 12-16px for cards, 24px for buttons
4. **Don't use heavy drop shadows** — max shadow opacity is 0.12
5. **Don't use bold/saturated colors for backgrounds** — Blush Petal is for accents, not full-page fills
6. **Don't mix Caveat with other script/handwritten fonts** — one handwritten font only
7. **Don't use dark backgrounds for more than 30% of the page** — the brand is light and airy
8. **Don't add bounce/spring animations** — use gentle ease transitions only (0.2-0.3s)
9. **Don't use standard link blue** — use Petal Deep #D4A0A0 or Rose Gold #D4A98C for links
10. **Don't overcrowd layouts** — if it feels tight, remove elements, don't shrink spacing

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Columns | Side Padding |
|------|-------|---------|-------------|
| **Mobile** | < 640px | 1 | 16px |
| **Tablet** | 640–1024px | 2 | 24px |
| **Desktop** | 1024–1280px | 3-4 | 24px |
| **Wide** | > 1280px | 4 | auto (centered 1120px) |

### Font Scaling

Display type scales down from 48px → 36px on mobile. Body stays at 16px (never below). Headings reduce by ~20% on mobile.

### Touch Targets

Minimum 44×44px touch targets for all interactive elements. Buttons have at least 12px vertical padding on mobile.

### Collapsing Strategy

- **Product grid**: 4 → 2 → 1 columns
- **Feature blocks**: 3-across → stacked with horizontal separator
- **Navigation**: Visible desktop nav → hamburger menu on mobile
- **Hero text**: Reduce font size, maintain padding ratios
- **Cards**: Full-width on mobile with 16px side padding
- **Heart dividers**: Reduce letter-spacing from 12px → 8px on mobile

---

## 9. Agent Prompt Guide

### Quick Color Reference

```
PETAL CREAM PALETTE:
- Cream Canvas:  #F5F0EB  (primary background, warm paper)
- Blush Petal:   #E8C4C4  (primary accent, feminine warmth)
- Warm Taupe:    #C4B5A7  (secondary, dividers, borders)
- Charcoal Ink:  #3A3535  (text, headings)
- Petal Light:   #F4E2E2  (badge bg, card tint)
- Petal Deep:    #D4A0A0  (hover/link color)
- Rose Gold:     #D4A98C  (special accent)
- Taupe Light:   #DDD4CB  (light borders)
- Taupe Deep:    #A89888  (secondary text)
- Canvas Warm:   #EDE5DC  (card surface alt)
- Ivory White:   #FDFBF9  (lightest surface)
- Ink Soft:      #6B6262  (captions, metadata)

SEMANTIC:
- Success: #8FB5A3 (sage)
- Warning: #D4B896 (amber)
- Error:   #D49494 (rose)
- Info:    #94AEC4 (dusty blue)

FONTS:
- Display: Caveat 700 (handwritten, brand only)
- Heading: Quicksand 600/700 (rounded sans)
- Body:    Nunito 400/600 (humanist sans)
- CJK:     Noto Sans TC
```

### Ready-to-Use Prompts

**Landing Page — Craft Studio**
```
Build a landing page with Petal Cream design system.
Background: #F5F0EB. Hero section with Caveat 48px heading in #3A3535,
Nunito 16px body text. Blush Petal #E8C4C4 pill buttons (border-radius 24px).
Heart divider (♡ ♡ ♡) in #E8C4C4 at 70% opacity between sections.
Product grid: 4-col, Ivory White #FDFBF9 cards with Taupe Light #DDD4CB border,
16px radius, warm shadow 0 2px 8px rgba(58,53,53,0.04).
Generous spacing: 64px between sections. Footer on #3A3535 dark background
with #F5F0EB text and #E8C4C4 accent links.
Fonts: Caveat (display), Quicksand (headings), Nunito (body).
```

**Blog / Article Layout**
```
Build an article page with Petal Cream system.
Background: #F5F0EB. Content max-width: 720px centered.
Title: Quicksand 700 36px #3A3535. Body: Nunito 400 16px/1.7 #3A3535.
Pull quotes: Caveat 28px #D4A0A0 italic with left border 3px solid #E8C4C4.
Image captions: Nunito 12px #A89888. Tags: Petal Light #F4E2E2 background,
#D4A0A0 text, 20px radius. Petal separator (gradient line in #E8C4C4)
between sections. Sidebar: related articles on Canvas Warm #EDE5DC cards.
```

**Portfolio / Gallery Grid**
```
Build a portfolio grid with Petal Cream system.
Background: #F5F0EB. Masonry or 3-col grid with 24px gap.
Cards: Ivory White #FDFBF9 with Taupe Light #DDD4CB border, 16px radius.
Image fills card top (no padding), title in Quicksand 600 18px below.
Category badge: uppercase 11px Quicksand on Petal Light #F4E2E2.
Hover: card lifts with shadow 0 4px 16px rgba(58,53,53,0.08), translateY(-2px).
Filter bar: ghost buttons in Taupe Deep #A89888, active state underline in #E8C4C4.
```

**Dark Section / Footer**
```
Build a dark section with Petal Cream system.
Background: #3A3535. Text: #F5F0EB. Accent: #E8C4C4 for links and highlights.
Heading: Caveat 36px #F5F0EB. Body: Nunito 16px #DDD4CB.
Newsletter input: background #4A4444, border 1px #6B6262, text #F5F0EB,
focus border #E8C4C4. Submit button: #E8C4C4 bg, #3A3535 text.
Social icons: #A89888 default, #E8C4C4 hover. Heart divider in #E8C4C4 at 50% opacity.
```

**E-commerce Product Card**
```
Build product cards with Petal Cream system.
Card: Ivory White #FDFBF9, Taupe Light border, 16px radius.
Product image: white background, no filter, fills top section.
Title: Quicksand 600 16px #3A3535. Price: Nunito 600 18px #D4A0A0.
"From" prefix: Nunito 400 14px #A89888. Add to cart: Blush Petal #E8C4C4
pill button, full width at bottom of card. Hover: soft lift shadow.
Badge for "New": Rose Gold #D4A98C background, #FDFBF9 text.
```

### Image Generation Keywords

```
Style: soft watercolor, hand-drawn illustration, whimsical feminine,
cream paper texture, blush pink accents, botanical elements,
delicate line art, stationery aesthetic, cottagecore illustration,
warm neutral palette, dried flowers, gentle pastel
```