# Sunrise Design Kit
### Soft Pastel · Ethereal Feminine · Aesthetic Beauty

---

## 🏷️ Theme Category
**Soft Pastel / Ethereal Feminine**

Perfect for aesthetic beauty brands. Warm, inviting — whispers luxury, never clinical.

---

## 🎨 Color Palette

| Swatch | Name | Hex | Usage |
|--------|------|-----|-------|
| 🟫 | Warm Cream | `#FFF5F0` | Background (start) |
| 🟪 | Soft Lavender | `#F0E4F6` | Background (end) |
| ⬛ | Deep Plum | `#2D2A3E` | Primary text, headlines |
| 🟣 | Muted Lilac | `#9B8AB8` | Accent text, italic emphasis |
| 🔘 | Dusty Mauve | `#7A7088` | Subtext, labels, captions |
| ⬜ | Lilac Border | `#E8E0EE` | Input field borders, dividers |
| 💜 | CTA Lavender | `#C4A8D4` | Buttons (gradient start) |
| 💟 | CTA Lavender End | `#D4B8E0` | Buttons (gradient end) |

### Gradient Definitions

- **Background Gradient:** `linear-gradient(135deg, #FFF5F0 0%, #F0E4F6 100%)`
- **Gradient Wash:** `linear-gradient(135deg, #F8E0D0 0%, #F2D4E8 50%, #E4D4F0 100%)`
  - Peach `#F8E0D0` → Pink `#F2D4E8` → Lavender `#E4D4F0`
- **CTA Button:** `linear-gradient(135deg, #C4A8D4 0%, #D4B8E0 100%)`

---

## ✍️ Typography System

### Fonts
- **Headlines:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — Weights: 400, 400i, 700, 700i
- **Body / UI:** [Lato](https://fonts.google.com/specimen/Lato) — Weights: 300, 400, 700

### Google Fonts Import
```html
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
```

### Type Scale

| Element | Font | Weight/Style | Size | Color | Example |
|---------|------|-------------|------|-------|---------|
| H1 | Playfair Display | 400 Italic | 64px | `#2D2A3E` | *Timeless Beauty* |
| H2 | Playfair Display | 400 | 40px | `#2D2A3E` | Radiant Skin Awaits |
| H3 | Playfair Display | 400 Italic | 28px | `#9B8AB8` | *Your Daily Ritual* |
| Body | Lato | 400 | 16px | `#2D2A3E` | Regular paragraph text |
| Label | Lato | 400 Uppercase | 11px, 3px tracking | `#7A7088` | FEATURED PRODUCT |
| Caption | Lato | 300 | 13px | `#7A7088` | Small descriptive text |

### Typography Rules
- Serif headlines with italic for emphasis — editorial beauty magazine feel
- Clean sans-serif for body, labels, and UI elements
- Generous letter-spacing on uppercase labels (2–3px)
- Line height: 1.5 for body, 1.2 for headlines

---

## 🧩 UI Components

### Primary CTA Button
```css
.btn-primary {
  background: linear-gradient(135deg, #C4A8D4 0%, #D4B8E0 100%);
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 32px;
  border-radius: 24px;
  border: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}
```

### Ghost / Secondary Button
```css
.btn-ghost {
  background: transparent;
  color: #2D2A3E;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 24px;
  border: 2px solid #C4A8D4;
}
```

### Input Field
```css
.input-field {
  background: #FFFFFF;
  border: 1px solid #E8E0EE;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #2D2A3E;
}
.input-field::placeholder {
  color: #7A7088;
}
```

### Tag / Pill Chips
```css
.pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pill-bestseller { background: #F0E4F6; color: #9B8AB8; }
.pill-new        { background: #FFF5F0; color: #C4A8D4; }
.pill-limited    { background: #E4D4F0; color: #7A7088; }
```

### Product Card
```css
.product-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(45, 42, 62, 0.06);
  max-width: 280px;
}
.product-card .image-area {
  background: linear-gradient(135deg, #F8E0D0, #F2D4E8, #E4D4F0);
  height: 200px;
}
.product-card .info {
  padding: 20px;
}
.product-card .title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #2D2A3E;
}
.product-card .price {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #2D2A3E;
}
```

---

## 📐 Template Dimensions

| Template | Dimensions | Aspect Ratio | Use Case |
|----------|-----------|--------------|----------|
| Social Post — Square | 1080 × 1080 px | 1:1 | Instagram feed, Facebook |
| Story — Vertical | 1080 × 1920 px | 9:16 | Instagram/TikTok stories |
| Email Header | 600 × 200 px | 3:1 | Newsletter banners |
| Brand Board | A4 Landscape | 297 × 210 mm | Presentation / reference |

---

## 📱 Social Post Template (1:1 Square)

**Layout:**
- Full gradient wash background
- Circle monogram logo (top center)
- Headline: Playfair Display italic, 32px, Deep Plum
- Subtext: Lato 14px, Muted Lilac
- Bottom tagline: Lato uppercase 10px, Dusty Mauve
- Thin divider line above tagline

**Example Copy:**
- Headline: *"Glow From Within"*
- Subtext: "Discover your radiance"
- Tagline: SUNRISE BEAUTY

---

## 📲 Story Template (9:16 Vertical)

**Layout:**
- Full gradient wash background
- Circle monogram logo (top)
- Product image placeholder (center, rounded rectangle)
- Headline: Playfair Display italic, 24px, Deep Plum
- CTA button: gradient lavender, "Shop Now"

**Example Copy:**
- Headline: *"Your Glow Era Starts Now"*
- CTA: SHOP NOW

---

## ✉️ Email Header Template (600 × 200)

**Layout:**
- Full gradient wash background
- Brand name: Playfair Display italic, 36px, Deep Plum (centered)
- Tagline: Lato 13px, Muted Lilac
- Decorative soft circles on sides (10–15% opacity)

**Example Copy:**
- Brand: *"SUNRISE BEAUTY"*
- Tagline: "Ethereal skincare for the modern woman"

---

## 🎨 Decorative Elements

- **Soft circles/orbs:** 10–15% opacity, peach (#F8E0D0) and lavender (#E4D4F0)
- **Thin dividers:** 1px solid #E8E0EE
- **Card shadows:** `0 4px 20px rgba(45, 42, 62, 0.06)`
- **Border radius:** 12px (inputs), 16px (cards), 24px (buttons/pills)
- **Background patterns:** Subtle dot grid or floral CSS motif (optional)

---

## 🔑 CSS Variables (Quick Copy)

```css
:root {
  --bg-cream: #FFF5F0;
  --bg-lavender: #F0E4F6;
  --text-primary: #2D2A3E;
  --text-accent: #9B8AB8;
  --text-muted: #7A7088;
  --border-soft: #E8E0EE;
  --cta-start: #C4A8D4;
  --cta-end: #D4B8E0;
  --wash-peach: #F8E0D0;
  --wash-pink: #F2D4E8;
  --wash-lavender: #E4D4F0;

  --gradient-bg: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-lavender) 100%);
  --gradient-wash: linear-gradient(135deg, var(--wash-peach) 0%, var(--wash-pink) 50%, var(--wash-lavender) 100%);
  --gradient-cta: linear-gradient(135deg, var(--cta-start) 0%, var(--cta-end) 100%);

  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;

  --shadow-card: 0 4px 20px rgba(45, 42, 62, 0.06);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
}
```

---

## 🏷️ Brand Keywords

*Ethereal · Feminine · Luxurious · Soft · Radiant · Timeless · Glow · Bloom · Petal · Dawn*

---

## 📋 Companion Files

- **PDF Design Kit:** `sunrise-design-kit.pdf` (8-page visual reference)
- **This file:** `sunrise-design-kit.md` (developer/designer reference)

---

*Sunrise Design Kit — Built with ⚡ by MelAI*