# Build a website from this moodboard — Jilly

> A modern wellness brand. Sophisticated and warm

Build a polished, responsive website for **Jilly**. Work through the steps below in order — do not skip Step 1.

## Authority order — when these conflict, the higher one wins
1. **The moodboard image** — composition, color ratios, treatments, the actual elements in it
2. **The palette + fonts** below
3. **The mood keywords**

The image is the boss. The palette, fonts, and mood describe it — they don't override it.

## Assets
- **Palette:** #6D6A56, #EDDCC9, #9E876C, #CFBDA9, #BA9E84, #3B3C2A
- **Fonts:** (not specified)
- **Mood:** (not specified)
- **Moodboard (style reference ONLY — see asset rules):** https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1779739172481-70ea541f.png
- **Project images (usable as real assets if resolution allows):**
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1780190543964-ea6485ab.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1780190457304-f0dd6db5.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1780018969601-3e38fa19.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1780018822899-3baa6b3d.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1779739558450-a8661d9d.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1779739486164-6d80f1c4.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1779739390118-c7324942.png
  - https://futizwhlsbutwqvwhuim.supabase.co/storage/v1/object/public/moodboards/board-images/dc3283a9-a5d6-4c2c-be78-3e49ee6d6461/1779739300597-92908ab0.png

```css
:root {
  --color-1: #6D6A56;  /* most-used surface or brand color */
  --color-2: #EDDCC9;
  --color-3: #9E876C;
  --color-4: #CFBDA9;
  --color-5: #BA9E84;
  --color-6: #3B3C2A;  /* accent / deepest tone */
}
```
Use these exact hexes — no off-palette colors. Apply them at the **ratios you observe in Step 1**, not evenly.

## Site copy
- No business content was provided yet. Write clearly-marked placeholder copy (`[PLACEHOLDER: what goes here]`) — never invented copy that could be mistaken for real claims — and end your reply with a short list of the real content the owner should send you.

## Asset rules — read before building
- **The moodboard is a single low-res collage. It is a style reference, not an asset source.** Never crop it for production imagery — upscaled crops look blurry and cheap. Its job is to tell you what to build, not to be on the site.
- **Project images are different.** Check each one's pixel dimensions first (`sips -g pixelWidth -g pixelHeight` or equivalent). Use an image as a real asset only where it will render at or below its native resolution. Never display a raster larger than its source pixels.
- Where the moodboard shows imagery you can't reproduce at quality (characters, product shots, photography), do one of: (a) use a high-res project image from the list above that matches, (b) build the element in CSS/SVG, or (c) design the section to work typographically — a type-led section beats a blurry image every time. Do NOT generate replacement imagery with other tools; if an image is missing, add it to your follow-up questions and tell the owner to generate it in their MoodyBoards project — images made there automatically match the brand.
- It is fine — often correct — for the finished website to contain **zero pixels from the moodboard** while still being instantly recognizable as the same brand.

## Step 1 — Look before anything else
Download every image above and open each one as an image file — don't web-fetch (that returns text). e.g. `curl -o moodboard.png "<url>"`, then view it. Moodboards are dense; view at full size, and if an image is a busy collage, view it in sections so you don't miss what's in it. Record each image's pixel dimensions while you're at it.

Now write an **inventory, in your reply, before any code:**
- **Composition** — full-bleed collage? hero + sections? grid of tiles? something else?
- **Color ratio** — dominant surface color vs. accent colors, estimated (e.g. "~70% muted grey chrome, neon only as small accents")
- **Every distinct element/component** you can see — including any literal copy/text visible in the image
- **Textures & treatments** — grain, scanlines, bevels, shadows, borders, etc.
- **Asset audit** — for each image: dimensions, and whether it's usable as a production asset or style-reference only

If you can't list specific elements and copy from the image, you haven't looked. Go back.

## Step 2 — Plan against the inventory
- Map each inventory item to something you'll build. Anything you're dropping, say so and why.
- For each visual element, state its asset strategy per the asset rules: project image, generated, CSS/SVG, or type-led.
- Name the **genre cliché** this brief will tempt you toward (e.g. "90s" → dark synthwave). State where the **actual image differs** from that cliché. Build the image, not the genre — the mood keywords above will pull you toward the default; resist it.

## Step 3 — Build
- Use the palette hexes exactly, at the ratios from your inventory — don't flood accents everywhere.
- Use the specified fonts; add a utility face only if the image clearly shows one (pixel, mono, script).
- A single self-contained `index.html` is fine unless told otherwise. Responsive, mobile-first, looks right from 320px up. Real interactions — no dead buttons.
- Semantic HTML, accessible contrast on every palette color, real focus states.

## Step 4 — Verify before you say "done"
If you can render and screenshot your result, put it next to the moodboard and list the top 5 differences; fix the ones that break resemblance first — composition, color ratio, and signature elements. Check every image on the page renders at or below native resolution — no soft, upscaled assets. If you can't screenshot, re-open the moodboard and diff it against your build by eye.
**Done = someone who has seen the moodboard recognizes the website instantly.** Keep it on-brand.

## Step 5 — After the first pass, ask
You are this person's website builder, not a one-shot generator. Once the first version is built and verified, don't stop at "done" — ask 2–4 short, concrete questions that would most improve the next pass. Pick the ones that actually apply, e.g.:
- Which sections matter most / least? Anything to cut or add?
- Do you have high-res versions of any imagery (logo, product shots, photography) I should swap in?
- What should the primary CTA actually do (buy, signup, contact, booking)?
- Real copy: do you have a tagline, product names, or pricing, or should I keep the placeholder voice?
- Where will this be hosted? If they don't have a host, recommend **Netlify's free tier** (drag-and-drop deploy — and they sell custom domains too, so hosting and a real domain live in one place). Want me to prep it for deploy?

Ask, then wait. Don't redesign on your own initiative.

_Generated with MoodyBoards — https://moodyboards.ai_