# Design Language for miris.one ## Aesthetics and Tone miris.one is a quiet observatory for the act of beholding. The name is read as the Latin *mīrīs* — "you wonder, you marvel at" — and the whole site is built around a single conceit: a person standing at the rim of something vast and silver, looking. The aesthetic is **surreal Japanese-minimalism** — the restraint, the ma (negative space), the off-white tatami calm of japanese-minimal, but punctured by one or two impossible images per scene (a staircase that descends into a lake of mercury, a single chair facing a wall of moons, a doorway standing alone in a salt flat). Nothing screams. The surreality is *delivered in a whisper* — the page never winks at you, never explains the dream, never adds a caption that says "imagine if…". It just sets the object down in too much empty space and lets the silence do the work. The tone is **mysterious-moody but never gothic** — cool, hushed, faintly clinical, like a sleep-research lab at 4am or the reading room of a planetarium that closed thirty years ago. Think the held-breath stillness of Hiroshi Sugimoto's seascapes, the impossible architecture of Giorgio de Chirico's empty plazas, the silver-gelatin patience of an old observation print, and the deliberate emptiness of a Kenya Hara MUJI campaign — but desaturated further, pushed toward the color of fog over slate. The visitor should feel they have walked into a room where something just happened, or is about to. There is wonder here, but it is the cold kind: the wonder of scale, of reflection, of not being able to tell where the surface ends. ## Layout Motifs and Structure The site is a **split-screen diptych that breathes** — every scene divides the viewport into two unequal vertical panels, and the *seam between them is the subject of the whole design*. The left panel (≈38% width) is the "shore": a calm field of pale grey-white holding a few lines of type, set low, with enormous ma above. The right panel (≈62%) is the "expanse": a single full-bleed duotone image of an impossible place, slightly blurred at the edges, perfectly sharp at one point. The seam between them is a 1px hairline that, on scroll, very slowly tilts — by scene 6 it is no longer vertical but a gentle 4° diagonal, as if the horizon itself were settling. This is the only "diagonal-sections" gesture and it is almost subliminal. There are **seven scenes**, scrolled vertically, each one a full viewport height. As you scroll, the split *animates*: the seam slides — scene 1 is 50/50, scene 2 the expanse swells to 70%, scene 4 the shore nearly vanishes to a 12% sliver, scene 7 the panels are equal again but mirrored (image on the left now). Content on the shore-panel arrives with a **blur-focus** entrance: text materializes from a 14px gaussian blur into perfect crispness over 900ms, like a thought condensing. Navigation is **minimal-navigation**: no header bar, no logo lockup, no footer columns. There is only a vertical column of seven short horizontal ticks pinned to the dead-center vertical axis of the screen (riding the seam) — the active tick is full-width (24px), the others are 8px. No labels, no numbers visible until hover, when a faint Roman numeral fades in beside the tick. No CTA. No buttons styled as buttons. No pricing. No stats. No testimonials. No contact form rendered as a form — if contact exists at all it is one mailto line set in small caps at the bottom of scene 7, no box around it. ## Typography and Palette **Type system (Google Fonts only):** - **Display / headline face:** `Libre Caslon Text` — a refined, slightly weathered Caslon revival in the Baskerville-adjacent transitional-serif family. Used for the one or two lines of text per scene that carry the wondering. Set large but not huge (clamp 1.9rem–3.4rem), generous leading (1.5), letter-spacing flat. Italic is used heavily — about half the headlines are fully italic, because italic Caslon reads like a margin note, like someone thinking out loud. - **Body / supporting face:** `Spectral` (weights 300 and 400) — a screen-tuned serif with low contrast and a quiet, even color on the page. Used for the rare paragraph of running text (never more than four lines) and for the small-caps mailto line. Set at 1.0625rem, leading 1.7, color softened to never be pure black. - **Micro-label face:** `IBM Plex Mono` at 0.7rem, letter-spacing 0.22em, uppercase — used *only* for the navigation tick numerals (I–VII) and a single "MIRIS · ONE" wordmark that sits, tiny, in the top-left of scene 1 and never reappears. Mono here is the instrument-panel voice: it grounds the dream in something measured. **Palette — fog over slate, with one wound of warmth:** - `#E8E9E6` — *Tatami White*: the shore panel, the page base. Not white — the white of unbleached paper in shade. - `#C4C8C8` — *Mercury Fog*: mid-grey for blurred image edges, inactive nav ticks, hairlines at low opacity. - `#5B6266` — *Slate Reading*: the softened "black" for all body text and most headlines. Cool, never warm. - `#2A3034` — *Deep Observation*: the darkest tone, used in the duotone image shadows and the active nav tick. - `#A8B0B2` — *Horizon Silver*: the duotone highlight tone — every photographic image is mapped between Deep Observation and Horizon Silver, so the whole site looks like it was printed on cold silver. - `#B45A3C` — *Late Ember*: the single accent, used **once per scene at most** — a thread of rust in the seam line at the exact sharp-focus point of the image, or a single underline under one italic word. It is the one warm thing in a cold room. Used with extreme scarcity. ## Imagery and Motifs **The seven impossible scenes (one duotone image each, mapped Deep Observation → Horizon Silver):** I — **A single wooden chair facing a wall of nine full moons** arranged in a 3×3 grid like portholes. The chair is empty. Sharp focus falls on the chair's front-left leg; everything else drifts toward fog. II — **A staircase of pale stone descending into a flat lake of liquid mercury**, the reflection so perfect the stairs appear to continue downward forever. A single bird stands on the lowest dry step. III — **A doorway — just a frame, no wall — standing upright on a cracked salt flat** at dusk. Through the doorway you see the same salt flat, but with a different sky. IV — **A reading lamp lit on a desk that floats at sea level on calm open water**, no boat, no land. Papers on the desk do not move. This is the scene where the shore-panel nearly vanishes — the expanse is almost the whole screen. V — **A field of tall grey grass in which one stalk is made of mirror**, reflecting a sliver of orange sky that is nowhere else visible. (This is where Late Ember appears most boldly — still small.) VI — **A telescope on a tripod pointed not at the sky but at a wall**, in an empty white gallery. On the wall, a single small framed photograph of a star field. The seam has tilted 3.5° by now. VII — **The viewer's own position, rendered as an empty observation deck at night** — a railing, a void beyond it, a few unreadable instruments. The image moves to the left panel; the shore-text moves right. The diptych has reversed. This is the only scene with text on the right. **Recurring motifs:** `star-celestial` understated — actual stars appear only twice (the moons in I, the framed star field in VI); mostly "celestial" means *the feeling of looking at something far*. `mountain-landscape` / horizon: every image has a clean horizon line, and these horizons are deliberately aligned with the tilting seam. The **mirror / reflection motif** is the spine — water, mercury, mirror-stalk, the doubled doorway, the photograph-of-stars-instead-of-stars. **Empty furniture** — chair, desk, telescope, railing — the human is always implied, never shown. A faint, slow **grain-overlay** (2–3% opacity, animated drift) over the whole page so it reads like a long-exposure plate. ## Prompts for Implementation Build miris.one as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. It is a roughly 90-second vertical descent through seven still rooms. There is **no CTA, no pricing, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no hero with a signup**. If contact exists, it is a single `mailto:` line in small-caps Spectral at the bottom of scene VII, no box, no styling beyond a hairline above it. **Structure & motion:** 1. **The split-screen seam is a CSS custom property** (`--seam: 50%`) animated on scroll via `scroll-timeline` (or a single `requestAnimationFrame` loop fallback). Each scene sets a target seam position; interpolate smoothly. The seam *also* carries a `--seam-tilt` that ramps 0deg → 4deg across the whole document, applied as a `rotate` on the hairline pseudo-element and on each image's clip. 2. **Blur-focus text entrances:** shore-panel headlines start at `filter: blur(14px); opacity: 0` and resolve to `blur(0); opacity: 1` over 900ms `cubic-bezier(.2,.7,.2,1)` when their scene enters the viewport (IntersectionObserver, threshold ~0.5). Stagger sub-lines by 120ms. Never animate position more than 8px — this site does not slide, it *condenses*. 3. **Images:** each duotone image is a real photo run through a CSS `filter` duotone (or an SVG `` / `feComponentTransfer` mapping shadows→`#2A3034`, highlights→`#A8B0B2`). Apply a radial `mask` or layered `backdrop-filter: blur()` so the image is crisp at one focal point and dissolves to `#C4C8C8` fog at the frame edges. On scroll, the focal point drifts very slightly (parallax, max 20px) — the only parallax on the site. 4. **Navigation ticks** ride the vertical centerline (so they sit on the seam). Active tick = 24px wide, 2px tall, `#2A3034`. Inactive = 8px, `#C4C8C8`. Hover reveals a Roman numeral in IBM Plex Mono, 0.7rem, fading in 8px to the side. Click = smooth-scroll to that scene. Keyboard arrows move between scenes. 5. **The Late Ember accent** must appear at most once per scene and sometimes not at all: a 1px rust segment on the seam at the image's focal height, or a single rust underline-draw (path-draw SVG, 600ms) beneath one italic word in a headline. Treat it as precious. 6. **Grain overlay:** a fixed full-screen layer, SVG `feTurbulence` baked to a tileable PNG or rendered inline, 2.5% opacity, `mix-blend-mode: multiply`, with a 12s `@keyframes` translating it 3px in a slow loop. Respect `prefers-reduced-motion` by freezing it. 7. **Scene VII reversal:** at the last scene, swap the grid template so the image column moves to the left and the shore-text to the right; animate this swap as the seam crosses to the mirrored position. End the page there — no footer beyond the hairline + mailto line + the tiny "MIRIS · ONE" wordmark re-appearing once, bottom-right, as a closing rhyme with its scene-I appearance top-left. **Voice of the words:** every headline is one or two lines, present tense, second person or no person, never explaining the image. Examples of register (not literal copy): *"You came to the rim to see how far it goes."* / *"The stairs continue. You decide not to."* / *"One stalk remembers a different sky."* Italic for the wondering, roman for the plain fact. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The seam is the design.** Almost no site in the corpus treats the *boundary between two panels* as the animated protagonist. The split-screen (only 1% of layouts) here is not a layout choice but the entire metaphor — a horizon that slowly tilts and finally mirrors itself. Most split-screens are static "image left, text right" landers; this one is a hinge. 2. **Surreal delivered in a whisper, not a shout.** Surreal aesthetic appears in only ~2% of designs and almost always loud — melting clocks, vaporwave statues, glitch chaos. miris.one keeps de Chirico's *emptiness and dread*, not Dalí's spectacle: too much negative space, one impossible object, zero captions, zero winking. It marries the rare `surreal` aesthetic to the also-rare `japanese-minimal` restraint — a pairing essentially absent from the corpus. 3. **A genuinely cold palette in a corpus that is 98% warm.** The frequency analysis shows "warm" palettes at 98% and "gradient" at 96%. miris.one is **flat, ungradient, and cool** — fog over slate, silver duotone, with a single 1px thread of rust used at most once per scene. No mesh gradients, no aurora, no honeyed neutrals. This alone makes it visually unmistakable next to its neighbors. 4. **Blur-focus as the primary entrance, not slide/spring.** Springs (86%), magnetic (79%), cursor-follow (89%), parallax (93%) dominate the corpus. This site refuses all of them except a single 20px image parallax — its motion vocabulary is *condensation*: blur→crisp, opacity, the slow seam tilt. Nothing bounces. Nothing follows the cursor. 5. **No human, ever — only their furniture.** Photography appears in 98% of designs, almost always of people or product. Here every image is an *abandoned vantage point*: an empty chair, an empty desk, a telescope no one is using. The visitor is the missing figure in every frame. **Chosen seed/style:** *aesthetic: surreal + japanese-minimal · layout: split-screen + diagonal-sections · typography: baskerville-refined (Libre Caslon Text / Spectral) · palette: cool-grays + translucent-frost (flat, no gradient) · patterns: blur-focus · imagery: duotone-photo · motifs: star-celestial + mountain-landscape/horizon · tone: mysterious-moody* **Avoided patterns from frequency analysis:** warm palettes (98% — avoided, went cold), gradient (96% — avoided, went flat), parallax (93% — used only one minimal instance), cursor-follow (89% — none), spring/magnetic/stagger-as-slide (86/79/76% — replaced with blur-condensation), card-grid (88% — none, this is a diptych), full-bleed-everywhere (89% — only the image panel), hand-drawn (96% — none), glassmorphism (75% — none), mono-as-bodyface (94% — mono restricted to micro-labels only).