# Design Language for archetype.moe ## Aesthetics and Tone archetype.moe is **a hand-tooled leather field-journal opened on a kitchen table at 6:47am, while the city outside is just beginning to make its first sounds.** The site is a single, vertical, scroll-paced walking-tour down the *spine* of a leather binder — a cottagecore-keeper's tech tutorial that catalogues twelve urban archetypes (the Baker-at-4am, the Locksmith, the Tram Conductor, the Stoop-Sweeper, the Fishmonger, the Lamplighter-of-Neon, the Night Cartographer, the Rooftop Beekeeper, the Pretzel-Vendor, the Newsstand Auntie, the Funicular Engineer, the Closing Bartender) as if they were pressed flowers — *but instead of flowers, they are little brass-and-soot diagrammatic blueprints of city machines.* The mood is **gentle competence**. The kind of explanation a grandmother who happens to be a retired EE would give while pouring chamomile into a chipped mug: warm, unhurried, technically exact, never condescending. There is butter on the page corner. There is also a perfectly drawn isometric of a tram bogie. Both belong. **Inspirations (composite):** - *Beatrix Potter's notebooks* meet *Edward Tufte's small multiples* meet *the Bradbury Thompson Westvaco Inspirations annuals* meet *a 1962 Polish electrical-substation maintenance manual that someone bound in vegetable-tanned calfskin*. - The "bullet journal" tradition — but bound, not loose-leaf, and made for one specific city that the keeper has been documenting for forty years. - **No anime imagery** despite the .moe TLD. The "moe" here is *moe-by-precision-of-care*, not moe-by-character-design. The site contains zero faces, zero mascots, zero kawaii illustration. The cuteness is in the **hand-thumbed corner of a leather page**, not in big eyes. **Tone register:** technical-tutorial *whispered into pastoral cadence*. Captions read like recipe steps for assembling a city. Every section opens with a small sentence in a slab-italic that reads like a margin annotation: *"On the cooling of a brick oven between 4:12am and 4:38am"*. The voice never breaks register. It does not exclaim. It does not address the visitor as "you" except once, on the very last archetype, and then only in a single italic sub-sentence that arrives like the keeper has finally noticed the visitor is reading over her shoulder. There is **no hero**, **no marketing surface**, **no product**, **no signup**, **no pricing**, **no CTA**, **no testimonial**, **no logo wall**, **no feature grid**, **no team section**, **no FAQ**, **no contact form**. archetype.moe is a *thing to walk down*, not a *thing to be converted by*. ## Layout Motifs and Structure The site is a **single, dominant vertical timeline-spine** — a stitched leather binding that runs down the center of the viewport from `top: 0` to the very last archetype. This is the **timeline-vertical** layout taken seriously: the timeline IS the page, not a widget on the page. **Spatial system:** - **Spine column:** 96px wide, centered on the viewport (`grid-template-columns: 1fr 96px 1fr`). The spine is rendered as a true leather binding: two stitched seams (1.5px each, 11px apart), pearled with **twelve linen-thread stitches per archetype slot**, plus a **gilded date ribbon** marker that animates *border-animate* style as it enters viewport (see Patterns). - **Recto column (right of spine):** wide-format card holding the *primary diagram* of each archetype. Rendered as a leather-textured panel `300px tall, 46% viewport wide`, with an inset drop-shadow that suggests the diagram is *pressed into the leather*, not floating above it. - **Verso column (left of spine):** narrower, 36% viewport, holding the **wall-label** — the slab-italic margin annotation, the technical micro-recipe (numbered 1–6), and the **brass nameplate** with the archetype's name and city-grid coordinate (e.g., `N40°44'12" / W74°00'29" — Stoop 19 / Sweep direction E→W`). **Twelve archetype slots, evenly spaced down the spine.** Each slot occupies exactly `92vh` so the keeper's hand can turn one archetype per viewport-and-a-bit. **No sidebar. No nav. No header.** Navigation is the spine itself: a faint thumb-marker (a small leather tab) appears on the side of the spine at the visitor's current scroll position, drifting downward as they scroll. Hovering over the spine reveals (with a 240ms fade) twelve tiny gold-foil-stamped chapter dots, each a permalink to one archetype. **Anti-patterns explicitly avoided** (because they are everywhere in the corpus): - **No card-grid** (65% in corpus). The archetypes are NEVER laid out 2×6 or 3×4. They are stacked, one per spine-step, in chronological order of the keeper's observation. - **No full-bleed hero** (87% in corpus). The first archetype (Baker-at-4am) opens with margin on all four sides — the leather binder's edge is visible from frame 1. - **No asymmetric or broken-grid theatrics** (58% / 5%). The recto/verso split is rigorously symmetric across all twelve slots. The asymmetry is *internal to each diagram*, not at page level. - **No dashboard, no sidebar nav, no hexagonal honeycomb, no z-pattern, no horizontal-scroll**. The spine is the only navigation logic. - **No parallax** (92% in corpus). The leather field is *fixed* — the only motion is the spine's gilded date ribbon animating its border, the diagram's enter-stagger, and the thumb-marker drifting along the spine. Parallax is explicitly forbidden. **Topography of the page from top to bottom:** 1. **Title clearing (96vh):** centered on the spine, a single line of gold-foil-stamped lettering on undyed leather: *"archetype.moe — a field-journal of urban archetypes"*. Below it, in slab-italic 14px: *"twelve specimens, observed between Lent and St. Martin's Day"*. No nav, no buttons, no scroll-cue. 2. **Twelve archetype slots (12 × 92vh).** 3. **Colophon (62vh):** a single paragraph of slab-italic, the keeper's signature in graphite-pencil texture, and the fictional ISBN `978-0-9-MOE-2026-7`. The spine does not extend through the colophon — it terminates at the bottom of archetype twelve with a small gilded *finis* glyph. The total page is **~13.5 viewport heights** of meaningful, slow scroll. ## Typography and Palette **Type system (rounded-sans foundation, three Google Fonts):** - **Body & captions: Quicksand** — Variable weight 300–700. The flagship rounded-sans for the site. All captions, micro-recipe steps, brass-nameplate fields. Set at `15px / 1.62 line-height`, letter-spacing `0.005em`. The terminal-curl on Quicksand's lowercase letters reads like a baker's icing piped onto a cake. This is the reason rounded-sans was chosen: the keeper's hand is rounded, never sharp. - **Display & wall-labels: Fraunces** — used at `italic, opsz 9–144, soft 100, wonk 1`. Specifically, the *italic-wonky-soft* axis combination is the site's secret weapon. Used only for the slab-italic margin annotations (e.g., *"On the cooling of a brick oven between 4:12am and 4:38am"*). 32px on the title, 18px on each wall-label. Never used for body — Fraunces is for *whispered authority* only. - **Diagram labels & coordinates: JetBrains Mono** — 11px, weight 400, used exclusively for the **city-grid coordinates on each brass nameplate** and the **electrical-blueprint annotations inside diagrams**. This is the site's only departure from rounded-sans, and it is intentional: blueprints get monospace, recipes get rounded. JetBrains Mono is **not** the dominant face — it appears on perhaps 6% of the page's total typeset characters. **Total font budget: ~140 KB** (Quicksand variable 38KB, Fraunces variable 86KB italic+wonk subset, JetBrains Mono 12KB Latin subset only). **Palette — creamy-pastel grounded in vegetable-tanned leather (12 named colors):** - `#F4ECD8` — **Cream of Tartar** (page field, the dominant background; the color of unbleached muslin in north window light) - `#E8DCC0` — **Buttermilk Edge** (the ragged deckle of the page, the warmer creamy-pastel that pools toward the spine) - `#C9A57B` — **Vegetable-Tanned Calf** (the leather of the spine and the recto/verso panels — *not* saddle-brown, lighter, more honey) - `#9B7340` — **Stitched Russet** (the linen-thread stitches and the deeper leather shadow) - `#5C3A1E` — **Bookbinder's Sepia** (body type, the warm dark-brown that replaces black everywhere on the site — there is no `#000000` anywhere) - `#B8860B` — **Old Gilt** (the gold-foil chapter dots, the spine's date ribbon, the *finis* glyph; oxidized, never glittery) - `#E4B7A0` — **Damask Rose** (creamy-pastel accent #1; used on exactly four archetypes' diagram-fill: the Baker, the Stoop-Sweeper, the Pretzel-Vendor, the Newsstand Auntie) - `#A8B89C` — **Lichen Sage** (creamy-pastel accent #2; used on the Locksmith, the Rooftop Beekeeper, the Funicular Engineer, the Closing Bartender) - `#9DB1B8` — **Slate Dovewing** (creamy-pastel accent #3; used on the Tram Conductor, the Fishmonger, the Lamplighter-of-Neon, the Night Cartographer) - `#D4A5A5` — **Dried Tea Rose** (used only for the thumb-marker leather tab; never appears anywhere else) - `#3A4A3A` — **Moss-Ink** (the diagram strokes — 0.6px hairlines on every blueprint, never `#000`) - `#FAF6EC` — **Highlight Tallow** (the highest light, used inside the gilded ribbon's beveled edge and on the title's foil-stamp specular) Contrast: every body-text pairing uses `#5C3A1E` on `#F4ECD8` (ratio ~9.2:1). The palette is **warm-creamy throughout** — there is no cool gray, no white, no black, no pure-saturated chroma. A photograph of this site held next to a photograph of any glassmorphism site would look like a different medium entirely. ## Imagery and Motifs **Imagery is hand-rendered diagrammatic + leather-texture, never photographic, never illustrated-character.** **The leather-texture system:** - The page background is `#F4ECD8` Cream-of-Tartar with a **fine-grain SVG noise overlay** (3% opacity, 220×220px tiled), so it reads as *paper*, not as a flat web color. - The recto/verso diagram panels and the spine itself use a **layered leather-texture composite**: a base of `#C9A57B`, plus a second SVG-noise layer at 8% opacity simulating *pebble-grain*, plus a CSS radial-gradient `at 30% 20%` simulating the *high-light of a slightly burnished hide*, plus a barely-visible `repeating-linear-gradient` at `1px 14px` at 1.4% opacity for the *micro-pore* texture. Total: four stacked layers per leather panel. **All four are pure CSS — no raster image is used for the leather.** - The stitched seams are SVG `path` with `stroke-dasharray: 6 4` and `stroke-linecap: round`, in `#9B7340`, with a soft inner-shadow filter to simulate the *thread sitting in the stitch-hole*. **The twelve diagrams (one per archetype) are all SVG, all inline, all hand-tuned, all in the same engineering-blueprint visual language:** Each diagram is **isometric or top-down technical**, drawn at `0.6px` hairline weight in `#3A4A3A` Moss-Ink, with one accent fill in the archetype's assigned creamy-pastel (Damask Rose / Lichen Sage / Slate Dovewing). Every diagram has: - A small **scale bar** in the lower-left (e.g., `0 ━━━━ 50cm`) - A **north-arrow rosette** in the upper-right (rotated to match each archetype's actual cardinal orientation in the fictional city) - **Numbered call-outs (1)–(6)** keyed to the verso-column's micro-recipe steps - A **dashed motion-trace** in `#9B7340` showing the archetype's typical movement path through their slice of the city **The twelve diagrams are:** 1. **Baker-at-4am:** isometric of a brick oven, with thermal gradient hatching. Damask Rose accent fills the firebox. 2. **Locksmith:** top-down of a Yale pin-tumbler, exploded by 12px between layers. Lichen Sage on the cylinder. 3. **Tram Conductor:** isometric of a tram bogie, wheels at correct gauge. Slate Dovewing on the wheelset. 4. **Stoop-Sweeper:** top-down of a six-step stoop with sweep-arc dashed in. Damask Rose on the broom. 5. **Fishmonger:** isometric of an ice-bed display table with seven fish silhouettes. Slate Dovewing fills the ice. 6. **Lamplighter-of-Neon:** top-down of a neon "OPEN" tube with electrode detail at one end. Slate Dovewing inside the tube. 7. **Night Cartographer:** top-down of a single city block with the cartographer's traced walking-loop. Slate Dovewing on the block infill. 8. **Rooftop Beekeeper:** isometric of a Langstroth hive with the supers exploded vertically. Lichen Sage on the brood frames. 9. **Pretzel-Vendor:** top-down of a pretzel cart wheel-base, with the pretzel-display rack viewed from above. Damask Rose on the salt-shaker. 10. **Newsstand Auntie:** top-down of a corner newsstand kiosk, with the headline-rack arc visible. Damask Rose on the awning. 11. **Funicular Engineer:** side-elevation of a single funicular car on a 22° grade. Lichen Sage on the counterweight. 12. **Closing Bartender:** top-down of a horseshoe bar with twelve stool-circles. Lichen Sage in the well-glasses. **The city-urban motif** is integrated *inside the diagrams*, never as a pictorial skyline. The "city" is the *aggregate of these twelve mechanisms*, not a Manhattan silhouette. There is **no skyline image** anywhere — that would be the wrong cliché. **Decorative micro-motifs scattered between archetypes (sparse, 1–2 per slot):** - A **pressed clover** (3-leaf, never 4) drawn in 0.6px hairline, half-tucked behind the recto panel - A **tiny butter-stain** (a pale `#E4B7A0` radial blob, ~14px, with three radiating crumb-flecks) appears on exactly **one** page corner — archetype 04, the Stoop-Sweeper. Once. The site's only "imperfection." It is intentional and never repeated. - A **graphite arrow-doodle** in the keeper's hand, pointing from the wall-label to a specific call-out number, in archetypes 02, 07, and 11 **No icons. No emoji. No mascots. No characters. No photography. No stock illustration.** ## Prompts for Implementation Build archetype.moe as a **single HTML page, one CSS file, one ES module** — no framework, no build pipeline required, no service worker. The page is a 7-minute slow-scroll through twelve leather-pressed urban archetypes. There is **no CTA, no pricing, no signup, no testimonial, no FAQ, no logo wall, no contact, no nav, no hero, no chatbot, no cookie banner, no email capture, no stat-grid, no feature-grid, no team page**. **Document order (top to bottom):** 1. **Title clearing** — gold-foil-stamped title, slab-italic subtitle. No buttons. No scroll-cue. 2. **Spine-anchor (sticky from `top: 0` to the start of archetype 12)** — the central 96px column with stitched seams and twelve linen-thread stitches. 3. **Twelve archetype slots, in keeper-observed chronological order** (Baker → Closing Bartender, ~24 hours). 4. **Colophon clearing** — single slab-italic paragraph, graphite signature, fictional ISBN. **The border-animate signature pattern (the site's central interaction):** The site's ONE distinctive animation is the **gilded date-ribbon border-animate** at each archetype's nameplate. When an archetype slot enters the viewport (IntersectionObserver, threshold 0.32), the brass nameplate's border draws itself in `#B8860B` Old-Gilt over **1.4 seconds**, starting from the upper-left corner and traversing the rectangle clockwise. Implementation: - Use `stroke-dasharray` + `stroke-dashoffset` on a single SVG `` overlaid on the nameplate. `pathLength` is normalized to 100. The animation is `dashoffset 100 → 0` over 1.4s, `cubic-bezier(0.22, 0.61, 0.36, 1)` (gentle ease-out, not spring — the gilding is *being applied with a roller*, not bouncing into place). - After the border completes, a 320ms fade-in of the nameplate's text (`#5C3A1E` on `#C9A57B`). - The border has a **second pass** at 0.8 opacity that lags 240ms behind the first pass — this gives the gilt a "double-stamped" depth, like a foil-press hit twice for impression. - Border-animate is the site's signature. It happens twelve times. Nothing else on the site uses it. Other sites in the corpus rarely use border-animate (4%); here it is the load-bearing motion verb. **Other animations (sparse, deliberate):** - The **diagram enter-stagger:** each diagram's call-outs `(1)`–`(6)` fade in stagger 80ms apart, *after* the nameplate's border completes. Total reveal: ~480ms. - The **dashed motion-trace** on each diagram draws via `stroke-dashoffset` over 600ms, *after* the call-outs settle. - The **spine thumb-marker** drifts via `transform: translateY(...)` driven by `window.scrollY / document.documentElement.scrollHeight`. No spring, no inertia — it tracks the scroll exactly. Linear. - The **butter-stain on archetype 04** very-slowly pulses (`opacity 0.86 → 0.96` over 8s, infinite, alternate). Subliminal. **Explicitly forbidden interactions** (counter to the corpus's heavy biases): - **No parallax** anywhere. The 92% parallax convention is absent. The leather field is rigid. - **No cursor-follow.** The 62% cursor convention is absent. The cursor remains the system arrow. No magnetic snap, no glow trail, no spotlight, no custom cursor SVG. - **No spring physics.** The 67% spring convention is absent. The site's motions are gentle eased-cubics — that is appropriate for the *gilding-roller* metaphor. Springs would feel like rubber, and this site is leather. - **No card-flip, no tilt-3d, no morph, no ripple.** The site is two-dimensional, like a pressed page. Z-axis is forbidden except for the inset-shadow on diagram panels (which is depth-into-page, not depth-out). - **No typewriter-effect.** Text appears whole, in fade. - **No cursor-snap, no sticky-buttons, no toast notifications, no modal, no overlay.** **CSS engineering:** - Use CSS Grid with `grid-template-columns: 1fr 96px 1fr` for the recto/spine/verso layout. - Each archetype slot is a CSS Subgrid for vertical alignment of nameplate-to-diagram across all twelve slots (so every nameplate sits at exactly `38vh` from slot-top, every diagram top at exactly `46vh`). - Leather panels use the four-layer composite described in *Imagery*. Define as a CSS custom property `--leather-fill: ...` on `:root` and reuse. - Stitched seams are a single inline SVG defined once in `` and ``-referenced twelve times. - Border-animate is JS-driven (not pure CSS keyframes) so the dash-offset animation begins precisely when IntersectionObserver fires, not on a scroll-position guess. - Typography uses one Google Fonts request: `https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Fraunces:ital,opsz,wght,SOFT,WONK@1,9..144,300..700,100,1&family=JetBrains+Mono:wght@400&display=swap` - Honor `prefers-reduced-motion: reduce`: collapse the border-animate to a 240ms instant fade-in of the gilded border (no draw), freeze the butter-stain pulse at 0.92 opacity, and disable the diagram call-out stagger (all six call-outs appear together over 200ms). The dashed motion-trace appears whole. - Favicon: a 32×32 SVG of a single linen-stitch in `#9B7340` on `#F4ECD8` — no raster fallback. **Tutorial register — the tech-tutorial tone, applied to a leather field-journal:** Every archetype's verso-column micro-recipe reads like a numbered tutorial step, but with cottagecore cadence. Example, archetype 01 (Baker-at-4am): > *On the cooling of a brick oven between 4:12am and 4:38am.* > > 1. The firebox holds 218°C at the start of the observation window. > 2. Conductive loss through the soapstone hearth is approximately 14W per linear meter. > 3. The baker introduces the third loaf at 4:19am, recovering the chamber to 211°C in 90 seconds. > 4. By 4:34am the chimney damper is reduced by half a turn, slowing convective draw. > 5. The brick face on the south side of the oven, from prior observation, retains 63°C at 5:00am. > 6. The neighborhood smells of bread by 4:51am, on a still morning. The tone is exact, technically literate, but *gentle and observational, never sales-copy, never user-second-person*. The tutorial is *about the city's mechanism*, not *about teaching the visitor a skill they need*. **Bias toward immersive narrative:** the visitor arrives, walks the spine of the binder for 7 minutes, learns twelve small mechanical truths about how a city works, and leaves. The page does not announce itself. There is no "Welcome to archetype.moe" hero. The only words on screen are wall-labels, recipe-steps, brass-nameplate coordinates, diagram call-outs, and the colophon. ## Uniqueness Notes **Five+ differentiators from the 70-design corpus:** 1. **Leather-texture as the dominant visual surface, built from four stacked CSS layers (no raster image).** Leather-texture appears in only 2% of corpus designs, and where it does appear it is typically a small accent or a raster file. Here it is the *page's primary material*, generated procedurally in CSS, with pebble-grain + burnish + micro-pore + base color in four layers. 2. **A true timeline-vertical layout where the timeline IS the page, not a widget.** Timeline-vertical appears in 1% of the corpus and is usually implemented as a "history sidebar" or "roadmap section." Here, the entire page IS a 13.5-viewport-height vertical leather-bound spine with twelve evenly-spaced archetype slots. There is no other layout structure to compete with the spine — no header, no footer-nav, no sidebar. 3. **City-urban motif rendered as twelve isometric/top-down engineering blueprints — never as a skyline.** City-urban appears in 1% of the corpus, almost always as a Manhattan silhouette or a building cluster. Here, the city is the *aggregate of twelve mechanisms* (oven, lock, tram-bogie, hive, etc.) — an anti-skyline, anti-pictorial city. 4. **Border-animate as the site's load-bearing motion verb, not a side ornament.** Border-animate is at 4% in the corpus. Here it occurs twelve times — once per archetype's brass nameplate — in a gilding-roller cubic-bezier (not a spring), with a 240ms second-pass for foil-press depth. Nothing else on the site uses border-animate; nothing else needs to. 5. **Creamy-pastel palette grounded in vegetable-tanned leather, with 12 named colors and zero pure-black/zero pure-white.** Creamy-pastel is at 2% in the corpus. The palette here is rigorously warm: every dark is `#5C3A1E` Bookbinder's Sepia, every light is `#F4ECD8` Cream-of-Tartar. There is no `#000000`, no `#FFFFFF`, no cool gray, anywhere. 6. **Cottagecore aesthetic + tech-tutorial tone, deliberately wedded.** Cottagecore is at 11% (mostly pastoral-romantic mood, recipe blogs); tech-tutorial as a tone is rarer still and usually pairs with terminal/code aesthetics. The combination — *a grandmother who happens to be a retired EE explaining the brick oven's cooling curve* — is the site's identity. Neither register breaks; both reinforce *gentle competence*. 7. **The .moe TLD is reclaimed from anime-cute toward "moe-by-precision-of-care."** No faces, no mascots, no big-eyes illustration. The cuteness is in the leather-page corner, the linen-thread stitch, the pressed clover — the *physical loved-object* register. This is a deliberate counter-read of .moe. 8. **Rounded-sans (Quicksand) as the dominant face for body, with Fraunces italic-wonky-soft for whispered authority.** Rounded-sans is at 4% in corpus. Quicksand's icing-piped terminals and Fraunces's `wonk + soft` axes together produce a *handmade-but-engineered* feel that no other corpus design pursues. **Chosen seed (from assignment):** `aesthetic: cottagecore, layout: timeline-vertical, typography: rounded-sans, palette: creamy-pastel, patterns: border-animate, imagery: leather-texture, motifs: city-urban, tone: tech-tutorial` **Avoided patterns from frequency analysis:** - **AVOIDED hand-drawn (94%):** every mark on this site is *vector geometry* or *CSS-generated texture*. Diagrams are precise blueprints; the "handmade" feeling comes from leather + linen-thread + foil-stamp metaphors, not from sketchy strokes. - **AVOIDED photography (97%):** zero photographs. All imagery is inline SVG or CSS-composited texture. - **AVOIDED full-bleed (87%):** every archetype slot has visible page-margin; the leather binder's edge is always present. - **AVOIDED card-grid (65%):** twelve archetypes, never gridded — only stacked along the spine. - **AVOIDED parallax (92%):** the leather field is rigidly fixed. Only IntersectionObserver-triggered border-animate, diagram stagger, and motion-trace stroke-draw move on the page. - **AVOIDED cursor-follow (62%) and spring (67%):** the cursor is the system default. Motion is eased-cubic, suited to gilding-roller and ink-wash metaphors. Springs would make this site rubber instead of leather. - **AVOIDED gradient (94%) and warm-gradient hero washes:** the only gradients on the page are the *radial burnish on each leather panel* and the *micro-bevel on the gilded ribbon*. The page background is flat creamy-pastel. - **AVOIDED mono-as-dominant (95%):** JetBrains Mono appears only on diagram coordinates and blueprint annotations — perhaps 6% of total typeset characters. The dominant face is rounded-sans. - **AVOIDED CTA, pricing, signup, FAQ, testimonial, logo-wall, contact, hero, nav, mascot, anime-character.** All are absent. The site is a thing-to-walk-down, not a thing-to-be-converted-by.