# Design Language for mores.dev ## Aesthetics and Tone `mores.dev` is a **pastoral-romantic watercolor field journal** rendered as a HUD. The contradiction is the point: imagine a naturalist's sketchbook — foxglove and fen-water stained pages, ink-bleed edges, pigment blooms spreading through wet paper — but overlaid with the translucent readout panels of a slow-drifting research balloon. The HUD does not fight the watercolor; it floats above it, barely there, its hairline vectors reading altimeter-soft and latitude-whispered. This is science in love with its subject matter. The tone is **pastoral-romantic**: languid, unhurried, shot through with wonder at small things. The domain name *mores* (customs, traditions, the shared moral fabric of a community) informs the content posture — this site speaks to the slow accumulation of practice, the quiet weight of how things have always been done. Nothing is urgent here. The site breathes like dew on a spider's web: held still, backlit, trembling without breaking. Aurora-lights motifs run beneath everything — not the electric neon aurora of cyberpunk, but the *watercolor aurora*: soft curtains of rose-sage and ice-cobalt bled into paper grain, the kind of light that exists at 4am at 68° latitude when the sky is the color of a bruised peach dissolving into milk. These light curtains animate imperceptibly, shifting by 0.3° per second, so only a visitor who sits still long enough notices the sky has changed. ## Layout Motifs and Structure The layout is a **HUD-overlay** built on three depth planes: **Plane 0 — The Paper Ground.** A full-viewport watercolor wash that serves as the living substrate. This is not a CSS background-color; it is an inline SVG containing a `` + `` filter chain that produces authentic paper-fiber diffusion. The wash shifts through aurora color stops on a 90-second CSS animation loop — almost too slow to perceive. **Plane 1 — The Ink Layer.** Botanical and water-bubble elements drawn as SVG paths sit directly on the paper ground. These include: (a) thin ink contour lines of submerged aquatic plants dissolving at their edges, (b) a scatter of water-bubble circles ranging from 4px to 62px — their stroke is 0.7px hairline, fill is the aurora-tinted paper color at 18% opacity, and each bubble has a single 3px specular catch-light at the 10-o'clock position. Bubbles drift upward on staggered `animation-duration` values between 14s and 38s, wrapping to re-enter at the bottom. **Plane 2 — The HUD Overlay.** Frosted-glass rectangular panels at `backdrop-filter: blur(4px) saturate(1.3)` carry all text content. Panel borders are a single 0.5px line in `rgba(255, 255, 255, 0.28)`. Corner tick-marks (4px × 4px, open brackets) sit at each corner in the slab-serif palette's `#C5D8E0` — the HUD registration marks of a theodolite or survey instrument. Panels reveal progressively: the first panel is always visible; subsequent panels materialize as the visitor scrolls past 30vh thresholds, their `opacity` going 0→1 over 600ms with a subtle 6px upward translate. No panel ever slides, bounces, or springs — they simply appear, like data becoming available. Content columns are 540px max-width on desktop, centered inside their HUD panels. On mobile, panels collapse to full-width with 24px horizontal inset. There is no navigation bar — a fixed 32px strip at top-right holds three monogram tick-marks that, on hover, reveal a ghost-text label for each section anchor. ## Typography and Palette **Type System — slab-serif, all Google Fonts:** - **Display headings — `Zilla Slab`**, weight 600, italic variant for pull-quotes and section openers. Set at 52px / 1.15 leading on desktop, 36px on mobile. Letter-spacing −0.015em. Used for the site's few large titles — never more than seven words per display head. - **Body & panel text — `Bitter`**, weight 400 and 600. 17px / 1.72 leading. Bitter's ink-trap serifs read like field-journal handwriting at a scale — squared stroke endings echo the HUD's right-angle corner ticks. Paragraph max-width 62ch. - **HUD labels & data readouts — `Roboto Slab`**, weight 300, all-caps, letter-spacing 0.14em, 10px size. These micro-labels sit above each content panel like instrument annotations: `SECTION 01 · PRACTICE`, `DEPTH 3.2m`, `AURORA INDEX 0.74`. They are set in `#8CAAB5` and do not participate in progressive disclosure — they are always visible, present before their panel, like sensor data preceding understanding. **Palette — high-contrast aurora-paper:** - `#F4EFE6` — warm vellum white, the paper ground base - `#1B2B35` — deep ink-navy, primary text, near-black with blue undertone - `#C5D8E0` — ice-cobalt, HUD hairlines and tick-marks, aurora mid-register - `#A8C5A0` — sage-green, botanical ink elements and aurora low-register - `#E8C4B0` — bruised-peach, aurora high-register, warm bleed zones - `#3D6B7A` — teal-deep, accent on hover states and specular bubble rings - `#7A3D52` — rose-wine, used sparingly for emphasis glyphs and the aurora's deepest curtain blush Contrast ratios: `#1B2B35` on `#F4EFE6` = 14.8:1. `#3D6B7A` on `#F4EFE6` = 4.9:1. High-contrast in the literal WCAG sense, but the palette reads *soft* because high-contrast here means ink-on-paper, not neon-on-black. ## Imagery and Motifs **Water-bubble system.** The bubbles are not decorative clip-art — they are procedurally described SVG circles generated from a deterministic seed (based on `mores.dev` as a string) so they are identical on every load but feel hand-placed. Each bubble family has: - A primary ring at full opacity - A secondary echo ring at 35% opacity, 8px larger radius - The 3px specular catch-light at 10-o'clock inside the ring - An occasional bubble cluster of 3–5 nested siblings at 0.6× scale Bubbles that drift near a HUD panel edge do not disappear — they continue behind the panel's `z-index`, visible as ghost silhouettes through the frosted glass. This makes the HUD feel like it was lowered into the water rather than placed on top of it. **Aurora-lights curtain.** An SVG `` stack creates three overlapping aurora bands. Each band is a tall, narrow gradient rectangle (`width: 18vw`, `height: 120vh`) rotated 8° from vertical, set to `mix-blend-mode: soft-light`, opacity 0.35. The three bands use color stops cycling through `#C5D8E0` (ice-cobalt) → `#A8C5A0` (sage) → `#E8C4B0` (bruised-peach). They shift horizontally on a 90s loop via `transform: translateX()` — the leftmost band moving at 1×, the middle at 0.7×, the rightmost at 1.3×, creating slow parallax shimmer. **Botanical ink elements.** Five SVG path clusters depict subaquatic plants: pondweed ribbon-leaves, hornwort needle-branches, and a single waterlily pad at the bottom-right of the viewport (always in Plane 1, never occluded by HUD panels). Strokes are `#1B2B35` at 0.8px, with an `feGaussianBlur` of stdDeviation 0.4 applied at the tips to simulate wet-ink feathering. These are decorative and do not animate. **HUD registration motifs.** Each panel's corner ticks are accompanied by a three-digit index number set in `Roboto Slab` 300 at 9px — `[001]`, `[002]`, etc. — evoking survey coordinates and research log entries. A single crosshair glyph (thin `+`, 12px, `#C5D8E0`) appears centered between the tick-marks on the top edge of each panel, like a scope reticle placed gently on a specimen. ## Prompts for Implementation Build this as **a single long-form scroll through a researcher's field log**, written in the first person plural ("we have observed," "the practice holds") as if from a collective of naturalist-practitioners documenting the slow customs that shape a community. The reader is not being sold anything — they are being shown something, at the pace at which it was found. **Implementation directives:** 1. **The paper ground is alive.** Use an SVG `` with `` and `` on a `` to produce genuine fiber texture. Overlay the aurora gradient bands above this rect. The whole assembly sits in a `position: fixed` full-viewport SVG behind `z-index: 0`. 2. **Progressive disclosure via Intersection Observer.** Each HUD panel has `opacity: 0; transform: translateY(6px)` by default. An `IntersectionObserver` with `threshold: 0.15` triggers a CSS class `.revealed` that transitions to `opacity: 1; transform: translateY(0)` over 600ms with `ease-out` easing. There is no scroll-jacking, no parallax on content, no sticky content headers. 3. **Bubble physics.** Each bubble SVG element runs an independent `@keyframes` animation that translates from `translateY(0)` to `translateY(-110vh)` over its assigned duration (14–38s), with an `animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1)` for slow-fast-slow rise. On completion, `animation-iteration-count: infinite` restarts from below. Bubbles have `pointer-events: none` and `will-change: transform`. 4. **Aurora animation.** The three gradient bands are siblings in a `position: fixed` container at `z-index: 1`, `mix-blend-mode: soft-light`. Each runs a `@keyframes aurora-drift` that oscillates `translateX` by ±12vw over the 90s cycle. The `animation-timing-function` is `ease-in-out`. No JavaScript required for the aurora. 5. **Typography rhythm.** Section openers use `Zilla Slab` 600 italic at 52px with a `#E8C4B0` decorative underline (2px, `border-bottom` in that color, 0.12em `padding-bottom`). Body paragraphs in `Bitter` 400 at 17px. HUD micro-labels always precede their panel by 12px vertical gap, rendered as `
` with `position: absolute; top: -22px; left: 0`. 6. **Color application rule.** `#F4EFE6` is only ever a background. `#1B2B35` is only ever text or the botanical ink strokes. `#C5D8E0`, `#A8C5A0`, and `#E8C4B0` are only ever aurora, decorative, or HUD chrome — never body text. `#3D6B7A` is hover accent only. `#7A3D52` appears no more than twice per page. 7. **No CTAs, no pricing, no stats grid, no testimonial rails.** The site has no buttons except a single text-link `→ read the log` that appears once, centered, in `Bitter` 400 after the opening panel. Navigation is ambient: three monogram anchors at top-right, revealed by hover. 8. **Responsive breakpoint.** At ≤768px, the fixed paper-ground stays; HUD panels go to `width: calc(100% - 48px)` with `margin: 0 24px`. Bubble count reduces from 22 to 9. Aurora bands reduce opacity to 0.22. The `Zilla Slab` display size drops to 32px. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **watercolor**, layout = **hud-overlay**, typography = **slab-serif**, palette = **high-contrast**, patterns = **progressive-disclosure**, imagery = **water-bubbles**, motifs = **aurora-lights**, tone = **pastoral-romantic**. **Differentiators from every other design in the registry:** 1. **HUD-overlay at 4% frequency crossed with watercolor aesthetic.** The frequency report shows `hud-overlay` at only 4% and `watercolor` as an underused aesthetic. Every other HUD design in the registry uses it for dark-mode sci-fi dashboards or tech-data contexts. `mores.dev` inverts this: the HUD is warm, frosted-paper, aurora-lit — a scientist's field instrument lowered into a pastoral landscape rather than a cyberpunk command center. 2. **High-contrast palette interpreted as ink-on-vellum, not neon-on-black.** `high-contrast` in the registry is almost entirely associated with dark backgrounds and electric accent colors. This design achieves WCAG-exceeding contrast ratios using deep ink-navy on warm vellum — demonstrating that high contrast is a structural property, not an aesthetic one. The palette reads soft and romantic while remaining clinically legible. 3. **Slab-serif at 2% frequency deployed as the primary storytelling voice.** `slab-serif` is the second-least-used typography category in the registry (2%). `Zilla Slab` + `Bitter` + `Roboto Slab` creates a three-level slab system where each weight class has a distinct role — display, body, instrument — rather than the single-font slab-as-accent approach used elsewhere. 4. **Water-bubbles as a physically simulated depth layer, not decorative spots.** The frequency report shows `water-bubbles` at 4%. Other designs using this motif treat bubbles as static decorative elements. Here the bubbles are procedurally seeded, drift on independent physics-accurate easing curves, and remain visible as ghost silhouettes behind the frosted HUD panels — creating genuine perceptual depth. 5. **Aurora-lights at 4% frequency rendered in watercolor pigment tones, not electric gradients.** The registry's `aurora-lights` motif is typically implemented as electric neon curtains (`#00FFCC`, `#FF00FF`). This design uses aurora-colored watercolor pigments — bruised-peach, ice-cobalt, sage-green — applied as SVG soft-light blends over paper texture, producing a phenomenon that feels observed rather than generated. 6. **Avoided patterns from frequency analysis:** `centered` (86% — not used as primary layout), `full-bleed` (70% — used only for the fixed paper ground, not for content sections), `warm gradient` (89%/78% — warmth is present but comes from paper texture, not CSS gradient on divs), `photography` (90% — zero photographs used anywhere in the design).