# Design Language for misty.day
## Aesthetics and Tone
misty.day is **a visibility report** — the kind a coastal field station tapes to the wall each morning: how far you can see today, and for how long, before the fog closes back in. The whole site behaves like weather. Not weather *photography* — weather *as a reading*: numbers, a horizon line, a margin of haze that thickens and thins while you watch. The mood is **cool, hushed, slightly clinical and slightly elegiac** — a hygrometer left running in an empty room, a lighthouse keeper's logbook, the moment a ferry's outline dissolves. Where most sites in the corpus run warm (98%) and hand-drawn (96%) and glassy (76%), misty.day is **temperature-true cold, ruler-straight, and matte** — every surface is paper-flat, every line is 1px, and the only "blur" is the fog itself doing its job.
The governing idea: **legibility is conditional.** Text near the "horizon" of the page is fully sharp; text that drifts toward the margins loses a hair of focus, the way a sign loses its edges across a fogged street. Reading the site is reading through weather. Nothing is decorative for its own sake — the haze is data, the grid is a map, the type is an instrument display. Tone in words: **zen-contemplative**, terse, precise, never sentimental — captions in the voice of a marine forecast ("visibility 4 nmi, falling"), never marketing copy.
## Layout Motifs and Structure
A **ma-negative-space** composition (12% of the corpus) crossed with a **single-column** vertical descent (17%) — explicitly *not* a card grid (89%), *not* a hero-and-sections marketing skeleton, *not* a dashboard. The page is one long quiet column you fall through, like dropping through cloud layers.
**The horizon line.** A single 1px horizontal rule sits permanently at 38% viewport height — the *visible horizon*. It never moves. Content rises to meet it and sinks past it. The headline of each section snaps to this line; everything else is measured as a distance above or below "the horizon" (in faux nautical miles printed in the margin: `+2.4`, `−0.8`). This is the spatial spine of the whole site.
**Layer bands.** The vertical scroll is divided into named **cloud strata** — `STRATUS 00`, `FOG BANK 01`, `CLEARING 02`, `RESIDUAL 03` — each band a generous full-bleed expanse of off-white with one block of text floated asymmetrically (never centered) and one instrument readout in the right margin. Bands are separated not by borders but by **density gradients**: the haze overlay grows toward 60% opacity at a band's "thickest" point and thins to nothing at its edges, so you literally *see less* in the middle of a fog band and more at the clearings.
**The margin gauge.** A persistent 56px right-hand column holds a vertical scale — tick marks every `0.2`, a moving indicator dot that tracks scroll position against "elevation," and the current band name set in tiny mono caps rotated 90°. It reads like the side of a barometer.
**No symmetry, no boxes.** Text blocks hang off an asymmetric 9-column grid; the only enclosed shapes anywhere are the instrument readouts (hairline 1px frames, never filled, never shadowed — strictly anti-glassmorphism). White space is not breathing room here; it is **distance** — the space between you and the thing you're trying to see.
## Typography and Palette
**Fonts — Google Fonts only, verified available.**
- **IBM Plex Mono** (weights 300, 400, 500; plus the *italic*) — the instrument-panel voice. Used for every readout, every margin label, every nautical-mile figure, the band names, captions, nav. Plex Mono is IBM's engineering monospace: even color, square terminals, a faintly technical-but-humane skeleton — it reads as **calibrated**, like the LCD on a weather station. (mono is common at 94%, but used here strictly as *machine readout*, not as the "hacker terminal" trope.)
- **Fraunces** (Soft optical size; weights 300 and 400; the *italic* at 9pt-ish optical) — the elegiac voice, for the few large display lines and pull-quotes. Fraunces is a "wonky" old-style serif with soft ball terminals and a low, melancholy contrast at light weights — set huge, in 300, it feels like a name fading off a ship's hull. Used sparingly: one display line per band, maybe six on the whole site. This is the **elegant-serif** counterpoint (7% — uncommon) to the cold mono.
- **Inter** (weight 400 only, tracking +0.01em) — neutral connective body text, the few paragraphs of running prose. Deliberately the *quietest* possible humanist sans so the mono and the Fraunces carry all the character.
Type behavior: body text sits at a comfortable 18px/1.7; the margin readouts at 10px/1.4 in `letter-spacing: 0.14em` uppercase; the Fraunces display lines clamp from 48px to 132px. **Letterforms near the page margins receive `filter: blur(0.4px)` and reduced opacity** — sharpening to 0 blur as they cross toward the horizon line on scroll.
**Palette — cool, matte, no warmth anywhere.**
- `#0E1418` — *Deep water* — near-black slate-blue, used only for text and the 1px lines. Never a background.
- `#3C4A52` — *Pier iron* — mid slate, for secondary text, margin gauge ticks, readout frames.
- `#7C8B92` — *Drift* — the haze color itself; the fog overlays are gradients of this from 0% to ~58% opacity.
- `#B9C4C7` — *Fogbound* — pale cool gray, used for very-low-emphasis labels and the "lost" state of de-focused text.
- `#E8ECEC` — *Morning haze* — the working background. Cooler than paper, warmer than steel.
- `#F6F8F7` — *Clearing* — the lightest off-white, used at the thin edges of fog bands where visibility returns.
- `#9FB7A8` — *Sea glass* — the single restrained accent: a desaturated cool sage, used ONLY for the live readout values (the moving numbers, the indicator dot) so the eye finds "the instrument" instantly. Appears on less than 2% of pixels.
Strictly forbidden: any warm hue, any gradient that isn't a haze fade, any drop-shadow, any glass blur on a UI element, any neon, any duotone photo treatment.
## Imagery and Motifs
**No photography (98% of the corpus uses it — misty.day uses none).** No stock textures, no 3D renders, no icon set, no Lottie. Every visual is hand-rolled SVG or CSS. Three systems carry the page:
**1. The haze fields.** Layered radial/linear CSS gradients of `#7C8B92` at low alpha, plus a single full-viewport SVG with `feTurbulence` + `feDisplacementMap` running a *very* slow animated noise (period ~40s) to give the fog a living drift — never a "smoke effect," more like watching a window fog and unfog. Each cloud-stratum band has its own haze-density curve tied to scroll.
**2. The cartographic underlay.** A faint 1px grid in `#B9C4C7` at ~18% opacity — but it is a *map* grid, not a layout grid: latitude/longitude-style with tiny tick numbers, a compass rose drawn as 8 hairlines in one corner, and a dashed "coastline" — a single irregular hand-plotted polyline (the only organic line on the site) that wanders across two of the bands and then **fades into the haze exactly where the fog is densest**, so the map literally becomes unreadable in the fog and reappears in the clearings.
**3. The instruments.** Pure-SVG readout widgets, each a 1px unfilled frame: a **hygrometer arc** (semicircle dial, a needle), a **visibility bar** (a horizontal scale 0–10 nmi with a filled-to-current segment in *Sea glass*), a **horizon strip** (a tiny landscape silhouette dissolving left-to-right under a gradient mask), and a **dew-point ticker** (mono digits that step over on scroll). They sit in the right margin and at band headers. Motif vocabulary: **wave-forms** (3% — uncommon, here as the hygrometer's faint sine-trace background), **mountain-landscape** (3% — uncommon, the dissolving horizon silhouette), and a quiet **star-celestial** touch only in the final `RESIDUAL 03` band where the fog has cleared to a single pale dot.
The favicon: a 1px horizon line with a gradient haze fading upward from it on `#E8ECEC`.
## Prompts for Implementation
Build misty.day as **one HTML document, one CSS file, one ES module, one inline SVG sprite (compass rose, coastline polyline, the four instrument widgets, horizon silhouette), and one favicon SVG.** No framework, no bundler, no raster images, no WebGL, no video, no analytics, no router. The page is **a visibility report you scroll down through, watching the fog thin and thicken.**
**Document skeleton:**
```
← station ID, date "misty.day", live "visibility" readout
← the permanent 1px horizon at 38vh, position:fixed
← full-viewport animated SVG turbulence + gradient stack
```
**Storytelling — the site IS a fog burning off over one morning:**
- On load: page opens **almost entirely whited-out** — the haze overlay starts at ~70% opacity, the headline barely legible, the readout says `VISIBILITY — — nmi`. A 2s ease pulls the fog back to its band-baseline; the readout counts up to its real value. First impression: *you arrived before the fog lifted.*
- As the reader scrolls down through `STRATUS 00 → FOG BANK 01`, the haze **thickens** (drive overlay opacity from band data on a `scroll-triggered` curve), text drifting toward the margins blurs more, the cartographic coastline dissolves, the visibility readout *falls* and turns *Sea glass*. This is the bottom of the fog.
- Through `CLEARING 02 → RESIDUAL 03` it **burns off**: haze opacity decays toward 0, blur lifts, the coastline polyline `path-draw-svg`-redraws itself stroke-by-stroke as it re-emerges, the horizon silhouette sharpens, the visibility readout climbs to `10 nmi / unlimited`. The last band is almost pure `#F6F8F7` with a single dot — the day, finally clear.
- The fixed `.horizon` line and `.gauge` are the constants you hold onto the whole way down.
**Motion vocabulary (PREFER the corpus's underused patterns):**
- **blur-focus** (8% — uncommon): the core mechanic — `filter: blur()` on text driven by distance-from-horizon, recomputed on scroll via a single `requestAnimationFrame` loop reading `IntersectionObserver`-thresholded elements.
- **path-draw-svg** (34%) for the coastline re-emerging and the hygrometer needle's trace.
- **scroll-triggered** (21%) — every haze-density change, every readout value change, the band-name swap in the gauge.
- **fade-reveal** (15%) and **counter-animate** (13%) for the instrument numbers.
- Slow ambient `feTurbulence` animation for the living fog. Optional `prefers-reduced-motion`: freeze the turbulence, keep static haze gradients, disable the scroll-blur (fall back to opacity steps).
- AVOID entirely: cursor-follow / magnetic / tilt-3d (no cursor games — fog doesn't care where your mouse is), parallax-as-decoration, spring-bounce, any card flip.
**Hard constraints:** No CTA-heavy layouts, no pricing blocks, no stat-grids, no testimonial carousels, no "features" cards. If a section needs a number, it is an *instrument readout in the margin*, never a big bold marketing stat. Every border is exactly 1px; nothing is rounded except the Fraunces ball terminals and the hygrometer dial; nothing casts a shadow; nothing is warm.
## Uniqueness Notes
Deliberate departures from the corpus and from the seed's defaults:
1. **Fog as live data, not fog as photo filter.** The corpus reaches for "misty" via desaturated stock photography and soft glassmorphic blur (76%) — misty.day uses *zero photography* and *zero glass*, and instead makes the haze a CSS/SVG instrument that responds to scroll: visibility actually falls and rises as you read. The blur is on the *content*, conditionally, not slapped over a hero image.
2. **Cold, matte, 1px — against a corpus that is warm, glassy, and hand-drawn.** Palette is the temperature-true cool-gray/slate family with one desaturated sage accent — explicitly excluding the warm (98%) and gradient-decoration (96%) defaults. No drop-shadows, no rounded cards, no neon: every line is a hairline, every surface is paper-flat. This is closer to a marine forecast printout than a website.
3. **The fixed "horizon line" as the entire spatial system.** Instead of card grids (89%) or hero-and-sections, the layout is organized around a permanent 1px rule at 38vh that content rises to and sinks past, with distances printed in faux nautical miles in the margin. A barometric gauge column anchors the right edge. Single-column vertical descent (17%) + ma-negative-space (12%), where the white space *is* the distance you can't see through.
4. **Voice of a weather report, not a brand.** Copy is terse meteorological log-speak ("visibility 4 nmi, falling") — zen-contemplative, never aspirational marketing language; no CTAs, no stat-grids, no pricing.
5. **The cartographic coastline that disappears into the fog and redraws on clearing** — a single organic polyline (the only non-ruler line on the site) that becomes literally unreadable in the densest band and `path-draw-svg`-re-emerges as the fog burns off. A narrative device, not an ornament.
Chosen seed/style: **japanese zen portfolio** — read here not as wabi-sabi ceramics but as *ma* (negative space as meaning), instrument-like restraint, and the quiet of a single morning observed precisely.
Avoided patterns from the frequency analysis: hand-drawn aesthetic (96%), glassmorphism (76%), warm palette (98%), gradient-as-decoration (96%), photography imagery (98%), card-grid layout (89%), centered layout (85%), cursor-follow / magnetic / spring-bounce / tilt-3d motion clichés, hero-dominant marketing structure, CTA / pricing / stat-grid blocks.