# Design Language for mores.dev ## Aesthetics and Tone mores.dev is a **surreal field-museum of the unwritten** — a dreamlike institute that collects, displays, and quietly interrogates the invisible rules people obey without ever having read them: who speaks first in a meeting, which fork, how close to stand, when to laugh, what a silence means. "Mores" are the soft laws of a community; this site renders them as **specimens floating in an impossible gallery** — half natural-history diorama, half lucid dream. The aesthetic is **surreal dreamscape executed with curatorial restraint**. Not the loud, melting-clock kind of surrealism; the *quiet* kind — Magritte's daylight, Leonora Carrington's patient strangeness, the De Chirico arcade at the hour when shadows lengthen but the sun hasn't moved. Things are rendered precisely, lit cleanly, and then placed somewhere they cannot be: a handshake suspended mid-air with no hands, a queue of nothing standing in a doorway, a dinner table set for a meal that is only etiquette. The strangeness is in the *placement and scale*, never in the rendering quality. Tone: **mysterious-moody but warm underneath** — the hush of a museum after closing, lit by a single conservator's lamp. Wry, observant, never cynical. The voice is that of a docent who finds human convention genuinely tender and slightly absurd at once. Everything is captioned the way a museum captions things: small serif label, accession number, a sentence of provenance. The user is a late-night visitor who has the whole wing to themselves. ## Layout Motifs and Structure The site is a **single horizontal procession through seven "halls"** — `horizontal-scroll` as the spine — but it never *feels* like a slider, because each hall is a full-bleed surreal *room* with its own deep `layered-depth` (a painted backdrop plane, a mid-distance specimen plane, a foreground vitrine-glass plane), and the scroll feels like *walking the gallery wall*, left to right, the way you'd pace a long museum corridor. On narrow viewports the procession reflows to a vertical descent down the same seven halls — the rooms stack instead of queueing. - **No top nav, no hamburger, no logo lockup, no footer bar.** Navigation is a **thin brass floor-line** running along the bottom 4% of every hall — seven small engraved markers on it (I·II·III·IV·V·VI·VII), like the inlaid plaques in a real museum floor. The active marker glows the warm lamp-amber; the others are dim engraved bronze. Clicking glides the procession to that hall. - **Each hall = one specimen + one wall label.** The specimen sits dead-center-ish but deliberately *slightly wrong* in placement: too high, too low, casting a shadow in a direction the light doesn't justify. The wall label is always lower-left, museum-standard: hairline rule, accession code (`MORES.001 — “First Word”`), one sentence of provenance, one sentence of the unwritten rule it embodies. - **Negative space is the medium.** Each hall is mostly empty floor and empty wall — `ma-negative-space` taken seriously. The single specimen carries the room. No grids of cards, no bento, no columns of features. - **An optional eighth "room" — the Reading Room** — appears only if you scroll *past* Hall VII: a quiet alcove with a single floating open book, pages turning by themselves, where the project's plain-language statement lives as flowing prose on the recto page. No form, no signup — just the book. - **Inter-hall transitions** are *doorways*: a tall thin rectangle of darker plane that the procession passes "through," with a half-second of near-black and the faint sound-design cue of a footstep on stone (audio strictly opt-in, off by default, toggled by a tiny lamp icon on the brass floor-line). ## Typography and Palette **Type system (Google Fonts only):** - **Wall-label & body serif:** `Spectral` (weights 300, 400, 500; italic for provenance lines). Spectral is a screen-bred serif with the calm authority of museum signage — slightly condensed, low contrast, reads quietly at small sizes. All accession labels, provenance sentences, and the Reading Room prose are set in Spectral. Body at 18px / 1.65, labels at 13px / 1.5 with `letter-spacing: 0.01em`. - **Hall titles & the institute wordmark:** `Cormorant Garamond` (weight 300, occasionally 500), set *large and airy* — a hall title like “THE FIRST WORD” spans 9–12vw, light weight, generous tracking (`0.08em`), all-caps, in a near-translucent ivory so it reads like a title *painted on the wall*, not a banner. This is the only display face. - **Accession codes, the brass floor markers, audio toggle, and any technical micro-text:** `IBM Plex Mono` (weight 400), 11–12px, tracked `0.06em`, uppercase. The mono is the "institution's catalog system" — the cold administrative counterpoint to all the dream-soft serif. It appears *only* in tiny doses (codes, roman numerals rendered as `I`/`II`, the toggle label). **Palette — "gallery at the closing hour":** - `#0E0D14` — **midnight vestibule** — the deepest backdrop plane, the doorway darkness, the near-black of transitions. Cool, almost violet-black. - `#1C1B26` — **shadowed wall** — the standard hall wall plane; midnight-blue-grey, the color of a museum room with the overheads off. - `#E9E2D0` — **conservator ivory** — the primary text/ivory: wall-label paper, the painted hall titles, the Reading Room pages. Warm, slightly aged, never pure white. - `#C8973F` — **lamp amber** — the single warm light source: the active floor marker, the lamp icon, hairline rules under labels, the glow that pools beneath each specimen. Used *sparingly* — it's the one warm thing in a cool room. - `#7E8AA0` — **dust-blue** — mid-distance haze, the color of far specimens, dimmed text, the De Chirico-shadow tint. The "atmospheric perspective" color. - `#5B4636` — **engraved bronze** — inactive floor markers, frame edges, the dim metalwork. A dulled, unlit brass. - `#3A2E44` — **bruised plum** — rare accent for one or two specimens that need a non-amber warmth (a velvet rope, a curtain). Used at most twice site-wide. Contrast is deliberately *low-key* — this is a dim room, not a bright one — but ivory-on-shadowed-wall stays legible. Texture: a fine `noise-texture` grain (3–4% opacity) over everything, like the grain of a slightly underexposed photograph of a real gallery. ## Imagery and Motifs Every specimen is a **custom SVG + CSS line-and-wash illustration** (no photography), rendered in the precise museum-diorama style — clean confident outlines, soft directional wash, a single committed shadow — then *placed surreally*. One specimen per hall: - **Hall I — “The First Word.”** A speech bubble, classic comic-strip shape, rendered as if cast in bronze and mounted on a museum stand — but empty inside, and floating four inches above its plinth, casting a shadow on the wall instead of the floor. (The rule: someone always speaks first; the room decides who.) - **Hall II — “The Correct Distance.”** Two faint chalk outlines on the gallery floor, the kind police draw, but person-shaped and standing — exactly one arm's length apart. A brass measuring rod hovers between them, unsupported. (The rule: how close is too close.) - **Hall III — “The Set Table.”** A long dining table seen in steep `De Chirico` perspective, perfectly laid — but the chairs face away from it, and one place setting floats six inches above the cloth. The forks are arranged in an order no one was taught but everyone follows. (The rule: which fork, when.) - **Hall IV — “The Queue.”** A doorway with a velvet rope (the bruised-plum accent) and a worn path on the floor *of a line that is standing there* — visible only as compression in the carpet pile and seven small amber floor-glows where invisible feet rest. (The rule: you do not cut.) - **Hall V — “The Laugh.”** A sound-wave, drawn as an elegant engraved curve on a brass plaque, frozen mid-oscillation — and beside it, a second, fainter wave that *almost* matches: the courtesy laugh, rendered in dust-blue. (The rule: laugh on cue, just slightly less.) - **Hall VI — “The Silence.”** An empty picture frame on the wall, very large, containing nothing but a deeper shade of the wall itself — and the wall label's provenance line is *redacted* with an amber bar. (The rule: some things are not said; the not-saying is the message.) - **Hall VII — “The Threshold.”** A doormat, floating, with the impression of shoes that were wiped on it — and beyond it, a door standing open onto pure midnight-vestibule black, leading (if you keep scrolling) to the Reading Room. (The rule: you change at the door — voice, posture, who you are.) - **The Reading Room book** — a single open volume, pages of conservator ivory, turning slowly on their own, the recto holding the plain-language statement in flowing Spectral, the verso holding a hand-drawn diagram of "a community as a set of arrows" — small directional marks all pointing the way everyone has agreed to face. Recurring motif system: **the floating shadow that disagrees with the light** (every specimen has one); **the brass floor-line and its inlaid markers**; **the single conservator's lamp glow** as the only warm source; **fine photographic grain** over the whole dream; **accession labels** as the connective tissue. Decorative flourishes are limited to **hairline engraved rules** and **the faint dust-blue atmospheric haze** at the far edge of each room. ## Prompts for Implementation Build mores.dev as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a slow, hushed, ~75-second walk through seven surreal museum halls plus an optional Reading Room. **There is no CTA, no pricing block, no stat-grid, no testimonials, no logo wall, no email capture, no contact form, no FAQ, no newsletter, no cookie banner, no chatbot.** If a section feels like a landing page, delete it. **Structure & motion (horizontal procession, vertical fallback):** 1. **Wide viewports:** the seven halls are laid out left-to-right in a horizontal track; vertical wheel / trackpad scroll is translated to horizontal travel with a heavy, smooth `spring` ease (low stiffness, high damping — it should feel like a long, weighted museum door, never snappy). Travel is **continuous**, not paginated, but each hall has a soft "rest detent" near its center so an idle scroll settles you in a room. 2. **Narrow viewports:** the same seven halls stack vertically; identical content, normal scroll. 3. **Doorway transitions:** between halls, a tall dark plane wipes through; ~400–500ms of near-black; optional opt-in footstep sound cue. Default: silent. 4. **Layered depth per hall:** three parallax planes (backdrop wall, mid specimen, foreground vitrine glass) move at distinct rates as you traverse — backdrop slowest, glass fastest, so passing a hall has real diorama dimensionality. Keep parallax *subtle* — a few percent of travel — this is a quiet room, not a theme-park ride. 5. **Specimen entrances:** as a hall reaches center, its specimen does a slow `fade-reveal` *plus* a 2–3px upward `morph`/drift, and its disagreeing shadow eases in a beat later from the "wrong" direction. The wall label `fade-reveal`s last, lower-left, with its amber hairline rule drawing left-to-right via `path-draw-svg`. 6. **The Reading Room** is gated behind scrolling past Hall VII into the open-door blackness; the book then `fade-reveal`s, and pages turn on a slow autonomous timer (a gentle 3D page-flip via CSS transform every ~8s), prose set in flowing Spectral. **Cursor & micro-interaction:** - A faint `cursor-follow` glow — a soft 120px amber radial — trails the pointer like a handheld conservator's lamp, very low opacity (~8%), so moving the mouse subtly *lights* whatever it passes over (specimen outlines brighten a touch under it). - Hovering a specimen: it *very slightly* rotates toward the cursor (`tilt-3d`, max ~3°) as if it noticed you, and its accession code (Plex Mono) ticks visible beside it. - Hovering a brass floor marker: a thin Cormorant Garamond hall-name rises 14px above it and fades, then clicking glides the procession there. - The audio toggle (tiny lamp icon, far-left of the brass floor-line) `ripple`s once when switched. - Wall-label provenance lines that are "redacted" (Hall VI) reveal their text on a slow hover — the amber bar wipes away over ~1.2s — then re-redact when you leave. This is the only "reveal" gimmick; use it once. **Texture & atmosphere:** apply a global fine `noise-texture` grain overlay at 3–4% opacity (CSS `background-image` of a tiny tiled SVG noise, or a single small PNG, `mix-blend-mode: overlay`). Far edge of each hall fades into `#7E8AA0` dust-blue haze via a wide soft gradient. Everything is dim; the amber lamp is the only thing that's warm; let the contrast stay hushed. **Performance posture (aesthetics first):** prefer transforms and opacity for all motion; `prefers-reduced-motion` collapses the springs to instant cuts and stops the page-flip — but the visual *placement* surrealism (wrong shadows, floating specimens) stays exactly as designed; that's not motion, that's the picture. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Surrealism via *placement*, not via melting or glitch.** The corpus's surreal/glitch/generative work leans on distortion, noise, and chaos. mores.dev is rendered with *museum-diorama precision* — clean lines, clean light — and the strangeness lives entirely in objects being where they cannot be (floating, shadow disagreeing with light, a queue of nothing). It's Magritte-quiet, not vaporwave-loud. Pairs the rare `surreal` aesthetic (~3% of corpus) with `mysterious-moody` tone (~7%) and `ma-negative-space` layout (~13%) — none of them overused, and uncommon together. 2. **A horizontal museum *corridor*, not a horizontal *slider*.** Where horizontal-scroll sites (~7%) tend to read as gallery carousels of cards, this one builds three-plane diorama depth per "hall" so the horizontal travel feels like *pacing a museum wall* — full-bleed rooms with one specimen each, navigated by an inlaid brass floor-line rather than dots or a nav bar. No card-grid, no bento, no hero stack. 3. **The "accession label" as the entire content system.** Instead of headlines, features, and CTAs, every piece of copy is a museum wall label: code, title, one line of provenance, one line of the unwritten rule. The subject — *mores*, the invisible social code — is literally curated and catalogued. The optional Reading Room (a single self-turning book) replaces the usual "about/contact/signup" tail with prose, no form. 4. **The conservator's-lamp cursor and the disagreeing shadow** are signature motifs not seen elsewhere here: the pointer is a handheld light that subtly illuminates what it passes, and *every* specimen casts a shadow in a direction the room's light doesn't permit — a consistent, deliberate "wrongness" that the visitor slowly notices. **Chosen seed/style:** *surreal dreamscape promo* — interpreted as a quiet surreal museum (aesthetic: surreal; layout: horizontal-scroll + ma-negative-space + layered-depth; typography: serif-revival/elegant-serif with mono accents; palette: midnight-blue + warm amber + conservator ivory; patterns: spring, parallax, fade-reveal, cursor-follow, tilt-3d, path-draw-svg, ripple, morph; imagery: custom line-and-wash illustration + noise-texture; motifs: floating-elements, layered-depth, candle/lamp-atmospheric; tone: mysterious-moody). **Avoided patterns from frequency analysis:** no hand-drawn/cottagecore softness (96% hand-drawn — skipped entirely; this is precise diorama line-work, not sketchy doodles); no glassmorphism-as-decoration (76% — the only "glass" here is a single conceptual vitrine plane, not frosted cards); no photography (98% — fully illustrated); no card-grid / centered / hero-dominant landing scaffolding (89%/85%/11% — replaced by full-bleed museum halls); no warm-gradient palette (98% warm + 96% gradient — this palette is cool midnight with one disciplined amber accent, no rainbow meshes); no magnetic buttons or counter-animate stat blocks (79%/14% — there are no buttons and no stats); no typewriter hero (12% — titles are painted-on-wall, static).