# Design Language for bunnygirl.quest
## Aesthetics and Tone
bunnygirl.quest is a **Bauhaus correspondence-school for amateur radio operators who happen to also be carrot-farming hares** — a single-page hypertext tutorial that pretends to be a *1928 evening-school workbook*, mailed to the student in a sepia-tone manila envelope, on the topic of "How To Build A Quest." The site reads like the *Vorkurs* (Bauhaus preliminary course) lecture notes of a tutor named **Frau Weidemann** who has converted Itten's color theory and Albers' material studies into a primer on how a small, anxious rabbit might design and complete a self-directed adventure.
The mood is **didactic and tender** — *tone: tech-tutorial* (5% of corpus) at its most literal: numbered steps, captioned figures, "Aufgabe 04" worksheets, "demonstration" plates, and "now you try" ruled lines. But the tutorial subject is a **bunnygirl's quest** — packing a satchel, choosing a road, naming a fear, finding a stranger to trust — so the tone is simultaneously a Bauhaus textbook and a children's book read by a kindergarten teacher who once studied at Dessau and never quite forgave the world for closing the school. The voice never winks at the reader; the voice is sincere and specific. "Step 03. Decide what you will refuse to carry. Write it down on the line below. The act of writing it makes it true."
The aesthetic is **bauhaus** (7% of corpus, deliberately under-represented and chosen to push back against the 94% hand-drawn / 72% glassmorphism gravity of the registry). Bauhaus here means: primary geometric forms (circle, square, triangle) used as *structural diagrams of feelings*; functionalist captions in a single weight; pedagogical exhibition of the underlying grid; Moholy-Nagy collage seams left visible on the photographic plates; and zero ornament that does not also carry information. Every line on the page either is a step in the tutorial or is a frame around a step.
Inspirational anchors:
- **Herbert Bayer's Universal alphabet (1925)** — set in lowercase only, no serifs, no national-romantic flourishes — applied to the tutorial body text.
- **László Moholy-Nagy's Painting, Photography, Film (1925)** — the photogram as a teaching apparatus; full-bleed photographic plates that double as didactic diagrams.
- **Josef Albers' Interaction of Color (1963)** — the entire color theory of the site is *one warm sepia ladder of seven values plus one accent*, and the tutorial actually teaches the reader to perceive the ladder as it scrolls.
- **Anni Albers' On Weaving (1965)** — the wave-forms motif is treated as a textile draft, not an ocean.
## Layout Motifs and Structure
The dominant structural metaphor is **ma-negative-space** (5% of corpus) — the Japanese concept of *ma* (間), the silence between two notes — laid over a Bauhaus 12-column reference grid that the page openly displays in pencil-grey at 8% alpha. The visible grid is a **pedagogical move**, not a decorative one: this is how you teach somebody to see structure. The grid is shown so that it can be ignored.
**Grid spec.**
- Reference frame: 1440 × 1024 desktop, 768 × 1280 tablet, 390 × 844 mobile.
- 12 columns, 28px gutter, 96px outer margin desktop. The outer margin is the *ma* — never violated.
- Baseline rhythm: 8px on body, 12px on captions, 24px between Aufgabe (worksheet) sections.
- Columns are *named* in marginalia: `i`, `ii`, `iii` … `xii` in 9px Bebas Neue, 30% opacity, set 6px outside the page rule.
**Section choreography.**
The page is a **vertical staircase of nine "Aufgabe" plates**, each occupying ~120vh, each separated by a generous **80vh of empty sepia field**. The empty field is not waste; it is the *ma* of the lesson — the silence in which the previous step is supposed to settle into the reader. Most websites in the registry pack content edge-to-edge; this one teaches restraint by demonstrating it.
**Per-Aufgabe plate composition (always exactly the same so the reader learns the rhythm):**
```
┌────────────────────────────────────────────────────────────┐
│ ma (top) ── 18vh of empty sepia paper │
├────────────────────────────────────────────────────────────┤
│ AUFGABE │ │
│ 04 │ FULL-BLEED VINTAGE PHOTOGRAPH │
│ ────── │ (photogram-style, sepia, columns iii–xii) │
│ FRAU W. │ │
│ Weidemann│ │
├──────────┴────────────────────────────────────────────────┤
│ DEMONSTRATION ── caption set in Bayer-lowercase │
│ at 14px, 60ch max, columns iii–viii only │
├────────────────────────────────────────────────────────────┤
│ NOW YOU TRY ── ruled line, columns iii–x, 48px tall │
│ (interactive: click to "write" — see Imagery below) │
├────────────────────────────────────────────────────────────┤
│ ma (bottom) ── 18vh of empty sepia paper │
└────────────────────────────────────────────────────────────┘
```
The left column (`i`–`ii`) of every plate carries only the **Aufgabe number in 168px Bebas Neue** and beneath it the tutor's name in 11px humanist tracking. The number is the only visual loud-speaker on each plate. Every other element is set in two soft sepia values and one ruled line.
**The nine Aufgaben (Bunnygirl's tutorial syllabus).**
1. *Aufgabe 01: NAME THE QUEST.* (You cannot quest toward a thing you have not named.)
2. *Aufgabe 02: DRAW THE FIRST STEP.* (The circle, the square, the triangle, in order.)
3. *Aufgabe 03: PACK THE SATCHEL.* (List exactly seven items. The seventh must be useless and beloved.)
4. *Aufgabe 04: REFUSE A WEIGHT.* (What you do not carry is a part of who you are.)
5. *Aufgabe 05: CHOOSE THE ROAD.* (The shortest road is rarely the road.)
6. *Aufgabe 06: NAME THE FEAR.* (A named fear is a smaller fear.)
7. *Aufgabe 07: TRUST A STRANGER.* (Once. Briefly. Carefully. Anyway.)
8. *Aufgabe 08: REST.* (The quest cannot be completed by a tired bunnygirl.)
9. *Aufgabe 09: TURN AROUND ONCE.* (To see how far you have come is part of the going.)
**Header (above Aufgabe 01).**
A single full-bleed sepia photograph of a young woman in a 1928 woolen overcoat with construction-paper rabbit ears clipped over her hat, standing on an empty railway platform at dawn, holding a folded paper map. Caption: "die hasenmädchen-fibel — a primer for the hare-girl on her own quest. herausgegeben am morgen, mai 1928. weidemann, frau prof."
**Footer (below Aufgabe 09).**
A *Kolophon* (colophon) plate: tutor's signature in 0.6px sepia ink, the printer's mark (a circle, a square, a triangle, in that order, in `#3D2F1E`), and the line "*ende der lektion. die quest beginnt jetzt.*"
**Critical absence list (things the layout deliberately does NOT have).**
- No card grid. (70% of corpus.)
- No CTA. (No "Sign up", no "Buy now", no "Subscribe.")
- No pricing block.
- No stat-grid. ("100K users ★★★★★")
- No testimonial cards.
- No "as featured in" logo strip.
- No hero-with-three-columns-below. The hero is the page's quietness itself.
- No sticky header. The reader is not allowed to skip; they may only scroll.
## Typography and Palette
**Type stack — Google Fonts only.**
- **Bebas Neue (regular, 400)** — the Bauhaus loud-speaker. (4% of corpus.) Used for the Aufgabe numbers (168px desktop, 96px mobile, letter-spacing 0.04em), the section-title slabs ("DEMONSTRATION", "NOW YOU TRY", "KOLOPHON" — set at 22px, letter-spacing 0.18em), the Roman column rules (`i`–`xii`, 9px), and the front-matter title "DIE HASENMÄDCHEN-FIBEL" (set at 96px desktop, tracking 0.06em, with a 1.5px sepia underline that is itself part of the type).
- **DM Sans (400, 500)** — the Bayer-Universal substitute, used for all running tutorial body text, captions, and the "now you try" placeholder. Set in **lowercase only**, even when grammar would normally capitalize. Body 16px, line-height 1.6, max-width 60ch. Captions 14px, line-height 1.5. The lowercase rule is the most important rule in the entire typesetting: it is the rule that *is* Bauhaus, applied verbatim from Bayer's 1925 manifesto.
- **IBM Plex Mono (300, 400)** — used **only** for the marginalia, the colophon coordinates, the "page xx of 09" footer, and the tiny grid-coordinate labels in the diagrams. Never for body text. Set at 11px, 13px max.
The three-font stack matches the typography token *bebas-bold* (4%) — the seed token — but uses the *eclectic-hybrid* gesture (5%) of pairing it with two contrasting non-display faces. The Bauhaus-Bayer logic enforces that all three faces share the same baseline rhythm; only the weight and texture differ.
**Palette — sepia-nostalgic ladder (3% of corpus, deliberately rare).**
The site is monochrome-with-one-accent. Seven values of warm sepia, plus one accent of *carmine seal-wax*. No blue, no green, no cool grey, anywhere on the page.
| token | hex | role |
|--------------------|-----------|------------------------------------------------------|
| `--paper-01` | `#F4EBDC` | the page itself; matte sepia-cream |
| `--paper-02` | `#E8DBC4` | photographic plate ground; behind every photograph |
| `--ink-soft` | `#B89976` | grid lines, column-ruler labels, soft underlines |
| `--ink-mid` | `#7E5F3F` | body text, captions, "now you try" rule |
| `--ink-bold` | `#3D2F1E` | Aufgabe numbers, section titles, photographic shadow |
| `--ink-deepest` | `#1F1812` | colophon, footer, page-number deep notation |
| `--ink-shadow-cs` | `#0F0A06` | inner-shadow detail on Aufgabe numerals only |
| `--seal-wax` | `#9C2A1A` | the single accent, used **at most three times**: the seal on the front-matter envelope, the underline beneath "QUEST" in the cover title, and the closing dot at "ende der lektion." Carmine seal-wax. |
The sepia ladder is **literally Albers's Interaction of Color demonstrated as scroll position**. A 1px-tall element fixed to the right margin, at column-rule `xii`, displays a vertical seven-step sepia gradient. As the user scrolls past each Aufgabe, one step of the ladder is *outlined* in 1.5px `--ink-bold` and labeled with the current Aufgabe's primary value. The reader is being taught, without being told, to perceive the ladder.
**Why this palette is a deliberate departure.** The corpus is 95% gradient-based and 94% warm-multi-hue. Sepia-nostalgic appears in 3% of designs, and within those it is almost always paired with vintage-photography as ornament. Here, sepia is the *substrate of pedagogy* — the literal paper of a 1920s schoolbook — and the gradient ladder is *information*, not decoration.
## Imagery and Motifs
The site uses **photography** (97% of corpus — but used here as Moholy-Nagy photogram-style didactic plates, not as lifestyle stock — which is a near-zero use of the photography token in the corpus) plus the seed motif **wave-forms** (1% of corpus, the rarest motif token in the registry, deliberately chosen).
**Photographic plates (one per Aufgabe, nine total + cover).**
- All ten plates are **sepia-toned** at `--paper-02` ground with `--ink-bold` shadow, dynamic range deliberately compressed to four steps (cinematic-style histogram clipped on both ends, the way Moholy-Nagy printed his photograms).
- Composition: **always one human-or-animal figure, always isolated, always with a single hand-built prop.** Aufgabe 03's figure holds an open satchel; Aufgabe 06's figure stands at a fence, looking at something the camera does not show; Aufgabe 09's figure is photographed *from behind*, in mid-stride.
- Every figure wears construction-paper rabbit ears clipped to a hat, scarf, or hairband. The ears are slightly absurd, never cute. The ears are the only narrative through-line that connects all ten plates into a single character: *the bunnygirl on her own quest*.
- All plates are AI-generated or stock-licensed (in implementation), but the **prompt language for them is part of this design document**: *"a 1928 sepia-tone full-frame photograph, central figure in long woolen coat with construction-paper rabbit ears, single hand-built prop matching aufgabe N, empty pre-dawn or pre-dusk landscape, clipped four-step histogram, soft grain, no text overlay."*
- Each plate is captioned with **Bayer-lowercase Arabic numerals + a one-line German-with-English-translation gloss**: "*aufgabe 04. she sets down what she will not carry.*"
**Wave-forms motif — Anni Albers weaving draft.**
Wave-forms here are NOT ocean curves. They are **textile-draft sine traces**, drawn as 0.5px `--ink-soft` SVG paths that run along the bottom of each Aufgabe plate, like the lower margin of a Bauhaus weaving notebook. Each Aufgabe has a different wave:
| aufgabe | wave | meaning |
|---------|----------------|------------------------------------|
| 01 | flat line | the quest before it has begun |
| 02 | quarter sine | the first commitment |
| 03 | half sine | the satchel is closed |
| 04 | clipped sine | something has been refused |
| 05 | full sine | the road is chosen, the rhythm starts|
| 06 | sine + ripple | a fear is named, briefly oscillating |
| 07 | two sines | a stranger has been added |
| 08 | flat line | rest, identical to aufgabe 01 — *the lesson is in the equality* |
| 09 | sine, reversed | turning around, looking back |
The waves are **animated**: as the user scrolls into each plate, the wave draws itself left-to-right at 1.6s, easing in cubic-bezier `(0.22, 1, 0.36, 1)` (the *spring* token, 73%, used here precisely because it is the registry's most-overused easing curve and the *exact wave-draw context where it actually belongs* — pedagogy demands one curve, not surprise). Once drawn, the wave never moves again; it is a static record of what the reader has crossed.
**Decorative motifs (Bauhaus primary forms).**
- A **circle, a square, a triangle**, in that exact order, appear in the colophon and as bullet markers in any list on the page. They are 12px, in `--ink-mid`, and they always appear together, never separately. (This is a direct quotation from Bauhaus pedagogy: the three primaries are inseparable.)
- The Aufgabe numbers are flanked by a 4px circle on the left and a 4px square on the right — set in `--ink-soft`, decorative-pedagogical.
- No icons. No illustrative embellishments. No emoji. No animated mascot.
## Prompts for Implementation
Build bunnygirl.quest as **one HTML file, one CSS file, one ES module**, no framework, no router, no build step, no service worker. Total uncompressed bundle target: under 80KB (the photographic plates are loaded as 10 lazy-loaded JPEGs at ~30KB each, outside the bundle budget). The page is a single long scroll. There is no navigation menu. The reader either scrolls or does not.
**Document structure.**
```
die hasenmädchen-fibel
a primer for the hare-girl on her own quest.
...
01
Frau Weidemann
...
...
```
**Storytelling priorities.**
- The **page is a tutorial that the reader actually completes by scrolling.** Each Aufgabe has a `contenteditable` ruled line ("now you try"). What the reader writes is stored in `localStorage` keyed by Aufgabe number. On revisit, the writing is restored. There is no cloud, no account, no analytics; the lesson is private between Frau Weidemann and the reader.
- Once the reader has written into all nine ruled lines (detected client-side), and only then, the colophon's seal-wax dot at "ende der lektion." gains a 0.8s color transition into `--seal-wax`. This is the only reward the site gives. There is no certificate, no email, no badge.
- The story being told is *the reader's own quest*. The Bauhaus apparatus is a scaffold for the reader to author themselves. The bunnygirl in the photographs is the reader's stand-in, never the protagonist.
**Animation system.**
- Easing curve: cubic-bezier `(0.22, 1, 0.36, 1)` exclusively (one curve, pedagogical consistency).
- **hover-lift** (13% of corpus, the seed pattern): each photographic plate, when hovered with a coarse-pointer-capable cursor, raises by exactly **3px on the y-axis** with a 0.4s transition, and the plate's bottom-edge sepia shadow extends from 12px to 22px blur. The lift is *small* — Bauhaus does not enthusiastically gesture. It is a **physical** lift, as if the plate had been pressed onto the page with a tiny puff of air beneath it. On touch devices, the lift is replaced by a 1.5px rule appearing under the caption on tap. No magnetic cursor, no spring overshoot, no scale-up.
- Wave-form draw on scroll-into-view (1.6s, draw-once, never repeat).
- Aufgabe number fade-in with a 200ms delay against the photographic plate, so the eye lands on the photograph first and then registers the numeric label — a deliberate teaching of reading order.
- The **Albers ladder** does not animate; it scrolls with the page and updates its outline marker via `IntersectionObserver` watching each ``.
- No parallax. No magnetic cursor. No tilt-3d. No cursor-follow. No counter-animate. No typewriter-effect. The animations the registry over-uses (parallax 93%, spring 73%, stagger 73%, cursor-follow 70%, magnetic 57%) are all explicitly absent.
**Type-setting rules in CSS.**
- `body { font-feature-settings: "kern" 1, "liga" 0; }` — disable ligatures, in the spirit of the Universal alphabet.
- Body text is enforced lowercase by `text-transform: lowercase` on `.demonstration` and `.now-you-try`. Aufgabe numbers and section titles use `text-transform: uppercase`.
- All paragraphs have `hanging-punctuation: first last;` to honor the textbook setting.
- `widows: 3; orphans: 3;` in case the document is printed.
**Accessibility-of-tone (not the technical kind).**
- Captions name the figure in the photograph, in lowercase: "die hasenmädchen, allein. (the hare-girl, alone.)"
- The "now you try" lines have a placeholder of `now you try.` — never an aggressive prompt.
- The page never says "you must" — only "you may." The Bauhaus original was authoritarian; this primer is gentle.
**Forbidden in implementation.**
- No CTA buttons. The page sells nothing.
- No newsletter sign-up. Frau Weidemann does not have an email list.
- No social-share row. The lesson is private.
- No pricing tier. There is no paid version.
- No chatbot. No live-chat widget. No "Ask Frau Weidemann!" easter-egg.
- No `