# Once Upon a Line — Deployment Next Steps

**Build status:** Internal preview · June 2026
**Pages delivered:** `index.html`, `shop.html`, `stationery.html`
**Design system:** `assets/css/design-system.css` (Fredoka + Nunito, full token set)

---

## What's live in this build

| Page | Status | Notes |
|---|---|---|
| `index.html` | ✅ Preview-ready | Landing page — hero, feature strip, product cards, stationery promo |
| `shop.html` | ✅ Preview-ready | 10-theme cover gallery, flat production art, colorway switcher, name eyebrow |
| `stationery.html` | ✅ Preview-ready | Postcard spec, design picker, interactive checkout upsell demo |
| `assets/css/design-system.css` | ✅ Done | Full brand token set, shared nav styles |
| `assets/art/covers/*.jpg` | ✅ Copied | 10 × 760px web-preview JPEGs from production set |
| `assets/art/src-1…6.jpg` | ✅ Copied | Stationery postcard art (RGB mockup quality) |

---

## Open items — must resolve before launch

### 1. Front-cover branding
The illustrations' prepared cream space holds the title only — **no "Once Upon a Line" wordmark on the front**. Decide:
- Spine + back cover placement (most likely), OR
- A small front wordmark in addition to the title block.

### 2. Title casing
Titles currently render in sentence-case display (brand voice). **Confirm against printed mockups** before finalizing the catalog.

### 3. `on-the-move` aspect ratio
This illustration is slightly shorter than the others (1103×1380 vs 1103×1426 for the rest). **Verify trim and bleed at print size** to confirm it fits the standard cover spec.

### 4. CoverArt.jsx integration (`kind="generalized"`)

| Step | Detail |
|---|---|
| Flat-art branch | Full-bleed `<img src="cover-art/generalized/full/<slug>.png">` (web: `.jpg`). Drop `cw.hex` flood, `SCATTER` motif pass, hero line-art window — art is complete. |
| Expand `GEN_THEMES` | 10 slugs. Add `titleTop` (% from top) + default colorway per theme (table below). SKU grid = 10 × 6 = 60. |
| Title overlay | `position:absolute; top:titleTop%; left/right:7%; text-align:center`. Fredoka 600, colorway deep tone, `text-wrap:balance`, faint cream text-shadow, squiggle SVG underline. No bottom colophon on front. |
| Name-line upsell | Possessive eyebrow above title (`"Mia's"` / `"James'"`) when name provided. |

**Theme registry to mirror into `GEN_THEMES`:**

| Slug | Title | Default CW | titleTop % | Print asset |
|---|---|---|---|---|
| `rainbow-dreams` | Rainbow Dreams | grape | 8 | `generalized/full/rainbow-dreams.png` |
| `starry-space` | Starry Space | grape | 11 | `generalized/full/starry-space.png` |
| `ocean-friends` | Ocean Friends | teal | 7 | `generalized/full/ocean-friends.png` |
| `garden-blooms` | Garden Blooms | bubblegum | 5 | `generalized/full/garden-blooms.png` |
| `fairy-garden` | Fairy Garden | grape | 7 | `generalized/full/fairy-garden.png` |
| `little-safari` | Little Safari | sun | 8 | `generalized/full/little-safari.png` |
| `dino-days` | Dino Days | teal | 7 | `generalized/full/dino-days.png` |
| `best-friends` | Best Friends | coral | 13 | `generalized/full/best-friends.png` |
| `on-the-farm` | On the Farm | coral | 9 | `generalized/full/on-the-farm.png` |
| `on-the-move` | On the Move | sky | 7 | `generalized/full/on-the-move.png` |

**Colorway deep tones (readable on cream):**
coral `#E8503F` · teal `#1F8A82` · sun `#C98A12` · grape `#7C5FC4` · sky `#2E7FC4` · bubblegum `#D85B92`

### 5. Stationery print files
Produce before enabling stationery orders:
- `PC-FRONT-[theme]-4x6-bleed.pdf` × 6 (CMYK, 300 DPI, 0.125 in bleed) — art from `assets/art/src-1…6.jpg`, re-composed at 4.25 × 6.25 in
- `PC-BACK-standard-4x6.pdf` × 1 (shared across all SKUs)

Note: stationery currently uses 6 postcard designs matching the original theme set. If the stationery line expands to the full 10 themes, additional front art will be needed.

### 6. Pricing
All prices are **placeholders** — confirm before enabling cart:
- Theme coloring book: TBD
- Variety postcard pack (12 ct): $12 placeholder
- Single-design postcard pack (12 ct): $9 placeholder
- Bundle discount (book + postcards): TBD

### 7. Checkout upsell wiring
The upsell component in `stationery.html` is a static demo. For production:
- Placement: cart drawer + checkout step 1, directly under the book line item
- Never a blocking modal — full-width inline card, min 320px
- Suppress after add or dismiss within a session
- Fire events: `addon_view`, `addon_add {packType, theme}`, `addon_remove`
- If pack type = single, prompt for theme selection on Add tap

### 8. E-commerce / platform integration
- Connect to cart/checkout platform (Shopify, WooCommerce, etc.)
- SKUs: `OUAL-GEN-[INITIALS]-[CW]` for covers (e.g. `OUAL-GEN-RD-GRAPE`), `OUAL-PCPACK-VAR` and `OUAL-PCPACK-SGL` for postcards
- "Start Personalizing" CTA is unlinked — needs the personalization flow URL

### 9. Domain / hosting
- Deploy to production domain
- Swap footer URL placeholder (`onceuponaline.art`) with live domain
- Set up CDN for cover art assets (`assets/art/covers/`)

---

## Folder structure

```
Once Upon A Line/
├── index.html                  ← Landing page
├── shop.html                   ← 10-theme cover gallery + controls
├── stationery.html             ← Postcard pack product + checkout upsell demo
├── NEXT-STEPS.md               ← This file
└── assets/
    ├── css/
    │   └── design-system.css   ← Brand tokens, fonts, shared nav
    └── art/
        ├── covers/             ← 10 × 760px web preview JPEGs (production art)
        │   ├── rainbow-dreams.jpg
        │   ├── starry-space.jpg
        │   ├── ocean-friends.jpg
        │   ├── garden-blooms.jpg
        │   ├── fairy-garden.jpg
        │   ├── little-safari.jpg
        │   ├── dino-days.jpg
        │   ├── best-friends.jpg
        │   ├── on-the-farm.jpg
        │   └── on-the-move.jpg
        └── src-1…6.jpg         ← Stationery postcard art
```

**Note:** Full-resolution print PNGs (`cover-art/generalized/full/*.png`, ~2.3 MB each) remain in the source zip — copy them into your production asset pipeline separately.

---

## Brand quick reference

| Token | Value |
|---|---|
| Coral (CTA) | `#FF6B5C` |
| Coral deep (on cream) | `#E8503F` |
| Teal deep (on cream) | `#1F8A82` |
| Sun deep (on cream) | `#C98A12` |
| Grape deep (on cream) | `#7C5FC4` |
| Sky deep (on cream) | `#2E7FC4` |
| Bubblegum deep (on cream) | `#D85B92` |
| Paper | `#FFFBF3` |
| Ink | `#2B2B2E` |
| Display font | Fredoka 600 |
| Body font | Nunito |