# Design Language for lrx.st ## Aesthetics and Tone **lrx.st** is pronounced as a breath — a compression of "larex" or "lyrics" or "lux" or something that resists pinning down. The domain sits at the intersection of abbreviation and mystery, the way a calligrapher's monogram compresses a full name into three letters pressed into wax. This is a site that does not explain itself immediately. It reveals itself as the visitor descends, like a lithograph emerging in a chemical bath — image materializing from fog. The aesthetic is **surreal-calm**: not Salvador Dalí's screaming watches, but the quieter surrealism of Giorgio de Chirico's long afternoon shadows falling across empty piazzas, of René Magritte's pipe on a white ground, of Paul Delvaux's moonlit women moving through classical ruins as though sleepwalking. The surrealism here is **atmospheric and structural**, not pyrotechnic — it manifests in the spatial relationships between elements: text that appears to float slightly above its backing, sections that slice through the viewport at 7° angles, a color palette that is warm at the horizon and cooler at altitude. The mood is **dusk in a museum that has just closed** — amber light leaking through tall windows, long shadows, the particular silence of a space that holds important things. The visitor is the last person in the building. They are allowed to linger. Tone: calm, unhurried, slightly mysterious. Never urgent. Never loud. The site does not ask for anything; it offers itself as an object to be examined, like a found object in a vitrine. ## Layout Motifs and Structure The page is built on **diagonal-sections** — each content leaf is cut at a consistent 7° angle from the horizontal, so section boundaries are oblique slashes rather than horizontal rules. The angle is held constant throughout the page; sections do not vary their cut angle, which creates a rhythm: the visitor's eye knows the cut is coming, and the cut always arrives at 7°. The diagonal slash is drawn as a 1 px line in `#E8866A` — the warmest ember of the sunset palette — and appears at each section boundary like a crease in a photograph. **Macro structure (top to bottom, five leaves):** 1. **Leaf 1 — The Monogram.** Full viewport, dark ground (`#1C1410`). The three letters `LRX` are set in Cormorant Garamond at 28–34vw, italic, gold (`#D4A84B`), positioned asymmetrically: the L anchors to the left margin at 8% viewport width, the R drifts to center, the X bleeds off the right edge by 12%. Below, in the smallest weight of Cormorant Garamond (300, roman, 1.1rem, tracked at 0.32em in capitals), a single phrase: `ST`. The two pieces — LRX above, ST below — are separated by exactly one golden-ratio unit of space (61.8% of the display text's cap-height). The leaf fades in over 1.8 s from full opacity black, the letters materializing from the ground the way a watermark appears when paper is held to light. 2. **Leaf 2 — The Diagonal Cut.** The 7° slash enters from the lower-left at a `#2C1F14` dark-warm color, rising to the upper-right. Above the slash: the dark ground continues. Below the slash: a field of `#F2C98A` — warm amber, the color of late-afternoon light on sandstone. A single column of text sits in the amber field, left-aligned, set in Cormorant Garamond 400 at 1.25rem / 2em line-height. The text is not marketing copy — it is a fragment, a statement of intent written in the present tense, something the visitor reads as if finding a page torn from a journal. 3. **Leaf 3 — The Vitrine.** Background `#F5E4C8` (pale vellum). A 3×1 horizontal arrangement of three framed objects — each frame is a thin `#D4A84B` border (1.5 px), 320×400 px, containing a mixed-media composite: photographic grain underlayer at 15% opacity, a hand-SVG line-drawing of an abstract form at full opacity, and a wash of warm color (one per frame: `#E8866A`, `#D4A84B`, `#C47E52`) at 30% opacity as a middle layer. The frames sit on the page as if on a gallery shelf — slight drop-shadow, `box-shadow: 0 4px 32px rgba(28,20,16,0.18)`. On scroll-enter, each frame slides in from below by 24 px over 0.9 s with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`, staggered by 180 ms. 4. **Leaf 4 — The Archive.** The diagonal slash returns, same 7° angle. Background above the slash: `#2C1F14`. Below: `#F2C98A`. A **progressive-disclosure** accordion structure sits in the lower (amber) field — five entries, each collapsed to a single line of Cormorant Garamond italic at 1.1rem, with a `+` in gold at the right edge. On click, the entry expands to reveal a longer text passage set in IM Fell English italic at 0.95rem, with a left border in `#E8866A`. The expansion animates at `max-height` transition over 0.4 s with `ease-out`. Only one entry can be open at a time; opening a new entry closes the previous with a 0.2 s delay. 5. **Leaf 5 — The Colophon.** Full viewport, very dark (`#0E0A07`). Centered in the viewport, set in Cormorant Garamond 300 italic at 1rem, a single line in `#D4A84B`. Below it, the domain `lrx.st` in capitals, tracked at 0.6em, size 0.85rem, `#8A7A6A`. No footer links, no social icons, no copyright notice. The page ends as it began: with letters on a dark ground, nothing else. **Spatial logic:** Each leaf is `min-height: 100vh`. The diagonal cuts are implemented as CSS `clip-path: polygon()` on pseudo-elements, not as angled borders, so they remain crisp at all viewport sizes. The leaf sequence compresses to a single-column stack on mobile, with the diagonal cuts reduced to 4° to prevent text overflow. ## Typography and Palette **Typography is garamond-classic** — the full page is set in two families, both on Google Fonts, chosen because they inhabit the same historical moment (the 16th-century French Renaissance) but occupy different emotional registers. - **Display and body: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**, the primary family. Used at five weights: 300 (light) for subtext and labels, 400 (regular) for body text, 500 (medium) for section intros, 600 (semi-bold) for callout lines, 700 (bold italic) for the monogram display. The italic cut is used as liberally as the roman — italic is not emphasis here, it is register, the way a journal entry is different from a stone inscription. Optical sizing via `font-optical-sizing: auto`. Set at `font-feature-settings: "onum" 1, "liga" 1, "calt" 1` to activate old-style numerals and ligatures. - **Accent and reveal text: [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English)**, italic only, used exclusively for the accordion reveal passages and for the single colophon line. This is the typeface that was cast from punches cut in the 1670s and digitized from historical specimens — it carries visible ink-trap irregularities and slightly uneven letterforms that read as age and authenticity. Used at 0.95–1.05rem / 1.9em line-height only. Never at display sizes. **Palette — sunset-warm:** - `#0E0A07` — near-black, the color of charcoal at the bottom of a grate; used for deepest backgrounds - `#1C1410` — dark warm brown, like mahogany in shadow; primary dark leaf background - `#2C1F14` — rich espresso brown; secondary dark surfaces and diagonal cut fills - `#8A7A6A` — ash-tan; secondary text on dark backgrounds, labels, the `.st` descriptor - `#C47E52` — burnt sienna; tertiary accent, the warmest shadow tone in the mixed-media frames - `#D4A84B` — old gold; the primary accent — used for the monogram, gold borders, the `+` expanders - `#E8866A` — terracotta ember; the diagonal cut lines, the accordion left-border reveals, hover states - `#F2C98A` — warm amber; the lit fields below diagonal cuts, the primary light surface - `#F5E4C8` — vellum; the palest light surface, Leaf 3 background, the vitrine ground **Color temperature logic:** The palette runs from near-black at the base to pale vellum at the top of the warm register — it is a compressed sunset. There are no cool colors. The closest thing to a neutral is `#8A7A6A`, which still reads warm. Background alternation follows: dark → lit → pale → dark → deepest, a five-beat rhythm that mirrors the five-leaf structure. ## Imagery and Motifs Imagery is **mixed-media** — each visual asset is built from three layers composited in the browser using CSS `mix-blend-mode` and layered `background-image` properties: 1. **Photographic grain ground** (lowest layer): a fine film grain SVG filter (`feTurbulence baseFrequency="0.65" numOctaves="3"` + `feColorMatrix` desaturated to warm gray) applied as a texture overlay at 12–18% opacity. This is not a separate image file — it is a CSS SVG filter rendered in real time. On dark leaves it reads as warm analog noise; on the amber fields it reads as aged paper grain. 2. **Abstract line-drawing** (middle layer): hand-authored SVGs — one per frame in the Vitrine, one decorative element per dark leaf. Each SVG is a single continuous stroke (no fills) drawn with `stroke="#D4A84B"` at `stroke-width="1.2"` and `stroke-linecap="round"`. The forms are semi-abstract: a compressed spiral, an irregular ovoid, a set of three parallel arcs with varying spacing. These are authored as `` elements with `stroke-dasharray` / `stroke-dashoffset` set to the full path length, then animated to `stroke-dashoffset: 0` on scroll-enter via IntersectionObserver over 2.4 s with `ease-in-out`. The line draws itself. 3. **Color wash** (top layer, 25–35% opacity): a single `radial-gradient` in the warm-to-amber range, centered off-axis (typically at 70% x, 30% y), applied over the line-drawing layer via `mix-blend-mode: multiply`. This colors the line without obscuring it, and shifts the hue of the grain beneath it, creating the characteristic mixed-media warmth. **Motifs — layered-depth:** - **The diagonal slash** is the primary structural motif — it recurs at every section boundary, always at 7°, always in `#E8866A`. It is the visual signature of the site, the equivalent of a publisher's colophon device. - **The thin gold border** (1.5 px, `#D4A84B`) appears as a frame device — around the vitrine objects, as a rule beneath section titles, as the `+` expander in the accordion. - **Depth illusion:** Each dark leaf carries a subtle `background: radial-gradient(ellipse at 60% 40%, #2C1F14 0%, #0E0A07 72%)`, so the center of each dark field is slightly lighter than the edges — the impression of a single light source somewhere above and to the right, like afternoon light through a high window. - **Text shadows on the monogram:** `text-shadow: 0 2px 48px rgba(212,168,75,0.22)` — a barely perceptible golden aura around the display letters, the suggestion of light rather than light itself. ## Prompts for Implementation Build lrx.st as a **five-leaf descent into a private archive** — the experience of arriving at a building that does not announce itself, finding the door unlocked, and moving through rooms in which meaningful objects have been arranged without labels. The visitor is trusted to look. Nothing shouts. Nothing moves without being called. **Structural implementation:** - Five `
` elements, each `min-height: 100vh`, with `overflow: hidden` to contain the diagonal cuts. The diagonal is implemented as a `::before` pseudo-element on each section boundary with `clip-path: polygon(0 100%, 100% calc(100% - 7vw), 100% 100%)` — the exact polygon values vary by viewport so the angle stays constant at 7° regardless of screen width. - Smooth scroll via `scroll-behavior: smooth` on ``, with `scroll-snap-type: y mandatory` and `scroll-snap-align: start` on each section. This creates a page that reads as a sequence of full-screen moments rather than a continuous stream. - Navigation: none visible. The only navigational affordance is a small fixed dot-cluster in the lower-right corner — five dots, one per leaf, `width: 6px; height: 6px; border-radius: 50%`, the active dot filled with `#D4A84B`, inactive dots with `#8A7A6A` at 40% opacity. Clicking a dot scrolls to that leaf. The dot cluster fades in after 3 s. **Animation philosophy:** - All animations are `prefers-reduced-motion` respecting: if `prefers-reduced-motion: reduce`, all transitions collapse to instant. - Entrance animations use IntersectionObserver with `threshold: 0.2` — elements animate in when 20% of them is visible, not on page load. - No looping animations. No elements move without user scroll triggering them. The page is still when not being navigated. - The monogram fade-in (Leaf 1) is the only time-delayed animation — 1.8 s total, beginning 0.3 s after page load, using `@keyframes` with `opacity: 0 → 1` and `letter-spacing: 0.08em → 0` (a subtle tracking collapse that reads as the letters arriving from a distance). **Progressive disclosure (Leaf 4 accordion):** - Use `
` / `` as the semantic base, then override the default triangle with the gold `+` via CSS `list-style: none` and a `::after` pseudo-element on `summary`. - The `+` rotates to `×` on open via `transform: rotate(45deg)` over 0.3 s. - Accordion entries carry their content in `
` with `overflow: hidden; max-height: 0` collapsed and `max-height: 40rem` expanded, transitioned over 0.4 s `ease-out`. - Only one open at a time: use a custom `
` group polyfill that closes siblings on open. **Mixed-media compositing:** - The grain filter is a single `` element with `id="grain-filter"` placed off-screen at `position: absolute; width: 0; height: 0`, defining a `` that is applied to all `.leaf-dark` elements via `filter: url(#grain)`. - The SVG line drawings are inline SVG elements, not `` tags, so the `stroke-dashoffset` animation can be applied directly via CSS custom properties set by JavaScript on scroll-enter. - The color wash overlay is a `
` inside each frame, positioned `absolute; inset: 0`, with `pointer-events: none` and `mix-blend-mode: multiply`. **Do not implement:** navigation menus, hamburger menus, search bars, sticky headers, hero CTAs, pricing tables, testimonial carousels, feature grids, social proof sections, newsletter modals, cookie banners, loading screens, progress bars, tooltips on hover, popover menus, lightbox galleries, infinite scroll, lazy-load spinners, or any element that interrupts the stillness of the descent. **Do not use:** white backgrounds, cool colors, sans-serif typefaces outside of the UI chrome (dot navigation, any labels smaller than 0.7rem that are genuinely labels rather than content), drop shadows larger than `32px blur`, borders thicker than `2px`, uppercase text at sizes above 1.2rem. ## Uniqueness Notes 1. **Surreal aesthetic used at 0% frequency in current registry.** The frequency report shows `surreal` at 0% — no other design in the registry has used this aesthetic category. lrx.st is the first site to build on the surreal tradition (specifically de Chirico / Delvaux / Magritte atmospheric surrealism rather than Dalí maximalism), paired with a garamond-classic typographic system. This combination — surreal + garamond — appears in zero other designs. 2. **Diagonal-sections at 2% frequency, implemented as scroll-snap sequence rather than scrolling cuts.** Other designs using diagonal cuts typically apply them as decorative separators within a normal scroll. lrx.st applies `scroll-snap-type: y mandatory` so the diagonal cuts are experienced as *page-turns* — the visitor snaps from leaf to leaf, and the cut is the crease between leaves, not decoration within a leaf. This structural use of the diagonal (as a page-crease rather than a divider) is not present in any other design in the registry. 3. **Mixed-media compositing done entirely in CSS/SVG with zero external image assets.** The frequency report shows `mixed-media` at 3%, but all three prior uses rely on raster images or canvas rendering. lrx.st composes its mixed-media assets from a CSS grain SVG filter, inline SVG path drawings, and CSS radial-gradient color washes — the entire visual system is generated in the browser from markup. No `` tags exist in the five visual frames. This is a structural differentiator: the site loads in a single HTML file. 4. **Self-drawing SVG paths as the primary reveal animation.** `stroke-dashoffset` path-drawing is uncommon in the registry (not appearing in any of the reference designs read); using it as the *primary* content reveal — the thing the visitor watches happen as each leaf enters — rather than as a decorative flourish is distinct. The line draws itself as proof that the visitor has arrived at that moment in the descent. 5. **Seed documented:** `aesthetic: surreal, layout: diagonal-sections, typography: garamond-classic, palette: sunset-warm, patterns: progressive-disclosure, imagery: mixed-media, motifs: layered-depth, tone: calm-serene`. Avoided patterns from frequency analysis: `hand-drawn` (77% — heavily overused), `space-grotesk` (multiple uses in reference designs), `full-bleed-hero` (common across registry), `card-grid` layouts, `bold-confident` tone (pervasive). Preferred underused patterns: `surreal` (0%), `diagonal-sections` (2%), `sunset-warm` palette (2%), `IM Fell English` accent typeface (0% in registry).