# Design Language for archetype.moe

## Aesthetics and Tone

archetype.moe is a **luminous urban codex** — a digital reading-room where the great archetypes of metropolitan life (the Flâneur, the Pilgrim, the Architect, the Stranger, the Chorus, the Ghost) are catalogued in watercolour plates and oxblood Garamond, then re-bound for a near-future where pages refresh themselves while you look away. The site reads as if the **Warburg Library** were rebuilt on the top floor of a 22nd-century Marunouchi tower: south-facing, late-afternoon, the sky a pale rose-cream wash, the carpets dyed deep burgundy, the books still printed on cotton paper but the *card catalogue itself* is a quiet quantum process humming behind the wainscoting.

The aesthetic is **light-academia** — but not the candle-lit dark-academia of locked stacks. This is the *opposite* hour: a sunlit, scholarly afternoon where ivory dust motes drift in long parallelograms of light, where cream-paper plates lie open on a long oak table, and where the only sound is a fountain pen and, very faintly, traffic ten storeys below. Cross this with a **futuristic-cutting-edge** undertone: every plate quietly auto-updates via the View Transitions API; each archetype card hums with a 0.6Hz spring oscillation as if the page were *thinking*; the cursor leaves a faint watercolour bloom behind it — a thinking surface, not a static document.

The tone is **scholarly, hopeful, warm, and slightly clairvoyant**. Imagine a research journal that knows what you are about to read next, and lays the relevant plate on the table a half-second before you ask. Nothing shouts. Everything breathes burgundy onto cream.

Mood keywords (in order of weight): *vellum-light, oxblood-warm, breath-room, urban-pastoral, soft-tomorrow, watercolour-bleed, scholarly-clairvoyance.*

## Layout Motifs and Structure

The structural soul of archetype.moe is **Ma (間) negative-space** translated to an *urban boulevard column* — the page is a long, narrow, generously-margined cream avenue with cathedral side-gutters of unprinted paper. Content occupies a **central column of 38ch** maximum width on desktop; the remaining ~62% of the viewport is *charged emptiness* — not blank, but tonally active cream-paper humming faintly with a 1.8% noise watercolour wash and rare floating motifs.

**The Boulevard Column** is a single vertical avenue down which the visitor walks. It is **not** a stack of slides; it is **not** a parallax diorama; it is **not** card-flip pagination. It is a continuous, slow, *measured* promenade — like walking down a long boulevard at golden hour, with watercolour plates of urban archetypes opening on side-tables as you pass.

**Spatial logic:**
- **Off-axis spine at 41.8% from left** (the inverse-golden ratio) — the column drifts left of centre, leaving a wider right-hand cream margin where ephemeral notes, marginalia and watercolour blooms appear.
- **Vertical rhythm tuned to a 32px baseline grid** (Garamond cap-height × 1.5). All type lands on the grid; all plates *break* the grid by a deliberate 7px to feel hand-laid.
- **Six "stations" along the boulevard**, each occupying roughly 110vh, each introducing one urban archetype. Between stations, a **40vh breath** of pure watercolour-cream paper — no text, no imagery, only a single drifting motif (a tram cable, a gull, a window-square of light).
- **Right-margin marginalia rail** at 64% viewport-x, 18ch wide: hand-set Cormorant italic notes in the burgundy ink, drifting in on scroll, italicising what the central column has just stated.
- **No header. No nav. No footer.** A single fixed **page-corner ribbon** at top-right shows the current archetype number (i / vi) in small caps Roman numerals — the only persistent UI.
- **Mobile (≤720px):** the column widens to 92vw, marginalia rail collapses *into* the column as indented italic asides, the off-axis spine recentres to 50%.

The composition deliberately echoes **Tschichold's late-period book pages** crossbred with the **negative-space discipline of a Hara Kenya book jacket** — except the entire thing is rendered in watercolour cream rather than white, and a faint city skyline ghost watermarks the lower-right of the page at 4% opacity throughout.

## Typography and Palette

**Typography (Google Fonts only — a garamond-classic spine with one mono accent and one humanist signal):**

- **Display & body serif — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)**, variable weight 400→800, italic available. Set archetype titles at `clamp(2.6rem, 6.4vw, 5.8rem)`, weight 500, italic. Body prose at `19.5px` / `32px` line-height, weight 400, with **+0.6% letter-tracking** and **`font-feature-settings: "liga", "dlig", "onum"`** so the discretionary ligatures (`ct`, `st`, `Qu`) are live and old-style figures sit correctly on the baseline.
- **Marginalia italic — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** weight 300 italic, 14.5px/24px, in deep burgundy. Cormorant is *thinner-stemmed* than EB Garamond — when the two sit beside each other, the marginalia visibly *whispers* against the column's *speaking* voice.
- **Folio numbers, archetype Roman numerals, & tabular data — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** weight 300, 12px, set in `font-variant: small-caps; letter-spacing: 0.18em;`. Used *only* for: page-corner ribbon, footnote markers, archetype index, timestamps. The mono is the **futuristic-cutting-edge** signal — it tells the eye that this codex is *currently being maintained*, that the pages refresh themselves.
- **Drop caps & opening flourish — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** weight 500 italic, set at `font-size: 5.4em; line-height: 0.84; float: left; padding: 0.08em 0.18em 0 0;` for each archetype's first paragraph. The drop cap sits in burgundy ink with a faint watercolour bloom haloing it (CSS `radial-gradient`, 18px blur, 22% opacity).

**Palette (burgundy-cream, with two secondary cool atmospherics for the futuristic undertone):**

- `#FBF4ED` — **vellum cream** (page ground). The dominant surface. Not white — warm, paper-aged, like a 1955 Folio Society endpaper.
- `#F4E8D8` — **deeper cream** (sidebar wash, plate mat). Used for the right-margin marginalia rail and the rectangular mat behind each watercolour plate.
- `#7A1932` — **oxblood burgundy** (primary ink). All body type, drop caps, marginalia.
- `#3D0814` — **wine-noir** (display ink). Used only for archetype titles and Roman numerals. Reads almost-black at small sizes, reveals its red soul at display sizes.
- `#C84A5E` — **rose-burgundy** (watercolour bloom highlight). The colour of a wash where the pigment has pooled. Used for the cursor-bloom, link-underline-draw, and the lit window in the city-skyline ghost.
- `#8B6F47` — **walnut-tan** (urban motif ink). For city-skyline silhouettes, tram cables, footnote rules. A warm, dust-on-leather neutral.
- `#A8B5C4` — **cool atmospheric grey-blue** (afternoon-window light). Used *only* for the faint "future" signals: the live-update pulse on auto-refreshing plates, the 0.6Hz hum on cards, the "now editing" cursor of the system. Cools the page just enough to feel late-afternoon rather than evening.
- `#E8D5C4` — **rose-cream wash** (watercolour bleed). Background of the plate mats, edges of the page-corner ribbon.

The palette is **97% warm, 3% cool** — the cool greys (#A8B5C4) appear only as live-system-signal accents, never on type, never on chrome. This 3% is the *future* peeking through the academy.

## Imagery and Motifs

**Watercolour is the only image mode.** No photography, no stock, no 3D render, no icon set. Every visual on archetype.moe is a **hand-painted-feel watercolour plate**, executed as inline SVG with `<feTurbulence>` + `<feDisplacementMap>` filter chains to give each fill a soft pigment-pooling edge, plus a `<feGaussianBlur>` halo at 6px to mimic the wash bleeding into wet paper.

**The six urban-archetype plates** (one per station along the Boulevard):

1. **The Flâneur** — a watercolour figure-from-behind, walking a long boulevard at golden hour, in a long oxblood coat. The boulevard recedes to a single vanishing-point window of rose-burgundy light. Painted in 11 wash layers over a wet-on-wet background.
2. **The Pilgrim** — a single small figure climbing endless cream stone steps toward a faint city-skyline silhouette in walnut-tan. The steps are painted as one continuous burgundy diagonal stroke, deliberately uneven.
3. **The Architect** — a hand (just the hand, no body) drafting a city plan in oxblood ink onto cream paper. The plan dissolves at its right edge into pure watercolour bleed, suggesting cities-yet-unbuilt.
4. **The Stranger** — a single window in a tower-block at night, lit rose-burgundy, surrounded by an indigo-burgundy field. The only plate with cool tones, deliberately quieter and lonelier.
5. **The Chorus** — twelve overlapping watercolour silhouettes of a crowd, each at 30% opacity, walking *toward* the viewer. The composition reads as one figure from a distance, twelve up close. Echoes a Daumier oil but in cream and burgundy.
6. **The Ghost** — an almost-empty plate. Just a pale rose-cream wash, a single walnut-tan footstep mark, and the faint suggestion of a cathedral spire fading at the upper-left. The smallest amount of pigment of any plate; the most negative space.

**Recurring micro-motifs (drift through the cream margins, never inside the column):**

- **Watercolour blooms** — irregular soft-edged ovals of `#E8D5C4`, 60–180px wide, drifting at 0.04–0.08 viewport-units/sec down the right margin, parallax-detached from scroll.
- **City-skyline ghost watermark** — a 28cm-wide walnut-tan silhouette at 4% opacity, locked to the lower-right corner of the page, painted as a single continuous SVG path (Tokyo / Manhattan / Vienna composite skyline, deliberately unrecognizable as any one city).
- **Tram-cable lines** — single 0.5px walnut-tan strokes that traverse the cream margins horizontally, occasionally crossing the column. Path-drawn on scroll.
- **Window-square of light** — small 24×32px parallelograms of rose-cream `#E8D5C4` that drift across the page, suggesting late-afternoon sun through tall library windows. Five at any time, each at a different parallax depth.
- **Marginalia ink-spots** — deliberate small burgundy stains in the right margin (3–7px irregular blobs). They look like a careless reader rested their pen there. Static, fixed in layout, but each carries a `title` attribute footnoting the archetype it sits beside.
- **The pigeon** — exactly *one* watercolour pigeon, walnut-tan, walks across the page-bottom margin once every 90 seconds. Easter-egg motif. Springs in from the left, pauses, walks off right.

**Decorative rules of the codex:**

- All page-edges have a faint `inset 0 0 0 18px` cream-on-cream double-rule, like a Folio Society plate mat.
- Each archetype plate is **dated** in the lower-right of its mat using JetBrains Mono — but the date is *the current visit timestamp*, suggesting the codex is being painted *now* for *this reader*.
- A single watercolour ribbon-bookmark in oxblood hangs from the top-right page-corner, trailing 11vh down the right margin, marking the reader's current archetype. It ripples on scroll using a spring physics.

## Prompts for Implementation

Build archetype.moe as a **single long-scroll luminous urban codex** — one cream-paper boulevard down which the visitor walks past six watercolour archetype-plates, narrated in EB Garamond burgundy with Cormorant italic marginalia and a quiet JetBrains Mono mono "now-being-painted" pulse. The visitor does not click; they walk. Scroll *is* the experience.

**Story arc (one continuous vertical scroll, no horizontal navigation, no menu, no CTAs, no sign-up, no footer beyond a final colophon):**

1. **The Threshold (0–110vh).** On load, the cream page fades in over 1.6s. The wordmark `archetype.moe` is set in EB Garamond italic 500 at `clamp(3.6rem, 8vw, 7.2rem)`, oxblood, on the off-axis spine (41.8% left). Beneath, in Cormorant italic 300 at 22px: *"a luminous codex of urban archetypes — repainted while you read."* A single faint watercolour bloom haloes the wordmark, animating in with a **spring** ease (`stiffness: 140, damping: 24`) over 1400ms. Scroll-prompt is a single Roman numeral `i.` in JetBrains Mono small-caps at the bottom of the viewport, pulsing at 0.6Hz in cool-grey `#A8B5C4`.

2. **Stations i–vi (110vh → 770vh).** Each station occupies ~110vh and is composed of three vertical phases:
   - **Phase A (0–35vh of station):** archetype Roman numeral and italic title fade in along the column with a 200ms stagger between numeral and title, both spring-eased.
   - **Phase B (35–75vh):** the watercolour plate fades up *behind* the plate-mat with a `path-draw-svg` on the leading contour stroke (1800ms, ease-in-out), then the wash layers fade in stagger 220ms apart. Body prose (3 paragraphs) reveals on scroll-triggered IntersectionObserver, fade-up 180ms with 14ms stagger per word (set with `<span>` per word; do not blow the budget — only the first sentence of each paragraph stagger-words, the rest fade as a block).
   - **Phase C (75–110vh):** marginalia in Cormorant italic drifts in from the right margin with a spring slide (300ms, `stiffness: 110`), and the next archetype's Roman numeral pulses at the bottom edge.
   - **Between stations:** a 40vh pure-cream breath. Only watercolour blooms drift here. No type. The page *exhales*.

3. **The Colophon (770vh → 880vh).** The final station is **The Ghost** archetype — the almost-empty plate. Then a small colophon block in JetBrains Mono small-caps 11px at 38% opacity, listing: build timestamp, the cream-paper hex, the burgundy hex, "set in EB Garamond, painted in watercolour, served warm." The page ends with a single oxblood full-stop, centered, 6px diameter, `#7A1932` — the inkwell's last drop.

**The "futuristic-cutting-edge" substrate (subtle, never loud):**

- **View Transitions API** — every internal navigation (between archetypes via the page-corner ribbon, or programmatically) uses native `document.startViewTransition()` for a 600ms watercolour-crossfade. If unsupported, fall back to a 600ms opacity crossfade.
- **Live-painted plates** — once every 47 seconds, ONE random watercolour plate's wash subtly *re-pigments*: a 1.4s spring re-tint of one of its layers by ±6° hue, ±4% saturation. This signals the codex is "being repainted while you read." A tiny `#A8B5C4` cool-grey dot pulses 800ms before the change, in JetBrains Mono small-caps next to the plate's date: `· repainting`.
- **Cursor watercolour bloom** — the cursor leaves a faint `radial-gradient` bloom of `#E8D5C4` at 14% opacity, 90px radius, 600ms decay. Disabled on touch and on `prefers-reduced-motion`.
- **Predictive marginalia** — when the cursor lingers >900ms over a body paragraph, the relevant marginalia in the right rail springs 4px toward the cursor (subtle, almost subliminal), with a 220ms damped spring. As if the codex were "leaning in" to listen.
- **0.6Hz hum** — every plate-mat oscillates by ±0.4px on the y-axis at 0.6Hz with a sine ease. So gentle the eye barely registers it, but it makes the page feel *alive and breathing* rather than static.
- **Auto-update timestamp** — JetBrains Mono date in the lower-right of each plate updates live to current viewer time, refreshing every 60s with a 280ms spring roll-up of digits.

**Animation grammar (spring-first, restrained, never bouncy):**

- Default ease: a custom **spring** with `stiffness: 140, damping: 24, mass: 1.0` — settles in ~720ms with no overshoot. Implement via Motion One's `spring()` or hand-rolled `requestAnimationFrame` damped-harmonic. **Never** use `cubic-bezier` for content reveals (only for chrome decay).
- **Stagger** is the second-most-used pattern — between numeral and title, between wash-layer fades, between marginalia line-breaks (each italic line drifts in 80ms after its predecessor).
- **`path-draw-svg`** for plate contour strokes, tram-cables, and the city-skyline ghost on initial load.
- **No ripple, no magnetic, no tilt-3d, no glitch, no morph, no parallax-of-the-whole-section.** Parallax exists, but only on the watercolour blooms and window-light parallelograms drifting in the margins — never on the column itself.
- **`prefers-reduced-motion`** — disable all spring-y, the 0.6Hz hum, the cursor bloom, and the live re-pigmenting. Replace with simple opacity fades.

**HTML structure (semantic, no framework needed; vanilla CSS + ~6kb JS):**

- One `<main>` with a single `<article>` containing six `<section data-archetype="i">…</section>` blocks.
- Each `<section>` contains: `<header>` (Roman numeral + italic title), `<figure>` (inline SVG plate + `<figcaption>` date), `<div class="prose">` (3 paragraphs), `<aside class="marginalia">` (3–4 italic Cormorant lines).
- The watercolour blooms and window-light parallelograms live in a `<div class="atmosphere" aria-hidden="true">` that's a single fixed-position layer behind everything.
- The page-corner ribbon is a single `<nav class="folio">i / vi</nav>` fixed top-right.

**CSS approach:**

- Use `oklch()` for all palette declarations so the burgundies stay perceptually-uniform across light conditions; provide hex fallbacks for older browsers.
- Use CSS `subgrid` for the three-column boulevard (left margin / column / right marginalia rail).
- Use `text-wrap: pretty` on all body prose, `text-wrap: balance` on archetype titles.
- Use `@font-face` with `font-display: swap` and preload only EB Garamond regular + italic; Cormorant italic and JetBrains Mono load secondary.
- Use `view-timeline` and `animation-timeline: scroll()` where supported for the marginalia drift; fall back to IntersectionObserver.

**The reader's promise:** by the time they reach The Ghost, they should feel they have walked a slow boulevard in a city that is also a library, that the codex is *aware of them*, that something kind and scholarly has just happened in cream and burgundy, and that the page they leave is not the page they arrived at — because, quietly, in the seven minutes they spent reading, three of the watercolour plates re-pigmented themselves.

## Uniqueness Notes

**Differentiators from the existing 34-design corpus (informed by the frequency analysis):**

1. **The "Boulevard Column" — first single long-narrow off-axis-spine column in the corpus.** `ma-negative-space` registers at only **2%** in the corpus, and `single-column` at **17%** — but archetype.moe is the only site that fuses *both* into a vertical urban-promenade metaphor with a 41.8%-left off-axis spine and a marginalia rail at 64%. Other minimalists go centred (91% of corpus); this one walks deliberately off-axis like a boulevard you've just stepped onto from a side-street.

2. **Light-academia is unprecedented in the registry.** `light-academia` aesthetic registers at **0%** in the corpus — none of the 34 designs claim it. Dark-academia adjacencies exist (`mysterious-moody`, `victorian-ornate`, `book-scholarly` motif), but nothing in the *sunlit-afternoon-reading-room* register. This site stakes that ground definitively, and crosses it with the 2%-tone `futuristic-cutting-edge` (also nearly unique) for a tension other designs do not attempt: **scholarly-warm × clairvoyant-future**.

3. **Watercolour-as-exclusive-imagery for an urban subject.** `watercolor` imagery registers at only **2%** in the corpus, and `city-urban` motif at **2%**. Their *intersection is empty* — no other design paints urban archetypes in watercolour. This is the design's signature visual claim: six hand-painted-feel SVG plates of city-archetypes (Flâneur, Pilgrim, Architect, Stranger, Chorus, Ghost) in oxblood-on-cream, with `<feTurbulence>` + `<feDisplacementMap>` filter chains for genuine pigment-pooling edges.

4. **Live-repainting plates via View Transitions API.** No other design in the corpus advertises a "the codex is being painted while you read" mechanic. Once every 47 seconds, one random plate re-tints by ±6° hue with a 1.4s spring crossfade, signalled by a single small `· repainting` token in cool-grey JetBrains Mono. This is the **futuristic-cutting-edge** signal, smuggled in at 3% of palette weight.

5. **Marginalia as a first-class layout column, not a footnote afterthought.** Most editorial designs treat marginalia as small italic asides; archetype.moe makes marginalia a **persistent right-rail column at 64% viewport-x** with its own typography (Cormorant italic 300), its own colour, its own drift-on-scroll spring animation, and its own predictive cursor-lean. This is the **Warburg/Tschichold double-column scholarly book** translated to scroll, which the corpus's `editorial` (52%) and `magazine-spread` (2%) never realise.

6. **Restrained spring grammar — no parallax of the column itself.** While `parallax` (88%) and `scroll-triggered` (61%) saturate the corpus, archetype.moe deliberately reserves parallax *only* for atmospheric margin-motifs (watercolour blooms, window-light parallelograms) and forbids it on the column. The column is always still; the *world around the column* drifts. This inverts the corpus's default and creates a reading experience where the type itself is anchored and serene while the cream paper hums.

7. **The 97%-warm / 3%-cool palette discipline.** Burgundy-cream registers at 5% in the corpus, but no other site uses it with a strict 3%-cool-grey accent reserved exclusively for "live system" signals (`#A8B5C4`). This single discipline makes every cool-grey appearance instantly readable as *the codex thinking*.

8. **No CTAs, no nav, no footer beyond a colophon.** Where corpus designs typically include navigation chrome, this site has only a single page-corner ribbon (`i / vi`) and a single inkwell-drop full-stop at the end. The reader's path is the scroll, period.

**Chosen seed (per assignment):**
- aesthetic: **light-academia** (0% in corpus — first claim)
- layout: **ma-negative-space** (2% in corpus — under-used, prefer)
- typography: **garamond-classic** (17% in corpus — established, used distinctively with Cormorant + JetBrains Mono triad)
- palette: **burgundy-cream** (5% in corpus — under-used, prefer)
- patterns: **spring** (41% in corpus — common, but used here with an unusually restrained 140/24 stiffness/damping)
- imagery: **watercolor** (14% in corpus — preferred, executed with SVG `<feTurbulence>` for genuine pigment edges)
- motifs: **city-urban** (2% in corpus — under-used, prefer; intersected with watercolour for first time)
- tone: **futuristic-cutting-edge** (2% in corpus — under-used, prefer; held to 3% palette weight as a signal not a shout)

**Patterns explicitly avoided** (from frequency analysis, to maintain corpus diversity):
- `hand-drawn` aesthetic (82%, saturated) — replaced with watercolour
- `photography` imagery (91%, saturated) — replaced with hand-painted SVG plates
- `centered` layout (91%, saturated) — replaced with off-axis 41.8% spine
- `vintage` motif (85%, saturated) — replaced with city-urban watercolour
- `warm` palette (97%, near-universal) — *retained but disciplined* with strict 3% cool-grey accent
- `mono` typography (94%, saturated) — *retained but minimised* to JetBrains Mono in only the four UI roles (folio, dates, system signals, Roman numerals)
- `card-flip` pattern (a6c.quest already owns it in the corpus) — explicitly forbidden here
- `parallax-section` of the main column (88% of corpus does this) — column held still; only margins drift

The result is a site that **reads like a Folio Society plate, hums like a quantum library, and walks like a boulevard.**
<!-- DESIGN STAMP
  timestamp: 2026-05-05T07:09:20
  seed: seed
  aesthetic: archetype.moe is a **luminous urban codex** — a digital reading-room where the g...
  content_hash: 661884493b29
-->