# Color & Typography Reference

Every brand asset in this kit uses the values below. Use them anywhere you need a new graphic and want it to feel like Our Life.

---

## Color Palette

### Primary (use these everywhere)

| Name | Hex | Use case |
|---|---|---|
| **Pink** | `#E91E80` | Primary brand color. CTAs, accents, gradient start. |
| **Coral** | `#ED5048` | Gradient midpoint. Almost never used solo. |
| **Orange** | `#F37323` | Gradient end. Secondary accent. |
| **Brand gradient** | `linear-gradient(95deg, #E91E80 0%, #ED5048 55%, #F37323 100%)` | The headline-fill gradient. Use this for the accent words in hero copy (e.g. *"Your time back."*). |

### Backgrounds

| Name | Hex | Use case |
|---|---|---|
| **Cream** | `#FAF6EE` | Default page background. NEVER pure white. |
| **Cream soft** | `#FFFCF6` | Lighter cream for card surfaces. |
| **White** | `#FFFFFF` | ONLY for cards, modals, or when you want pop against cream. |

### Text

| Name | Hex | Use case |
|---|---|---|
| **Ink** | `#181412` | Default body text. Soft black with warm undertone. |
| **Ink soft** | `#4A413A` | Subheadlines, secondary body. |
| **Ink muted** | `#8A8077` | Captions, metadata, fine print. |
| **Line** | `rgba(24, 20, 18, 0.08)` | Borders, dividers. |

### Member colors (for calendar member-color pills — already in the app)

| Color | Hex | Default member |
|---|---|---|
| Pink | `#E91E80` | Mom |
| Red | `#E0322B` | Dad |
| Green | `#41B349` | Logan / first child |
| Blue | `#2E84E6` | Coltin |
| Purple | `#8C3FCF` | Skylar |
| Yellow | `#FFC23C` | Available |
| Orange | `#F37323` | Available |

> When designing for the brand, default to **pink + orange + cream + ink**. Member colors are reserved for the in-app calendar UI.

---

## Typography

### Font family
**Plus Jakarta Sans** — used across the app and all brand assets.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

```css
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
```

### Weights

| Weight | Use case |
|---|---|
| 400 (Regular) | Body text |
| 500 (Medium) | Slightly emphasized body |
| 600 (Semibold) | UI labels, captions, button labels |
| 700 (Bold) | Subheads |
| 800 (Extrabold) | Hero headlines, prominent CTAs, brand mark |

### Headline scale (for any large display text)

```
H1: clamp(40px, 6.4vw, 76px), weight 800, letter-spacing -0.025em
H2: clamp(28px, 4vw, 44px),   weight 800, letter-spacing -0.02em
H3: 20-24px,                  weight 800
H4: 17-19px,                  weight 700
Body: 17px,                   weight 400-500, line-height 1.55
Small: 13-15px,               weight 500-600
Caption: 11-12px,             weight 600-700, letter-spacing 0.12em-0.18em, uppercase
```

### Type rules

1. **Hero headlines always use weight 800 + tight letter-spacing.** Otherwise they look soft.
2. **Body text NEVER below 16px** for accessibility.
3. **Captions use letter-spacing 0.12em-0.18em + uppercase.** Pulled directly from the app's section eyebrows.
4. **Numbers (in calendar visuals) use the gradient fill** when they're hero-sized; black/ink otherwise.

---

## Logo usage

### Do
- ✅ Use the logo at minimum 80px width to keep details readable
- ✅ Pair logo with the wordmark in horizontal layouts
- ✅ Use the rounded-square icon when you only have space for a square (avatars, favicons, app icons)
- ✅ Keep at least 0.2× the logo's width as clearspace around it

### Don't
- ❌ Recolor the logo. Pink stays pink. Orange stays orange.
- ❌ Apply drop shadows or strokes to the logo itself
- ❌ Crop the logo's heart shape or hide any of the figures
- ❌ Place the logo on a busy photo background — use cream or white only
- ❌ Distort the aspect ratio

---

## Tone of voice (because design alone isn't brand)

### Brand voice in three words
**Warm. Honest. Direct.**

### Voice rules

1. **Talk like a tired but hopeful parent**, not a tech founder. "Sunday nights got shorter." not "Productivity gains of 60+ minutes per week."
2. **Lead with the user, not the company.** "Get your evenings back" → outcome the user feels. "Our app extracts events" → describes the company. We're always the former.
3. **Use specific names.** "Logan, Coltin, and Skylar" hits harder than "my kids." "12 events" hits harder than "many events."
4. **No corporate sentences.** If a sentence has "leverage," "synergy," "robust," or "seamless" in it, delete and rewrite.
5. **Use contractions.** "We don't" / "I've" / "it's" — every time. Formal punctuation makes us sound like Microsoft 1998.
6. **Privacy is an action, not a feature.** "We don't collect your email" beats "Privacy-first by design."
7. **Reassure, don't promise.** "Your photos never leave your device" is true. "Your data is 100% secure" is a marketing claim that gets questioned.

### Banned words / phrases

- "Game-changing"
- "Revolutionize"
- "Empower"
- "Seamless"
- "Robust"
- "Leverage" (as a verb)
- "Best-in-class"
- "Industry-leading"
- "AI-powered" (the AI is implied — talk about the result)
- "Intuitive" (every app claims this; show, don't tell)
- "Comprehensive" / "all-in-one" / "platform" (corporate, bloated)
- "Solution" (we're a product, not a solution)
- "Next-gen" / "cutting-edge" (cliché)

### Required phrases / brand vocabulary

**Primary tagline (outcome-led — use everywhere a tagline is asked for):**
- "Less mental load. Every day." — short version, brand-cohesive with X bio
- "You don't need another calendar. You need your time back." — manifesto reframe

**Secondary tagline (mechanism / hook — use under the primary, never above it):**
- "Drag any schedule. We do the typing." — the feature one-liner

**Outcome vocabulary — use more of:**
- *peace of mind*, *less mental load*, *your evenings*, *your time*,
  *less typing*, *quietly*, *forget about*, *your family stays yours*,
  *the thing she'd actually use*

**Brand-vocabulary lines (use sparingly for impact):**
- "Zero email. Zero phone. Zero data." — privacy promise structure, this exact rhythm
- "Built in a kitchen." — origin story summary
- "Sunday nights got shorter." — the founder story's pull-quote
- "We can't email it. We don't have your email." — when explaining recovery codes

> See `/app/memory/copy-deck-outcome-led.md` for the full source-of-truth
> copy deck (landing hero, App Store subtitle, press kit opening, social
> bios). When in doubt — *outcomes sell, features explain.*

---

## When in doubt

1. Open `/app/marketing/landing-page-copy.md` and use it as a reference.
2. The tone should match the founder story section — warm, specific, honest.
3. If a piece of copy could be on Cozi's website without changing a word, it's wrong for us. Make it more honest, more specific, more human.

---

**Use this doc as the source of truth for every future brand decision.** If you commission a designer or write a press release, hand them this file. They'll get the brand in 5 minutes.
