Website directions Session 1 Prototype — nothing here is final

Four directions, one real constraint: the photography comes later.

You asked me to clear the fog and walk you through it. Here's what I pulled from your sources, the four bets on the table — including D, the hybrid I recommended and you asked me to build — and the decisions I need before session 2. Click any direction to open the full page: all four are real, scrolling, interactive homepages, not mockups.

01

What I actually did

Step 1

Parsed the deck

Fetched your slide deck and read its CSS directly. Its palette is already a system, and its internal name for the look is “Editorial Organic”.

Step 2

Lifted the copy

Every line comes from your slides. The voice is now locked forward — nothing framed by what's missing, and the deck's live stage directions are out.

Step 3

Solved the photo problem

No image generator was available, which turned out better. Instead of faking renders, the imagery is real, licensed, and labelled as precedent.

Step 4

Found the built precedent

Rogner Bad Blumau — Hundertwasser's own spa hotel. Community living plus hospitality, already standing. That anchors all four directions.

Step 5

Built four real bets

Not four skins on one layout — different structure, medium and risk profile each. D is the C+B hybrid, built after you called it.

02

What the deck already gave us

Your palette is not a mood board, it's a mechanism. The deck sets four accents and rotates --accent to a different one on each slide. That translates straight to the web as one accent per section, and it's the single most reusable thing in there. All four directions keep it.

Red#c8352a
Cobalt#1f4fa3
Emerald#1f7a52
Gold#d69a19
Cream#f6efe1
Cream 2#efe6d3
Ink soft#4a3f30
Ink#211a12

Two things I changed, and why. First: your deck uses Fraunces as its display face. It's become the default friendly-serif of the current landing-page era — charming in a room, but it reads as template on a site that has to convince capital partners. Each direction binds a different display face instead. Second: gold fails contrast as body text on cream (2.1:1). It's a fill and rule colour only. That's now written into the spec.

And one thing I found by accident. Sampling the Blumau photo showed Hundertwasser's built palette is far softer than his poster palette — white plaster, dusty rose, pale lilac, with green doing the work. Your deck is poster. That gap is what separates the four directions below.

“How do you want to live?”

“Come live the question with us.”

“We're planting something. Help it take root?”

“Dream it with us now, build it with us soon, come enjoy it when it's alive.”

That last line is already your Get Involved information architecture — Dream / Build / Enjoy maps exactly onto the Artizen sprint, the dome trainings and timeshare, and eventual booking. All four directions use it verbatim as the three-tier structure. You wrote your own sitemap without noticing.

You set the dial at 70 — here's where each direction lands
A · 45 You asked for 70 D · 70 C · 78 B · 91
0 · Investor-seriousArtist-kooky · 100
03

The four bets

Preview width
Previews are live — click a title to open and scroll it
D

Drawn by Hand Recommended · built this session

C's structure · B's hands · cream + dark drafting · Bricolage Grotesque + Plex Mono
Open full page

The bet

The hybrid, built. C's numbered sheets, site plan and phase scrubber carry the rigour; B's Bricolage display, cream grounds, wave-cut edges and the Window Right carry the warmth. The dark drafting ground is reserved for the two sheets that are literally drawings — everything human sits on cream.

Where it wins

  • Both best interactions on one page — the painted wall and the phase scrubber
  • Lands on your dial at 70 without splitting the difference
  • Rigour where an investor looks, warmth where a resident looks
  • The progress page is already built into the homepage

Where it risks

  • Most components of the four — highest build and maintenance cost
  • The cream/dark alternation must stay disciplined or it reads as two sites
  • Two strong interactions on one page can compete for attention
  • Newest of the four — it has had the least iteration
A

Editorial Organic

Deck-faithful · cream + rotating accent · Instrument Serif
Open full page

The bet

Your deck, grown up into a magazine. Keeps the cream ground and rotates the accent as you scroll, exactly as the slides do. Photography sits in clean rectangles with editorial captions and credits.

Where it wins

  • Most legible to an investor on a phone in three minutes
  • Zero translation cost from deck to site — same system
  • Cheapest to extend to six pages
  • Ages best; least likely to look dated in two years

Where it risks

  • Least distinctive of the three — reads “good taste”, not “these specific people”
  • Cream-and-serif is a crowded look right now
  • Under-delivers on your “interactive, quirky” requirement
  • At dial 45 it's below where you said you wanted to be
B

Enemy of the Straight Line

Maximal · saturated colour fields · Bricolage Grotesque
Open full page

The bet

Takes Hundertwasser's argument literally. Wave-cut section edges, full-saturation colour panels, a deliberately uneven grid — and The Window Right, an interactive wall you actually paint. That panel is the thing people will screenshot.

Where it wins

  • Unmistakably yours — nobody else's site looks like this
  • Delivers the interactive/playful requirement outright
  • The Window Right teaches the philosophy by making you do it
  • Future residents will love it

Where it risks

  • At dial 90 it's louder than you asked for
  • A conservative capital partner may read it as unserious
  • Hardest to keep coherent across six pages and future content
  • Most expensive to maintain — every new section needs a shape decision
C

The Drawing

Dark drafting ground · gold linework · Newsreader + Plex Mono
Open full page

The bet

Makes the stage of the project into the concept: the site is the drawing. Numbered sheets, a site plan that inks itself in, photos pinned as precedent plates, and a phase scrubber that grows the plan from one prototype dome to twenty.

Where it wins

  • Turns a pre-construction stage into evidence of planning
  • Dark + drafting reads as rigour — strongest investor signal of the three
  • The phase scrubber is your progress page, already built
  • Lands closest to your dial at 72

Where it risks

  • Coolest emotionally — least warm of the three, and warmth is half your pitch
  • The concept expires: once there are real photos, the drawing conceit fights them
  • Dark sites convert worse for hospitality booking later
  • Most bespoke work per page
04

What I built, and what to look for

D is C's structure with B's hands.

You called it, so I built it rather than describing it. A, B and C are still here as the source bets — they're what D is made of, and they're the fallbacks if D leans too far either way.

C gave it the spine. Numbered sheets, the site plan, the phase scrubber and the precedent plates solve the real problems: photography that comes later, a progress page that has to stay updatable, and an investor who wants evidence of planning.

B gave it the hands. Bricolage Grotesque, cream grounds for everything human, wave-cut edges, and the Window Right ported whole. The dark drafting ground now appears only on the two sheets that are literally drawings.

A stays on the shelf. If a particular investor conversation needs maximum sobriety, A is a short reskin away — all four share the same tokens and the same copy.

The thing to judge in D: does the cream/dark alternation read as one confident site, or as two sites stapled together? That's the hybrid's one real failure mode, and it's the question I'd most like your eye on.

05

Four decisions before session 2

Decision 1 · blocks everything

Which direction

D is the recommendation and it's built, so this is a real comparison now, not a thought experiment. Open all four and tell me D or one of the source bets. If D is close but not right, the useful feedback is which half is off — the drafting rigour or the hand-made warmth.

Decision 2 · changes the copy

Who lands on the homepage first

You said investors and residents both. The homepage can lead with only one. Leading with residents and putting a clean investor path in the nav is usually the stronger play — but it's your call, and it changes the hero.

Decision 3 · has a legal edge

The Hundertwasser imagery

Using his buildings as declared lineage works in a private deck. On a commercial site it's a different question — his foundation enforces the estate. See assets/credits.md. Options: commission illustration, licence properly, or drop to landscape-only.

Decision 4 · unblocks real pages

Real dates and the Artizen link

Every event currently reads “dates announced soon” — forward-looking, but it can only hold for so long. I need one real date, the live Artizen sprint URL, and whether timeshare is a real offer yet or still an idea. Without these, Get Involved and Events stay placeholders.

06

What's in this session

FileWhat it is
direction-d-drawn-by-hand.htmlDirection D — the recommended hybrid. C's sheet structure and phase scrubber, B's display face, cream grounds and the Window Right.
direction-a-editorial-organic.htmlDirection A — full interactive homepage, deck-faithful editorial. Carries the annotated masterplan and the three phase plates.
direction-b-enemy-of-the-straight-line.htmlDirection B — full interactive homepage, maximal. Includes The Window Right and the three phase plates.
direction-c-the-drawing.htmlDirection C — full interactive homepage, dark drafting. Includes the phase scrubber.
brand-spec.mdTokens in hex and OKLch, contrast gates, type scale, five posture rules, voice. The file that carries into session 2.
DESIGN-SPEC.mdSitemap, page-by-page content model, component inventory, open questions, session 2 plan.
assets/credits.mdImage attributions, edits made, and the open legal item on Hundertwasser imagery.