# Design Language for lrx.st ## Aesthetics and Tone lrx.st reads aloud as "larynx" -- the instrument of the human voice, the soft cartilage architecture where breath becomes language. The site is a single-page essay on **prose as a designed object**: a publication for writers, editors, and people who treat sentences the way a luthier treats wood. The voice is **professional but not corporate** -- the tone of a respected editor-in-chief who has opinions about em-dashes and is not embarrassed by them. Confident, dry, exacting, occasionally wry. The visual register fuses two unlikely sources: the **stark editorial grids of late-1970s European literary supplements** (think the original *Granta* or the broadsheet *TLS*, with their hairline rules, hanging indents, and uppercase running heads) and the **cold-light aurora gradients of a high-altitude observatory at 4am** -- those ribbons of green-violet-cyan that bleed across a near-black sky without ever fully resolving into a color you can name. The aurora is never decorative wallpaper here; it is *ink in motion* -- a slow chromatic field that pools behind text the way a thought clarifies before you write it down. Over everything sits a fine **noise-texture**: a dry, papery grain at 3-5% opacity that keeps the screen from looking like a screen. It should feel like reading a beautifully set page that happens to be very slightly alive. Mood keywords: ruled, exacting, nocturnal, chromatic, papery, precise. Anti-keywords: bubbly, gradient-pastel, "friendly SaaS", glassmorphism, hero-with-a-big-button. ## Layout Motifs and Structure **Primary layout: persistent left sidebar + editorial single-column reading well.** The page is split by a single vertical hairline (1px, #3a3f4d) into two unequal columns. The **left sidebar** is a fixed-position 22vw rail (collapses to a top strip below 900px) that behaves like the spine of a printed journal: it holds the wordmark `lrx.st` set vertically in retro-display caps, a slim table-of-contents with section numbers in monospace (`§01 — §06`), a live "reading position" tick that travels down the rail as you scroll (a 2px aurora-tinted segment), and a tiny colophon at the bottom. The sidebar background is the deepest ink in the palette; the noise-texture is densest here so the rail reads as *bound cloth*. The **right column** is the reading well: max-width 64ch, generous 14vh top padding, asymmetric -- text hangs from a baseline grid (24px rhythm, faintly visible as #2a2f3b hairlines at 6% opacity behind body copy). Section breaks are marked the way a serious magazine marks them: a full-bleed horizontal rule, a large retro-display section number flush-left bleeding slightly into the sidebar gutter, and the section title set in small uppercase tracked +0.22em. **Sharp-angles motif:** every container, divider, and interactive surface uses *clipped corners* rather than rounded ones -- a single 14px chamfer cut on alternating corners (top-left & bottom-right) via `clip-path: polygon(...)`. Pull-quotes are set inside a parallelogram skewed -4deg. The aurora field itself is masked into hard-edged diagonal bands (think a `linear-gradient` with sharp color stops at 8deg) rather than soft radial blobs -- the chromatic light is *cut* into shape, not feathered. Six sections, scroll-driven, no scroll-jacking: `§01 The Larynx` (manifesto), `§02 On the Sentence` (typographic specimen / interactive kerning demo), `§03 The Editor's Eye` (before/after prose morphing), `§04 Field Notes` (a vertical column of dated micro-essays), `§05 The Apparatus` (what the site/tooling is), `§06 Colophon`. No pricing, no testimonials grid, no stat counters. ## Typography and Palette **Typography (all Google Fonts):** - **Display / wordmark / section numbers:** **"Bodoni Moda"** (weight 700/900, optical size large). A dramatic, high-contrast Didone with hairline serifs and brutal thick-thin transitions -- the quintessential "retro-display" face of mid-century literary journals and fashion mastheads. Used uppercase for `LRX.ST` in the sidebar (vertical, letter-spacing 0.3em) and at `clamp(4rem, 11vw, 9rem)` for section numerals. Its thin strokes should sit *just* thick enough not to disappear -- pair with a subtle text-shadow of the aurora tint at 1px for legibility. - **Display alt / pull-quotes:** **"DM Serif Display"** (weight 400, italic available) -- a slightly warmer Didone-adjacent display serif for the skewed pull-quote parallelograms, so quotes feel hand-set rather than mechanical. - **Body / reading well:** **"Source Serif 4"** (weight 400 body, 600 emphasis, 400 italic) -- a screen-optimized literary serif with excellent rhythm at 18-20px. This is the actual reading typeface and it must be impeccable: line-height 1.65, hanging punctuation on, old-style figures. - **UI / labels / TOC / colophon / kerning demo:** **"IBM Plex Mono"** (weight 400/500) -- monospace for section sigla (`§`), metadata, dates, captions, and the editorial "machinery" voice. Tracked +0.04em, uppercase for labels. **Palette:** - `#0a0c12` — **Ink Black** — primary background of the reading well; near-black with a faint blue undertone. - `#070810` — **Spine** — even darker, sidebar background (bound-cloth). - `#e9e6dd` — **Page Cream** — primary body text and most UI; warm off-white so the screen reads as paper, never as #fff glare. - `#9aa0ad` — **Graphite** — secondary text, captions, TOC inactive items, baseline-grid hairlines lifted to ~6%. - `#3a3f4d` — **Rule** — hairline dividers, the central vertical spine line, chamfer edges. - `#5cf2c4` — **Aurora Green** — first aurora band; active TOC item; the reading-position tick; underline-draws on links. - `#8a6cf0` — **Aurora Violet** — second aurora band; pull-quote skew accents; hover state of section numerals. - `#46c8f0` — **Aurora Cyan** — third aurora band; small interactive highlights; focus rings (drawn as chamfered, not rounded). - `#f0c95c` — **Foundry Gold** — a single restrained accent for the wordmark glow and the "this is the apparatus" section sigil; used at most three times on the page. Aurora gradients are always built from Green→Violet→Cyan over an Ink Black base with **hard 8-degree diagonal stops**, animated by shifting the gradient angle ±6deg over ~24s. Never let it brighten past ~30% perceived luminance behind text. ## Imagery and Motifs No photography. The visual content is built entirely from type, rules, and chromatic light. 1. **The Aurora Bleed** — the signature element: a full-viewport-height fixed layer behind the reading well, a `conic`/`linear` aurora composited through a fine grain mask, drifting slowly. In `§01` it is at full strength behind the manifesto; in later sections it recedes to a thin vertical ribbon hugging the central spine line, as if the light has been *channelled* into the binding. 2. **Ruled Furniture** — hairline rules everywhere a literary supplement would use them: above running heads, between field notes, framing the colophon. Always 1px, always #3a3f4d, sometimes doubled (a thick+thin "scotch rule" pair) at major breaks. 3. **The Larynx Glyph** — a single custom SVG mark: an abstract minimal line drawing of vocal-fold cartilage rendered as three nested chamfered arcs, stroke-only, in Aurora Cyan. It is the favicon, appears once full-size at the top of `§01` (path-draw animated), and as a 16px sigil before each section number. 4. **Chamfer System** — the recurring geometric DNA: a 14px corner cut, applied consistently to cards, the pull-quote parallelogram, focus states, the TOC active highlight, and the colophon box. Sharp angles, never radii. 5. **Specimen Slabs** — in `§02`, large glyphs of Bodoni Moda displayed as "specimens" (a single `Q` with its tail, an ampersand, an em-dash) sitting in chamfered cells with the unit measurements typeset in IBM Plex Mono beside them — like a type foundry's catalogue page. 6. **The Travelling Tick** — the reading-position indicator in the sidebar: a 2px segment that lengthens from 0 to full rail height as you scroll, tinted with a tiny Green→Cyan gradient. Functional decoration, never a percentage number. ## Prompts for Implementation Build this as **one immersive long-scroll editorial page**, not a marketing site. The reader should feel they have opened a serious, slightly futuristic literary journal. - **Opening sequence (§01):** Page loads on Ink Black with the grain already present. The Larynx Glyph path-draws itself in Aurora Cyan over ~1.6s (`stroke-dasharray` animation). As it completes, the Aurora Bleed layer fades up from 0 to full behind it and begins its slow 24s drift. The wordmark `LRX.ST` in the sidebar types in vertically, letter by letter (retro-display caps), with a 1px Foundry Gold glow settling last. The manifesto text in the reading well then fades in *line by line* (stagger ~80ms), each line rising 8px into place. No buttons. The only "navigation" is the TOC in the sidebar and the invitation to scroll. - **Sidebar behaviour:** `position: fixed`, full height. The TOC items: inactive in Graphite mono, the active section's sigil + label snap to Aurora Green with a chamfered highlight block that *morphs* in width to fit the label (`clip-path` transition, ~400ms ease). The travelling tick updates on scroll via `requestAnimationFrame`. Below 900px the sidebar becomes a slim sticky top bar; the vertical wordmark rotates to horizontal. - **Morph motif (§03 "The Editor's Eye"):** show a sentence in its raw, over-written form, then on scroll-into-view *morph* it into its edited form — words crossfade and the line physically contracts (FLIP animation on the text container; deleted words shrink to 0 width and fade, the survivors slide together). It should feel like watching an editor's hand at work. Do this for 2-3 sentences in sequence. - **§02 interactive kerning specimen:** a single large Bodoni word (e.g. "LARYNX") where hovering between two letters reveals a thin Aurora Cyan caliper and a mono readout of the tracking value; a slim slider lets the reader adjust letter-spacing live and watch the word breathe. Pure show-off typography. - **Field Notes (§04):** a vertical stack of short dated entries (mono dates, serif bodies), each separated by a scotch rule, each entry sliding up + fading in on scroll (stagger). Treat it like a column, not a card grid. - **Aurora rendering:** layered CSS gradients (no images) — base Ink Black, then a `linear-gradient(98deg, ...)` of Aurora Green/Violet/Cyan with *hard* color stops ~8deg apart, animated by mutating the angle and stop offsets over 24s with a long ease. Composite a `feTurbulence` SVG noise or a tiny tiled PNG-data-URI grain over the *entire* page at 4% opacity, `mix-blend-mode: overlay`. The aurora must always sit dim enough that Page Cream text passes the squint test. - **Links & micro-interactions:** body links get an `underline-draw` in Aurora Green on hover (left-to-right, ~250ms). Focus states are **chamfered** outlines in Aurora Cyan, never rounded. Section numerals shift Bodoni→tint from Cream toward Aurora Violet on hover with a slow color transition. Respect `prefers-reduced-motion`: kill the aurora drift, the path-draw, and the morph FLIP — fall back to static states. - **AVOID:** CTA-heavy layouts, pricing tables, testimonial carousels, stat/number grids, hero buttons, stock photography, rounded "card" UI, pastel gradients, glassmorphic blur panels. This is a publication, not a product page. ## Uniqueness Notes Differentiators from other designs in this portfolio: 1. **Aurora-as-ink, cut into hard diagonal bands.** In a portfolio where 96% of designs use gradients (mostly warm) and aurora-gradient sits at ~1%, this design treats the aurora not as soft ambient glow but as *sharp-edged chromatic ink* — `linear-gradient` with 8-degree hard stops, masked into angular bands, channelled into the binding spine as the page progresses. Nothing else here does cold green-violet-cyan light with knife edges. 2. **A genuinely persistent editorial sidebar as the book's spine.** Sidebar layout is only ~15% of the portfolio and almost never used as a literal *bound spine* with a vertical retro-display wordmark, a §-numbered TOC, a colophon, and a scroll-driven travelling tick. The information architecture mimics a printed literary supplement, not a dashboard. 3. **The morph motif applied to prose editing, not shapes.** "Morph" is ~9% of the portfolio and usually means blobs/shapes. Here it's a FLIP-animated demonstration of an editor cutting a sentence — words physically contracting — which is conceptually wedded to the domain (larynx → voice → writing). 4. **Retro-display Didone (Bodoni Moda) used as a type-foundry specimen sheet**, with an interactive live-kerning caliper in IBM Plex Mono. Retro-display typography is only ~2% of the portfolio; pairing it with a hands-on kerning toy is unique. 5. **Papery near-black, warm cream text, omnipresent fine grain** — deliberately the *opposite* of the corporate-gradient/warm-palette default (93% corporate, 91% warm). It commits to a nocturnal, ruled, ink-on-paper register. Chosen seed/style: **aesthetic: editorial, layout: sidebar, typography: retro-display, palette: aurora-gradient, patterns: morph, imagery: noise-texture, motifs: sharp-angles, tone: professional** Avoided patterns from frequency analysis: did not use `corporate` aesthetic (93%), `centered` layout (93%), `mono`-only typography reflex (94% — mono is present but strictly as UI/machinery), `warm`/`gradient` warm palettes (91%/96% — we use a cold aurora instead), `mysterious-moody` tone default (94% — ours is exacting/professional), and avoided `photography`/`minimal` imagery clichés (66%/68%) in favour of `noise-texture` (~8%).