# Design Language for lrx.sh ## Aesthetics and Tone lrx.sh is a research instrument disguised as a website -- imagine the field notebook of a future linguist-archaeologist who excavates dead programming languages and forgotten dialects the way paleographers reconstruct lost scripts. The name reads as a contraction of "lexicon" run through a command shell: a place where words, syntax, and meaning are taken apart and re-annotated by hand. The visual identity is hand-drawn scholarship -- ink on warm pulp paper, the margin marginalia of a working scholar -- but set inside a speculative, almost cartographic future where the "documents" being studied are interfaces, protocols, and the residue of code. The mood is **scholarly-intellectual** without being cold or institutional. It is the warmth of a reading lamp at 2 a.m., the satisfying friction of a fountain pen catching on textured stock, the quiet authority of someone who has spent decades close-reading things nobody else thought worth reading. Nothing is glossy. Nothing is "designed to convert." Surfaces look pressed, drawn, slightly fibrous. Lines have the wobble of a real hand -- not the parametric perfection of a vector tool, but the honest 0.5px deviation of a 0.3 Rotring pen guided by a tired wrist. The futurism is restrained and structural rather than chrome-and-neon. It lives in the *taxonomy* -- in the sense that this archive catalogues things that don't fully exist yet, in plate numbers that count past any sane edition, in diagrams of mechanisms whose function is left deliberately ambiguous. Think of the Codex Seraphinianus crossed with a Bell Labs technical memo crossed with a terracotta-tiled reading room in a desert university. Hand-drawn precision. Intellectual play. A warm, dry, sunhurried confidence. ## Layout Motifs and Structure **Primary layout: split-screen, scroll-triggered, with a recto/verso reading logic.** The viewport is permanently divided into two unequal vertical fields, like the spread of an open codex sitting under a desk lamp: - **Verso (left, ~38vw):** the *plate* -- a fixed, slowly-reacting field where a single hand-drawn line illustration lives at any given moment. As the reader scrolls, plates cross-fade and re-draw themselves (SVG stroke animation), each captioned with a hand-lettered plate number ("PLATE XLVII", "FIG. 12.3-b", counting upward absurdly far). The verso has its own faint baseline grid drawn as 1px terracotta hairlines at 6% opacity and a deckle-edge texture along its outer margin. - **Recto (right, ~62vw):** the *commentary* -- the scrolling text column. Generous outer margin (min 8vw), a visible left rule, and true marginalia: short hand-set annotations that sit *outside* the text block in the gutter, connected to their referent by a thin hand-drawn leader line that draws itself on scroll. On mobile the spread folds: the plate becomes a sticky band at the top that shrinks as you scroll, the commentary flows beneath it full-width, and marginalia drop inline as indented, ruled-off asides. Between major sections, the whole spread performs a **page turn**: the recto sweeps left with a subtle paper-curl shadow, the verso plate flips, and a new spread settles in with a soft elastic bounce. Section headers are set as **catalogue entries** -- a plate number, a Latin-ish classificatory binomial, then the human title -- aligned to a strict modular scale (1 / 1.5 / 2.25 / 3.375 rem steps). No hero banners, no centered headlines, no full-bleed photography. The structure is a folio, not a landing page. A persistent thin top register acts as a **running head**: left side shows the current section's classificatory name in small caps, right side shows scroll progress as a hand-ticked ruler (little ink marks accumulating as you descend). ## Typography and Palette **Typography (all Google Fonts):** - **Display / catalogue entries / plate numbers:** "Familjen Grotesk" (weights 400/500/600) -- a geometric-sans with a humanist warmth and slightly quirky details; used uppercase with 0.14em tracking for classificatory labels, and in title case at clamp(2rem, 4.2vw, 3.6rem) for section titles. Its faint imperfection sits naturally beside hand-drawn line work. - **Secondary display / numerals & figure labels:** "Space Grotesk" (weight 500) -- for plate numbers, figure callouts, and the running-head ruler. Its distinctive numerals read as "technical instrument." - **Body / commentary:** "Newsreader" (weights 400/500, italic available) -- a screen-optimized literary serif with real personality in the italic; used at clamp(1.05rem, 1.15vw + 0.6rem, 1.3rem), line-height 1.72, max measure ~66ch. The serif against the geometric-sans headers is the core scholarly contrast. - **Marginalia / hand annotations:** "Caveat" (weight 400/600) -- a fluid handwriting face used small (0.92rem) and slightly rotated (-1.5deg to +2deg, varied per note) for true margin-note feel; also used for the deckle captions and "[in another hand]" interjections. - **Mono accents (rare):** "JetBrains Mono" (weight 400) for any literal code fragments, set in a ruled box like a transcribed inscription. **Palette -- terracotta-warm, warm overall:** | Token | Hex | Use | |---|---|---| | Pulp | `#f4ece0` | primary paper background | | Pulp Shade | `#ebe0d0` | verso plate field, recessed panels | | Iron Gall | `#2b2018` | primary ink / body text | | Terracotta | `#bc6b3e` | drawn lines, leader lines, links, primary accent | | Burnt Sienna | `#8c4a2b` | hover/active accent, plate numbers | | Ochre Wash | `#d9a45b` | highlights, marginalia underlines, ruler ticks | | Verdigris | `#5a7a6b` | the single cool "annotator's pencil" accent -- sparing, for secondary marks | | Deep Umber | `#1b130d` | footer / colophon background, deepest text | Backgrounds carry a faint multiply-blended paper grain (CSS-generated, ~3% opacity) and a barely-there warm vignette. No pure white, no pure black anywhere. ## Imagery and Motifs All imagery is **line-illustration** -- hand-drawn, single-weight or lightly varied-weight ink strokes, rendered as inline SVG so each can be path-animated: 1. **Speculative mechanisms (the plates):** detailed pen-and-ink diagrams of devices that don't quite exist -- a "syntax loom", a "lexical centrifuge", a "phoneme press" -- drawn in the deadpan style of a 19th-century patent illustration, fully labelled with leader lines pointing to parts named in invented but plausible Latin. Each animates by drawing its outline, then its hatching, then its labels in sequence. 2. **Hatching & cross-hatching as texture:** shading is done with visible hand-hatch lines (terracotta on pulp), never flat fills. Used to weight diagram volumes and to subtly tint section dividers. 3. **Marginal doodles:** tiny hand-drawn pointing-hands (manicules), asterisks, brackets, and corrective carets that appear in the gutter near specific paragraphs, gently bobbing on hover. 4. **The deckle edge:** the outer margin of the verso has a hand-drawn torn-paper edge; section breaks reveal a thin "next leaf" beneath, with its own deckle, suggesting depth without skeuomorphic shadows. 5. **Classificatory glyphs:** each section gets a small hand-drawn "specimen mark" -- a unique abstract sigil, like a botanist's herbarium stamp -- that recurs in the running head and beside the section's marginalia. 6. **Plate-number framing:** every figure sits inside a hand-ruled rectangle with slightly non-parallel sides and a number tab in the corner, like a museum specimen tray. Motif keyword: **futuristic** -- expressed as *anachronistic taxonomy*, not visual sci-fi. The future here is something already old, already annotated, already filed under a plate number. ## Prompts for Implementation Build a **full-screen narrative reading experience** -- a scrollable codex, not a marketing site. - **Opening:** Pulp background. A reading-lamp cone of warmth fades up from the top-left over 600ms. Then a single terracotta line draws itself horizontally across the spread fold (1px, ~1.8s ease-in-out). When it completes, the verso plate's first illustration begins drawing its outline; simultaneously the recto title settles: the catalogue label ("LRX · LEXICON SHELL · ED. ∞") fades in small-caps, then the title "lrx.sh" in Familjen Grotesk, then a hand-lettered subtitle in Caveat slipping in slightly rotated. No nav menu slides in -- instead a thin running head materializes at the top with the first specimen mark inked in. - **Scroll behavior:** Drive everything off scroll position. As the reader descends within a section, the verso plate's hatching layers reveal progressively (think of it being shaded in real time), marginalia fade and rotate into the gutter staggered by ~80ms each, leader lines draw from text to margin, and the running-head ruler accrues ink ticks. Use IntersectionObserver per paragraph; respect reduced-motion by snapping instead of animating. - **Section transitions:** the "page turn" -- recto column translateX out with a soft paper-curl box-shadow gradient, verso plate cross-fades + redraws as the new specimen, new running-head mark inks in, settle with a gentle spring (no harsh bounce). ~700ms total. - **Micro-interactions:** links are body-serif words with a hand-drawn underline that draws on hover (Caveat-style wobble path, not a straight border). Manicules in the margin bob 2-3px on hover. Plate numbers tick up by one on hover then settle (a tiny absurdist counter). Footnote references are superscript numerals that, on hover, summon their note as a small ink-bordered card in the gutter. - **Colophon (in place of any footer):** a Deep Umber spread, set like the last page of a private press book -- "This archive was set in Familjen Grotesk and Newsreader, drawn by hand, and filed under plate ∞. lrx.sh." A single hand-drawn printer's flower divides it. - **AVOID:** CTA-heavy layouts, pricing tables, stat grids, testimonial carousels, hero banners with overlaid headlines, dashboard cards, generic icon rows. There are no buttons that say "Get Started." The only "conversion" is turning the next page. - Keep all illustration as inline SVG with `pathLength` normalized for clean draw animations; generate paper grain and hatching via CSS/SVG filters, not raster images. Everything must feel pressed, drawn, and warm. ## Uniqueness Notes **Differentiators from other designs:** 1. **Codex spread as the literal layout engine.** Most split-screen designs are 50/50 hero panels; here the split is a working recto/verso folio with true gutter marginalia, leader lines, deckle edges, and physical page-turns between sections. The "two columns" carry distinct semantic roles (plate vs. commentary), not just decoration. 2. **Anachronistic-taxonomy futurism.** Instead of chrome/neon/HUD sci-fi, the "futuristic" motif is delivered as a fictional classificatory apparatus -- plate numbers counting past infinity, invented Latin part-names, specimen sigils, an edition labelled "∞." It reads as scholarly speculative fiction, not tech-demo. 3. **Hand-drawn line-illustration as the entire image system, animated by SVG path-draw.** No photography, no 3D, no stock vectors -- every visual is a pen-and-ink diagram of a device that doesn't exist, shaded with visible hatch lines, drawn in sequence on scroll. 4. **Handwriting (Caveat) used structurally for marginalia, not as a gimmick header font** -- rotated per-note, connected by drawn leader lines, behaving like a real annotator's hand in the gutter. 5. **No conversion architecture at all** -- colophon instead of footer, page-turns instead of CTAs, plate-number easter eggs instead of stat grids. **Chosen seed/style:** aesthetic: hand-drawn, layout: split-screen, typography: geometric-sans, palette: terracotta-warm, patterns: scroll-triggered, imagery: line-illustration, motifs: futuristic, tone: scholarly-intellectual **Frequency-analysis awareness:** Leans into genuinely underused tokens -- `geometric-sans` typography (6%), `line-illustration` imagery (3%), `terracotta-warm` palette (3%), `scholarly-intellectual` tone (17%), `futuristic` motifs (8%) -- while deliberately avoiding the saturated defaults: not `corporate` (93%), not `mono` typography (94%), not `centered` layout (93%), not `mysterious-moody` tone (94%), not `gradient` palette (96%), and not `photography`/`minimal` imagery (66%/68%). Split-screen (25%) and scroll-triggered (34%) are mid-range and used here in a non-generic, semantically-loaded way.