# Design Language for miris.day ## Aesthetics and Tone *miris* is the Croatian/Serbian word for **scent** — and miris.day is built as **a surreal dreamscape of a single day reconstructed entirely from things you smelled.** The conceit: smell is the only sense wired straight into the limbic brain, so a "day" remembered through scent is never linear and never literal — it is a melting, drifting, half-dissolved corridor of rooms that smell like 7 a.m. and rooms that smell like the back of a wardrobe in 1994. The site is that corridor. The aesthetic is **surreal — but warm-surreal, not cold-surreal.** Think René Magritte if he had been a perfumer; Leonora Carrington's interiors but lit by morning kitchen light; a Dorothea Tanning hotel hallway where the wallpaper has started breathing. Soft impossible geometry: doors that open onto fields, a teaspoon the size of a bathtub, a curl of steam that hardens into a marble staircase. Everything is rendered with a faint **grainy, hand-tinted-photograph haze** — like a memory that has been developed in the wrong chemicals on purpose. Tone in copy: hushed, second-person, present-tense, slightly somnambulant. "You are in the room where the coffee was. The coffee is not here. The room is still warm." Never markety, never instructional. The visitor is a sleepwalker being gently led by the nose. This is explicitly **not** a hand-drawn doodle aesthetic (96% of the corpus) and explicitly **not** glassmorphism (75%). It is surreal (2%) crossed with grainy-textured (2%) — two of the rarest cells in the frequency table — fused into a single olfactory dream-walk. ## Layout Motifs and Structure The page is **organic-flow** (4% in the corpus) — there is no grid, there are no cards, there is no dashboard. The structure is **a single horizontally-and-vertically meandering ribbon of seven "scent-rooms"**, connected by impossible thresholds. You don't scroll down a page; you *drift through doorways*, and each doorway is a place where one room's smell bleeds into the next via a soft cross-dissolve and a slow rotation of the entire canvas (1–3 degrees, never more — just enough to feel unsteady). - **The Seven Rooms.** (1) *The Threshold* — waking, cold pillow, the world un-named yet. (2) *The Kitchen That Isn't There* — coffee, toast char, citrus peel. (3) *The Commute Corridor* — rain on asphalt, diesel, someone's wet wool coat. (4) *The Paper Room* — old books, photocopier ozone, pencil shavings. (5) *The Greenhouse Detour* — tomato leaf, wet terracotta, crushed mint. (6) *The Blue Hour Room* — woodsmoke, cooling pavement, a struck match. (7) *The Last Room* — clean linen, the inside of a book closed for the night, sleep. The day ends where another could begin. - **Thresholds as the only "navigation."** Between each room is a full-bleed doorway-shaped mask (an irregular arched aperture, hand-cut, never a clean rectangle). The next room is visible *through* it before you arrive, slightly out of focus, slightly too saturated — the way a remembered smell arrives before its memory does. - **No fixed header. No footer with links. No CTA. No pricing. No stat grid. No testimonial row.** A single faint wordmark — "miris.day" — drifts in the upper-left like a watermark on old photo paper, and rotates with the canvas. - **Negative space is "fog," not white.** Empty regions are filled with a slow-moving grain-and-vignette field, so even nothing feels like *being somewhere with the lights low*. - The whole experience is roughly **80–100 seconds of drift**, paced by scroll but with momentum/inertia easing so it feels like being carried, not like operating a machine. ## Typography and Palette **Fonts (Google Fonts only — two voices: one that dreams, one that whispers footnotes):** - **Display & Room Titles — *Fraunces* (variable; opsz 144, wght 300–400, ital, SOFT high).** Set huge (clamp ~3rem → ~7rem), light weight, italic, optical size maxed so the serifs go soft and watery. Room titles are set in lowercase with generous letter-spacing and a faint drop-shadow that is *offset in the wrong direction* (light source from below) — a small surreal wrongness. Fraunces' wobble and warmth keeps it from feeling like a luxury-perfume cliché; at light italic it reads like handwriting that learned to be a serif. - **Body & "you are here" narration — *Spectral* (serif, wght 200 / 300, italic for asides).** A screen-native serif with a quiet, papery texture to its forms. Used at comfortable reading size for the second-person prose that floats in each room. Line length kept short (~52ch), set ragged-right, never justified. - **Micro-labels & scent-note tags — *Spline Sans Mono* (wght 300, uppercase, wide tracking).** The only "technical" voice: tiny monospaced captions naming the raw notes — `COFFEE / TOAST·CHAR / CITRUS·PEEL` — pinned near the bottom edge like specimen labels in a museum drawer. Mono appears in 94% of the corpus, so here it is used *sparingly and against type* — not for code or terminals, but as the cold caption under a warm dream. **Palette — "morning developed in the wrong chemicals":** warm + grainy, but pulled toward the bruised, faded, hand-tinted-postcard range rather than the standard warm-gradient sunset. - `#F3E7D3` — *paper-light* — the base "fog," like the unprinted margin of old photo stock - `#E4C9A6` — *toast crust* — warm mid, the dominant room wash - `#C98A5E` — *terracotta-steam* — the impossible-staircase / threshold-arch tone - `#7D5A4F` — *wet-wool brown* — text, hairlines, the commute room - `#3A3330` — *closed-book dark* — deepest shadow, the last room, the vignette - `#A8B79A` — *tomato-leaf green* — the single cool accent, used only in the Greenhouse Detour and for the faint scent-trail line - `#8E6B86` — *blue-hour bruise* — a dusty mauve used only in Room 6, where the day starts to ache - `#D9433A` — *struck-match red* — used exactly once, the head of a single matchstick, the only fully saturated pixel in the entire site Everything is overlaid with a persistent **monochrome film grain at 6–9% opacity** and a soft radial vignette, so no color is ever "clean." ## Imagery and Motifs **No photography. No stock. No 3D product renders. No glassmorphic cards.** Every visual is either CSS-drawn or a small set of hand-built SVG dream-objects, all sharing the same grainy-tint treatment. - **Impossible thresholds.** Hand-cut irregular arch masks (SVG `clipPath`) — never symmetrical, edges slightly trembling — through which the next room is seen. Some thresholds are doors; some are the mouth of a teacup; one is the gap under a giant closed book. - **Scaled-wrong domestic objects.** A teaspoon as tall as a doorway. A coffee ring the diameter of a pond. A single sugar cube as a monolith. Rendered as flat-tinted SVG silhouettes with a soft inner shadow, casting shadows in *contradictory* directions across rooms. - **The scent-trail.** A single thin meandering line (tomato-leaf green, ~1.5px, hand-drawn bézier wobble) that runs continuously through *all seven rooms*, sometimes a wisp of steam, sometimes the path of a peeled orange's spiral, sometimes a hair, sometimes smoke from the struck match. It is the visitor's own scent-memory, threading the whole day together. It animates with a slow `path-draw-svg` reveal as you move. - **Steam / smoke / breath** rendered as layered, blurred, slowly-drifting SVG noise-blobs — appearing wherever a room is "warm," dissipating at thresholds. - **Specimen drawers.** Tiny rectangular tinted swatches at the bottom edge, each a flat color with its scent-note label in mono — the only "data" on the site, presented like a perfumer's organ or a museum vitrine. - **Recurring surreal grammar:** (a) shadows fall the wrong way; (b) one object per room is impossibly large; (c) the horizon is never level — the canvas is always 1–3° off; (d) doorways open onto interiors that don't physically connect; (e) film grain ties every wrongness into one consistent dream-stock. ## Prompts for Implementation Build miris.day as **a single-route, momentum-driven drift through seven scent-rooms** — one HTML file, one CSS file, one JS module. Treat the page as ~90 seconds of being led by the nose through a day you half-remember. There is **no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email signup, no nav menu.** There is only the corridor of rooms and the scent-trail threading them. **Storytelling structure (seven rooms, one continuous meandering scroll, threshold cross-dissolves):** 1. **The Threshold.** Near-black (`#3A3330`) fading up to `#F3E7D3`. A single line of Spectral italic: *"you are not awake yet. the room has not been named. something near the pillow is cold."* The scent-trail begins as a faint thread. Canvas tilts in by 1.5°. 2. **The Kitchen That Isn't There.** Wash to `#E4C9A6`. A coffee ring the size of a pond drawn in CSS; steam-blobs drift up. Title "the kitchen that isn't there" in big light-italic Fraunces. Narration: *"the coffee was here. the coffee is not here. the room is still warm. you cannot find the cup."* Scent drawer at the bottom: `COFFEE · TOAST·CHAR · CITRUS·PEEL`. 3. **The Commute Corridor.** Wash cools toward `#7D5A4F`; threshold-arch is the gap under a giant umbrella. Diagonal rain-streaks (CSS gradients, animated). Narration about wet wool and diesel. The whole canvas leans the opposite way (–2°). 4. **The Paper Room.** `#E4C9A6` again but desaturated; giant pencil silhouette across the room casting a wrong-way shadow. The mono labels here are denser — `OLD·PAPER / OZONE / GRAPHITE / GLUE·BINDING`. Narration: *"every page you ever forgot is in this room, smelling exactly like it did."* 5. **The Greenhouse Detour.** The only cool room — `#A8B79A` floods in, the scent-trail brightens to its source green. A terracotta pot the size of a well. Crushed-mint motif (small leaf shapes scattered, faint). Narration softer, almost happy: *"you didn't mean to come here. you'll stay a moment."* 6. **The Blue Hour Room.** Dusk: `#8E6B86` bruise creeps in over `#C98A5E`. Woodsmoke blobs thicken. **Here the single struck-match appears** — a tiny SVG matchstick with one `#D9433A` flare-head, the only saturated pixel; it ignites with a 1-frame flash and a soft glow on scroll. Narration: *"someone struck a match. the day is cooling. you can smell it ending."* 7. **The Last Room.** Wash to clean `#F3E7D3` over deepening `#3A3330` at the edges. Clean-linen motif (a soft folded-cloth SVG, oversized). The scent-trail finally completes its `path-draw` and curls into the shape of a closed book. Narration: *"clean linen. the inside of a book shut for the night. the day is folded. another one smells different."* Slow fade. Wordmark "miris.day" settles, stops rotating, and dims. **Motion & technique notes:** - **Scroll = drift.** Use inertia/momentum easing on a virtual scroll position; the camera (a transformed canvas wrapper) lerps toward the target. Never snap. - **Canvas tilt.** A persistent `rotate()` on the room wrapper that changes by ±1–3° per room, eased — the horizon is never level. - **Threshold cross-dissolves.** As you approach a room boundary, the next room is already visible through an irregular SVG arch mask, blurred ~6px and slightly over-saturated; on crossing, blur → 0 and saturation normalizes over ~600ms. - **Grain & vignette always on.** A fixed full-viewport `::after` with an SVG `feTurbulence` grain at ~7% opacity (subtly animated by stepping the seed) plus a radial-gradient vignette. This is the "dream-stock" that unifies everything. - **The scent-trail** is one long SVG `` spanning all rooms inside the scrolling wrapper, revealed via `stroke-dashoffset` tied to scroll progress; it changes color only inside the Greenhouse room (use multiple stacked paths with masks). - **Wrong-way shadows.** Hard-code `filter: drop-shadow()` / `box-shadow` offsets that point toward the light, not away — consistently, in every room. It should feel *off* without being able to say why. - **Respect reduced-motion** by freezing tilt, grain animation, and inertia — but keep the imagery and the trail. - Performance and accessibility beyond reduced-motion are out of scope; prioritize the dream. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Surreal × grainy-textured — the two 2% cells, fused.** Surreal aesthetic sits at 2% and grainy-textured imagery at 2% in the corpus. miris.day deliberately occupies that near-empty intersection and commits to it fully (wrong-way shadows, impossibly-scaled objects, perpetual off-level horizon, persistent film grain) rather than borrowing surreal flourishes onto a conventional layout. 2. **Scent as the entire information architecture.** The site is structured by *what was smelled*, not by sections, products, or features. The "navigation" is literally walking through doorways into rooms defined by olfactory notes — a content model that, as far as the corpus shows, no other site uses. 3. **Organic-flow, zero cards, zero grid, zero CTA.** Organic-flow layout is 4% of the corpus; this site has no card-grid (88%), no centered hero stack (86%), no dashboard (34%), no CTA/pricing/stat-grid blocks at all. It is a continuous meandering ribbon. 4. **Mono used against type.** Monospace appears in 94% of designs, almost always as code/terminal/tech voice. Here `Spline Sans Mono` appears only as cold museum-style specimen labels under warm dream imagery — a pointed inversion. 5. **A palette of "bad chemicals," not sunset gradients.** Warm + gradient palettes dominate (98% / 96%), almost always sliding toward clean sunset hues. miris.day pulls warm toward bruised mauve, wet-wool brown, and faded toast-crust, keeps everything under a grain/vignette so no color is ever clean, and rations true saturation to a *single matchstick head*. Avoided patterns from the frequency analysis: hand-drawn aesthetic (96%), glassmorphism (75%), photography (98%), card-grid (88%), centered hero (86%), dashboard (34%), and all CTA/pricing/stat-grid/testimonial structures. Chosen seed/style: **surreal dreamscape promo**