# Design Language for miris.xyz ## Aesthetics and Tone `miris.xyz` is a **still mountain lake at dawn** rendered in architectural section. Imagine a field naturalist who also holds a degree in structural engineering — someone who collects pressed ferns and drafts isometric cross-sections of glacial moraines in the same sketchbook. The site carries that dual intelligence: coolly geometric in its bones, quietly alive in its surface. The aesthetic is **isometric nature** — the rare intersection of axonometric drafting precision and organic material warmth. Where most isometric sites feel machine-cold (circuit boards, pixel cities, data centres), `miris.xyz` tilts the same projection grid to hold moss-covered stone, rippling fen water, and the cross-section of a river terrace. The geometry is the scaffold; nature is the occupant. Tone is deliberately **warm-inviting within a cool palette**: the grays carry faint blue-violet undertones (the light temperature of overcast Nordic sky), but the surfaces they illuminate are alive — lichen-textured, water-worn, softly breathing. A visitor should feel like they have stepped into a thoughtfully curated natural history cabinet, not a tech product landing page. The emotional register is **unhurried curiosity**. Nothing pulses or demands. Content arrives in the visitor's peripheral vision the way a bird enters a frame — already there, waiting to be noticed. The site does not perform. It inhabits. Inspiration references: Olafur Eliasson's studio drawings, Svalbard field survey maps, the Geological Survey of Finland's illustrated cross-section plates, Kengo Kuma's stone-and-water architecture, and the quiet authority of a Muji store arranged inside a converted warehouse. ## Layout Motifs and Structure The page is built as a **layered-depth stage** — three distinct z-planes that the visitor consciously reads as near, mid, and far, like looking through a rain-streaked window at a landscape receding into fog. **Plane 1 — The Far Ground (fixed, `z-index: 0`):** A single SVG fills the full viewport behind everything. It contains a delicate isometric grid drawn at 30°/150° axonometric projection, 48 px tile size, stroked at `#d6dae0` (0.4 px). Overlaid on this grid, at 30% opacity, is a topographic contour map of an imaginary watershed — concentric irregular ellipses, 0.3 px at `#b8c0cc`. The far-ground never scrolls. It is the geological substrate of the page. **Plane 2 — The Mid Ground (scroll-parallax at 0.4× rate):** Full-width horizontal bands, each 100 vh tall. Each band is a single isometric vignette — a slice of the natural world rendered in the axonometric projection of the far-ground grid, as though the grid has been "filled in" with content. Band content stacks top-to-bottom: fen edge with reed silhouettes → river cross-section showing water table → mountain face with trail line → open sky with wave-form cloud paths. The parallax ratio (0.4×) means the mid-ground drifts slowly past the far-ground grid, producing a convincing sense of depth without explicit 3D. **Plane 3 — The Near Ground (normal scroll rate):** The typographic layer. Text columns float at `max-width: 640px`, centered, lifted off the mid-ground by a `backdrop-filter: blur(2px)` haze that reads as cool mountain mist. No hard borders on text containers — they fade in and out via opacity gradients at their vertical edges, as though the text is emerging from and returning to fog. **Spatial grammar within bands:** - Each isometric band uses a **45-unit isometric tile grid** (SVG, 3D-projected). Objects within a band sit on their correct isometric plane — no tilted-2D fakery. - Horizontal reading rhythm: text anchored left within the 640px column; isometric vignette anchored right, bleeding to the viewport edge. At 768px and below, vignette drops below text, full-width. - Vertical cadence: `96px` of breathing room between each section. No section header sits closer than `48px` to the preceding content block. - The **wave-form motif** governs all horizontal transitions: the dividing line between any two bands is not a straight rule but a flowing sinusoidal SVG path, amplitude 24 px, period matching the viewport width, drawn in `#9fb3c8` at 1.2 px. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display headings — `Syne`** (variable, wght 400–800). Set at `clamp(48px, 8vw, 96px)`, weight 700, letter-spacing `-0.025em`. Syne has a unique structural tension — humanist inktraps inside near-geometric counters — that captures the dual nature of the site (organic inside geometric). H1 uses Syne at full optical scale; as the user scrolls past, it subtly loses weight via CSS `font-variation-settings` from 700 to 500 across a 200px scroll window, as if the heading is stepping back into the fog. - **Body text — `DM Sans`** (variable, wght 300–700). Set at `18px / 1.75`, weight 400. DM Sans is a low-contrast grotesque with open apertures — it reads comfortably at body sizes without the corporate stiffness of Inter or the over-familiarity of Roboto. The grotesque-neo seed is fully inhabited here: structured but not cold. - **Captions and labels — `DM Mono`** (wght 400). Set at `13px`, letter-spacing `+0.05em`, all-caps. Used exclusively for isometric legend labels, coordinate references on the topographic layer, and geological stratum annotations. The mono-grotesque pairing (DM Sans + DM Mono) creates a unified design system family without mixing foundries. - **Accent / pull quotes — `Syne`** at weight 500, `font-style: italic` (synthesized — Syne has no native italic, but at this weight the synthesis reads as intentional architectural lean, not rendering failure). Set at `24px`, color `#6b8fa3`. **Palette — cool-grays with blue-violet undertones and one warm bridge:** - `#f0f3f6` — **Glacial Mist** (page background; near-white with visible cool blue lean) - `#d6dae0` — **Overcast Stone** (isometric grid lines, subtle borders) - `#9fb3c8` — **Fen Water** (wave-form dividers, mid-tone interactive elements, link underlines) - `#6b8fa3` — **Slate Depth** (secondary text, captions, pull-quote accent) - `#3d5a6e` — **Deep Moraine** (primary text, heading weight anchors) - `#1e3344** — **Midnight Fen** (darkest text, used sparingly for maximum contrast moments) - `#c8b89a` — **River Sand** (the single warm bridge color; used only for hover states, active underline-draw animations, and the wave-crest highlight on sinusoidal dividers — a deliberate intrusion of warmth into the cool system) **Dark-mode consideration:** The site offers a subtle dark-mode toggle. In dark mode, `#f0f3f6` becomes `#0d1b24`, `#3d5a6e` becomes `#9fb3c8`, and River Sand `#c8b89a` is retained unchanged — it glows warmer against the dark ground, shifting from bridge to beacon. ## Imagery and Motifs The site carries **no photography**. All imagery is constructed — drawn, projected, annotated — in the tradition of natural history field plates and geological survey illustrations. **Isometric nature vignettes (SVG, inline):** Each of the four mid-ground bands contains a signature isometric scene, constructed on the 30°/150° axonometric grid. Objects are built from flat SVG polygons (no gradients, no drop-shadows — pure flat isometric): reed stalks as vertical extrusions, water surfaces as diamond-faceted horizontal planes, stone outcrops as stacked rhomboid layers. The color palette for all vignettes draws exclusively from the seven palette colors. The effect is a natural world rendered as though a topographer sketched it at 1:5000 scale. **Wave-form motif system:** The wave-form is the site's primary decorative language and its connective tissue. It appears in five registers: 1. **Band dividers:** Full-width sinusoidal SVG paths, `amplitude: 24px`, `stroke: #9fb3c8`, `stroke-width: 1.2px`. Each divider is animated via `stroke-dasharray` / `stroke-dashoffset` — the wave draws itself left-to-right as the band enters the viewport (1.8s, `easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)`). 2. **Underline-draw pattern:** Every `` link and section heading carries a custom underline. On hover/enter-viewport, the underline draws from left to right using `background-size` animation on a `linear-gradient` rule. For headings, the underline color is `#9fb3c8` (Fen Water), 2px thick. For links, it is `#c8b89a` (River Sand), 1px. The draw duration is `320ms` for links, `640ms` for headings. 3. **Topographic contour echoes:** The far-ground contour lines are not static — they very slowly breathe (CSS `@keyframes` animating `stroke-dashoffset` at `240s` cycle). The movement is imperceptible unless you stare at the background for several seconds; when noticed, it rewards attention. 4. **Water surface animation:** In the river-cross-section isometric band, the "water" polygon (a flat isometric rhombus) carries a subtle `clip-path` wave animation — a sinusoidal mask that oscillates by 4px vertically at a 6s cycle. The water appears to gently shift, as though light is moving across it. 5. **Navigation marker waves:** The sticky navigation bar (appears after 200px scroll, `backdrop-filter: blur(8px)`) carries a 1px-tall SVG wave along its bottom edge instead of a straight border. The wave amplitude is 3px — barely perceptible, but distinguishable from a straight rule. **Decorative language for geological strata:** Each band carries a text-label layer styled as geological annotation: stratum names in `DM Mono` all-caps, preceded by a thin `2px × 16px` color swatch (the stratum color from the isometric scene), and connected to the isometric object by a `0.5px` leader line drawn at a non-right-angle. This annotation system is borrowed directly from cartographic convention and gives the site a scholarly but approachable quality — a field guide, not a data dashboard. ## Prompts for Implementation Build this as a **slow-reveal field survey** — a single long-scrolling page that unfolds like turning the pages of a geologist's illustrated field notebook, one isometric plate at a time. The visitor is the field researcher; the site is their notebook. **Structural mandate:** Four full-viewport-height sections, each a self-contained isometric plate. Sections are: (1) Fen Edge / surface ecology, (2) River Cross-Section / hydrology, (3) Mountain Face / geomorphology, (4) Open Sky / meteorology / wave-forms aloft. Each section title is a field-notebook entry header: date-formatted (`2024 · PLATE III · GEOMORPHOLOGY`), set in DM Mono, positioned top-left within the band. **Scroll-driven animation sequence:** - `IntersectionObserver` triggers per-band: when a band reaches 20% viewport, its isometric SVG vignette fades up from opacity 0 and translates from `translateY(20px)` to `translateY(0)` across 600ms. - The wave-form band divider draws itself as the preceding band exits the viewport bottom. - The topographic far-ground layer is `position: fixed` — it never scrolls, but its `opacity` is modulated per-section via a scroll-linked CSS variable (`--scroll-progress: 0..1` per band). Section 1 shows it at full opacity; section 4 shows it at 0.2 opacity, as though the underlying geology has retreated. **Typography animation:** - H1 (above the fold): characters split into spans, each with a staggered `opacity` + `translateY` entrance (50ms stagger, 400ms per character, `ease-out`). No letter scrambling — pure reveal. - Section headings: the Syne weight-transition on scroll (700 → 500 over 200px scroll window) is implemented via a `scroll-timeline` CSS property or a JS `requestAnimationFrame` fallback. - Pull-quote text: appears via a single left-to-right reveal — a `clip-path: inset(0 100% 0 0)` that animates to `clip-path: inset(0 0% 0 0)` over 800ms as the element enters the viewport. **Underline-draw implementation detail:** All underline-draw animations (links and headings) use the CSS `background` technique: ```css background: linear-gradient(#9fb3c8, #9fb3c8) no-repeat 0 100%; background-size: 0% 2px; transition: background-size 640ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` On hover/`.in-view`: `background-size: 100% 2px`. This is GPU-composited and avoids layout thrash. **Navigation:** Minimal sticky nav — site name in Syne weight 600 at `18px`, left-aligned; three nav items in DM Sans weight 400 at `15px`, right-aligned. The nav background is `rgba(240, 243, 246, 0.85)` with `backdrop-filter: blur(8px)`. On scroll, the bottom-edge wave SVG transitions from flat to full-amplitude over 300ms. **Avoid entirely:** CTA buttons with gradient fills, pricing cards, feature grids with icons, testimonial carousels, hero sections with centered headings above a full-bleed photograph, sticky "Book a call" widgets, progress bar loaders, skeleton screens, infinite scroll pagination, social media feed embeds, cookie consent overlays styled as modals. **JavaScript budget:** Keep JS minimal. The scroll-linked animation system, IntersectionObserver triggers, and nav wave should total under 4 KB minified. The isometric SVGs are inline; no canvas, no WebGL, no three.js. This is a page that works beautifully without JS enabled — the isometric plates are visible, the typography is set, the wave dividers exist as static paths. JS is progressive enhancement only. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **isometric**, layout = **layered-depth**, typography = **grotesque-neo**, palette = **cool-grays**, patterns = **underline-draw**, imagery = **nature-elements**, motifs = **wave-forms**, tone = **warm-inviting**. **Differentiators from every other design in the registry:** 1. **Isometric nature, not isometric technology.** The frequency analysis shows isometric at 6% — already uncommon. But every existing isometric design in the registry uses the projection for tech/data subjects (circuit boards, server racks, pixel cityscapes). `miris.xyz` is the first to apply isometric axonometric projection to natural-world subjects — fen ecology, river hydrology, glacial geomorphology. This is not a cosmetic twist; it changes the emotional register entirely, producing warmth inside a formally cold projection system. 2. **Wave-form as structural grammar, not decoration.** Wave-forms appear in the registry at effectively 0% as a primary motif. Here the wave-form governs: band transitions, link underlines, navigation borders, water-surface animation, and the far-ground topographic breath. It is the site's connective tissue, not a single decorative flourish. No other design in the registry uses a single visual motif at this many scale levels simultaneously. 3. **Layered-depth with three distinct parallax planes at named semantic z-levels.** The frequency analysis shows layered-depth is underused. The implementation here is specific: far-ground (geology, fixed), mid-ground (ecology, parallax 0.4×), near-ground (typography, normal). Each plane has a named role and a named set of permitted elements. This is a designed z-axis vocabulary, not a "parallax hero image" cliché. 4. **Cool-gray palette with a single warm bridge color used exclusively for interaction states.** The registry shows cool-gray palettes at under 2%. More unusually, the warm color (`#c8b89a` River Sand) is structurally reserved: it appears only on hover/active/draw-completion states. In its static, resting state the page is entirely cool. The warmth is a response to the visitor's presence — it is earned, not given. This encodes the tone (warm-inviting) at the interaction layer rather than the visual layer. 5. **Avoided patterns from frequency analysis:** hand-drawn (60% — explicitly not used; all line work is geometric/isometric), editorial (52% — no editorial layout conventions: no pull-quote columns, no dropcap first-paragraph styling, no magazine-grid two-column body), mono typography as primary (79% — DM Mono is used only for captions/labels, never for body or display), botanical illustration (26% — nature is rendered isometrically/architecturally, not as soft botanical line illustration).