# Design Language for archetype.boo ## Aesthetics and Tone archetype.boo is the **field-tutorial of a goblin lapidary** — a half-lit study where a clever goblin scholar drags polished, half-broken objects out of a velvet sack and *teaches you the archetypes they belong to*. The aesthetic is **goblincore filtered through Baskerville-grade typography and a step-numbered tech-tutorial voice**: shiny pebbles, crow-trade buttons, broken keyboard shells, dirt-on-the-fingertips foraging — but every artifact is presented with the calm authority of an early-modern letterpress manual, with the precise pedagogical pacing of a software README. The mood is **damp candle-warmth at 4pm in October**: low ambient light, shellac sheen on collected objects, a faint draft, the scratch of nib against burgundy ledger paper. Nothing is cute. Nothing is twee. The goblin is an *expert practitioner* — the site reads like a lecture from a creature who has been sorting archetypes for three centuries and has stopped trying to impress anyone. Tone-blend target: visually it sits at the goblincore extreme (cluttered, foraged, mineral, organic-clutter), but the *voice* is tech-tutorial — labeled "STEP 01 / STEP 02 / …", footnoted, version-stamped, with `archetype-cli v0.7.3-goblin` printed in the bottom-left corner. A reader should feel they are *inside the tutorial*, not browsing a portfolio. Every section is a lesson. Every artifact is a teaching specimen pulled from the velvet sack. ## Layout Motifs and Structure The site is a **bento-box of nine non-uniform compartments**, locked into a single full-viewport tableau on desktop and re-flowing into a vertical bento-stack on narrow screens. The bento metaphor is **a wooden specimen-tray lined with burgundy velvet**, the kind a Victorian rock-collector would unfold on a study desk; each compartment holds one teaching artifact. Compartment sizes are intentionally irregular — 2x3, 1x1, 3x2, 1x2, 2x2, 1x1, 2x1, 1x3, 3x1 — fitted via an explicit `grid-template-areas` mosaic (no auto-pack), so the asymmetry feels *deliberately curated*, never algorithmic. A 2px **inner velvet-stitch line** (faux-stitched border in burgundy thread) separates compartments, and each compartment has a small **brass corner-tab in the upper-left** carrying its step number in Baskerville italic small-caps (`STEP 01`, `STEP 02`, …). The reading order is **Z-snaked across the bento** (top-left → top-right → middle-row reverse → bottom-row), and a thin **stagger-revealed crystalline polyline** is drawn in real time across the velvet to show the reader the order — appearing as a faint silver thread that connects the compartments in tutorial sequence. The bento sits inside a **parchment-paper outer frame** with hand-deckled edges, dog-eared upper corners, a coffee-ring stain in the lower-right margin, and a wax-seal medallion in the lower-left displaying a tiny goblin profile in burgundy. There is **no top nav, no hamburger, no footer-grid** — only the bento, the parchment frame, and a slim **page-edge tutorial-progress bar** running vertically along the right gutter (a velvet ribbon being stitched as you scroll, gaining one stitch per compartment-completion). ## Typography and Palette **Type system (Google Fonts only):** - **`Libre Baskerville`** (regular 400, italic 400, bold 700) — the entire body voice, all step-numbers, all teaching paragraphs, all artifact captions. Set at 18px on desktop with a generous `1.6` leading, `-0.003em` tracking. This is the tutorial's *speaking font* — Baskerville's high-contrast verticals and razor-sharp italic give the goblin's voice an unexpected scholarly authority that *contradicts* the goblincore visuals in a productive way. Body uses regular 400; "STEP 0X" tabs use italic small-caps at 13px tracked +0.12em; pull-quotes use bold 700 at 28px. - **`IM Fell English SC`** (small-caps display) — used only for the four hero compartment titles ("THE COLLECTOR", "THE TINKER", "THE WARDEN", "THE TRADER"), set at 56px / 64px with `1.0` leading. IM Fell carries the early-modern letterpress imperfection (irregular baselines, mottled inking) that grounds the Baskerville-refined seed in foraged-archive territory rather than glossy typography-magazine territory. - **`JetBrains Mono`** (regular 400, bold 700) — restricted to three locations: (1) the version-stamp in the bottom-left corner (`archetype-cli v0.7.3-goblin`), (2) the inline `` snippets where the tutorial demonstrates an archetype's "API", and (3) the keyboard-shortcut hints (e.g. `[N]` to advance, `[B]` to back up, `[?]` for footnotes). 14px, tracked +0.02em. **Palette (burgundy-cream, layered):** - `#3A0E18` — *deep oxblood velvet* — the bento velvet lining, all primary type color on cream, the wax seal. - `#5C1A26` — *cabinet-burgundy* — secondary type, brass-tab outline shadows, the velvet-stitch line. - `#8A2638` — *garnet accent* — link underlines (drawn-in on hover), the wax-seal highlight, the stagger polyline at 60% opacity. - `#F4ECD8` — *aged-cream parchment* — the outer page frame, the cream of every compartment background. - `#EADFC4` — *deeper cream* — the parchment shadow tone, dog-ear undersides. - `#C9A961` — *brushed brass* — corner-tabs, hinge-pins, the goblin's monocle, every brass fitting on every artifact. - `#7A5C3E` — *scuffed walnut* — the wooden tray frame around the bento, the candle-base, the sack-leather. - `#2A0810` — *near-black plum* — used only for deepest shadows and the candle-flame's base. - `#FCF6E8` — *highlight cream* — the catchlight on every crystalline / vector artifact. ## Imagery and Motifs The imagery is **vector-art only** — no photography, no 3D render, no AI-generated raster. Every artifact in every compartment is hand-drafted SVG, with **crystalline geometry** as the unifying motif: each artifact is built from polygonal facets (5-, 7-, or 11-sided, never 6 — the goblin distrusts hexagons), with a single warm catchlight stroke and a long anisotropic shadow fanning to the lower-right at 22°. **The nine bento compartments (in tutorial order):** `STEP 01 — THE PREMISE` (3x2, top-left). A **velvet sack** drawn open-mouthed, 9 mineral facets spilling onto the cream. Caption (Baskerville italic): *"An archetype is not a category. It is the shape an object remembers."* This is the only compartment with body prose; the rest are demonstrative. `STEP 02 — THE COLLECTOR` (1x2, top-center-left). A vertical glyph: a **goblin claw clutching a crystalline key** carved from amethyst-faceted polygons. The key has 7 teeth, each a different burgundy tone. Below the glyph, four bullet-archetype-traits in JetBrains Mono. `STEP 03 — THE TINKER` (2x2, top-center-right). An **exploded-axonometric watch movement**, 14 brass gears suspended in mid-air, each rendered as a flat vector polygon ring with crystalline tooth-faces. Thin garnet vector lines connect each gear to a Baskerville footnote-marker (¹ ² ³ …) along the compartment's right edge. Hovering a gear lifts it 4px and ink-draws its footnote. `STEP 04 — THE WARDEN` (1x1, top-right). A single **iron lantern** with a crystalline-faceted glass bowl and a candle inside whose flame is a 5-sided burgundy polygon. The flame *flickers* — a 1.4s loop that subtly reshapes the polygon's top vertex. This is the only animated artifact in the top row. `STEP 05 — THE LEDGER` (3x1, middle-row spanning). A **sideways-scrolling burgundy ledger page** with crystalline-stamped entries; each entry is a one-line archetype-rule rendered in Baskerville with a hand-drawn vector pen-nib at the start. The page is presented as a horizontal flat-vector strip with realistic paper-grain (seeded SVG noise filter). `STEP 06 — THE TRADER` (1x1, middle-right). **A pile of seven crow-traded objects**: bottle-cap, broken keycap "Z", brass thimble, crystalline shard, knotted thread, half-acorn, paper boat. Each is a 64px crystalline vector miniature, arranged in a goblin-curated pile (taller things back, shinier things front). `STEP 07 — THE FORAGER` (2x1, bottom-left). A **horizontal field-strip** showing four flora specimens — moss-clump, fern-frond, mushroom-cap, lichen-blot — drawn as crystalline-faceted vector botanicals (no curves on the outer silhouette; only inner soft-lines). Each is labeled in IM Fell small caps. `STEP 08 — THE BARTERER` (1x3, bottom-center). A vertical **stack of five trade-tokens**, each a 90px crystalline polygon-coin with a unique goblin glyph etched in burgundy and a brass rim. Tokens slowly rotate (each on its own out-of-phase 18s axis) — the only sustained motion in the bento. `STEP 09 — THE ARCHIVIST` (3x1, bottom-right spanning). The **closing tableau**: the velvet sack from STEP 01 is now closed and tied with garnet cord, beside a stack of three crystalline cards labeled "FILED / FILED / FILED" in JetBrains Mono. The version-stamp `archetype-cli v0.7.3-goblin` sits to the right of the cards, with a tiny burgundy cursor blinking after it. **Recurring micro-motifs:** every compartment is dusted with **3–5 specks of burgundy "goblin-grit"** (tiny irregular polygon crumbs); every brass element has a **single scratched highlight**; every shadow is **22° fan-anisotropic**; every crystalline facet has **one inner highlight stroke at #FCF6E8**. ## Prompts for Implementation Build archetype.boo as a **single HTML page, one CSS file, one ES module**, no framework, no build step. The whole site is a 9-step tutorial framed as a goblin's field demonstration of archetypes; the user reads top-left → bottom-right in Z-snake order. **There is NO call-to-action, NO pricing block, NO stat-grid, NO testimonial section, NO contact form, NO email capture, NO logo wall, NO newsletter, NO cookie banner, NO chatbot, NO FAQ accordion, NO feature comparison table.** The page is *the tutorial*. The end of the tutorial is the end of the site. **Storytelling structure (one bento, nine compartments, stagger entrance):** The page loads with the **wooden tray and parchment frame already in place**, but the bento compartments are *empty velvet*. Over a 2.4-second stagger, each compartment's artifact materializes in tutorial order — `STEP 01` first, `STEP 09` last — each artifact entering with a **120ms spring** (dampening 0.62, mass 1.0) where the SVG group scales from 0.92 with a 4px upward translation, while the brass corner-tab ink-draws its `STEP 0X` label with a 280ms stroke-dashoffset animation. The stagger interval is 220ms between compartments, so the eye is *taught the reading order* during page load. After the final compartment lands, the **stagger polyline** silver thread draws across the velvet at 1200ms total, revealing the Z-snake reading path. The thread becomes the **scroll-progress indicator** on narrow viewports and the **keyboard-navigation pointer** on desktop. **Interaction language:** - `[N]` advances the active compartment (a faint garnet ring appears around the active one, polyline brightens to that compartment). - `[B]` reverses. - `[?]` summons all footnote markers across the bento at once, ink-drawing tiny garnet asterisks in each compartment's lower-right. - `[ESC]` collapses all footnotes and dims back to the tutorial state. - Mouse hover on any compartment lifts it 6px with a 180ms spring, deepens its velvet-stitch border to `#5C1A26`, and reveals a 120ms-fade caption-overlay at the bottom of the compartment in Baskerville italic. - Scroll on desktop is **disabled** — the bento is a single tableau. On narrow screens scroll is enabled and the bento becomes a vertical column with the stitched-ribbon progress-bar tracking down the right gutter. **Animation primitives:** - Stagger entrance (specified above) — 9 artifacts, 220ms interval, 120ms spring each. - Lantern-flame flicker (STEP 04) — 1.4s loop, polygon top-vertex jitter ±2px on x and ±3px on y, easing `cubic-bezier(.4,.1,.6,.9)`. - Trade-token slow rotation (STEP 08) — 5 tokens, each 18s linear loop, phase-offset 3.6s. - Hover-lift on every compartment — 180ms `cubic-bezier(.2,.8,.2,1)`. - Polyline draw on load — 1200ms `ease-in-out` after stagger completes. - Cursor blink after version-stamp (STEP 09) — 1.06s square-wave, opacity 0 ↔ 1. - Footnote ink-draw on `[?]` — 280ms stroke-dashoffset, staggered 40ms across compartments. **Texture and grain:** Every cream surface uses an inline SVG `` with `feTurbulence` (baseFrequency 0.84, numOctaves 2) blended at 6% opacity to simulate parchment fiber. Every brass element has a single scratched highlight drawn as a 1px `#FCF6E8` polyline. Every burgundy shadow uses a 22° anisotropic Gaussian via `feGaussianBlur stdDeviation="2.4 0.6"` followed by a `feOffset dx="3" dy="2"`. The **goblin-grit specks** are generated client-side by the ES module: 4 specks per compartment, each a 2–4px irregular polygon at random positions, deterministic-seeded by compartment-index so reloads produce the same arrangement. **Voice and copy bias:** Every compartment caption opens with an imperative tutorial verb — *"Notice the…"* / *"Observe how…"* / *"Pull this one closer…"* / *"Catalog this object as…"* — followed by a Baskerville-italicized definition fragment. The goblin never uses first-person plural; only first-person singular ("I keep these in the third drawer…") and second-person imperative. Code-snippets in JetBrains Mono are styled as if they were `archetype-cli` commands: `archetype trace --pattern collector --depth 7`. **Bias toward immersion:** Treat the bento as a *theatrical set*, not a UI. The page is a **single tableau the user inhabits for 90 seconds**, learning archetypes from a goblin who has nothing to sell. There is no exit, no signup, no "next page" — when the tutorial ends, the velvet sack closes, the cursor blinks, and the page rests. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Goblincore as a clinical pedagogical voice, not a chaos-aesthetic.** Goblincore appears in only 2% of designs in the corpus, and where it exists it leans into mess, hoarding, and chaotic clutter. archetype.boo *inverts* this: the goblin is a disciplined lapidary running a structured 9-step tutorial. The goblincore visual vocabulary (foraged objects, mineral hoarding, candle-warmth, velvet sacks) is delivered through a tech-tutorial information architecture (numbered steps, version-stamped footer, keyboard navigation, code snippets). This is a goblincore-meets-tech-tutorial fusion that does not exist elsewhere in the corpus. 2. **Bento-box used as a velvet specimen-tray, not a SaaS dashboard or feature-grid.** Bento-box layout appears in 8% of designs, and almost universally as a feature-marketing layout (rounded cards, soft shadows, modern SaaS gloss). archetype.boo treats the bento as a **Victorian wooden specimen-tray with burgundy velvet lining and brass corner-tabs**, with intentionally irregular grid-template-areas mosaic and faux-stitched dividers. The bento is repurposed from product-marketing-grid to museum-display-case. 3. **Baskerville-refined typography (4% of corpus) paired with goblincore (2% of corpus) — a combination that should clash but doesn't.** The high-contrast scholarly precision of Libre Baskerville italic creates dissonance against the foraged-mineral imagery, and that dissonance is the design's central voice: the goblin is *more literate than you expected*. This pairing is the design's signature tension. 4. **Crystalline motif (8% of corpus) deployed as the unifying geometry across every artifact.** Every SVG in the bento is built from 5/7/11-sided polygonal facets (avoiding the conventional hexagon), giving the whole site a faceted-mineral coherence that reads as goblin-foraged precious-stone aesthetic rather than the more common crystalline-as-tech-grid usage. 5. **Stagger animation pattern (65% of corpus, but used differently here)** — instead of staggering UI cards on scroll-into-view (the conventional usage), the stagger is a **one-shot tutorial-reveal** that *teaches* the reading order during page load by animating the artifacts in their pedagogical sequence and then drawing the silver Z-snake polyline that connects them. The stagger becomes the navigation-onboarding. 6. **Vector-art-only imagery (7% of corpus, underused), no photography (97% of corpus uses photography).** archetype.boo deliberately abstains from the dominant photographic imagery convention. Every artifact is hand-drafted SVG with crystalline facet construction, giving the site a singular illustrative consistency that the photography-heavy corpus cannot match. 7. **Burgundy-cream palette (4% of corpus) deployed without floral/Victorian-romantic associations.** The conventional burgundy-cream usage is ornate-luxury or pastoral-romantic; here it serves a **goblin-scholar lapidary** mood, anchoring the foraged-mineral artifacts in a warm, candle-lit study without any floral or wedding-stationery overtones. 8. **Tech-tutorial tone (a vocabulary tone-class) cast as a fictional CLI inside a fictional folkloric setting.** The bottom-left version-stamp `archetype-cli v0.7.3-goblin`, the inline JetBrains Mono `archetype trace --pattern …` snippets, and the keyboard hints (`[N]`, `[B]`, `[?]`) collide a software-documentation register against a goblincore-visual setting, producing an "imaginary-software-manual-from-a-folkloric-civilization" register that is unique in this corpus. 9. **No CTA, no pricing, no stats, no signup — the entire page is a finite 90-second tutorial that ends with the sack closing.** Most domains in the corpus include at least one of: pricing block, contact form, stats grid, testimonial. archetype.boo deletes all of these and frames the page as a *finite teaching artifact*, not a marketing surface. **Avoided patterns from frequency analysis:** - **AVOIDED**: hand-drawn aesthetic (94%), glassmorphism (68%), photography (97%), full-bleed (87%), card-grid (65%), centered (81%), gradient palette (94%), warm palette (92%), parallax (92%), spring (67% — used only for one micro-interaction here, not as a primary motion identity), cursor-follow (62%), magnetic (50%), mono typography (95% — JetBrains Mono used only as a tutorial register accent, not as a primary typeface). - **PREFERRED (underused, leaned into)**: goblincore (2%), baskerville-refined (4%), bento-box (8%), crystalline (8%), vector-art (7%), burgundy-cream (4%), stagger (used in a non-conventional one-shot pedagogical role), tech-tutorial (a tone-class deployed against a folkloric visual setting). **Chosen seed:** *aesthetic: goblincore, layout: bento-box, typography: baskerville-refined, palette: burgundy-cream, patterns: stagger, imagery: vector-art, motifs: crystalline, tone: tech-tutorial*