# Design System: Artisan Earth

## 1. Visual Theme & Atmosphere

A warm, handcraft-inspired design system rooted in earthy tones and natural textures. Inspired by the aesthetic of artisan studios — linen surfaces, botanical arrangements, wooden worktables, and golden-hour light. The palette evokes a sense of creative warmth, feminine strength, and approachable expertise.

**Design Philosophy:** Anti-corporate warmth. Every element should feel like it belongs in a sunlit studio, not a tech platform. The system deliberately avoids clinical whites, sharp edges, and saturated primaries.

**Style Keywords:** earthy, artisan, handcraft, warm natural light, botanical, feminine warmth, linen texture, studio atmosphere, golden hour, organic

**Atmosphere:** Imagine walking into a bright, plant-filled studio where an artist works at a wooden table. Natural light streams through large windows, casting warm shadows on linen-textured surfaces. The air smells of paint and dried flowers.

---

## 2. Color Palette & Roles

### Core Colors

| Name | Chinese | Hex | Role |
|------|---------|-----|------|
| Warm Linen | 暖亞麻 | `#F5ECDF` | Page background, the canvas everything lives on |
| Forest Green | 森林綠 | `#234833` | Primary structure — headers, nav, dark sections, body text |
| Burnt Sienna | 燒赭石 | `#AE571B` | Primary CTA, accent, action-driving elements |
| Blush Pink | 柔粉 | `#FFDCE4` | Soft highlight sections, testimonials, social proof blocks |
| Gold Light | 淡金 | `#E8D5A8` | Decorative lines, dividers, subtle warmth accents |

### Derived Colors

| Name | Hex | Derivation | Role |
|------|-----|-----------|------|
| Forest Deep | `#1A3626` | Green -20% lightness | Hover/pressed state on green elements |
| Forest Mist | `#234833` at 8% | Green tint | Subtle green wash for alternate sections |
| Sienna Hover | `#954A17` | Sienna -10% lightness | CTA hover state |
| Sienna Pressed | `#7C3E13` | Sienna -20% lightness | CTA active/pressed state |
| Sienna Light | `#AE571B` at 10% | Sienna tint | Badge backgrounds, soft callouts |
| Blush Deep | `#F5C4D0` | Pink -10% lightness | Pink section borders |
| Linen Dark | `#EDE2D1` | Linen -5% lightness | Card surfaces, secondary background |
| Cream White | `#FAF7F2` | Linen +3% lightness | Elevated card surface on linen bg |

### Text Colors

| Name | Hex | Role |
|------|-----|------|
| Ink | `#234833` | Primary text (forest green, not black) |
| Ink Muted | `#4A6350` | Secondary text, captions |
| Ink Light | `#7A8F80` | Placeholder, disabled text |
| Inverse | `#F5ECDF` | Text on dark (green/sienna) backgrounds |
| Inverse Muted | `#C9BFAF` | Secondary text on dark backgrounds |

### Semantic Colors

| Name | Hex | Role |
|------|-----|------|
| Success | `#5A8A6A` | Earthy sage green — confirmations, valid states |
| Warning | `#C4883A` | Warm amber — warnings, attention needed |
| Error | `#B85C5C` | Muted terracotta red — errors, destructive |
| Info | `#5A7A8A` | Dusty teal — informational, neutral alerts |

---

## 3. Typography Rules

### Font Stack

| Role | Font | Weight | Fallback |
|------|------|--------|----------|
| Display / Brand | Great Vibes | 400 | cursive |
| Headings | Poppins | 600 | system-ui, sans-serif |
| Body | Poppins | 400 | system-ui, sans-serif |
| CJK Body | Noto Sans TC | 400 | sans-serif |
| CJK Headings | Noto Sans TC | 500 | sans-serif |
| Code | JetBrains Mono | 400 | monospace |

### Type Scale

| Level | Font | Size | Weight | Line Height | Letter Spacing | Color |
|-------|------|------|--------|-------------|----------------|-------|
| Display | Great Vibes | 56px | 400 | 1.2 | 0 | `#AE571B` |
| H1 | Poppins | 36px | 600 | 1.25 | -0.5px | `#234833` |
| H2 | Poppins | 28px | 600 | 1.3 | -0.3px | `#234833` |
| H3 | Poppins | 22px | 600 | 1.35 | 0 | `#234833` |
| H4 | Poppins | 18px | 600 | 1.4 | 0 | `#234833` |
| Body | Poppins | 16px | 400 | 1.7 | 0 | `#234833` |
| Body Small | Poppins | 14px | 400 | 1.6 | 0 | `#4A6350` |
| Caption | Poppins | 12px | 400 | 1.5 | 0.3px | `#7A8F80` |
| Badge | Poppins | 12px | 600 | 1 | 0.5px | varies |

### Script Usage Rules

- Great Vibes is **only** for Display-level headings and brand moments
- Never use Great Vibes for body text, navigation, buttons, or labels
- Maximum one Great Vibes heading per viewport
- Always pair with a Poppins subtitle or descriptor immediately below

---

## 4. Component Stylings

### Buttons

**Primary (Burnt Sienna)**
```
background: #AE571B
color: #FFFFFF
border-radius: 4px
padding: 12px 24px
font: Poppins 600 14px
letter-spacing: 0.3px
transition: background 0.2s ease
hover: background #954A17
active: background #7C3E13
```

**Secondary (Forest Green Outline)**
```
background: transparent
color: #234833
border: 2px solid #234833
border-radius: 4px
padding: 10px 22px
hover: background #234833, color #F5ECDF
```

**Ghost (Text Only)**
```
background: transparent
color: #AE571B
padding: 8px 16px
text-decoration: underline
hover: color #954A17
```

**Soft (Blush Pink)**
```
background: #FFDCE4
color: #234833
border-radius: 4px
padding: 12px 24px
hover: background #F5C4D0
```

### Cards

```
background: #FAF7F2
border: 1px solid #E8D5A8
border-radius: 4px
padding: 24px
box-shadow: 0 2px 8px rgba(35, 72, 51, 0.06)
hover: box-shadow 0 4px 16px rgba(35, 72, 51, 0.1), transform translateY(-2px)
transition: all 0.25s ease
```

### Input Fields

```
background: #FAF7F2
border: 1px solid #E8D5A8
border-radius: 4px
padding: 12px 16px
font: Poppins 400 16px
color: #234833
placeholder-color: #7A8F80
focus: border-color #AE571B, box-shadow 0 0 0 3px rgba(174, 87, 27, 0.12)
```

### Navigation

```
background: #234833
color: #F5ECDF
font: Poppins 600 14px
padding: 16px 0
link-hover: opacity 0.8
```

### Badges / Tags

```
Earthy: background #AE571B at 10%, color #AE571B, border-radius 20px, padding 4px 14px
Green: background #234833 at 10%, color #234833
Pink: background #FFDCE4, color #234833
Gold: background #E8D5A8, color #234833
```

### Dividers

**Standard Line**
```
border-top: 1px solid #E8D5A8
margin: 32px 0
```

**Decorative Divider**
```
display: flex, align-items center, gap 16px
line: width 80px, height 2px, background #E8D5A8
center-dot: width 8px, height 8px, border-radius 50%, background #E8D5A8
```

---

## 5. Layout Principles

### Spacing System (8px base)

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Icon gaps, tight inline spacing |
| sm | 8px | Compact element gaps |
| md | 16px | Default element spacing |
| lg | 24px | Card padding, section sub-spacing |
| xl | 32px | Between content groups |
| 2xl | 48px | Between major sections |
| 3xl | 64px | Section top/bottom padding |
| 4xl | 96px | Hero padding, page sections |

### Grid

- Max content width: 700px (reading content), 1100px (full layouts)
- Column gap: 32px
- Side margins: 24px (mobile), 48px (tablet), auto-centered (desktop)
- Content alignment: centered headings, left-aligned body text

### Section Rhythm

Alternate background colors to create visual breathing:
```
Linen → Forest Green → Linen → Burnt Sienna → Linen → Blush Pink
```

Each section: `padding: 64px 0` minimum.

---

## 6. Depth & Elevation

| Level | Shadow | Usage |
|-------|--------|-------|
| 0 | none | Flat elements, inline content |
| 1 | `0 1px 3px rgba(35,72,51,0.05)` | Resting cards, inputs |
| 2 | `0 2px 8px rgba(35,72,51,0.06)` | Cards, dropdown menus |
| 3 | `0 4px 16px rgba(35,72,51,0.1)` | Hover cards, modals |
| 4 | `0 8px 32px rgba(35,72,51,0.12)` | Floating panels, popovers |
| 5 | `0 16px 48px rgba(35,72,51,0.15)` | Full-screen overlays |

Shadow color is always forest green-based (`rgba(35,72,51,...)`) for warmth. Never use pure black shadows.

---

## 7. Do's and Don'ts

### Do's

1. **Do** use Warm Linen `#F5ECDF` as the default page background
2. **Do** use Forest Green `#234833` for primary text — it reads as black but warmer
3. **Do** limit Great Vibes script to one heading per viewport
4. **Do** use generous whitespace — 64px section padding minimum
5. **Do** alternate section backgrounds (linen → green → linen → sienna)
6. **Do** use warm-toned shadows (`rgba(35,72,51,...)`)
7. **Do** pair script headings with a Poppins descriptor immediately below
8. **Do** keep border-radius at 4px for a slightly soft, artisan feel
9. **Do** use Gold Light `#E8D5A8` for decorative dividers
10. **Do** use lifestyle photography with warm, natural-light tones matching the palette

### Don'ts

1. **Don't** use pure white `#FFFFFF` as a page background
2. **Don't** use pure black `#000000` for text
3. **Don't** use Great Vibes for buttons, labels, navigation, or body text
4. **Don't** use cold-toned colors (blues, cool grays, clinical whites)
5. **Don't** use shadows with pure black (`rgba(0,0,0,...)`)
6. **Don't** use sharp corners (0px radius) — always at least 4px
7. **Don't** use more than 3 section background colors per page
8. **Don't** mix other display/script fonts with Great Vibes
9. **Don't** use Blush Pink for more than one section per page
10. **Don't** use saturated neon or fluorescent accent colors

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Behavior |
|------|-------|----------|
| Mobile | < 640px | Single column, 24px side margins, 48px section padding |
| Tablet | 640px–1024px | Flexible 1-2 columns, 48px side margins |
| Desktop | > 1024px | Full grid, auto-centered with max-width |

### Font Scaling

| Level | Mobile | Tablet | Desktop |
|-------|--------|--------|---------|
| Display (Script) | 36px | 44px | 56px |
| H1 | 28px | 32px | 36px |
| H2 | 22px | 24px | 28px |
| Body | 16px | 16px | 16px |

### Touch Targets

- Minimum 44px height for all interactive elements on mobile
- Buttons: full-width on mobile, auto-width on tablet+
- Navigation: hamburger menu below 768px

### Collapsing Strategy

- Two-column layouts → stacked single column on mobile
- Card grids → single column with full-width cards
- Side-by-side image+text → image on top, text below

---

## 9. Agent Prompt Guide

### Quick Color Reference

```
PAGE BACKGROUND:  #F5ECDF  (Warm Linen)
TEXT PRIMARY:     #234833  (Forest Green)
TEXT SECONDARY:   #4A6350  (Ink Muted)
ACCENT / CTA:    #AE571B  (Burnt Sienna)
SOFT HIGHLIGHT:   #FFDCE4  (Blush Pink)
DECORATIVE:       #E8D5A8  (Gold Light)
CARD SURFACE:     #FAF7F2  (Cream White)
DARK SECTION BG:  #234833  (Forest Green)
WARM SECTION BG:  #AE571B  (Burnt Sienna)
```

### Ready-to-Use Prompts

**Landing Page**
> Build a landing page using Artisan Earth. Warm Linen (#F5ECDF) background. Hero with Great Vibes script heading in Burnt Sienna (#AE571B) + Poppins subtitle. Forest Green (#234833) nav bar. Sienna CTA buttons. Alternate sections: linen, green (with inverse text), linen, blush pink testimonials. 64px section padding. 4px border-radius. Gold Light (#E8D5A8) decorative dividers between sections.

**Blog Article**
> Style a blog article with Artisan Earth. Warm Linen background. Forest Green (#234833) body text in Poppins 16px/1.7. H1 in Great Vibes script (#AE571B). H2-H4 in Poppins 600 (#234833). Max-width 700px centered. Gold decorative divider between intro and body. Pull quotes in a Blush Pink (#FFDCE4) card with 4px radius. Images full-bleed with warm filters.

**Portfolio Grid**
> Create a portfolio grid on Warm Linen (#F5ECDF). Cards: Cream White (#FAF7F2) background, Gold Light (#E8D5A8) border, 4px radius, warm shadow. Hover: lift 2px with deeper shadow. Category badges in Sienna tint. Grid: 3 columns desktop, 2 tablet, 1 mobile. 32px gap. Header section in Forest Green with Great Vibes script title in Linen color.

**Membership / Pricing**
> Build a pricing section on Blush Pink (#FFDCE4) background. Two pricing cards: Cream White with Gold border. Plan names in Great Vibes script (#AE571B). Feature list in Poppins 14px with forest green checkmarks. Primary CTA: Burnt Sienna. Secondary CTA: Forest Green outline. Cards hover-lift with warm shadows. Center-aligned with 32px gap.

**Dark Section (Hero / CTA Block)**
> Create a dark hero section with Forest Green (#234833) background. Heading in Great Vibes (#E8D5A8 gold). Body in Poppins (#F5ECDF linen text). CTA button: Burnt Sienna (#AE571B). Decorative gold line divider. Generous padding (96px top/bottom). Max-width 600px centered text.

### Image Generation Keywords

> earthy palette, warm linen texture, natural light photography, wooden table surface, botanical elements, dried flowers, potted plants, artist studio, golden hour, handcraft, artisan workspace, warm terracotta accents, soft blush pink, forest green accents, feminine warmth, organic shapes, analog warmth