# Design Language for archetype.boo ## Aesthetics and Tone `archetype.boo` is a **field naturalist's CRT-era specimen ledger for the twelve Jungian archetypes** — imagine a 1996 cryptobotany lab built inside a poured-concrete bunker on the Norwegian coast, where each archetype (the Sage, the Lover, the Trickster, the Caregiver, the Magician, the Outlaw, the Hero, the Innocent, the Explorer, the Ruler, the Creator, the Everyman) is mounted not as a portrait but as a **living specimen card** — a thick-bordered, hard-shadowed paper plate that has been clipped into a wall of pegboard. Inside each plate's window, a slow aurora breathes against the dark — green to violet to teal to peach — as if the archetype were a captured Northern Light pinned behind plate glass with a brass label. The mood is **neubrutalist taxidermy of the soul**: chunky 4-pixel black borders, 8-pixel offset hard shadows, no rounding, no skeumorphism, no glow — *outside* the cards. Inside the cards, however, **soft aurora gradients drift** with seven-second loops, fern fronds tremble, and a green CRT scanline rolls over the whole specimen at 1.2 Hz. The ledger is **nostalgic-retro** in the way a working scientist's binder is nostalgic — yellowed Tyvek tags, a Casio digital watch ticking in the corner of the HUD, a faded `PROPERTY OF / DEPT. OF DEPTH PSYCHOLOGY / 1996–PRESENT` stamp on every plate. There are no marketing words anywhere on the page. There is no "buy now," no pricing, no testimonials. The page reads like a **scientific catalog crossed with a Game-Boy bestiary**, written by someone who took their feelings seriously enough to label them. The voice in the body copy is **the field-notebook of a careful, slightly haunted observer** — past tense, dated entries, sketched margin glyphs, the occasional `[crossed-out word]` and `[corrected]` redaction visible in the source. Tone of an entomologist who has fallen in love with their subject and is trying very hard not to anthropomorphize, and failing well. ## Layout Motifs and Structure The page is **a single full-bleed pegboard wall, scrolled vertically**, on which **twelve archetype specimen cards** are pinned in a **true masonry layout** — *not* a tidy CSS Grid. The cards are of *deliberately uneven height* (ranging from 280px to 720px) and arranged into **three columns on desktop, two on tablet, one on mobile**, packed via CSS `column-count` plus `break-inside: avoid`, so the column-pack walks naturally and leaves the small organic gaps that masonry produces — the kind of irregular settled stack that a real specimen wall has when the curator pinned cards as they came in, not by a template. Each card is a **self-contained brutalist plate** with these strictly identical chrome elements (the *outside* is uniform; the *inside* is wildly variable): - A **4px solid `#0B0E11` border**, no radius. - A **hard offset shadow**: `12px 12px 0 #0B0E11` on rest, easing to `4px 4px 0 #0B0E11` on hover (the **hover-lift** pattern: the card translates `-6px, -6px` and the shadow shrinks, as if a finger lifted the pin). - A **brass-plate label strip** along the top: a 28px-tall band in `#F4EFE2` with the archetype's roman numeral (`I` through `XII`) in Commissioner 800 left-aligned and a six-character hex code on the right (`#A7-LVR`, `#A11-EVR`, etc.) in Commissioner 400 small-caps tracked at 0.18em. - A **specimen window** (the body of the card): an inset dark rectangle holding the aurora and the imagery. - A **paper footer**: an off-white `#F4EFE2` band at the bottom holding three tagged metadata pills (`shadow:`, `gift:`, `wound:`) in Commissioner Mono-feeling 500. - A **single sci-fi-HUD overlay** corner in the upper-right of the specimen window: a 56×56 px SVG cross-hair with a tiny live readout — `LAT 60.39°N / LON 5.32°E / LUX 0.04` — typed in Commissioner 11px tracked at `0.06em`. The lat/lon shifts subtly per card to suggest the field site of the archetype's "capture." Above the wall sits a **header band** (full-bleed, 96px tall) that doubles as the page's instrument console: on the left, the wordmark `archetype.boo` set in Commissioner 900 at 56px with the `.boo` rendered as a pinned brass tag using a 2px black border and a 4px offset shadow (a tiny replica of the cards beneath); on the right, a HUD bar with four live readouts (`SPECIMENS: 12`, `WALL TEMP: 17.4°C`, `AURORA Kp: 4.7`, `LOCAL: 03:14:22`) all monospaced and ticking. The clock is real `Date.now()`. The Kp index "drifts" by a sine curve. Below the wall, in a single full-width strip at the bottom, sits a **field journal entry** — a 720-px-wide handwritten-feeling block of body copy (Commissioner Italic 400 at 19px) on a cream background, dated `Bergen / 14·xi·1996`, signed `— K.M., curator`. This is the only narrative paragraph on the page. It frames the entire specimen wall as the curator's ongoing twenty-nine-year project. There are **no tabs, no carousels, no modals**. There is no navigation bar — the wall *is* the navigation. Clicking a specimen card flips it (a 600ms 3D `transform: rotateY(180deg)`) to reveal its *back* — the curator's typed notes about that archetype, set in Commissioner 16px on a graph-paper background with a single field-sketched fern frond drawn in the upper corner. ## Typography and Palette **Typography — single Google-Fonts family, used architecturally:** - **Wordmark, headings, brass-plate labels, archetype names — [Commissioner](https://fonts.google.com/specimen/Commissioner)** (variable, axes `wght 100→900`, `FLAR -50→100`, `VOLM -100→100`). Commissioner is the load-bearing voice of the entire site. It is used for: - The wordmark at `clamp(40px, 5.6vw, 64px)`, `wght 900`, `FLAR 60`, tracking `-0.02em`. - The archetype names (`THE SAGE`, `THE LOVER`, `THE TRICKSTER`...) at 32px, `wght 800`, all-caps, tracking `-0.01em`, set into the specimen-window header. - The brass-plate roman numerals at 24px, `wght 800`, `FLAR -20` (slightly narrowed), tracking `0.04em`. - Body field-journal paragraph at 19px italic 400, `FLAR 40` (slightly humanized), line-height 1.65, paragraph indents on `text-indent: 1.5em`. - The HUD readouts at 11–13px, `wght 500`, tracking `0.08em`, all-caps. Numerals lined and tabular: `font-variant-numeric: tabular-nums lining-nums`. - The metadata pills at 12px, `wght 600`, tracking `0.04em`, all-caps. Commissioner is chosen because it is **versatile to the bone** — three variable axes that let one family act as monospace-feeling HUD, hard display, humanist body, and small-caps brass plate without ever bringing in a second face. This consistency is what makes the chunkiness of the brutalist chrome read as a *unified specimen system* rather than a collage. - **Margin glyphs and the field-sketched ferns — hand-drawn SVGs**, not a font. No second typeface anywhere. **Palette — aurora gradient inside, brutalist black-and-paper outside:** The outer chrome (borders, shadows, headers, page background) is monochrome. The inner specimen windows hold the aurora gradient, which is the *only* color in the design. Outer chrome: - `#0B0E11` — borderline-black, used for all 4px borders, hard shadows, and primary text on cream. (Not pure black: there is a faint blue-green undertone, fitting a CRT.) - `#F4EFE2` — aged Tyvek cream, used for brass plates, footer strips, the field-journal block, and the page background. - `#1E2429` — deep slate, used for the inner specimen-window base before the aurora is layered on top. Aurora gradient (used inside specimen windows; this is the **aurora-gradient palette** literally): - `#3CE0A1` — phosphor green (the dominant top band of the aurora; also the CRT scanline color at 6% opacity). - `#7B6BE6` — northern violet (the breathing middle band). - `#4FB8D8` — glacial teal (the lower band that suggests fjord water). - `#F2A37C` — aurora peach (the rare warm flare; appears in 3 of the 12 cards as a "solar storm" variant). - `#FFE9A8` — pale yellow (used only for the brass-plate gilt edge, 1px highlight along the top of each plate). Each specimen window's aurora is rendered as a **conic-and-radial gradient stack** that *breathes* — a 7-second `@keyframes aurora` that shifts the conic gradient's angle by 18° and the radial center by 3% of the window's width, slow enough that you only notice on the second viewing. Three of the twelve cards ride a 13-second variant tinted toward peach (the Outlaw, the Magician, the Trickster — the "solar-storm" archetypes). ## Imagery and Motifs **No photography. No stock imagery. No avatars.** The frequency analysis shows photography at 91%; this design opts out completely. The imagery is built from four families of original generated form: 1. **Aurora fields (procedural CSS + SVG).** Each specimen window contains a multi-layer aurora composed of: (a) the slate base `#1E2429`; (b) a slow conic gradient cycling through the four aurora colors at 35% opacity; (c) a radial highlight in phosphor green at 22% opacity, drifting; (d) an SVG `` turbulence layer at `baseFrequency="0.012"` to give the aurora a soft cloudy structure; (e) a 1px-tall horizontal scanline that translates from `top: 0` to `top: 100%` over 1.2s, repeating, in `#3CE0A1` at 6% alpha. Twelve of these aurora fields run on the page simultaneously and they are deliberately *out of phase* — the wall flickers in a quiet, irregular way, the way a real aurora-watching night flickers. 2. **Nature-elements (SVG ferns, lichen rosettes, antlers, mosses, mushroom caps, pinecones, kelp).** Each archetype gets *one* botanical or zoological emblem, hand-built as an SVG path, drawn inside the specimen window in a 1.5-px black stroke, no fill, sitting in the foreground of the aurora as if mounted on glass. Examples: the Sage gets a **fern frond** (`Polypodium vulgare`); the Lover gets a **rose hip cluster**; the Magician gets a **fly agaric mushroom** (`Amanita muscaria`); the Caregiver gets a **moss rosette** (`Polytrichum commune`); the Hero gets an **antler shed**; the Innocent gets a **lily-of-the-valley**; the Explorer gets a **pinecone**; the Ruler gets an **oak leaf**; the Creator gets a **honeycomb cell**; the Everyman gets a **plantain leaf** (`Plantago major`); the Outlaw gets a **nettle stem**; the Trickster gets a **kelp blade**. Each emblem is labeled with a tiny Latin name in Commissioner 10px italic at the bottom-right of the window. The emblems sway by `±0.6deg` on a 9-second loop, as if pinned in slight breeze. 3. **Sci-fi-HUD overlays.** Every specimen window carries the corner cross-hair, the lat/lon/lux readout, and a **bracket frame** in the four corners (8px L-shapes in `#3CE0A1` at 70% alpha, the way a 1990s mecha targeting reticle frames a subject). The HUDs are deliberately *quiet* — they do not pulse, they do not chase the cursor, they do not animate beyond the live numeric tick. Their job is to make every specimen feel *captured* — measured, located, observed. The header band's HUD (Kp index, wall temp, etc.) is the only "system" overlay; it ticks once per second. 4. **Pegboard and brass.** The page background behind the cards is a tileable SVG of a **tan corkboard / pegboard** — a 32×32 PNG tile of `#F4EFE2` with very subtle 1px holes on a 16px grid, rendered at 8% alpha so it reads as texture not pattern. The brass plates are flat `#F4EFE2` with a 1px gilt highlight on top (`#FFE9A8`) and a 1px shadow on bottom (`#0B0E11` at 25% alpha) — Tyvek, not metal, but pretending. Decorative motifs: - **Pin-heads.** Each card has a single visible **black pin-head** in its upper-left corner — a 12px solid black circle with a 3px white specular highlight, as if a stainless thumbtack actually held the card to the pegboard. The hover-lift translates the *card* but not the pin. - **Margin glyphs.** Inside the field-journal block at the bottom, three small hand-sketched SVG glyphs appear in the right margin: a **compass rose**, a **fern frond**, and a **half-moon**. These are inert ornament. - **Faded stamp.** Diagonally across the bottom-right corner of every card, a **`SPECIMEN — DEPT. OF DEPTH PSYCHOLOGY`** rubber-stamp impression in `#0B0E11` at 12% alpha, rotated `-7deg`. Faintly visible, like a real archive stamp bleeding through the paper. ## Prompts for Implementation Build `archetype.boo` as **a single full-bleed pegboard wall holding twelve specimen cards in a true masonry pack**. Implement it as one HTML file with a single CSS file, no framework, no JS bundler. Use vanilla JS for: the 1.2-Hz scanline timer (CSS-only is fine), the live HUD clock and Kp drift, the card flip on click, and the per-card aurora phase offsets (each card gets a CSS `--phase` variable set at page load to a randomized 0–6.99s). Bias every implementation decision toward the **specimen-wall metaphor**. Specifically: - **Do not implement** any of the patterns flagged in the assignment as overused: no CTA buttons, no pricing tables, no stat-grid hero ("12 archetypes" appears once, in the HUD, never as a marketing stat), no testimonial blocks, no "above-the-fold call to action," no newsletter modal, no cookie banner UI, no sticky header, no hamburger menu, no carousel, no tabbed sections, no accordion FAQ. - **Do implement**: the masonry pack via `column-count: 3 / 2 / 1` with `break-inside: avoid`; the hover-lift via `transform: translate(-6px, -6px)` plus shadow shrink, transitioned over 180ms ease-out; the card flip via 3D transform on click, with `backface-visibility: hidden` on both faces; the aurora breathing via a 7s `@keyframes` shifting the conic gradient angle and a radial-gradient position; the scanline as a `::after` pseudo-element with a translateY animation. - **The opening read** should be: a viewer arrives, sees the header HUD ticking, scrolls past it, and meets a *wall* of twelve uneven specimens, each glowing softly inside its hard black frame. They scroll, they stop, they hover one card — the card lifts off the wall by 6px. They click — it flips, revealing the curator's typed notes. They click again — it flips back. There is nothing else to do. There is no "next page." The wall is the entire site. - **Card flip backs** should each contain: a 6-line typed paragraph (Commissioner 16px on a graph-paper background) describing the archetype's gift and shadow, dated to a fictional 1996–2025 fieldwork session ("`Bergen, 11·iii·1998`") and signed with the curator's initials (`K.M.`). One redacted phrase per card, rendered as a black bar `[████ ████]`. These redactions are real censor bars — clicking them does *nothing*. They are part of the texture. - **Storytelling**. Treat the page as **the curator's ongoing project** — every label, every metadata pill, every HUD readout should sound like a working scientist's notation, never marketing. The metadata pills (`shadow: pride`, `gift: discernment`, `wound: silence`) are written in lowercase, single-noun shorthand, the way real lab notes shortcut. - **Animation budget**: aurora breathing (12 instances, 7s and 13s loops), scanline (1.2s loop, one global), HUD clock tick (1s, one global), Kp sine drift (60s, one global), botanical sway (9s loop, 12 instances, ±0.6deg), card hover-lift (180ms transition), card flip (600ms transition). Nothing else moves. The page should feel **calm, observed, slightly haunted** — not interactive in a productized sense. - **Order of cards on the wall**: not alphabetical, not numbered. Pinned in the order the curator "captured" them: `Innocent / Sage / Explorer / Lover / Caregiver / Hero / Outlaw / Magician / Ruler / Creator / Trickster / Everyman`. The roman numerals on the brass plates reflect this capture order (`I` through `XII`), not any external taxonomy. - **Scroll behavior**: simple, native, no parallax, no scroll-jacking. The aurora and scanline animate purely on time, not on scroll. The page is a wall, and walls do not animate when you walk past them. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **neubrutalism**, layout = **masonry**, typography = **commissioner-versatile**, palette = **aurora-gradient**, patterns = **hover-lift**, imagery = **nature-elements**, motifs = **sci-fi-hud**, tone = **nostalgic-retro**. **Frequency-analysis context** (from `tools/design/frequency.sh`, 34 designs): - **neubrutalism is at 0%** in the corpus (brutalist sits at 8%; this is the first explicit neubrutalist piece, with the soft-aurora interior contradicting the hard-chunky exterior — a true *neu* reading rather than 1960s anti-design brutalism). - **masonry is at 2%** — among the rarest layouts. Centered (91%) and full-bleed (88%) dominate; this design refuses both, using a true column-pack masonry with deliberately uneven card heights so the wall reads as *settled* rather than *gridded*. - **commissioner-versatile typography is at 2%** — second use; this design exercises three of Commissioner's variable axes (`wght`, `FLAR`, `VOLM`) so the same family does HUD, brass plate, body italic, and display work without a second face. - **aurora-gradient palette is not present** in the existing corpus (gradient at 91% is generic; aurora-gradient is specifically the green-violet-teal-peach northern-lights spectrum and has not been used). This design treats it not as a hero background but as **the only color permitted** — caged inside the specimen windows, framed by chunk-black brutalist chrome. - **sci-fi-hud motif is at 2%** — among the rarest motifs; this design uses it in a deliberately *quiet* register (corner brackets, lat/lon, Kp index) rather than the loud-targeting register that motif typically attracts. - **nature-elements imagery is at 5%** — under-used; this design uses 12 distinct hand-drawn SVG botanical/zoological emblems, each Latin-labeled. - **nostalgic-retro tone is at 2%** — under-used; this design lands the nostalgia specifically in the *1996 field-naturalist's notebook* register, not the generic "y2k" or "vaporwave" register. **Differentiators from the existing 34-design corpus:** 1. **The first neubrutalist *taxidermy of the soul*.** The chunky black-on-cream chrome is brutalist; the inside of every card is a soft, breathing aurora. That contradiction — hard frame, soft interior — is the defining gesture, and it is unique in the registry. 2. **First true masonry layout where the masonry is the metaphor.** Other rare layouts (bento, hex, broken-grid) impose order; this one inherits its order from a working curator's pinning sequence, with deliberately uneven card heights producing the column-pack settle. 3. **First single-family Commissioner typesetting that uses three variable axes.** Most type-led designs in the corpus use Commissioner once and at one weight; this design uses `wght`, `FLAR` (flair), and `VOLM` (volume) to make Commissioner act as four typographic registers (HUD mono, hard display, small-caps brass, humanist body italic). 4. **First explicit aurora-gradient palette in the registry.** Not just a "gradient" — the specific green/violet/teal/peach northern-lights spectrum, breathing on a 7-second loop, framed inside brutalist windows. 5. **First page that treats sci-fi-HUD as forensic instrument rather than dashboard chrome.** The HUDs measure the *specimens* (lat/lon/lux per card) and the *wall* (Kp index, wall temp). They tick quietly. They never chase the cursor. 6. **Twelve hand-drawn botanical/zoological SVG emblems with Latin nomenclature** — `Polypodium vulgare`, `Amanita muscaria`, `Polytrichum commune`, etc. — none of which appear in the rest of the corpus, and which give nature-elements imagery a working-scientist register rather than a decorative one. 7. **Domain-specific reading.** The `.boo` TLD invites whimsy; this design takes the *other* meaning of "boo" — the soft haunted exhalation, the ghost in the cabinet — and treats the twelve archetypes as quiet specimens of the soul, captured but still breathing. The fjord-coast field-naturalist conceit ties domain to design without ever literalizing it. **Avoided patterns (from frequency analysis):** - **No photography** (91% of corpus). All imagery is generated SVG and procedural CSS. - **No centered layout** (91% of corpus). The masonry is genuinely off-axis in the small. - **No vintage motifs** (85% of corpus). The 1996 field-notebook register is *nostalgic* but not *vintage*; it is a specific recent decade rendered with working-scientist precision, not generalized retro pastiche. - **No warm palette** (97% of corpus). Aurora is cool-dominant (green/violet/teal) with a single peach accent, set against a paper cream that reads neutral-warm only by contrast. - **No parallax** (88% of corpus). The page is flat; the wall does not depth-shift on scroll. Animation is purely temporal. - **No mono typography** (94% of corpus). Commissioner does the HUD work via tabular numerals and tracked small-caps; no actual monospace face is used. This is a deliberate refusal of the corpus default. - **No CTA / pricing / stat-grid / testimonials.** The page reads as a curator's wall, not a product.