# Design Language for miris.quest ## Aesthetics and Tone miris.quest is a **torn field notebook made conscious** — the digital ghost of a scientist who abandoned academia and started leaving cryptic hand-annotated charts pinned to damp walls. The aesthetic is **anti-design enacted with obsessive care**: rules are broken deliberately and visibly, alignment is refused on principle, and the visual language looks like something collaged from graph paper, correction fluid, and a leaking pen. Yet beneath the apparent chaos lives a rigorous data-viz intelligence — every misaligned element occupies a precise place in a layered depth system. The mood is **bold-confident and slightly unhinged** — not reckless, but unapologetically itself. miris.quest does not explain itself. It doesn't have a hero tagline. It has smeared ink annotations, coordinate systems that refuse to start at zero, and legends placed where no legend should be. Inspiration: Wolfgang Tillmans' non-narrative photo installations, Edward Tufte's hatred of chartjunk turned inside-out, 1970s Soviet scientific journals, and the physical sensation of peeling masking tape off a printed map. The tone is declarative and confident without being loud. Text is sparse. Silence is structural. The site *knows* something and is not explaining it to you. ## Layout Motifs and Structure The structural grammar is **layered-depth collage**: content exists on 4 distinct z-axis planes, each with different opacity, blur, and parallax coefficient. Scrolling moves the planes at different speeds, creating a sense of physical depth — as if the page is a light table with acetate overlays. **The 4 planes:** - **Plane 0 (background field):** Muted graph-paper grid, barely visible (#e8e3d8 on #f0ebe0). Fixed, no scroll. Retro crosshatch pattern overlay at 4% opacity. - **Plane 1 (data substrate):** SVG scatter plots, line charts, and coordinate axes rendered in ink style — wobbly, slightly imprecise strokes. Scrolls at 0.3x speed (slow parallax). Semi-transparent at 70%. - **Plane 2 (content layer):** Primary text and annotated sections. Scrolls at 1x speed. Full opacity but with visible bleed-through from Plane 1. - **Plane 3 (annotation overlay):** Hand-annotated callouts, arrows, circled numbers, correction marks. These are positioned at deliberate misalignments — rotated 3-7 degrees, overhanging content margins by 20-40px, colliding with Plane 2 text. Scrolls at 1.4x (slightly faster — annotations "drift" forward on scroll). **Anti-grid composition rules:** - No element aligns to a 12-column grid. Alignment is done to a **9-unit golden-ratio subdivision** but deliberately offset by 13-23px from true grid positions. - Section breaks are not horizontal dividers — they are diagonal ink slashes or a row of hand-drawn dashes. - The page width is `min(94vw, 1140px)` but content runs beyond this boundary on the right by up to 80px (intentional overflow masked by fade). - Navigation: a single fixed strip pinned to the left edge, 28px wide, containing 4-character vertical text labels in 10px Caveat, rotated 90°. **Sections (top to bottom):** 1. **Field (hero):** Full-viewport. Coordinate axes cross at an off-center point (38% from left, 62% from top). Domain name `miris.quest` written in large Caveat as if scrawled on the axes. A faint scatter cloud of ~200 data points behind it. 2. **Observation Log:** 3-4 staggered "notebook entries" — each is a card torn at an irregular angle with a data chart embedded inline. 3. **Apparatus:** Technical-looking section with annotated diagrams and instrument-style readouts. Deliberately looks like it describes something real but never quite says what. 4. **Residue:** A scatter plot that fills the full viewport, with text labels on the data points instead of a legend. The "story" lives in the data. 5. **Margin:** Footer as a field margin — wide whitespace with sparse hand-written notes at odd rotations. ## Typography and Palette **Typography — handwritten + mono hybrid, all from Google Fonts:** - **Primary handwritten:** `Caveat` (Google Fonts, variable wght 400–700). Used for section headings, annotations, all UI labels, and the domain name. At display sizes: clamp(2.8rem, 6vw, 5.6rem), weight 600. At annotation sizes: 13-16px, weight 400, rotated randomly between -4° and +6°. Letter-spacing: -0.01em (it's a pen, it runs together slightly). - **Data labels and readouts:** `Space Mono` (Google Fonts, regular 400 and bold 700). Used exclusively for numbers, coordinates, axis labels, and any text that lives inside a chart. Size: 11-13px. Tracks at +0.04em. Feels like a typewriter pressed too hard. - **Body text (sparse):** `Libre Baskerville` (Google Fonts, regular 400, italic). Used for the rare paragraph of prose — each section has at most 2-3 sentences of body. Size: 17px / 28px line-height, slightly loose. Color: #3a3228 (near-black warm brown). **Palette — muted, warm, slightly foxed:** - `#f0ebe0` — warm off-white (page ground, graph paper base) - `#e8e3d8` — graph paper grid lines (barely perceptible difference from ground) - `#3a3228` — primary ink (near-black warm brown, replaces pure black entirely) - `#7a6e5f` — secondary text, axis labels, faded annotations - `#b5a898` — tertiary — ghost grid, placeholder glyphs, Plane 1 chart strokes - `#c4503a` — accent red (sparingly: 1-2 data points circled, 1 annotation arrow, correction marks) - `#4a6741` — accent green (data trend lines, "confirmed" annotation marks) - `#8b7355` — warm mid-tone for retro crosshatch pattern fills and decorative rule lines - `#d4cfc4` — card background (torn notebook cards, slightly different from page ground) All backgrounds are warm-toned papers, never pure white (#ffffff), never pure black (#000000). The palette should feel like old scientific instruments and aged technical documentation — no digital vibrancy, no saturation above 40%. ## Imagery and Motifs **Imagery is data-viz rendered as field work.** No photography. No stock. Every visual is a hand-crafted data artifact: - **Scatter plots:** SVG clouds of 80-300 data points, drawn with irregular `cx` and `cy` jitter (+/- 2px random offset on each point to simulate hand-plotted points). Point radius: 2.5px, fill: `#3a3228` at 60% opacity. Some points circled in red correction-style rings. - **Line charts:** SVG polylines with deliberate imprecision — each vertex has a ±3px random offset from "true" position. Stroke: `#4a6741`, width 1.4px, no fill. Looks like drawn with a ruler that slipped twice. - **Axes:** No arrowheads. Tick marks are hand-drawn (slight angle variance ±2°). Axis labels in Space Mono 11px. Axes do not start at zero — they start at some arbitrary fractional value. - **Retro-patterns:** Graph paper crosshatch at 4% opacity. Dot-matrix grid at 6% opacity on section dividers. Halftone fade on section transitions. Mimeograph-style repeating border patterns (simple repeating geometric units) in `#8b7355` at 15% opacity as section backgrounds. - **Annotations (Plane 3 motif):** SVG elements — curved ink arrows (hand-drawn feel via cubic bezier with imperfect control points), circled numbers (slightly elliptical circles, not perfect), underlines (wavy, 2-node path), correction marks (an X and a line through wrong text, even if text isn't wrong). - **Correction fluid marks:** White blobs with rough edges (SVG path) placed over parts of background charts — suggests things were painted over, reassessed, updated. - **Tape marks:** Semi-transparent rectangles at 15-30° rotations, `#d4cfc4` at 40% opacity — look like masking tape holding things to the wall. **Motif summary:** Retro-pattern crosshatch grids + scientific annotation conventions + deliberate imprecision + the physical materiality of a field notebook wall. ## Prompts for Implementation Build miris.quest as a **single-page depth experience** where the act of scrolling is physically analogous to walking closer to a wall covered in research materials. The 4-plane parallax system should be implemented with CSS custom properties and `transform: translateZ()` within a `perspective` container, or via scroll-event-driven JS `transform: translateY()` with different multipliers per plane. **Hero (Field section):** - Full-viewport black paper field: background `#f0ebe0`. - SVG coordinate system: two perpendicular axes meeting at (38vw, 62vh). Axes extend to viewport edges. Tick marks every 60px. - ~200 SVG circle elements for scatter cloud, randomly seeded, clustered around 3 focal points with Gaussian-ish distribution. - Domain name `miris.quest` in Caveat 600 at `clamp(3.2rem, 7vw, 6rem)`, color `#3a3228`, positioned near the axis intersection but offset right-down by ~40px. Looks placed, not centered. - A hand-drawn annotation arrow pointing *at* the domain name from top-left, in red `#c4503a`, reading `"you are here"` in Caveat 400 at 14px, rotated -3°. - Micro-interaction: on scroll, scatter cloud data points slowly drift upward (transform: translateY at 0.15x scroll rate) and fade toward `#b5a898`. **Observation Log section:** - 3 notebook-card elements, each styled as: background `#d4cfc4`, border: none, `box-shadow: 2px 3px 8px rgba(58,50,40,0.18)`, slight rotation: first card -2.3°, second +1.7°, third -0.8°. Cards overlap at corners. - Each card contains a small inline SVG chart (80px × 60px) in the top-right corner — drawn in ink style. - Text content: Caveat 400 for body, Space Mono for any numbers. Date stamp in Space Mono 10px top-left of each card. - Tape marks (SVG rectangles rotated) pinning each card at 2 corners. - Micro-interaction: on hover, card lifts (translateY -4px, box-shadow deepens) and rotates toward 0° (straightens slightly). Transition: 240ms cubic-bezier(0.34, 1.56, 0.64, 1) — slight spring overshoot. **Apparatus section:** - Full-width dark-field panel: background `#3a3228`, text `#f0ebe0`. - Contains a large annotated diagram — an SVG that looks like a technical schematic but depicts something ambiguous. Annotation labels in Caveat 13px pointing at diagram elements with curved arrows. - A "readout" element: monospace grid of numbers in Space Mono 11px, updating via JS `setInterval` at irregular intervals (between 800ms and 3400ms). Numbers change by ±0.03-0.17 each tick. Feels live, not random — like actual instrument noise. - Halftone dot-pattern overlay on the dark background at 8% opacity. - Micro-interaction: cursor proximity causes nearest annotation to highlight (color shifts from `#7a6e5f` to `#c4503a`, annotation arrow animates a small pulse). **Residue section (data-viz focal point):** - Full-viewport SVG scatter plot. ~150 points. Each point is a text label (3-6 chars) in Space Mono 10px, colored `#3a3228` at 80%. No axes. No legend. - The text labels together form a sparse poem or field observation — reading the labels in order tells a fragmentary story. - On scroll-into-view: points animate in from random starting positions (stagger: 4ms per point) — feels like data materializing. - On hover over a point: it enlarges (scale 1.6), adjacent points slightly repel (CSS transform, JS proximity calc), tooltip appears in Caveat showing a "measurement" value. **Margin (footer):** - 80px of ground-color space (`#f0ebe0`). - 3-4 sparse Caveat annotations at various rotations, colors `#7a6e5f` and `#b5a898`, each 12-14px. - No links, no copyright, no social icons. Just: `miris.quest` in Caveat 400 11px, `#b5a898`, bottom-left. - A single horizontal ink-line rule, imperfect (slight SVG waviness), `#b5a898`, 60% viewport width, centered. **Animation philosophy:** - All transitions are organic — use `cubic-bezier(0.34, 1.56, 0.64, 1)` for lifts, `cubic-bezier(0.65, 0, 0.35, 1)` for settles. - No `ease-in-out` defaults. No `linear`. Every motion should feel like a physical object with mass. - Parallax is scroll-event driven, not CSS-only, for precision control of 4-plane system. - Micro-interactions should never feel like UI feedback — they feel like physical materials responding to touch. **AVOID:** CTA buttons, pricing tables, stat counters, testimonial carousels, notification badges, hero taglines with action verbs, any element that explains what the site is for. The site never explains itself. ## Uniqueness Notes 1. **4-plane layered-depth parallax with anti-grid composition:** No other design in the registry uses a deliberate 4-plane z-axis depth system combined with anti-grid alignment rules. The combination of physical-depth scrolling and intentional misalignment is unique — most registry parallax sites are decorative, not structural. 2. **Data-viz as primary narrative medium (not decoration):** The `data-viz` pattern appears at only 4% in the registry and is typically used as a section accent. Here, every section's *primary content* is a data artifact — scatter plots, charts, and annotated diagrams are the site itself, not illustrations of text content. The Residue section inverts the typical data-viz pattern entirely (labels instead of legend, poetry instead of insight). 3. **Anti-design enacted via obsessive precision:** The `anti-design` aesthetic at 3% is rare, but most implementations are naively chaotic. miris.quest achieves anti-design through hyper-specific misalignment rules (9-unit golden-ratio subdivision offset by 13-23px), deliberate imprecision in SVG paths (±2-3px jitter), and a strict color system with no saturation above 40%. The chaos is controlled. 4. **Handwritten typography as sole display voice with zero decorative use:** `Caveat` carries every heading, annotation, label, and UI element — it is not used as an accent alongside a "serious" typeface. The seriousness comes from Space Mono and Libre Baskerville playing supporting roles. This inversion (handwritten as the dominant, serif and mono as subordinates) is unrecorded in the registry. 5. **Retro-pattern as atmospheric substrate:** Retro-patterns (crosshatch, dot-matrix, halftone, mimeograph borders) are used as background texture across all planes — they are not motifs on top of a neutral ground. The pattern IS the ground. Combined with muted palette and warm paper tones, this achieves a physical materiality absent from registry designs which tend to use retro-patterns as decorative borders. **Chosen seed:** `aesthetic: anti-design, layout: layered-depth, typography: handwritten, palette: muted, patterns: micro-interactions, imagery: data-viz, motifs: retro-patterns, tone: bold-confident` **Avoided (overused in registry):** muted palette as sole differentiator (33% — we use muted but layer it with physical texture), handwritten as accent-only (18% — we make it dominant), layered-depth as pure decorative parallax (7% — we make it structurally load-bearing). Avoided generic hero+CTA+stats pattern entirely.