# Awe website — design spec v0.1 The handoff document for session 2. Pairs with `brand-spec.md` (tokens, type, posture, voice). This file covers **structure, content and what's missing**. Status: four homepage directions prototyped, none chosen. See `index.html`. --- ## 1. The one-sentence problem Awe has to look credible to capital partners and feel like itself to future residents, at a stage where the photography does not exist yet — and it has to keep being true as the ground changes. Everything below follows from that. The four prototypes are four different answers to it, not four visual moods. **Voice, locked session 1:** the site speaks from what is being built, never from what is missing. See `brand-spec.md` §4 for the banned constructions. This was a client decision and it overrides anything earlier in this file. --- ## 2. Sitemap Six routes. The seventh is a candidate, not a commitment. ``` / Home — the whole argument, compressed /purpose Mission & purpose — why, lineage, the three commitments /progress Progress — phases, updated as the ground changes /get-involved Get involved — Dream · Build · Enjoy /events Events — weekends, trainings, fundraisers, opening /stay Stay — stub. "Opening soon, join the list" /open Open build log — CANDIDATE, see §6 ``` ### Navigation labels Use these strings, not synonyms. They were tested against the deck's voice: `Purpose · Progress · Get involved · Events · Stay` Plus one persistent CTA in the bar: **"Help it take root"** — the deck's own words, and it works at every phase of the project. `Stay` is deliberately in the nav before it can take bookings. A hospitality project with no visible path to staying reads as unfinished; a path that says "opening soon, join the list" reads as planned. --- ## 3. Page-by-page content model Every string below either exists in the deck already (marked ✅) or is content you still owe (marked ⚠️). Nothing is invented. ### `/` Home | Block | Source | Status | |---|---|---| | Hero question — "How do you want to live?" | deck slide 1 | ✅ | | Standfirst — community living + hospitality, land, small core | deck slide 4 | ✅ | | Status line — phase 1, seven souls, prototype dome within the year | deck slide 5 | ✅ | | Anchor image + precedent caption | Bad Blumau, licensed | ✅ | | What we're building — 3 points | deck slide 4 | ✅ | | Three commitments — i / ii / iii | deck slide 3 | ✅ | | Hundertwasser lineage + quote | deck slide 2 | ✅ | | Progress summary + "we are here" | deck slide 5 | ✅ | | The ask — $7,500 first season | deck slide 5 | ✅ | | Teaser film | — | ⚠️ **film to be shot** | | Get involved — Dream / Build / Enjoy | deck slide 6 | ✅ | | Events teaser — 4 items | inferred from brief | ⚠️ **dates needed** | | Reciprocity — open-source everything | deck slide 6 | ✅ | ### `/purpose` Expands slides 2–3. The Hundertwasser material is strong enough to carry a page: enemy of the straight line, the window right, one with nature, trees as tenants, "an uneven floor is a melody to the feet" — all ✅. Needs: ⚠️ **who the seven are.** Names, faces or pseudonyms, one line each. This is the single highest-value missing content on the whole site. Seven real people is the most convincing asset the project has, and right now the site says "seven souls" and shows nobody. ### `/progress` The page that must stay alive. Structure: - Current phase banner with a "we are here" marker ✅ - Four steps of phase 1 ✅ — core group, vision weekends, educating ourselves, prototype dome - Phase 2 onward: toward ~20 dome-nests ✅ - ⚠️ **A dated update log.** Reverse-chronological, one entry per real event. Even three entries beats zero. Without this the page is a static diagram pretending to be a progress page. Direction C's phase scrubber is the strongest version of this and should carry forward regardless of which direction wins. ### `/get-involved` Three tiers, taken verbatim from the deck's closing line: | Tier | When | Mechanism | Status | |---|---|---|---| | **Dream** | now | Artizen sprint, $7,500 | ⚠️ **need the live URL** | | **Build** | soon | Dome trainings, work-trade, timeshare | ⚠️ **timeshare: real offer or idea?** | | **Enjoy** | later | Guest dome-nests, residencies | ⚠️ **opening soon — join the list** | The timeshare question matters legally, not just editorially. If it's a real offer involving money for future occupancy, the copy needs care and probably review. All four prototypes currently say "Timeshare — details soon", which is accurate and safe. ### `/events` Four event types from your brief: vision weekends, dome build trainings, fundraisers, opening party. All ⚠️ **awaiting dates**. Status vocabulary, used consistently across all four directions: `Applications open` · `Waitlist` · `Tickets soon` · `Save the date`. Dates read `Dates announced soon`, and the opening reads `When the first dome stands` — forward-looking, never `date to be set`. ### `/stay` One screen. What it will be, when it opens, and an email capture. Do not build a booking flow this year. --- ## 4. Component inventory What session 2 should build once and reuse. Named so we can talk about them. **Structural** - `sheet-header` / `section-marker` — the numbered section label - `accent-scope` — the per-section `--accent` switch (all four directions use it) - `wave-divider` — SVG section edge, cream↔colour and cream↔dark (directions B and D) - `title-block` — the drawing-sheet footer (directions C and D) **Content** - `precedent-plate` — image + `b` label + caption + photo credit. **Every image on this site uses this.** The credit line is not optional. - `status-line` — the "here's where we are and what's next" block - `commitment-card` — i / ii / iii - `spec-row` — numbered row with heading + body - `ask-block` — $7,500 + rationale + CTA - `tier-card` — Dream / Build / Enjoy - `event-row` — date + name + kind + status - `film-placeholder` — play affordance + "coming soon" tag **Interactive** - `phase-scrubber` — range + tick buttons driving an SVG site plan (directions C and D) - `window-right` — click-to-paint wall, persists to localStorage (directions B and D) - `nav-current` — IntersectionObserver marking the section in view (all four) --- ## 5. Interaction inventory The brief asked for interactive and playful with a clear sitemap. Built so far: | Interaction | Where | Verdict | |---|---|---| | Accent rotates per section on scroll | A | Keep. Cheap, faithful to the deck. | | Window Right — paint the wall | B, D | **Keep. Best idea in the project.** Teaches the philosophy by making you perform it. Persists between visits, and arrives part-painted so the affordance is obvious. | | Phase scrubber builds the site plan | C, D | **Keep.** Doubles as the progress page. | | Site plan inks itself in on scroll | C, D | Keep, but it's decoration. Cut first if perf suffers. | | Cream↔dark ground alternation | D | **Keep.** Rigour on the drawing sheets, warmth everywhere else — this is what makes the hybrid work. | | Preview width toggle | `index.html` | Internal tool only, not for the real site. | | Hover tilt on cards / tickets | B | Optional. Fun, slightly gratuitous. | All of it respects `prefers-reduced-motion`. Keep that. --- ## 6. Open questions **Blocking session 2** 1. **Which direction?** Direction **D** (`direction-d-drawn-by-hand.html`) is the C+B hybrid, now built — C's sheet structure and phase scrubber, B's Bricolage display, cream grounds, wave edges and the Window Right. Compare it against A, B and C in `index.html`. Everything else waits on this. 2. **Who leads the homepage — investors or residents?** Both is not an answer for a hero. **Blocking real content** 3. **The seven.** Names or pseudonyms, one line each. Highest-value gap. 4. **One real date.** Any event. Turns Events from a placeholder into a page. 5. **The Artizen sprint URL.** And whether $7,500 is still the live number. 6. **Timeshare** — real offer or still an idea? **Blocking launch** 7. **Hundertwasser imagery rights.** Precedent use is defensible in a private deck; a commercial site is a different question and his foundation enforces the estate. See `assets/credits.md`. Three routes: commission illustration in the spirit rather than photographs of his work, licence properly, or drop to landscape and technique imagery only. 8. **Wordmark.** All four directions set "Awe" in their display face as a placeholder. It needs drawing. Note that "Awe" is short enough to carry a real mark — that's an opportunity, not a chore. 9. **Does the four-accent rotation survive six pages?** It works beautifully across one scroll. Across a whole site it may become noise. Test before committing. 10. **`/open` as its own page?** The reciprocity material — workshops, governance, financing, all documented and open-source — is substantial and is arguably the project's most differentiating claim. Currently it's a footer-adjacent section. It may deserve a page. Decide in session 2. --- ## 7. Session 2 plan Assuming a direction gets picked: 1. Lock the direction; fold the winning tokens into `brand-spec.md` as v0.2. 2. Build `/purpose` and `/progress` as real pages — the two that carry the most weight and have the most existing content. 3. Build the `precedent-plate` and `phase-scrubber` components properly, since both recur. 4. Draft `/get-involved` with whatever real Artizen detail exists by then. 5. Leave `/events` and `/stay` as honest single-screen stubs until there are dates. 6. First responsive pass at 430px. All four prototypes are responsive but none has been redesigned for small screens — they're currently reflowed, not rethought. Explicitly **not** session 2: booking flow, CMS, deployment, a real teaser film. --- ## 8. Technical notes - All four prototypes are single standalone HTML files, no build step, no dependencies beyond Google Fonts. Keep it that way as long as possible — this project will go quiet for stretches and a zero-maintenance site survives that. - Images live in `assets/`, referenced by relative path, never hot-linked. - Tokens are defined once in `:root` per file. When a direction is chosen, extract them to a shared stylesheet. - `data-od-id` attributes are on every region, heading, CTA and card so the design tool can target them for comments. - Contrast gates from `brand-spec.md` are enforced in all four: gold never carries body text on cream. - No invented metrics anywhere. The only numbers on any page are seven souls, one prototype dome, ~20 dome-nests, and $7,500 — all from the deck. Keep this rule. It is the project's credibility strategy. --- ## 9. Imagery — locked, session 2 round two ### 9.1 The rule: draw, don't render **Hard constraint, confirmed by the client.** No photorealistic visualisation of Awe ships anywhere — not on the site, not in a deck, not to investors. A drawing declares its own status; a render of a place that does not exist convinces people of something untrue, which breaks the session-1 voice rule more badly than a stock photo does. This now sits with the one-accent rule and the enemy of the straight line as a standing constraint, not a stylistic preference. `assets/vision-aerial-v2.jpg` is kept as the worked counter-example: the phrase *"warm late-afternoon light, long soft shadows"* alone flipped an ink drawing into a photoreal render. **Never put photographic lighting language in a prompt for this brand.** House style: pen and ink over unerased graphite, loose watercolour past the line, bare cream paper. Full text in `.prompts/_style.txt` — that file is the brief, and it can be handed to a human illustrator verbatim. ### 9.2 The locked slate | Slot | File | Notes | |---|---|---| | Hero | `assets/vision-aerial-gpt.jpg` | Home hero, Purpose opener, share card. Replaces `blumau-hero.jpg` everywhere. | | Dome-nest | `assets/vision-dome-nest-gpt.jpg` | Carries HTML annotation labels, never generated text. Runs warm; palette edit if it bothers us. | | Blueprint | `assets/vision-blueprint-gpt.jpg` | Strongest asset in the project. Placed in direction A as sheet "The plan" — 4:3 frame, never cropped, five HTML-annotated survey marks (commons · pond · nest clusters · track in · tree belt) with a numbered legend beside it. C and D use the interactive SVG site plan instead; a raster would be a downgrade there. | | Progress 1–2 | `assets/gpt-phase-1.jpg`, `-2.jpg` | Colour-matched to the series. Now in all four directions: the scrubber readout in C and D, a now/next/then triptych in A and B. | | Progress 3 | `assets/gpt-phase-3-flat.jpg` | Take 2. Hill removed, every dome and the gold door kept. `gpt-phase-3.jpg` (take 1) is a documented reject — do not publish it beside 1 and 2. | | Commons — ceremonial | `assets/vision-commons-room-b.jpg` | C2, locked. Tall dome, oculus open to night sky. Carries `/purpose`. `-room-a.jpg` is the alternate. | | Commons — domestic | `assets/vision-commons-gpt.jpg` | B, kept deliberately. Lower and closer, more vaulted cellar than dome, herbs and a guitar, eight people not forty. Carries `/events`, which had no image of its own. | | Ornament | `assets/ornament-band.png` + `-mask.png` | 1600 × 458, 84 KB + 64 KB. See below. | **Series colour — matched, closed.** The three plates shared one ground but not one light: phase 1 a pale wash, phase 2 near-monochrome, phase 3 the fullest greens. Corrected on the existing pixels rather than by a fourth generation — `tools/match-phase-series.py` pins all three to one paper cream (247, 234, 204) and one saturation level (0.26 measured over the drawn area, was 0.16 → 0.34). Overall lightness is deliberately *not* matched: phase 3 measures darker because it genuinely contains more village and more planting, and forcing its luminance to agree would flatten a denser drawing. Two things that pass make the script worth reading before reusing it: the saturation scale must **exclude bare paper by lightness** (cream carries real chroma, so a boost turns it butter yellow), and the white-balance pin must run **after** each saturation pass, not before, or the two fight over the paper. **All plates ship as quality-92 JPEG, not PNG.** They are watercolour drawings; PNG bought nothing and cost 5×. 35.6 MB → 7.1 MB across the ten plates, with measured max channel error of 22–26/255 on the finest-line plates. Only `ornament-band*.png` stays PNG, because it needs alpha. Every plate needs a review pass before it goes anywhere public. The model will add a signature, a watermark or a fake photograph unprompted — it put a hallucinated artist's name on `vision-phase-2.jpg`. ### 9.3 The ornament band — ground-independent by construction Chosen for integration, not looks: take B drew two perfectly straight rules across its own top and bottom edges, which this brand cannot ship. Take A was processed rather than shipped raw — - keyed on **ink density with a saturation boost**, not on luminance. A plain luminance ramp gives paper grain roughly 0.15 alpha, which is invisible on cream and shows up on the ink ground as a lighter box with muddy red clouds where the peach washes were. Keying on density puts everything lighter than the floor at zero, and adding `0.30 × saturation` to that density lifts the pale-but-coloured marks — blue petals, lilac leaves — back over the threshold so they survive at partial alpha. Faint film: 5.8% of the band → 2.0%, and the file went from 594 KB to 84 KB; - colours un-multiplied off white so they keep their saturation on any ground; - tail wrap-blended over the head (220px linear ramp, tail then dropped), so it tiles endlessly with no seam; - an alpha-mask twin, so one asset can carry the per-section accent rotation. Reproducible in ~30 lines of Pillow + numpy from `assets/vision-ornament.jpg`. Verified by tiling it live on cream, plaster and ink at `#1a161e`. ```css /* full-colour, any background */ .divider{ height:104px; background:url('assets/ornament-band.png') repeat-x left center/auto 100%; } /* same ribbon, flooded with the section accent */ .divider--accent{ height:104px; background:currentColor; color:var(--accent); mask:url('assets/ornament-band-mask.png') repeat-x left center/auto 100%; -webkit-mask:url('assets/ornament-band-mask.png') repeat-x left center/auto 100%; } ``` Any drift animation belongs in CSS on `background-position`, behind `prefers-reduced-motion` — never baked into the file. ### 9.4 What the failures taught - Lead the prompt with the **medium**, not the subject, or you get clean vector. - **Enumerate the variety** (every dome a different silhouette and plaster) or you get the eco-dome catalogue: identical shells, chartreuse roofs. - Counts and materials do not survive text-to-image. "About twenty" became sixty; plaster became thatch. Chain image-to-image, or don't promise consistency. - Image-to-image **edits reliably** (the staircase came out of a five-metre dome on the first try) but **does not hold a camera**. A true fixed viewpoint needs an inpainting mask, and this daemon's `media generate` exposes no mask flag — only `--image`. That route is closed until the CLI gains one. ### 9.5 Operational note Generation writes 2–4 MB PNGs and the daemon keeps its own SQLite beside them. The machine's volume was at 100% during round two; the daemon crashed mid-run and two completed generations were lost before they were written to disk. Check free space before a batch. `.prompts/round2.sh` re-runs everything still owed.