# Life In A Dollhouse — homepage redesign notes

## The idea
**"One inch to the foot."** 1:12 scale means one inch on the shelf equals one foot in a real house.
The whole page is built on that fact. The visitor arrives at the storefront, is pulled through the
front door, walks the rooms, meets Ella and her grandpa in the workshop, and ends at the shop.
A fixed ruler on the left edge measures the walk: the full page is exactly 12 inches, one foot.

## Tokens
| Token | Value | Source |
|---|---|---|
| paper | `#FBF8F5` | warm white ground (not cream) |
| periwinkle | `#93A6CE` | logo house + real storefront paint |
| periwinkle-deep | `#5A6E9E` | text-safe accent, buttons |
| blush | `#F4DEE3` | the shop's existing pink |
| ink | `#2A2D3A` | blue-black text |
| cedar | `#C9A57A` | shingle roofs, ruler ticks |
| brass | `#B08D3E` | hardware, hotspot dots |
| sage | `#A9B8A4` | flower box, used once |

Type: **Fraunces** (display, optical size 144, SOFT axis 100 so the serifs echo scalloped trim) and
**Albert Sans** (UI and body). Italic Fraunces is reserved for Ella's own voice.

## Structure (in scroll order)
1. Storefront hero, pinned; scrolling zooms through the front door into the interior.
2. Kitchen and living room: real photos of Ella's builds with brass hotspots that open shoppable cards.
3. The Vintage Garden Bungalow: scroll scrubs through the listing's own 17 photos, a walk-around.
4. Ella's Top Picks: pinned horizontal shelf, real products, add-to-cart drawer.
5. Workshop story: 2017 → 2020 → today, real About-page photos.
6. Featured in: press names set in type, slow marquee.
7. Shop by room: a house cross-section; hover turns the room's lights on; each room is a collection.
8. Custom work CTA with the hand-and-armchair image.
9. Footer.

## What I deliberately did not do
- No cream + terracotta, no card grid with rounded corners and grey shadows, no fade-up on every section.
- Motion is scroll-driven or answers a click. Only one autonomous moment: the hero load sequence.
- Radius appears in exactly two places: pill buttons (the brand already uses them) and the scallop divider.

## Generated imagery (Higgsfield, nano_banana_2)
- `assets/hero-storefront.jpg` — periwinkle facade with fingertip for scale.
- `assets/interior.jpg` — through-the-door interior.
- `assets/scale-hand.jpg` — hand holding a blush armchair.
- `assets/workshop.jpg` — grandpa's workbench with a house frame.
- `assets/cut-*.png` — pendant, olive tree, kettle cutouts (background removed).
All product and room photos are Ella's own, loaded from the Shopify CDN with the product URL attached.

## Porting to Shopify
Each `<section>` maps to one theme section. Product cards carry `data-handle` and `data-variant`
so add-to-cart can call `/cart/add.js`. Hotspot positions are percentages on the image, so they
survive any image size. Copy is in plain HTML; move it to section settings as needed.

## Files and how to rebuild
- `index.html` is generated. Edit copy and structure in `build.py`, product picks and hotspot positions in `site-data.json`, then run `python3 build.py`.
- `python3 build.py --inline --artifact --out some.html` produces the single-file version with every image embedded (used for the shared preview).
- `css/tokens.css` holds every color, type, spacing and motion value. `css/site.css` and `js/site.js` reference tokens only.
- `preview/` holds review screenshots at 1440×900 and 390×844.
- Shared preview: https://claude.ai/code/artifact/0c1e3559-5ba4-4fe8-adf6-26d0cd8f079a

## Known limits of this draft
- The cart is local to the browser (localStorage). Each add button carries the Shopify variant id, so wiring `/cart/add.js` is a one-line swap.
- Product data was pulled from the live store on 6 Sep 2026; re-run the fetch if inventory changes.
- Storefront, interior, workshop and hand images are AI-generated stand-ins for a real photo shoot of Ella's actual shop model.