# Awe — brand spec v0.1 Extracted from real sources, not invented. Sources: 1. **The deck** — `https://share.kokott.art/awe/v2/`, parsed directly. Its own internal theme name is *"Editorial Organic"*. All palette values below are lifted verbatim from its `:root`. 2. **Rogner Bad Blumau** — Hundertwasser's own spa hotel. The single closest built precedent to "community living meets boutique hospitality". 3. **The Colossal article** on artist-built homes — texture and philosophy. --- ## 1. Palette — inherited verbatim from the deck The deck's most valuable asset is that its palette is not decoration, it is a **system**: a cream/ink base with four accents that rotate one-per-slide via `--accent`. That mechanism carries straight to the web as one-accent-per-section. | Token | Hex (deck) | OKLch | Role | |---|---|---|---| | `--cream` | `#f6efe1` | `oklch(95.4% 0.020 84.6)` | page ground | | `--cream-2` | `#efe6d3` | `oklch(92.7% 0.027 85.7)` | raised surface | | `--ink` | `#211a12` | `oklch(22.4% 0.018 70.4)` | body text | | `--ink-soft` | `#4a3f30` | `oklch(37.5% 0.029 75.3)` | secondary text | | `--red` | `#c8352a` | `oklch(55.3% 0.186 28.9)` | accent 1 | | `--cobalt` | `#1f4fa3` | `oklch(44.5% 0.146 260.7)` | accent 2 | | `--emerald` | `#1f7a52` | `oklch(51.7% 0.105 159.6)` | accent 3 | | `--gold` | `#d69a19` | `oklch(72.6% 0.145 79.5)` | accent 4 | ### The gap worth knowing about Sampling the Bad Blumau photograph revealed something useful. Hundertwasser's **built** palette is far softer than his **poster** palette: | Token | Hex | OKLch | Observed in | |---|---|---|---| | `--plaster` | `#e8e0d2` | `oklch(90.9% 0.021 81.8)` | wall render | | `--rose` | `#c98d7f` | `oklch(69.9% 0.077 33.6)` | facade blocks | | `--lilac` | `#a99fc0` | `oklch(72.2% 0.048 299.0)` | facade blocks | | `--night` | `#141a26` | `oklch(21.8% 0.025 263.8)` | dusk / shadow | The deck reads as saturated graphic poster. The buildings read as soft plaster with **one** saturated moment per elevation. That gap is deliberately used to separate the directions rather than skinning one layout several ways. ### Contrast gates (checked, not assumed) - `--ink` on `--cream` ≈ **13.4:1** — passes body text at any size. - `--red` on `--cream` ≈ **4.6:1** — passes body text; safe for links. - `--gold` on `--cream` ≈ **2.1:1** — **fails body text.** Gold is a *fill and rule* colour only, never small text on cream. On dark grounds it inverts and becomes safe. - `--cobalt` on `--cream` ≈ **7.4:1** — passes comfortably. - `--emerald` on `--cream` ≈ **4.7:1** — passes body text. --- ## 2. Typography ### One deliberate departure from the deck The deck sets **Fraunces** as its display face. I have not carried that over, and this is the only place the spec overrides the source. Fraunces has become the default "warm friendly serif" of the current landing-page era. On a deck presented by a person in a room, it reads as charm. On a website that has to look serious to capital partners, it reads as *template*. The brief asks the site to carry soul **and** look credible; a face that signals "generated landing page" costs credibility for no gain in soul. Each direction therefore binds its own display face, and each is defensible: | Direction | Display | Body / support | Why | |---|---|---|---| | A · Editorial Organic | Instrument Serif | Instrument Sans | High-contrast editorial serif with actual spine. Magazine authority. | | B · Enemy of the Straight Line | Bricolage Grotesque | Space Grotesk | Variable face built to be idiosyncratic while staying readable — the brief's "kooky but readable" in one typeface. | | C · The Drawing | Newsreader | IBM Plex Mono | Quiet editorial serif plus a true mono for drawing annotations. | | D · Drawn by Hand | Bricolage Grotesque | IBM Plex Mono | The hybrid: B's idiosyncratic display over C's drawing annotations. Warmth and rigour in one pairing. | ### Scale and tracking — non-negotiable - Display ≥ 48px → `letter-spacing: -0.02em` to `-0.03em` - Headings ≥ 32px → `-0.01em` to `-0.02em` - Body 16–18px → `0`, line-height `1.55`, `max-width: 65ch` - Small 12–13px → `+0.01em` - **ALL CAPS → `+0.08em` minimum.** Every eyebrow, label and nav item. - Three weights only: 400 read · 500 emphasise · 600 announce. --- ## 3. Posture rules — observed, not invented Five rules pulled from the sources. These are what make it *Awe* rather than generic organic-warm. 1. **The accent rotates, it does not accumulate.** One accent per section, maximum two visible uses inside it. Inherited directly from the deck's `--accent: var(--red)` → `var(--cobalt)` → `var(--emerald)` per-slide switch. 2. **Enemy of the straight line — but earn it.** Hundertwasser's own quote is the project's spine. Curvature belongs on *large* forms (section edges, image masks, ground shapes) and never on small text containers, where it turns into the rounded-AI-card cliché. A wavy 1600px section divider reads as conviction; a 12px border-radius on a feature tile reads as Bootstrap. 3. **"An uneven floor is a melody to the feet."** The layout is allowed to be *deliberately* off — a column that starts 40px low, a plate rotated 1.5°. Off-grid must look chosen. One axis of irregularity per section, never two. 4. **Forward voice, honest substance.** The site speaks from what is being built, never from what is missing. It launches when there is something to show, and it reads that way from the first line. Honesty lives in the *substance*, not in self-deprecation: no stock-photo bluffing, no invented occupancy figures, and the only numbers used anywhere are the deck's real ones — seven souls, one prototype dome within the year, ~20 dome-nests, $7,500 for the first season. Photographs of other architects' work are captioned as **lineage**, with the photographer credited. That last part is not style: it is what keeps the Hundertwasser imagery accurate and licensable (see `assets/credits.md`). 5. **Reciprocity is structural, not a footer link.** The deck's closing line — *"Dream it with us now, build it with us soon, come enjoy it when it's alive"* — is already a three-tier participation model. It becomes the Get Involved information architecture verbatim, in all four directions. --- ## 4. Voice Lifted from the deck. It asks rather than asserts, and it is unembarrassed: > How do you want to live? > Come live the question with us. > We're planting something. Help it take root? > This isn't just our dream. We share it all back. Rules: second person, present tense, question marks allowed. No growth-copy verbs (*unlock, empower, revolutionise*). No exclamation marks except the deck's own "Help!". Lowercase is fine in nav and labels; sentence case in prose. **Never frame the project by what it lacks.** Banned constructions, locked as of session 1: *"no X yet"*, *"nothing is …"*, *"we don't know how to …"*, *"there is nothing to book"*, *"if we fail"*, *"not open yet"*, *"date to be set"*, *"someday"*, *"in planning"*, *"badly at first"*. Where something genuinely is not ready, name the next step instead — **opening soon · dates announced soon · details soon · coming soon**. Also banned: the deck's live-presentation instructions (*"grab a pen and paper"*, *"a phone with a drawing app"*). Those are stage directions for a room, not website copy. --- ## 5. What is not decided yet Deliberately open after this session — see `DESIGN-SPEC.md` for the full list. - Which direction wins. Direction D is the built C+B hybrid and the current recommendation. - Wordmark. All four directions set "Awe" in their display face as a stand-in. It needs drawing. - Whether the four-accent rotation survives a 6-page site or becomes noise. - Photography and illustration commissioning — all current imagery is reference-only, see `assets/credits.md` for the legal open item.