# Design Language for lower.quest ## Aesthetics and Tone lower.quest is a **pastoral-romantic fever dream rendered in street-style fragments** — a zine made by someone who pressed wildflowers between the pages of a fashion editorial and left it on a fire escape all summer. The site reads as if a 19th-century botanical watercolorist had been commissioned to art-direct a Tokyo streetwear lookbook: soft cerulean washes bleed into the gutters of a broken editorial grid, vintage-grain photographs float unanchored, and EB Garamond italic captions whisper across the negative space like handwriting in the margins of a found diary. The tone is **pastoral-romantic with subcultural grit** — never twee, never pretentious. The romantic is kept honest by the street: distressed textures interrupt clean type, grid columns fall out of register by design, images hover at unexpected angles (1°–4° tilt) as if pinned to a corkboard. The pastoral is kept alive by the palette: the blues are not fashion-magazine cobalt but cloud-lit distance, the color of early morning seen from a tenement window. Mood references: Nan Goldin's *The Ballad of Sexual Dependency* re-imagined by someone who also loved *The Lover* (Marguerite Duras) — color-washed, quietly melancholy, deeply sensory. This site does not sell a product; it creates a state of longing for somewhere you have never been but recognize completely. ## Layout Motifs and Structure The structural vocabulary is **broken-grid editorial** — a 12-column base grid that is systematically disobeyed. Columns are defined but individual elements ignore them, overlapping, offsetting, and colliding in choreographed ways that feel accidental but are precise. **Compositional rules:** - All photography is placed off-grid: images span 7 columns but are offset by 1.5 columns, or span 3 columns and bleed past the margin by 40px. No image ever sits flush on both edges. - Text blocks are narrow (3–4 columns, ~340px) and pinned to unexpected grid anchors — far left, far right, or dead center — creating maximum white-space tension with adjacent images. - Overlapping is mandatory: every section has at least one element that physically overlaps something from the section above or below it, blurring the scrollable unit into a single tapestry. - The hero section is **full-viewport**: a single vintage-grain photograph fills the screen, with the logotype in EB Garamond italic at approximately 7vw, positioned bottom-left at 10% from the left and 12% from the bottom — not centered, not tucked in a corner, but resting where a photographer's signature would be. **Section rhythm (vertical scroll, no horizontal nav, no pagination):** 1. **Vespers** — full-bleed opening photograph, title positioned as described above, one short italic line beneath ("*a field of found things*") 2. **First Light** — 2-column asymmetric text + tilted image, overlapping the hero's bottom edge by 120px 3. **The Fragment** — broken-grid image cluster: 4 photographs in a loose constellation, each tilted 1°–3°, staggered vertically across a 600px horizontal zone 4. **The Letter** — typographic section, pure text, no images, set in a 38-character measure as if excerpted from handwriting 5. **Dusk Registry** — a horizontal scroll band (overflow-x: auto, no scrollbar) of 6 narrow portrait photographs, each 220px wide, separated by 40px gap 6. **The Leaving** — sparse close section: one small image (300px × 380px) floated right, and a single centered italic phrase at 2.4rem **Spatial constants:** - Section padding: min 120px top, max 200px — generous air between acts - Mobile: single column, all images full-width, tilts reduced to 0.5°–1° ## Typography and Palette **Primary font (display, headings, pull-quotes):** `EB Garamond` — weight 400 italic for all titles and display text. The italic is the personality of this site: elegiac, slightly archaic, never aggressive. Headlines at `clamp(2.8rem, 6.5vw, 6.4rem)`. **Secondary font (body, captions, navigation):** `Cormorant Garamond` — weight 300 for body text at 18px / 30px line-height, weight 500 small-caps for section labels and navigation. Small-caps navigation reads as engraving, never as a menu. **Accent font (for pull-quotes and one-line moments):** `Bodoni Moda` — display size only, weight 400 italic, used maximum 3 times per page for single-line statements at `clamp(1.6rem, 3.2vw, 2.8rem)`. The contrast between Bodoni's thick strokes and Garamond's bracketed serifs creates a visible tension, as if two typographers from different centuries were in a correspondence. **All three fonts are available on Google Fonts.** **Palette — Ethereal Blue with Pastoral Undertones:** - `--sky-wash`: `#C8D8E8` — the primary blue, used for tinted section backgrounds and image overlays (30% opacity). Not navy, not cobalt: the pale blue of a clouded morning sky, slightly silver. - `--cerulean-shadow`: `#6B8FA8` — the mid-blue, used for subtle borders, dividers, and image vignettes. Creates atmospheric depth. - `--deep-dusk`: `#2B4A5E` — dark blue for primary text on light backgrounds. Warmer than pure navy, cooler than charcoal. - `--vellum-white`: `#F5F2EC` — the base background: off-white, slightly warm, as if the page were made from hand-pressed cotton rag paper. - `--ash-grey`: `#9A9590` — mid-tone for body text, captions, and secondary UI elements. The color of old pencil marks. - `--bloom-rose`: `#D4A8A0` — the accent warmth: muted rose-terracotta, used only as a small detail color (underlines, hover states, occasional ornamental dot). The pastoral entering the street. - `--grain-shadow`: `#1E2B35` — near-black for the highest-contrast headings and the grain-texture overlay on photographs. **Color rules:** Never use pure black or pure white. The page is always warm (`--vellum-white`) or haze-blue (`--sky-wash`). Text is always `--deep-dusk` or `--ash-grey`. The `--bloom-rose` accent appears no more than 4 times per page. ## Imagery and Motifs **Photography is the soul.** Every image is **vintage-grain film photography** — either scanned from genuine film (warm grain, slight halation) or treated to simulate it: grain overlay at 18–22% opacity using `url(grain.svg)` as a CSS pseudo-element, slight vignette (radial gradient from transparent to `rgba(30,43,53,0.25)`), and a subtle warm-shift filter (`sepia(8%) contrast(1.04) brightness(0.97)`). No digital clarity, no HDR sharpness — all images should look as if they were found in a shoebox. **The 4 image archetypes used across the page:** 1. **Street textiles** — close-up photographs of fabric worn or hanging in urban environments: the sleeve of a denim jacket against a tiled wall, lace pooling on a fire-escape railing. Grain is heavy, focus is shallow. 2. **Pastoral distance** — wide-angle shots of fields, fog, or sky taken on expired film. Color shifts to blue-green, details lost in halation. 3. **Domestic archaeology** — tabletop photography of small found objects: pressed flowers on aged paper, a glass marble, a folded letter. The objects are lit from one side only. 4. **Portrait fragments** — cropped human portraits that show only part of a face, a shoulder, a hand. Never a full face. The human presence is implied, not displayed. **Crystalline motif:** The recurring ornamental system is **fractured-light geometry** — not gemstone facets drawn with hard lines, but refracted-light shapes rendered in CSS: translucent polygons in `--sky-wash` at 20–35% opacity, positioned as background elements behind photography. These are `clip-path: polygon(...)` shapes, not SVGs, and they shimmer on scroll via a slow `transform: scale(1.02)` triggered by the Intersection Observer. They feel like light passing through window glass — crystalline without being cold. **Typography ornaments:** Section transitions are marked by a single centered glyph from the Unicode block: `✦` (U+2726) in `--bloom-rose`, 14px, reducing the visual weight between sections without inserting a full horizontal rule. **No icons, no icon libraries.** All UI affordances are typographic. ## Prompts for Implementation Build lower.quest as a **single scrolling broadsheet** — one long vertical document with no pagination, no tabs, no modals. The experience is reading a handmade zine from cover to cover: you move through it, you do not navigate it. **Critical CSS architecture:** - Use CSS Custom Properties for all palette values (listed above) - The base grid: `display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;` on a max-width container of 1280px - All off-grid placements via `grid-column: 2 / 9` style declarations — never absolute positioning for layout (only for decorative overlaps) - `overflow: hidden` on sections; decorative overlaps achieved via negative margin-top (`margin-top: -120px`) and z-index layering **Photography treatment (CSS-only grain):** ```css .photo-wrap::after { content: ''; position: absolute; inset: 0; background: url('grain.svg') repeat; opacity: 0.2; mix-blend-mode: multiply; pointer-events: none; } ``` The grain SVG is a simple feTurbulence filter element, 200×200px tile. **Scale-hover interaction pattern:** Every photograph responds to hover with: `transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale(1.04) rotate(0deg)` — reducing the tilt to 0° and slightly magnifying. The effect is like lifting a photograph from a table. No opacity changes, no color changes — only the geometry shifts. Duration is deliberately slow (0.6s) to feel contemplative rather than snappy. **Scroll animations (Intersection Observer, no library):** - **Images** fade in from 12px below: `opacity: 0; transform: translateY(12px)` → `opacity: 1; transform: translateY(0)` over 700ms ease-out - **Text blocks** slide in from 8px left: `opacity: 0; transform: translateX(-8px)` → `opacity: 1; transform: translateX(0)` over 600ms ease-out, with a 150ms delay after image siblings - **Crystalline polygon overlays** scale up from 0.94: `transform: scale(0.94)` → `transform: scale(1)` over 1200ms ease — the slowest animation on the page, so they feel like light gradually filling a prism **Horizontal scroll band (Section 5 — Dusk Registry):** ```css .dusk-registry { overflow-x: auto; overflow-y: hidden; display: flex; gap: 40px; padding: 0 80px; scroll-snap-type: x proximity; scrollbar-width: none; } ``` Each portrait image: `scroll-snap-align: start; flex-shrink: 0; width: 220px; height: 320px; object-fit: cover;` **The grain overlay SVG** (inline in `` as a `` block or as `grain.svg`): Filter chain: `feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"` → `feColorMatrix type="saturate" values="0"` → `feBlend in="SourceGraphic" mode="multiply"`. The result is monochrome film grain. **Typography CSS:** - Headlines: `font-family: 'EB Garamond', serif; font-style: italic; font-weight: 400;` - Body: `font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--ash-grey);` - Pull-quotes: `font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 400;` - Section labels: `font-family: 'Cormorant Garamond', serif; font-variant: small-caps; font-weight: 500; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--ash-grey);` **No CTAs, no pricing, no statistics grids.** The only interactive affordance beyond hover is the horizontal scroll band. lower.quest does not ask anything of the visitor — it offers a reverie. ## Uniqueness Notes 1. **Broken-grid with tilt as choreography, not chaos.** Most registry designs that use broken-grid or asymmetric layouts treat the grid-break as a single bold gesture (one oversized element, one bleed). lower.quest uses *graduated tilt* — every photograph is independently tilted 1°–4°, and the constellation-section (Fragment) makes that tilt the entire compositional subject. No other design in the corpus treats image tilt as a recurring systemic motif rather than a one-time effect. 2. **The pastoral-street paradox as a resolved tension, not an unresolved clash.** The seed combines street-style aesthetic with pastoral-romantic tone — which could produce incoherence. lower.quest resolves this by treating the two registers as chronologically offset: the *images* are pastoral (fields, textiles, distance) while the *layout logic* is street (fragments, overlaps, the corkboard aesthetic of physical zine culture). The palette is the negotiated middle: ethereal-blue occupies both registers — it is the sky over a field and the cool light of a grey urban morning. 3. **Crystalline motifs as atmospheric light, not decorative geometry.** The frequency analysis shows crystalline is used at only 4% in the corpus — and where it appears, it tends to mean angular icon-systems or gemstone-graphic elements. lower.quest uses crystalline to mean *refracted light*: the polygonal shapes are translucent, positioned behind photographs, and animated slowly enough that the visitor might not consciously register them as design elements. They contribute to mood without announcing themselves. 4. **Scale-hover as contemplative gesture.** The corpus pattern `scale-hover` typically manifests as a quick, snappy transformation (0.2–0.3s). lower.quest's implementation is deliberately slow (0.6s), which changes the emotional register entirely: the hover response feels like picking up a photograph rather than clicking a button. Combined with the tilt-to-zero behavior, it creates a specific fantasy of handling physical objects — which anchors the vintage-photography imagery in a felt, tactile experience. 5. **Three-serif typographic system in a single register.** Most designs use one serif paired with a sans. lower.quest uses three serif families (EB Garamond, Cormorant Garamond, Bodoni Moda), all italic or small-caps, none paired with sans. This creates a consistent historical depth across the page rather than the modernist contrast most designs rely on. The palette's `--ash-grey` body text keeps the three-serif system from feeling pompous. **Planned seed:** aesthetic: street-style, layout: broken-grid, typography: garamond-classic, palette: ethereal-blue, patterns: scale-hover, imagery: vintage-photography, motifs: crystalline, tone: pastoral-romantic **Avoided patterns (from frequency analysis):** photography (90% — already overused, distinguished here by vintage-grain treatment and specific archetype system rather than generic photography), warm palette (dominant in corpus — replaced by ethereal-blue with a single warm accent), scroll-reveal as primary animation (ubiquitous — used but subordinated to the tilt/hover system which is the primary experience).