# Design Language for archetypos.dev ## Aesthetics and Tone archetypos.dev is the digital reading-room of **The Royal Society for the Cataloguing of Computational Archetypes**, a fictional 1893 occult-engineering chapter that survived into the present by trading its gas mantles for neon plasma. The site presents itself as a **luxurious Victorian-ornate codex lit from within** — every page a bound vellum folio, every section a cabinet drawer of archetypal forms (The Maker, The Trickster, The Witness, The Daemon, The Mirror, The Reaper, The Keeper, The Wanderer), each rendered with the tooled-leather gravity of a Royal Society monograph but glowing with the violet-plasma flush of late-night CRT phosphor. The aesthetic is **Victorian-ornate cathedral catalogue, electrified** — filigree borders that arc with magnetic discharge, brass cartouches whose engravings are subtly traced by cyan neon piping, marbled endpapers that bloom into aurora gradients only in the dark of the gutter. The tone is **luxurious without ostentation** — the slow, candle-lit gravitas of an oxblood smoking-room at the Athenaeum, where the reader leans toward the page because the typography is quiet and the ornamentation is dense. Nothing shouts. The neon is not arcade neon; it is **gaslight-replaced-with-plasma neon** — the same warm intent as a Whitechapel street lamp at 3 AM, only chromatically displaced into magenta and electrum. The mood is **erudite, hushed, and slightly haunted**: a society of pattern-keepers who realised, decades before software existed, that every program contains the ghosts of fixed personae, and who now publish their findings in fascicles bound in violet morocco. Inspirations: William Morris's *Kelmscott Chaucer* lit by an oscilloscope, the Bibliothèque nationale's dark-mode print room, Tarot's Marseilles deck reissued by Bell Labs, the ornamental flourishes of 19th-century patent diagrams cross-bred with the phosphor decay of an early VT100. ## Layout Motifs and Structure The page is committed to a **persistent fixed left sidebar** — the **Cabinet Index** — that occupies 304px of viewport width at desktop and never collapses into a hamburger. The sidebar is the cathedral nave; the main reading column to its right is the chapter-house. The sidebar is **not** a navigation menu in the modern web sense; it is a **standing card-catalogue drawer**, vertically compartmentalised into eight ornate brass-bordered niches, one per archetype. Each niche contains: a 56px tarot-style numeral in Roman capitals (I — VIII), an engraved silhouette of the archetype, the archetype's Latin title, and a softly pulsing neon underbar whose colour matches that archetype's signature plasma hue. The sidebar's vertical edge is a **continuous filigree spine** drawn as a single 980px SVG path — acanthus leaves tendrilled through circuit-board traces — and the **active niche** is haloed by a 16px-radius violet plasma glow that breathes at 0.85Hz like a slow filament. The sidebar's background is `#0E0814` paper-marbled with `#1A0E2A` and `#0B0610` swirls (procedural via `feTurbulence`), and the niches sit on it like brass settings on bog-oak. The right-hand **main column** is **not centred**; it is offset 56px from the sidebar with a generous 96px right margin and unfolds as a single **vertical scroll of eight illuminated folios**, one folio per archetype, each spanning roughly 1.4 viewport heights. Folio architecture, top to bottom: (a) a **drop-cap initial** of the archetype's name set 280px tall in deep electrum, illuminated with a hand-drawn vine border that **floats** 6px ahead of the page on slow parallax; (b) the **Cartouche** — a brass plaque containing the archetype's invocation in 18pt small-caps; (c) the **Plate** — a full-bleed (within the column) Victorian engraving of the archetype rendered as hand-drawn SVG line-work on a marbled endpaper, with neon piping tracing exactly three contour lines; (d) the **Discourse** — three columns of Caslon-flavoured prose (true 3-column at desktop, single-column at mobile), with floating marginalia in ferrous red ink; (e) the **Glyphs** — a horizontal row of six floating sigils, each gently bobbing on a ±8px sine-wave, that the reader can hover to reveal a small etched footnote. There is **no top navigation bar**, **no footer ribbon**, **no breadcrumb trail**, **no logo cluster**. The sole header is a single ornate cul-de-lampe at the very top of the right column reading `Folio Primum — Archetypos` in pressed gilt letterforms. Mobile (< 920px) collapses the sidebar to a fixed bottom-edge **brass keyhole strip** of eight small numeral-discs, each tap-targeted to scroll-anchor the corresponding folio; the sidebar never becomes a hamburger and is never hidden. **Floating elements** are load-bearing throughout: the drop-caps float, the marginalia float, the glyphs float, three small **moth motifs** drift slowly across the marbled background with a 28-second loop and a CSS `@property` registered for their `--phase`. Floating is not decorative — it is the **physical metaphor** that this is a haunted catalogue, with specimens not quite at rest in their cases. ## Typography and Palette **Typefaces (Google Fonts only):** - **UnifrakturCook** (700) — used **only once**, at the masthead `Folio Primum — Archetypos`, as a single stamped wordmark. UnifrakturCook is the textura-blackletter that supplies the 1893-Royal-Society gravitas. Letter-spacing 0.04em, kerned by hand for the title. Never used in body or UI. - **IM Fell English** (regular and italic) — the principal **retro-display** body face for the Discourse columns and folio prose. IM Fell English is a faithful digital revival of the late-17th-century English types cut for Bishop John Fell of Oxford; it carries a cool, slightly broken, lamp-printed irregularity that reads as bibliographic, not Victorian-cute. Body set at 18px / 1.7, optical kerning, `font-feature-settings: "liga" 1, "onum" 1, "kern" 1`. Drop-caps use IM Fell English at 280px with `font-variant-numeric: oldstyle-nums` even though they are letters — the OpenType stylistic-set 01 enables a subtle **swash terminal** on capital initials. - **Cinzel Decorative** (700, 900) — the **retro-display** capital face for archetype titles, cartouches, and the sidebar Roman numerals. Cinzel Decorative carries the chiselled, monumental, Trajan-descended capitals associated with engraved title-plates; weights jump 700 → 900 between subtitle and title. Letter-spacing 0.18em uppercase. - **Cormorant Garamond** (300, italic 300) — the **marginalia** and pull-quote face. Used at 14px in ferrous red, italic, set ragged-right against the column edge. Cormorant's high-contrast hairlines read like a quill-drawn footnote in lamp-light. - **JetBrains Mono** (400) — used **only** for the four code-glyph cartouches that label each archetype's "computational mark" (e.g. `λx. x ⊳ x` for The Mirror), at 13px, in cyan plasma over the marbled endpaper. This is the single retort to `archetypos.dev`'s `.dev` TLD: the codex *is* a developer's grimoire. **Palette (dark-neon, hand-keyed for the Victorian smoking-room/CRT crossover):** | Token | Hex | Role | |---|---|---| | `--vellum-night` | `#0E0814` | Primary background — bog-oak paper | | `--vellum-deep` | `#0B0610` | Sidebar inset, gutter shadow | | `--vellum-marble` | `#1A0E2A` | Marbled swirl mid-tone | | `--electrum` | `#E6CB7A` | Drop-caps, gilt rules, cul-de-lampe | | `--electrum-deep` | `#9C7E2E` | Pressed gilt shadow | | `--plasma-violet` | `#B264FF` | Primary neon — active sidebar, drop-cap halo | | `--plasma-cyan` | `#5CE7FF` | Secondary neon — code-glyph, contour piping | | `--plasma-magenta` | `#FF4FB6` | Accent neon — moth eyes, error-shake glow | | `--ink-quill` | `#E8DDC1` | Body type colour — bone-warm white | | `--ink-margin` | `#C44F3A` | Ferrous red marginalia | | `--brass-bright` | `#C9A24A` | Sidebar niche borders, cartouche edges | | `--brass-tarnish` | `#5A4520` | Filigree shadow, recessed brass | The palette deliberately **suppresses pure black**; everything sits on `--vellum-night` (a violet-tinted near-black) so the neon edges read as **thermal**, not digital. All neon hues are clamped to a maximum saturation of 78% — gas-lamp-replaced-with-plasma is *warm* neon, never arcade neon. ## Imagery and Motifs The site's visual substrate is **hand-drawn SVG throughout** — not raster, not 3D, not photograph, not stock illustration. Eight major **archetype plates**, drawn explicitly for this site, render each archetype as a single-line-weight Victorian-engraving silhouette of approximately 380 vector commands per plate, with a deliberate hand-trembled `stroke-dasharray` jitter (0.4px amplitude) so the lines read as quill-cut, not vector-perfect. Each plate is monochromatic in `--electrum` over `--vellum-night`, with **exactly three contour lines per plate** re-traced in `--plasma-violet` or `--plasma-cyan` at 1.2px stroke and a 6px outer SVG `` blur to bloom the neon — these three traced lines are the **animate signature** of the archetype, drawn on scroll-into-view via `stroke-dashoffset` over 1.6s with an `ease-in-out-cubic` curve. Archetype plates and their iconographic content: 1. **I — Faber (The Maker).** A workbench seen from above: hammer, square, an unfinished astrolabe, a tea-cup ring, a half-rolled blueprint. The three neon contours: the rim of the tea-cup, the arc of the astrolabe, the hammer-head silhouette. 2. **II — Mendax (The Trickster).** A harlequin's mask in profile, three-quarter turned, a single magpie feather caught in its mouth-slit. Neon contours: the cheek-line, the feather quill, the eye-slit. 3. **III — Testis (The Witness).** A single ornate eye, lashes splayed, set inside a six-rayed Tarot-of-Marseilles sun-frame. Neon contours: the iris circle, two opposing rays. 4. **IV — Daemon (The Daemon).** A small horned figure inside a glass demijohn; smoke-coils above. Neon contours: the demijohn neck, two smoke arcs. 5. **V — Speculum (The Mirror).** An octagonal looking-glass on a draped easel, its surface rippled with Newton's rings. Neon contours: the outer octagon, the inner octagon, one Newton's ring. 6. **VI — Falcator (The Reaper).** A scythe leaning against an hour-glass, with a moth alighted on the snath. Neon contours: the scythe's curve, the hourglass waist, the moth's near wing. 7. **VII — Custos (The Keeper).** A ring of seven keys hanging from a brass loop, one key conspicuously bent. Neon contours: the loop, the bent key, one straight key. 8. **VIII — Vagus (The Wanderer).** A silhouetted figure walking away from the viewer along a road that recedes into a horizon-band of marbled aurora. Neon contours: the figure's coat-line, the road-edge, the horizon. **Decorative motifs (recurring, woven across the codex):** - **Filigree spine** — a 980px continuous SVG path of acanthus leaves intergrown with circuit-board traces, drawn once and tiled vertically along the sidebar's right edge. - **Cartouches** — brass plaques behind every archetype title, drawn with a chiselled inner bevel (two-tone `--brass-bright`/`--brass-tarnish`) and a thin `--plasma-cyan` undermost rule. - **Cul-de-lampes** — three different ornamental tail-pieces (an urn-and-laurel, a winged hourglass, a twin-serpent caduceus), inserted at the bottom of folios I, IV, and VII as section breaks. - **Floating moths** — three Saturniidae-family silhouettes drift in the marbled background, each on its own 24–32-second sine path, eye-spots glowing a faint `--plasma-magenta`. They occasionally pause near the active sidebar niche, as if reading along. - **Marginal ink-bleeds** — small `feTurbulence`-generated ink-blotches in `--ink-margin` at three random margin positions per folio, simulating a smudged quill. - **Constellation map** — at the very end of the eighth folio, a faint dot-and-line constellation joins all eight archetype symbols into a single esoteric chart, drawn slowly as the reader scrolls through it. - **Endpaper marbling** — a procedural `feTurbulence` + `feDisplacementMap` marbled texture in the gutters, subtly animated with a 0.02Hz `baseFrequency` shimmer so the paper *almost* moves. There are **no photographs**, **no stock vectors**, **no isometric icons**, **no 3D renders**, **no glassmorphic cards**. ## Prompts for Implementation Build archetypos.dev as a **single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The reading experience is a **6-to-8-minute scroll through eight archetype folios**, paced like a candlelit reading session in a society library after closing hours. There is **no CTA, no pricing block, no statistic grid, no testimonial, no email capture, no FAQ, no logo wall, no contact form, no chatbot, no cookie banner, no newsletter prompt**. There is exactly **one** quiet interactive element: a small brass **bell-pull** at the bottom of the eighth folio labelled *Sonner le glas* ("Toll the knell"), which, when pulled, rings a single 1.8-second hand-recorded brass-bell sample and triggers the constellation map's final connecting line to draw across the page. **Storytelling structure:** 1. The reader arrives. The page fades up from `#000` to `--vellum-night` over 1.4 seconds. The masthead `Folio Primum — Archetypos` resolves first (UnifrakturCook), then the sidebar's eight niches illuminate one-by-one in a 320ms staggered cascade, each niche's neon underbar igniting in its archetype-colour. 2. Folio I (Faber) is in view. Its drop-cap "F" floats up 6px and casts a violet plasma halo. The Plate's three neon contours draw themselves on a `stroke-dashoffset` animation. The body text (IM Fell English) settles into its three columns with a soft `letter-spacing` collapse from 0.04em → 0em over 700ms — as if the type is *cooling* into place. 3. As the reader scrolls, **parallax** is applied at three depths: marbled background 0.2x, drop-caps and cartouches 1.0x, floating glyphs 1.18x. Parallax is engaged via `transform: translate3d` on a `requestAnimationFrame` loop, never via `scroll-snap`. 4. The sidebar's active niche updates as the reader passes each folio's vertical midpoint, with a 220ms violet plasma transition and a 0.85Hz breath cycle that continues while that niche is active. 5. **Hover interactions:** on each archetype plate, hovering a glyph reveals a small etched marginalia footnote that **shake-errors** if the reader clicks anywhere except the glyph itself — a rare 2%-frequency `shake-error` pattern used here as **diegetic punishment** for the wrong incantation. The shake is small (±3px, 0.18s, three oscillations), with a faint `--plasma-magenta` halo flash, and its message reads in `--ink-margin` italic: *"Ce n'est pas le glyphe."* 6. **Cursor:** the cursor itself is replaced (only over reading content, never over UI essentials) with a tiny SVG moth that flutters its wings on `mousemove` velocity > 80px/s. The moth casts a 4px `--plasma-magenta` glow. 7. **Sound (optional, off by default, single brass-bell sample):** the bell-pull at folio VIII is the only audible event. A small *Sonner le glas* control sits beside it; if the reader has not interacted with audio prior, it is silent on first click and prompts visually. **Technical constraints:** - All animation MUST respect `prefers-reduced-motion: reduce` — moths, breathing halos, parallax, marble shimmer, drop-cap float, and shake-error are all gated behind a single `matchMedia` check that pins them to a static state. - Drawing is **SVG-first**, never ``. The eight plates, the filigree spine, the cartouches, the moths, the constellation, and the marbled background are all SVG. The marbled `feTurbulence` lives inside an SVG `` that is referenced via CSS `filter: url(#marbleNight)`. - The page is **dark-only** — no light-mode toggle. Victorian neon does not have a daylight setting. - Typography uses `font-display: swap` and the four Google Font families are subset to Latin only at load. - The page must read coherently with JavaScript disabled: the sidebar is `position: fixed` CSS-only, the folios scroll, the plates render statically (no neon-contour animation), and the bell-pull falls back to an `` anchor. **What MUST NOT appear in the build:** - No carousels, no sliders, no modal dialogs, no hover-card popovers, no tooltips with arrows. - No glassmorphism (frosted-glass cards). The catalogue is bound, not floating panes. - No "Get started" button, no "Sign up", no "Learn more", no marketing voice. - No emoji. No favicon-as-emoji shortcut. - No bento-box layout. No card-grid. No three-up feature row. The completed site should feel like the reader has **slipped into the dim back room of a fictional society**, opened a heavy violet-bound book, and watched its illustrations quietly come alight under a gas-lamp that is in fact a very small piece of plasma. ## Uniqueness Notes This design commits to specific choices that no other site in the corpus has claimed in this combination: 1. **Victorian-ornate as the leading aesthetic, electrified by dark-neon — not glassmorphic, not cottagecore, not dark-academia.** The frequency analysis shows victorian-ornate at 2% and dark-neon at 1%; their conjunction here is, as far as the corpus data shows, unique. This is **gas-lamp-replaced-with-plasma**, not arcade neon over engravings — a chromatic and chronological displacement that no other site in the batch performs. 2. **The persistent left-sidebar as standing card-catalogue, never hamburger-collapsing.** Sidebar is at 27% in the corpus but is almost universally implemented as either a dashboard-utility column or a collapsible nav drawer. Here the sidebar is a **load-bearing piece of Victorian cabinetry** — a brass-bordered, eight-niche, filigree-spined index that *is* the archetype taxonomy. Mobile collapses to a brass keyhole strip, never to a burger. 3. **Retro-display typography (5% in corpus) committed via IM Fell English and Cinzel Decorative — not as one display moment but as the entire reading voice.** IM Fell English carries the bulk of body type, which is rare; most retro-display sites confine retro letterforms to hero text. The Discourse columns *are* a 17th-century reading experience. 4. **Hand-drawn imagery (94% in corpus) is the most overused single token in the catalogue, but here it is committed taxonomically rather than decoratively.** Eight bespoke Victorian-engraving plates of named archetypes (Faber, Mendax, Testis, Daemon, Speculum, Falcator, Custos, Vagus) — each a single-line-weight SVG of ~380 vector commands with three neon-traced contours animated on view. This is hand-drawn as **catalogue plate**, not hand-drawn as friendly squiggle, and that distinction is the centre of the design. 5. **Floating-elements (4% in corpus) used as physical metaphor for hauntedness.** Drop-caps float, marginalia float, six glyphs per folio bob on sine-waves, three moths drift on a 28-second loop. Floating here means *the specimens are not quite at rest in their cases* — a diegetic, not gratuitous, motion idiom. 6. **Shake-error (2% in corpus) repurposed as diegetic punishment for wrong-incantation hover.** Almost every shake-error in the corpus is a form-validation failure; here it is a narrative consequence — clicking outside the correct glyph triggers a 3px shake and the line *"Ce n'est pas le glyphe."* This is the rarest pattern in the corpus deployed in its rarest reading. 7. **Luxurious tone (2% in corpus) without a single luxury-marketing trope.** No gold-watch product shot, no sweeping cinematic video, no champagne-coloured CTA. The luxury here is **bibliographic**: heavy paper, hand-set type, brass furniture, candlelit interior. It is the luxury of *the back room of a society library*, not the luxury of a sportscar landing page. 8. **Eight-archetype Latinate taxonomy as the literal site structure.** No other site in the corpus is structured around an eight-fold named archetype scheme, and none names its sections in Latin (Faber, Mendax, Testis, Daemon, Speculum, Falcator, Custos, Vagus). The taxonomy is bespoke to the domain (`archetypos`) and would be nonsensical elsewhere — the design is non-portable by construction. **Avoided patterns from frequency analysis:** - **Glassmorphism (68%)** — explicitly rejected. The site is bound vellum, not frosted glass. - **Card-grid (65%)** — explicitly rejected. The site is a vertical folio scroll within a sidebar frame, not a tessellated grid of cards. - **Cursor-follow (62%) and magnetic (50%)** — used only in the moth-cursor metaphor, never on UI elements; no buttons are magnetic; the cursor follow is the ambient flutter of a moth, not a marketing-page interaction layer. - **Photography (97%)** — entirely absent. Not a single raster image. Everything is hand-drawn SVG. - **Gradient (94%) and warm (92%)** — the palette uses two narrow gradients (only inside the marbled endpaper and the constellation aurora) and is dominantly *cool* dark-violet with electrum highlights, not warm. - **Stagger (65%) and parallax (92%)** — used, but each in service of the bibliographic metaphor (sidebar-niche cascade is a stagger of *gas-mantles igniting in sequence*; parallax is a *gutter-depth* between paper layers), never as a generic motion-language flourish. **Chosen seed:** *aesthetic: victorian-ornate, layout: sidebar, typography: retro-display, palette: dark-neon, patterns: shake-error, imagery: hand-drawn, motifs: floating-elements, tone: luxurious*