# Design Language for archetypic.dev ## Aesthetics and Tone archetypic.dev is the operations console of an imagined research lineage — a private institute that catalogs **archetypes**: the seven recurring software patterns the institute claims every machine eventually re-discovers. The site presents itself not as a product page, not as a portfolio, not as documentation, but as a **midnight reading room** inside the institute's marble vault, where each archetype is engraved on a single quarried slab and the slabs are spaced so widely apart that the visitor must walk between them. The aesthetic is **maximalism executed through restraint** — a contradiction the design is built around. Maximalism here does not mean clutter, density, or exuberance; it means **excess of presence**. Each element is enormous. The slabs are full-viewport. The numerals are 38vw tall. The gradient skies behind the slabs are continent-scale. The marble has 4096-sample procedural veining. There is *too much* of every individual thing, but *very few* things. The page is overwhelming the way a cathedral nave is overwhelming — through scale and silence, not through density. The mood is **mysterious-moody** in the precise sense: every slab withholds half of itself. The first letter of an archetype's name is engraved at full size; the rest of the name is set in a thin sleeping glyph that only resolves when the slab enters viewport center. The marble is not pristine — it is **bruised stone**, pre-storm, indigo-purple bloomed under graphite, the surface of a lake that knows lightning is coming. The cursor leaves a slow phosphorescent residue, the way moonlight catches dust in a vault. The tone is monastic, elegiac, late-stage — the tone of cataloguing something that has already happened. Inspirations are deliberately cross-discipline: the marble plates of the Pantheon when wet; Hilma af Klint's *Atom Series* gradient washes; the Roman *cardo* in negative-space form (the empty street, not the buildings); the typographic plates of Rocket Industries' 1968 NASA emblem book; the long blue chord that opens *2001: A Space Odyssey* as it would look transcribed onto stone. ## Layout Motifs and Structure The page is a **single vertical sequence of seven full-viewport slab-rooms**, each separated by a 220-vh **vault-corridor** of pure void color. This is the **ma-negative-space** layout in its purest form: the negative space is not a gutter, not whitespace between cards, not a margin — it **is the architecture**. The empty corridors are **larger than the slabs themselves**. The visitor scrolls through more void than content. This is the design's central thesis: the corpus statistics show ma-negative-space at 2%, and most "negative space" sites use it as polite breathing room. archetypic.dev uses it as load-bearing wall. Each slab-room is a single 100vw × 100vh stage containing exactly five elements: 1. A **monolithic slab** rendered as a 62vw × 78vh marble-texture rectangle, perfectly centered horizontally, with its top edge 11vh from the viewport top. The slab has a 0.6px engraved hairline 3px inside its perimeter (the conservator's frame). 2. An **archetype roman numeral** (I through VII) carved into the slab's upper-left corner at 9vw, in `#0A0612` with a 1px lighter inner stroke for the chiseled-edge illusion. 3. The **archetype's first letter** (the *initial*) at 38vw, set 12vh down the slab's vertical centerline, rendered as a sunken inset in the marble using a five-layer text-shadow stack to fake a 4mm chisel depression. 4. The **rest of the archetype's name** (e.g., for `I — INSTANCE`, the letters `NSTANCE`) set in 11vw oversized-display, positioned to the right of the initial, but with `opacity: 0.04` and `letter-spacing: -0.012em` until the slab is within 8% of viewport center, at which point the letters elastically bloom to `opacity: 0.92` over 1100ms with an overshoot of 1.06. 5. A **single 64-character oracle line** (the institute's one-sentence definition of the archetype), set at 13px in tracking-wide mono caps directly beneath the initial, on its own engraved-baseline rule. There is **no top navigation, no logo, no footer, no sidebar, no breadcrumb, no progress indicator, no scroll hint, no "back to top" arrow**. The only persistent UI is a **single vertical hairline** along the right edge of the viewport, 1px wide in `#3B2D5E`, with seven 6px-tall tick marks distributed evenly along its length — the visitor's position in the sequence is shown only by which tick is currently lit (`#C9B8FF` glow). No labels. No tooltips. The hairline is a relic of the institute's plumb-line, not a navigation menu. The seven slabs sit on **seven different gradient skies** (one per archetype, see palette section), each gradient occupying the full vault corridor *above* the slab and bleeding into the slab's own marble. The vault corridor *below* each slab fades to `#040207` (void-black) before the next gradient begins. The visitor experiences the page as: void → indigo-storm → slab I → void → bruise-violet → slab II → void → ... → slab VII → final 320vh void of `#040207` with a single 1px-tall white tick at its absolute bottom (the institute's seal). On viewports below 900px wide, the 62vw slab widens to 88vw, the initial drops from 38vw to 52vw, and the corridor heights compress from 220vh to 140vh — but the ma-negative-space ratio (corridor : slab) is *never* allowed to drop below 1.4:1. The void must remain dominant. ## Typography and Palette **Type system — two Google Fonts only, both used at extreme scales:** - **Display / archetype names / roman numerals — `Bodoni Moda` (Google Fonts), variable axis 6–96, optical-size axis maximum.** Used at 38vw for archetype initials, 11vw for the remainder of names, 9vw for roman numerals. Bodoni Moda at maximum optical size produces hairline thin-strokes (0.4mm at display scale) and slab-thick thick-strokes (8mm at display scale) — the **vertical-stress contrast is so severe** that at 38vw each letter reads as a piece of architecture, not a glyph. Letter-spacing is `-0.022em` for the initial alone (to keep its bowl tight against its stem-shadow) and `0.014em` for the body of the name. No italics, no uppercase swashes, no ligatures — just the upright Roman cut, set in `#0A0612` against the marble field. - **Oracle lines / vault hairline ticks / cursor-residue debug — `JetBrains Mono` (Google Fonts), weight 300, single size 13px.** Used only for the 64-character oracle line beneath each initial, set in `letter-spacing: 0.34em`, uppercase, color `#C9B8FF` at 64% opacity. Never larger than 13px. Never any other weight. The mono is the institute's typewriter — small, deliberate, almost forgotten beneath the marble's roar. Note on the corpus: `mono` at 95% and `oversized-display` rare gives this site an unusual compound — most mono usages are tech-terminal voice; here mono is a *whisper* under a Bodoni shout. The pairing reverses both conventions. **Color system — gradient palette, seven skies + one stone + one void:** Stone (the marble itself, common to all slabs): - `#F4F0E8` — quarried-bone (the marble's lightest vein) - `#3B2D5E` — bruised-indigo (the marble's deepest vein) - `#0A0612` — engraved-onyx (the chiseled inscription color) Void (the vault corridors and final basin): - `#040207` — institute-void (true black with a 2-LSB violet bias) Seven archetype skies (one gradient per slab, each a 3-stop linear at 168°): - **I — INSTANCE:** `#0F0824` → `#3B2D5E` → `#7A4FB8` (storm-indigo blooming to amethyst) - **II — INHERITANCE:** `#190426` → `#5A1F47` → `#B86A78` (deep-burgundy blooming to dusty rose) - **III — INTERFACE:** `#02141C` → `#1D4A52` → `#5DA8A4` (abyssal-teal blooming to verdigris) - **IV — ITERATION:** `#08111E` → `#243B62` → `#6E92C8` (midnight-marine blooming to slate-azure) - **V — INVERSION:** `#1F0A0C` → `#5C1B16` → `#C0612A` (oxidized-iron blooming to burnt-amber) - **VI — INVARIANT:** `#0A0F0A` → `#1F3026` → `#4F7866` (forest-shadow blooming to mossed-bronze) - **VII — INFINITY:** `#070710` → `#2A2152` → `#9B7BC4` → `#E6DAFF` (a four-stop indigo to predawn-violet — the only four-stop sky, signaling the sequence's terminus) Cursor-residue glow (single accent, used only by the elastic phosphor trail): - `#C9B8FF` (lavender-phosphor, 12% opacity, 84px blur, 1.6s decay) The corpus shows `gradient` palette at 94% — extremely common, but used almost universally as warm gradient meshes, sunset hero washes, or vaporwave bands. archetypic.dev's gradients are **stratified vertical washes** that act as *sky* above architecture, not as decoration on top of content. The gradient is the room, not the wallpaper. ## Imagery and Motifs **The marble plates — the central imagery, generated procedurally per slab.** Each slab carries a unique marble-texture skin generated client-side as a 2048×2560 SVG composited from four noise layers: - **Layer 1 — base vellum.** A flat fill in a slab-specific tint that is the average of the slab's sky stops desaturated by 38% (e.g., for INSTANCE, this is `#3F3454`). - **Layer 2 — primary vein network.** 14 hand-curated bezier paths drawn as a single SVG `` with `stroke-width` varying from 0.4px (terminal hairs) to 7px (trunk veins), in `#1A0F2E` at 22% opacity, with `feTurbulence` baseFrequency `0.012,0.006` displacing the strokes by 18px. The veins do not loop — they always terminate either at the slab's edge or in a frayed split. - **Layer 3 — secondary vein dust.** 240 short 2–6px line segments scattered across the plate at random angles, in `#F4F0E8` at 8% opacity, simulating crystalline glints catching torchlight. Segments are never closer than 14px to a primary vein. - **Layer 4 — bruise-bloom (the slab's signature).** A single radial gradient of the slab's deepest sky color at 28% opacity, positioned uniquely on each slab — slab I's bruise sits upper-right, slab II's lower-left, slab III's center, slab IV's upper-center, slab V's right edge, slab VI's lower-right, slab VII's bottom (about to escape the slab entirely). Reading the seven bruises in sequence, the bloom traces the path of a setting moon. The marble is generated **once at page load**, seeded by the slab index (deterministic — a returning visitor sees identical veins). It is rasterized to a `` and used as a CSS `background-image` on the slab — never re-rendered, never animated. The marble is *fixed stone*. Only the cursor-residue and the elastic-bloom glyph animations move on the slab's surface. `marble-texture` imagery sits at 1% in the corpus — making this site the second known instance, and the first to use it as the entire substrate rather than as an accent panel. **The tech motif — engraved circuit-glyphs.** Each slab carries one **engraved circuit-glyph** in the slab's lower-right quadrant — a 180×180px SVG drawn as if the institute had carved a circuit-board fragment into the stone. The glyph differs per archetype: - I — INSTANCE: a single bonded transistor (gate, source, drain, with the body-tap drawn as a tiny dot) - II — INHERITANCE: a binary tree of seven NAND gates, fanning down-left - III — INTERFACE: an opamp symbol with its inverting input crossed by a 2µF capacitor - IV — ITERATION: a 3-bit ring counter, drawn as three D-flipflops chained in a triangle - V — INVERSION: a Schmitt trigger with the hysteresis curve carved beside it - VI — INVARIANT: a single voltage-reference zener with a crystalline notch - VII — INFINITY: an LC tank circuit drawn as a closed loop with no terminals (the only glyph that escapes the schematic convention) Each glyph is rendered in `#0A0612` lines of varying weight (0.6px for traces, 1.2px for component bodies), engraved into the marble using a 2px outer-glow of `#F4F0E8` at 30% opacity to simulate light catching the chisel's bevel. The glyphs are static — they do not animate, do not respond to hover. They are simply *present*, the way a mason's mark is present on a quarry block. The corpus shows `tech` motifs at 15% — almost always rendered as glowing neon circuits or HUD overlays. archetypic.dev renders tech as **lithic engraving** — the inversion of the convention. **The cursor-residue trail.** The only motion that follows the visitor is a slow phosphorescent residue. As the cursor moves across a slab, it deposits a 84px-blurred soft-light glow in `#C9B8FF` at 12% opacity, which fades over 1.6s. The residue uses the elastic pattern: when the cursor stops, a single follower dot springs to the cursor's exact position with a 1.04 overshoot before settling. This is the only elastic interaction on the page. There is no cursor-follow on text, no magnetic buttons, no hover-lift cards. The phosphor is the visitor's only mark on the stone. **Negative imagery — what the page does not contain.** There are no photographs (97% of the corpus uses photography — this site uses none). There are no avatars, no portrait thumbnails, no logo grids, no illustration spots, no icons. There are no SVG flourishes at section borders. There are no decorative dividers. The marble and the seven engraved tech-glyphs are the entire imagery system. ## Prompts for Implementation Build archetypic.dev as a **single HTML file, one CSS file, one ES module of vanilla JavaScript** — no framework, no build step, no service worker, no analytics, no fonts beyond the two declared Google Fonts. Page weight target: under 180kb on first paint, all marble generation deferred until after `requestIdleCallback`. **Storytelling structure — a 90-second descent through seven vaults:** 1. **Page enters into pure void.** First 1.6s: viewport fills with `#040207`. No text, no logo, no spinner. After 1.6s, a single 1px-tall white hairline tick appears at the exact center of the viewport for 400ms, then fades. This is the institute's call to attention. The visitor must scroll. Nothing prompts them. 2. **First scroll triggers the indigo sky.** As the visitor scrolls down by 12vh, the void begins to bleed upward into Slab I's sky gradient (`#0F0824` → `#3B2D5E` → `#7A4FB8`). The sky reveals over 80vh of scroll. The visitor sees only sky for 80vh — then the slab begins to rise from the bottom. 3. **Slab I — INSTANCE — enters viewport.** As the slab rises, its marble materializes through a 600ms `opacity: 0 → 1` ease-out, but the engraved Roman numeral `I`, the initial `I`, and the oracle line do *not* appear yet. The slab is blank stone. Only when the slab reaches its resting position (its center 50vh from viewport top) do the engravings begin to surface. 4. **Engraving sequence per slab (1.4s total).** - 0ms: The hairline frame draws itself from upper-left clockwise (260ms, ease-out). - 260ms: The roman numeral `I` chisel-fades in (200ms, no animation, just opacity). - 460ms: The initial `I` rises from `transform: translateY(8px); opacity: 0` to its resting position with a spring (stiffness 320, damping 22) — the elastic pattern. It overshoots by 1.06 and settles. - 720ms: The remainder of the name (`NSTANCE`) elastically blooms from `opacity: 0.04` to `opacity: 0.92` over 680ms with the same 1.06 overshoot, but with `letter-spacing` simultaneously elastically expanding from `-0.012em` to `0.014em`. The letters appear to *exhale*. - 1100ms: The oracle line types itself character-by-character at 38ms per char (no cursor blink — just chiseled letters appearing). - 1400ms: The engraved tech-glyph in the lower-right fades in over 200ms. 5. **Between slabs — the vault corridor (220vh of void).** As the visitor scrolls past slab I, the slab does not exit gracefully. It simply scrolls off the top edge, replaced by `#040207`. The visitor descends through 220vh of pure void. During this descent, the right-edge tick mark transitions from "I lit" to "II lit" — but only *exactly* at the corridor's midpoint. There is no scroll-progress bar, no half-lit interpolation. The transition is binary and abrupt, like passing a doorway. 6. **The void corridor is silent except for one element:** the cursor-residue trail still works in the corridor. The visitor can drag their mouse across the void and leave phosphor smears that hang for 1.6s. The void is cold marble too — it just isn't engraved. 7. **Slabs II through VII repeat the engraving sequence**, each in their own sky gradient and with their own roman numeral, initial, name, oracle line, and engraved circuit-glyph. The seven oracle lines are: - I — INSTANCE: `THE FIRST OBJECT IS THE PROOF THE TYPE EXISTS` - II — INHERITANCE: `EVERY CHILD IS A CONFESSION OF WHAT WAS BORROWED` - III — INTERFACE: `THE CONTRACT IS WRITTEN ON THE EDGE BETWEEN THINGS` - IV — ITERATION: `WHAT REPEATS IS NEVER WHAT REPEATS` - V — INVERSION: `READ THE NEGATIVE SPACE BACKWARDS TO FIND THE FUNCTION` - VI — INVARIANT: `WHAT WILL NOT CHANGE DEFINES WHAT MAY` - VII — INFINITY: `THE LOOP THAT KNOWS ITSELF IS THE LOOP THAT ENDS` Each is exactly 64 characters or under, set in JetBrains Mono 13px caps with letter-spacing 0.34em. 8. **After Slab VII, the page does not stop.** The visitor descends through a final 320vh of pure `#040207` void. There is no footer, no email signup, no Github link, no "made by" credit. At the exact bottom of the page, a single 1px-tall white hairline tick appears for 600ms when scrolled into view, then remains. This is the institute's seal. There is nothing below it. The page has ended. **Animation budget and motion principles:** - The **elastic** pattern is used in three precise places only: the initial-letter rise per slab, the name-bloom letter-spacing, and the cursor-residue follower-dot overshoot. Nowhere else. No elastic buttons, no elastic hovers, no elastic page-transitions. The corpus shows elastic at 18% — most uses are decorative bouncy buttons; here elastic is reserved for **one moment of inhale per slab**. - No parallax. The sky moves with scroll at exactly 1:1 — the slab and sky are scroll-locked together. The corpus uses parallax in 92% of designs; archetypic.dev's refusal of parallax is intentional. Marble does not float. - No cursor-follow on text or buttons (corpus 62%). The phosphor residue is the only cursor effect, and it is a *trail*, not a follower. - No scroll-snap. The visitor must scroll the corridors themselves; the page does not jerk them between slabs. The pacing is the visitor's pacing. - All animations honor `prefers-reduced-motion`: the elastic blooms collapse to instant opacity transitions (no spring overshoot), the cursor residue is disabled, and the marble's slow-rotation perlin noise is frozen. **State management:** zero. There is no session storage, no analytics, no scroll-position memory, no theme toggle, no language switch. The page is identical for every visitor on every visit, except for the deterministic marble noise (which is identical anyway because seeded by slab index). **What this page is not** — and this is load-bearing: - Not a CTA-heavy landing page (no buttons, no pricing block, no signup). - Not a portfolio (no work shown, no clients listed). - Not a docs site (no API references, no code blocks). - Not a stat-grid (no "10x faster," no "trusted by 500 teams"). - Not a hero-with-features (no three-column feature row, no testimonial carousel, no FAQ accordion). - Not a blog (no post list, no dates, no author bios). - Not even an "about" page in any conventional sense — there is no narrative *about* archetypic.dev, only the seven slabs themselves. The institute does not introduce itself. It only catalogues. ## Uniqueness Notes **Differentiators against the corpus of seventy-plus existing designs:** 1. **ma-negative-space as architectural mass, not gutter.** The frequency report shows ma-negative-space at 2% — only one other site has used the pattern. Examination of that site (and of the broader corpus) shows negative space treated as polite breathing room between content blocks. archetypic.dev inverts this: the negative space is *more than half the page* (220vh corridors between 100vh slabs, then a 320vh terminal void). The visitor literally spends more time in void than in content. This is the only design in the corpus where the empty corridors are a load-bearing element rather than an absence. 2. **maximalism without density — extreme scale, sparse element count.** Maximalist aesthetic is rare (4%) and conventionally reads as pattern-saturated, color-saturated, ornament-heavy. archetypic.dev's maximalism is the **maximalism of a Mark Rothko canvas** — too much of a single thing, repeated seven times, with everything else removed. Each slab contains five elements. The page contains seven slabs and one ticker. That is everything. The maximalism lives in the 38vw initial letters, the 62vw slabs, the four-stop continent-scale skies, the 4096-sample marble veining — never in element count. 3. **Marble as procedural substrate, not decorative panel.** marble-texture imagery sits at 1% in the corpus (one prior site). That prior use, by inspection, was a single accent header panel. archetypic.dev generates seven uniquely-veined marble plates client-side and uses them as the entire ground of the page. The marble is the page. The corpus has no precedent for procedural marble at this scale. 4. **Tech motif rendered as lithic engraving, inverting convention.** Tech motifs appear in 15% of the corpus, almost universally as glowing neon circuits, HUD overlays, or sci-fi readouts. archetypic.dev's seven engraved circuit-glyphs are rendered as **chiseled stone**, with no glow, no animation, no luminance — the inversion of every other tech motif in the corpus. The transistor on slab I is older than the transistor. 5. **mysterious-moody tone executed through silence and scale, not darkness or grunge.** mysterious-moody at 2% is rare; the closest precedent is dark-academia (14%), which renders mood through brown-leather warmth, candle atmospherics, and Garamond serif. archetypic.dev renders mood through indigo cool, marble dust, and Bodoni Moda's vertical-stress contrast — explicitly the *opposite* register. Mood here is **lunar**, not nostalgic. 6. **Bodoni Moda at 38vw — the corpus's only confirmed display-scale didone application.** The corpus shows Bodoni nowhere in the typography histogram. Most display work uses geometric-sans, slab-serif, or kinetic display fonts. The 38vw Bodoni initial creates an architectural-scale didone presence that no prior site exercises. The contrast between 0.4mm hairlines and 8mm slab-strokes at full slab scale becomes a structural feature of the marble itself. 7. **Refusal of parallax + cursor-follow + scroll-snap, all corpus-dominant.** parallax at 92%, cursor-follow at 62%, stagger at 65%, spring at 67% — these four patterns are nearly universal. archetypic.dev uses parallax zero times, cursor-follow zero times (the residue is a trail, not a follower), stagger zero times (the engraving sequence is a single continuous narrative, not staggered list animation), and reserves spring for one moment per slab. The page is conspicuously *still* in a corpus that is conspicuously *moving*. 8. **Zero CTAs, zero forms, zero footer, zero conventional UI chrome.** No nav, no logo, no "back to top," no breadcrumbs, no footer credits, no sign-up, no pricing, no testimonials, no FAQ, no team grid, no blog feed. The right-edge hairline tick column is the only persistent UI, and it is unlabeled. This refusal sits inside an industry-template corpus and reads, by contrast, as a vow. **Chosen seed (from assignment):** *aesthetic: maximalist, layout: ma-negative-space, typography: oversized-display, palette: gradient, patterns: elastic, imagery: marble-texture, motifs: tech, tone: mysterious-moody* **Patterns avoided per frequency analysis:** hand-drawn aesthetic (94%), glassmorphism (68%), photography imagery (97%), full-bleed layout (87%), centered layout (81%), card-grid layout (65%), warm palette (92%), parallax (92%), spring (67% — used only once per slab here), stagger (65%), cursor-follow (62%), magnetic (50%), mono typography (95% — used only as 13px whisper-caption, not as primary voice). **Patterns deliberately preferred (underused):** ma-negative-space (2%), maximalist (4%), marble-texture (1%), mysterious-moody (2%), oversized-display (rare in the corpus typography list), elastic (18%, used surgically), gradient (94% — but treated as architectural sky, inverting common usage).