# Design Language for lrx.wiki ## Aesthetics and Tone lrx.wiki is an **axonometric knowledge-city** — a wiki rendered not as a stack of pages but as a slowly-rotating model town built on a drafting table, where every article is a building, every category is a city block, and every cross-link is a length of pneumatic tube running between rooftops. Imagine the cutaway architectural models in a 1970s urban-planning bureau crossed with the cool exactitude of an engineering blueprint: matte chipboard structures, hairline construction grids printed in cyan, tiny labelled flags planted on each building like surveyor's markers. The mood is **isometric technical documentation with a scholarly-intellectual undertone** — measured, lucid, faintly nostalgic for the era when knowledge was something you *drafted*. Nothing here pulses or shouts; the city is quiet, the light is the flat north-facing light of a studio, and the only motion is the gentle parallax of the model turning a few degrees as you scroll, the way a planner would nudge a maquette on its lazy-susan to study a different face. The tone in copy is that of a patient cartographer: precise nouns, present tense, no exclamation. "This block holds 41 articles. The tube at its northeast corner leads to the Etymology district." The wiki addresses you as a fellow surveyor, never a customer. ## Layout Motifs and Structure The page is a **single vertical descent through seven elevations of one model city**, every section locked to a true **2:1 isometric projection** (30° axes, no perspective foreshortening — this is axonometric, not perspective, and the distinction is the whole point). The viewport is the drafting table; the city sits centred on it; scrolling does not move *down a page* so much as **lower a camera crane down the side of the maquette**, each of the seven elevations revealing a deeper stratum: - **Elevation 01 — The Skyline.** The whole city in long shot, isometric, drawn as flat-shaded chipboard volumes. The wordmark "lrx.wiki" is set into the table surface itself as engraved drafting-stencil lettering, lower-left, the way a model-maker signs the baseboard. - **Elevation 02 — A Single Block.** The crane drops; one city block fills the frame. Buildings here are individual articles, each a labelled extruded prism. Hovering a prism lifts it 8px off its footprint and unrolls a thin call-out flag with the article title in monospace. - **Elevation 03 — The Tube Network.** Rooftops only. A web of pneumatic message-tubes (the cross-link graph) drawn as 1.5px isometric pipes with elbow joints, animated to draw themselves along their paths as the elevation enters view. - **Elevation 04 — Cutaway.** One building sliced open along an isometric plane to show its interior floors — the article's sections, stacked like storeys, each storey a horizontal slab with a stencilled floor-number. - **Elevation 05 — The Index Tower.** A tall thin structure standing apart: the alphabetical index, rendered as a spiral external staircase of lettered landings A→Z that the crane orbits. - **Elevation 06 — Subterranean.** Below the baseboard: the foundations and utility trenches — the wiki's "what links here", revision strata shown as geological layers in cutaway. - **Elevation 07 — The Table.** Pull back out: the city sits again on the drafting table, now with a single ruler, a triangle, and a sharpened pencil resting beside it. A quiet sign-off. There is no top nav bar, no hamburger, no footer columns. Navigation is a **slim vertical "elevation gauge"** pinned to the right edge — seven notched tick-marks like the depth scale on an architectural section drawing; the active notch widens and prints its elevation name in 9px monospace beside it. The construction grid (faint cyan isometric graph paper) is always visible *behind* the city and scrolls at 0.85× for a layered-depth float. ## Typography and Palette **Fonts — all Google Fonts:** - **Display / wordmark / floor-numbers — `Major Mono Display`.** A monospaced display face with a stencil-machine quality; used uppercase, wide-tracked (`0.18em`), for the engraved baseboard wordmark, the cutaway floor numbers, and the elevation-gauge labels. It reads like Letraset rub-down lettering on a model. - **Body / labels / call-out flags — `IBM Plex Mono`.** The workhorse. Every paragraph, every building flag, every measurement annotation is set in Plex Mono at 15px / 1.7, weight 400, with weight 500 for labels. Monospacing reinforces the drafting-table feel — text behaves like dimensions written on a technical drawing. - **Long-form reading body (article text within cutaways) — `Spectral`.** When a cutaway building opens to reveal actual prose, that prose is set in Spectral (serif, 17px / 1.75) — a deliberate tonal shift: *inside* a building is warm and humane even though the *city* is cool and technical. **Palette:** - `#F4F1E8` — **drafting paper.** The table surface and dominant background. Warm bone, not white. - `#1B2A33` — **graphite.** Near-black ink for all primary text and the darkest building faces. - `#0E7C9B` — **blueprint cyan.** The construction grid, the tube network, all measurement lines and active-state accents. - `#C8553D` — **surveyor's flag red.** Used sparingly: the call-out flags on hover, the sharpened pencil, the single active gauge notch. - `#B7AE96` — **chipboard.** Mid-tone for default building faces (top faces lighter `#D6CFB8`, side faces darker `#9A917A` — three flat shades per prism, never gradients, to fake the isometric light). - `#5C6B70` — **slate annotation.** Secondary text, dimension captions, the subterranean strata. No gradients anywhere except a single 4%-opacity vignette on the table edge. Flat fills only — the look depends on it. ## Imagery and Motifs **Everything is built SVG geometry — no photography, no 3D renders, no stock illustration.** The entire city is hand-authored isometric SVG: extruded prisms (three-polygon technique — top rhombus, left parallelogram, right parallelogram), pneumatic tubes (stroked polylines with mitred elbows), staircases, trenches. Recurring motifs: 1. **The labelled flag.** A tiny pole-and-pennant SVG that springs up from a building's roof on hover, carrying the article title. Pennant is flag-red, pole is graphite, the whole thing is 1px-stroked. Flags are *the* interaction signature of the site. 2. **The construction grid.** Cyan isometric graph paper — two sets of 30°/150° lines plus faint verticals — tiled behind every elevation, never fully opaque (12%). Where the city sits on it, the grid is "consumed" — masked out under building footprints so structures look *placed* on the paper. 3. **Dimension lines.** Thin cyan lines with arrowheads and a gap for a monospace number, used to annotate counts: "←—— 41 articles ——→" beneath a block. They draw themselves left-to-right on scroll. 4. **The pneumatic tube.** Cross-links are physical tubes; a faint "capsule" dot can travel along one on hover to suggest a message passing — the only continuously animated element, and only one tube at a time. 5. **Stencil floor-tags.** Inside cutaways, each storey wears a small stencilled number plate (Major Mono Display, knocked-out white-on-graphite rectangle) — like the floor markers in a stairwell. 6. **The drafting tools.** Ruler, 30-60-90 triangle, sharpened pencil — appear only in Elevation 07, resting beside the city, drawn in the same flat 3-shade isometric style as everything else. They are the curtain call. ## Prompts for Implementation Build lrx.wiki as **one HTML file, one CSS file, one ES module** — no framework, no build step. The experience is a ~75-second crane-descent down the side of a model city on a drafting table. **There is no CTA, no pricing block, no stat-grid card row, no testimonial strip, no contact form, no email signup, no logo wall, no FAQ accordion, no cookie banner, no hero-with-buttons.** The page is the seven-elevation descent and nothing else; any "what is lrx.wiki" explanation is delivered *as the cutaway interior text in Elevation 04*, woven into the storytelling, never as a marketing panel. **Storytelling sequence (seven elevations, vertical scroll, scroll-triggered reveals, gentle tilt-3d parallax on the city group):** 1. **Skyline.** Fade up the drafting paper. The city assembles itself: prisms rise from their footprints in a soft stagger (8–14ms apart, ease-out, ~280ms each), tallest last. Engraved wordmark already present in the baseboard. Hold. 2. **A Single Block.** Camera-crane illusion: the city group scales up ~1.6× and pans so one block centres; other blocks slide off-frame and dim to 30%. Building prisms in this block become hoverable — hover lifts the prism 8px (CSS `translate`, spring-ish ease, ~180ms) and unfurls the flag (the pole grows from 0 height, the pennant `scaleX` 0→1 from the pole side). A dimension line draws beneath: "←—— N articles ——→". 3. **Tube Network.** Crane rises to a near-top-down rooftop view (`rotateX` toward 50°). The tube polylines draw themselves with `stroke-dashoffset` along their true isometric paths, elbows snapping in sequence. On hover of any tube, a 4px capsule dot animates from one end to the other once. 4. **Cutaway.** One building rotates open along an isometric plane — implement as the front-right face swinging out on a CSS 3D hinge while the interior floor-slabs (pre-rendered behind it) are revealed. Each storey carries its stencil floor-tag and a line of Spectral prose. This is where the wiki quietly explains itself, one storey at a time, each storey fading in as it clears the swung face. 5. **Index Tower.** Crane moves to a tall thin tower standing apart; the view slowly orbits it (subtle `rotateZ` of the group, ±6°) while A→Z lettered landings on its external spiral staircase highlight in turn, each landing a clickable jump (decorative — single page). 6. **Subterranean.** The whole city slides *upward* out of frame and the baseboard becomes transparent, revealing foundation piers and geological revision-strata in cutaway, labelled in slate with thin cyan leader lines. The grid here is mirrored and dimmer — we're underground. 7. **The Table.** Pull all the way back: city re-composes on the drafting table, ruler / triangle / sharpened pencil fade in beside it, the elevation gauge fills its last notch, and a single line of Major Mono Display settles into the baseboard: a quiet closing inscription. The city does one final 2° rotation and rests. **Motion rules:** the city group has one shared transform that scroll position drives (a small `rotateY` sweep of about 8° total across the whole page, plus the per-elevation crane moves) — this is the parallax/tilt-3d signature; keep it *slow* and *eased*, never snappy. The cyan grid scrolls at 0.85×. Everything else is scroll-triggered fade/stagger with ~240ms ease-out. No bounce, no elastic overshoot beyond a hair on the flag-lift. Respect `prefers-reduced-motion` by disabling the rotation sweep and the tube capsules, keeping only opacity fades. **Build technique notes:** prisms = three SVG ``s sharing vertices, filled with the three chipboard shades; never use CSS 3D for the buildings themselves (only for the Elevation-04 hinge and the global tilt) — keeping the city as flat SVG isometry is what makes it read as a *drawing of a model* rather than a 3D scene. All text monospace except cutaway prose. Cursor is a thin crosshair (`crosshair`) over the city area — a draughtsman's cursor. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Isometric as a literal city-of-articles, not as decorative icons.** Isometric sits at ~10% in the aesthetic frequency analysis and isometric-icons at ~3% — and what little exists uses isometric as a flavour for icon sets or dashboard cards. lrx.wiki makes the *entire site* one continuous axonometric scene where the wiki's information architecture *is* the architecture. As far as the corpus shows, treating a wiki's link-graph as a pneumatic-tube network on a model-city's rooftops is unique here. 2. **Axonometric, not perspective; flat-shaded, not rendered.** The design explicitly refuses 3D renders (which the corpus reaches for whenever it wants depth) and refuses gradients (96% of the corpus uses gradient palettes). Everything is hand-built flat-fill SVG with a fake-light 3-shade trick — a deliberately *drafted* look, not a *rendered* one. 3. **Cool-grey blueprint palette against the warm corpus.** 98% of the corpus runs warm palettes; lrx.wiki's dominant accents are blueprint cyan `#0E7C9B` and slate `#5C6B70` on warm-bone paper, with flag-red used only as a 2%-of-pixels punctuation. The single warm note (the paper, and Spectral inside the cutaways) is a counterpoint, not the theme. 4. **Monospace-everywhere typography with one humane exception.** Mono is common in the corpus (93%) but almost always as an *accent* face; here Plex Mono and Major Mono Display carry the *entire* UI and display layer, and the only non-mono face (Spectral) appears solely *inside* the cutaway buildings — a structural typographic metaphor: technical outside, humane inside. 5. **Navigation as an architectural section-gauge, not a menu.** No nav bar, no hamburger, no footer — wayfinding is a notched depth-scale borrowed straight from architectural section drawings, reinforcing that you are descending through strata of a model rather than browsing pages. **Avoided patterns from frequency analysis:** hand-drawn aesthetic (97%), glassmorphism (72%), photography imagery (98%), warm palettes (98%), gradient palettes (96%), parallax-of-the-generic-kind / cursor-follow (88%) / spring-everything (86%) / magnetic (80%) — replaced with a single slow scroll-driven isometric rotation, crosshair cursor, and eased fades. Also avoided: card-grid (89%), centered hero-dominant layouts, CTA/pricing/stat-grid blocks. **Chosen seed:** `isometric technical docs` — *aesthetic: isometric, layout: layered-depth, typography: tech-mono + grotesque-neo (via Major Mono Display / IBM Plex Mono), palette: cool-grays / blueprint, patterns: scroll-triggered + tilt-3d, imagery: isometric-icons, motifs: grid-lines, tone: scholarly-intellectual.*