# Design Language for thesecond.world ## Aesthetics and Tone thesecond.world is a **surreal cartography of the place you go when you are not here** — a calm, lucid catalogue of a parallel dawn that runs underneath ordinary life like groundwater. The premise: every person carries a *second world*, a low-resolution twin of this one, glimpsed in the half-second before sleep, in the corner of a train window, in the smell of a room you have never entered. This site is that world's field guide, written from inside it. The tone is **lucid-dream documentary, not nightmare**: unhurried, slightly amused, faintly homesick. Think René Magritte's deadpan impossibilities, Remedios Varo's alchemical interiors, Giorgio de Chirico's empty noon plazas, the muted unreality of a Tarkovsky long take, and the soft administrative absurdity of a museum that catalogues things that cannot exist. Nothing here jump-scares; the unease is the gentle kind — a staircase that loops, a moon that is also a door, a horizon hung at the wrong height. The page should feel like waking up *into* a dream rather than out of one: everything is lit, legible, and quietly wrong. ## Layout Motifs and Structure The site is a **single vertical descent through seven "strata" of the second world**, but the descent is *broken-grid* and *layered-depth* — never a tidy column. The governing metaphor is **a stack of glass plates each holding one impossible scene**, viewed from slightly above so the lower plates show through. Concretely: - A **fixed "horizon line"** — a single 1px luminous rule — sits at a deliberately wrong vertical position (61.8% of viewport height, never the middle). All seven strata are composed *relative to this line*: some scenes float above it, some hang below it like reflections, some pierce it. Scrolling does not move the horizon; it moves the *world* past the horizon, so the line behaves like a slot through which a different reality is fed. - Each stratum is a **broken 12-column grid** where the primary scene-block deliberately straddles the gutter — text set in a 5-column measure pinned to the left margin in odd strata, pinned to the right in even strata, with a large negative-space "sky" occupying the rest. No two strata align their grid origin. - **Layered depth via three z-planes**: (1) a far plane holding a single slow-drifting horizon object (the moon-door, a distant colonnade, a hanging staircase) at 30% opacity and heavy blur; (2) a mid plane holding the stratum's "exhibit" — a framed impossible diagram; (3) a near plane holding the prose and a thin catalogue number. Mouse movement parallaxes these *very slightly* (max 8px on far, 3px on mid, 0 on near) — restrained, not the showy cursor-follow seen everywhere. - **No top navigation, no logo lockup, no hamburger, no footer with link columns.** Navigation is a **vertical "depth gauge"** down the right edge: seven short tick-marks like a barometer scale, labelled STRATUM I … VII in tiny caps; the current stratum's tick extends into a longer line. That is the entire chrome. - The final stratum (VII) **does not end** — it loops the horizon line back to the top with a slow fade, so the descent is revealed to be circular. There is no call-to-action panel, no pricing, no testimonial wall, no stat grid, no email capture, no contact form. ## Typography and Palette **Type system (Google Fonts only):** - **Display / scene titles — `Fraunces`** (variable, optical-size axis pushed high, weights 300 & 500, occasional italic). Fraunces' wobbly, slightly molten serifs and exaggerated optical sizing give titles the look of letterpress seen underwater — authoritative but dreaming. Titles are set large (clamp ~2.6rem–5rem), tight tracking (-0.01em), and frequently break across two lines with the second line indented to a non-obvious tab stop. - **Body / catalogue prose — `Spectral`** (weights 300 & 400, with 300 italic). A high-contrast screen serif with calm, even color and a literary cadence — reads like the wall text in a museum that is taking itself a little too seriously. Body measure stays under 62 characters. Generous leading (1.7). - **Micro-labels, catalogue numbers, depth-gauge ticks — `IBM Plex Mono`** (weight 400, letter-spacing 0.18em, uppercase). Used sparingly — only for the stratum numerals (e.g. `STRATUM IV — 04 / 07`), specimen tags, and the tiny "filed under:" lines. This is the one nod to the corpus's mono convention, but kept to <2% of on-screen type so it reads as administrative stamping, not tech-aesthetic. **Palette — "muted jewel dusk over bone":** - `#0E1726` — *abyssal slate*: the base ground, a blue so dark it is almost ink but never pure black. Dominant. - `#1C2E3F` — *deep harbour*: secondary panels, the "below the horizon" reflection zones. - `#E8E2D4` — *bone parchment*: primary text on dark, and the rare inverted stratum's ground. Warm, dry, paper-like. - `#C3A07A` — *tarnished brass*: the horizon line, depth-gauge ticks, frame rules around exhibits, catalogue numerals. The single metallic. - `#7E6FA8` — *dusk amethyst*: the dream-color — used for the far-plane horizon objects, hairline glows, and the loop-transition wash. Muted, never neon. - `#9FB7AE` — *verdigris haze*: a cool sage accent for diagram linework and the occasional botanical/architectural fleck. Quiet complement to the brass. - `#D6584E` — *signal vermilion*: used at most twice in the entire site — a single small element per appearance (a door left ajar, the dot marking "you are here" on an impossible map). It is the only saturated hue and it must feel like an alarm someone forgot to turn off. Gradients, if any, are *atmospheric only* — a 4% vertical haze from harbour to slate behind each stratum — never the loud diagonal sunset gradient the corpus overuses. ## Imagery and Motifs The visual core is a set of **seven hand-built SVG "impossible diagrams,"** each presented like a plate in an 18th-century natural-philosophy folio — thin brass frame, a mono caption tag, a faint registration-mark in one corner — but the *subject* is paradoxical: 1. **The Half-Second Atlas** — a map of a coastline that is also a sleeping face in profile; isobars double as eyelashes. A single vermilion dot reads `you are (approximately) here`. 2. **The Looping Stair** — a Penrose-style staircase rendered in clean isometric brass lines, but every fourth step is drawn as a still pool reflecting the step above it. 3. **The Moon-Door** — a perfect circle, half rendered as a pitted lunar surface, half as a panelled wooden door with a verdigris handle; it floats on the far plane of nearly every stratum, slowly rotating. 4. **The Hung Horizon** — a cross-section showing the horizon line as a physical wire from which small worlds dangle like laundry: a chair, a window-frame, a closed eye. 5. **The Inventory of Rooms You Haven't Entered** — a grid of 24 tiny floor-plan thumbnails, each subtly impossible (a corridor that returns to its start, a room with four north walls), drawn in verdigris hairline. 6. **The Weather of Forgetting** — a meteorological chart whose legend lists "light nostalgia," "scattered déjà vu," "fog of names." Pure brass-on-slate linework with amethyst pressure fronts. 7. **The Return Diagram** — a single ascending spiral that, on close reading, is the same line as stratum I's coastline, closing the loop. Supporting motifs: **registration crosses and folio marginalia** in tarnished brass at scene corners; **a faint dotted "fold line"** running through the middle of each plate as if the world were a printed sheet about to be creased; **drifting dust-mote particles** (max ~30 on screen, amethyst, near-invisible) that move *against* the parallax to suggest the air has its own current; **hand-set Roman numerals** oversized and ghosted at 6% opacity behind each stratum's prose. No stock photography, no 3D renders, no glassmorphic cards, no gradient-mesh blobs. ## Prompts for Implementation Build thesecond.world as **one HTML document, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics, no cookie banner, no chatbot. The whole thing is a ~90-second contemplative descent and then a quiet loop. **Structure & storytelling:** - Open on a near-empty viewport: abyssal-slate ground, the brass horizon line drawn left-to-right with an SVG path-draw animation (~1.4s, ease-out), the title *the second world* in Fraunces fading up *below* the line as if surfacing. A single line of Spectral italic: *"a field guide to the place you go when you are not here."* Beneath, in Plex Mono: `BEGIN DESCENT ↓`. - As the reader scrolls, the *world* moves past the fixed horizon. Each of the seven strata pins for the height of one viewport, its impossible-diagram plate doing a slow scroll-triggered reveal: brass frame draws itself (path-draw SVG), then the diagram's internal linework draws in staggered passes (stagger ~80ms between groups), then the prose fades up with a gentle 12px rise. Use spring-eased transforms, but *slow* springs (low stiffness, high damping) — this world is heavy, dreamlike, never bouncy. - Mouse parallax is deliberately tiny (far plane 8px, mid 3px, near 0) — restraint is the point; do **not** do a flashy cursor-follow halo. - The depth-gauge on the right edge updates its long tick as each stratum enters; clicking a tick smooth-scrolls there. Ticks are Plex Mono labelled. - Stratum transitions: between strata the background does a 4% vertical haze shift (slate ↔ harbour). One stratum (IV — The Hung Horizon) **inverts**: bone-parchment ground, slate text, brass unchanged — a single "daylight" room in the dream. The inversion should feel like a held breath. - Stratum VII ends with *The Return Diagram* spiral completing, then the entire viewport does a slow amethyst wash (1.6s) and resets scroll to stratum I with the horizon line redrawing — the descent is a circle. A tiny Plex Mono line acknowledges it: `you have been here before.` **Micro-details:** dust-mote particle field on a `` behind everything (sparse, amethyst, drifting against parallax); ghosted oversized Roman numeral per stratum (CSS, 6% opacity, behind prose); dotted "fold line" per plate (SVG dash); registration crosses at plate corners; the vermilion element appears exactly twice (stratum I's "you are here" dot, stratum III's ajar door) and never elsewhere. Respect `prefers-reduced-motion` by replacing all path-draws and parallax with simple opacity fades. **Forbidden:** CTA panels, pricing tables, "as seen in" logo walls, testimonial carousels, stat/counter grids, email-capture popups, contact forms, FAQ accordions, hero buttons, hamburger menus, top navbars, footer link columns, social-proof badges. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **A fixed wrong-height horizon line as the structural spine.** No other site composes every section *relative to a single immovable luminous rule placed at 61.8% viewport height* and treats scrolling as feeding a different world through that slot. The layout is broken-grid + layered-depth organized around an absent center, not the corpus-standard centered or card-grid composition. 2. **Surreal aesthetic done as calm museum documentary, not nightmare or vaporwave.** Surreal is only ~8% of the corpus and usually loud/glitchy/neon; here it is hushed, lucid, folio-styled — Magritte's deadpan rather than horror. Tone collapses the rare *dreamy-ethereal* with *scholarly-intellectual* (museum-wall-text voice) — a pairing essentially absent elsewhere. 3. **A palette of muted jewel-dusk over bone with exactly one saturated hue used exactly twice.** Rejects the 98%-warm / 93%-gradient corpus convention: the dominant is near-black blue, the only metallic is tarnished brass, the dream-color is a *muted* amethyst (never neon), and signal vermilion is rationed to two single elements site-wide. 4. **Seven bespoke "impossible diagrams" as the entire imagery program** — no photography (98% of corpus), no glassmorphic cards (85%), no gradient-mesh blobs. SVG natural-philosophy plates whose subjects are paradoxes (a coastline that is a sleeping face, Penrose stairs with reflecting pools, a meteorology of forgetting). 5. **The site loops instead of ending** — the final diagram is literally the same line as the first, the page resets the descent, and a Plex Mono line tells you so. No closing CTA, no funnel terminus; the structure itself is the message. Avoided overused patterns flagged by frequency analysis: hand-drawn (94%), glassmorphism (85%), card-grid layout (92%), full-bleed (85%), centered (80%), warm palette (98%), gradient palette (93%), photography imagery (98%), cursor-follow (89%), heavy parallax (89%), bouncy spring (83%), magnetic (79%) — all either dropped entirely or down-tuned to near-imperceptible restraint. Embraced underused choices: surreal aesthetic (~8%), layered-depth + broken-grid layout (~13% / ~12%), midnight-blue / jewel-tones palette (~8% / ~3%), serif-revival typography via Fraunces + Spectral (~17%), star-celestial / crystalline-adjacent motifs reframed as folio plates (~5–7%). Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: layered-depth (broken-grid), typography: serif-revival, palette: midnight-blue (jewel-tones, muted), patterns: path-draw-svg + stagger + spring (slow), imagery: custom-illustration (impossible diagrams), motifs: floating-elements + star-celestial, tone: dreamy-ethereal + scholarly-intellectual.*