# Design Language for miris.one ## Aesthetics and Tone miris.one is a **field-station dispatch from an expedition cartographer** — the visual language of a scientist who builds instruments by hand, etches grids into copper plates, and transmits encoded telemetry from somewhere between a high-altitude observatory and a desert research post. The aesthetic occupies the precise intersection of **earth-toned sci-fi HUD** and **grain-heavy analogue craft**: warm sienna soil beneath a cracked-glass instrument overlay, hexagonal sensor-cell arrays that feel both geological and extraterrestrial, and typography that reads like the handwriting of an engineer who trained on humanist calligraphy before switching to circuit diagrams. The tone is **tech-tutorial as expedition journal** — every section reads as a log entry, every diagram as a filed observation. Nothing is decorative for decoration's own sake; every embellishment has the plausibility of a real instrument artifact: Voronoi stress fractures in the background grain, subtle scan-line drift that is too slow to be noise, hex cells that pulse like a geiger display when data arrives. The mood is **solitary but purposeful** — not cold, not corporate, not hacker-dark. Warm amber under a field lamp. Ground-level. Dusty. Precise. Primary inspirations: USGS topographic field sheets, 1970s NASA mission control CRT panels, analogue oscilloscope typography, geological survey hexagonal grid systems, the visual language of *Arrival*'s linguistics console. ## Layout Motifs and Structure **The primary structure is a staggered hexagonal-honeycomb grid** — not as pure geometry but as a living field map. The viewport is divided into three visual bands: **Band 1 — Header Hex-Crown (100vh entry)** A full-viewport field displaying 7 staggered hexagonal cells in two offset rows (4 top / 3 bottom, offset by one half-cell width), each cell containing a single content fragment: domain wordmark, a short instrument-status line, an animated radial sweep like a sonar pulse. The hex cells are SVG `` elements with clipped inner content. The background behind them carries a dense noise-texture SVG filter at 8% opacity over a warm `#2d1f0e` deep-earth tone. **Band 2 — Staggered Tutorial Columns** Three columns of content blocks in a stagger pattern: col-1 (px=0) sits at y-baseline, col-2 sits at y-baseline + 64px, col-3 at y-baseline + 128px, creating a cascading diagonal read path. Each column-block is a card with a subtle hex-clip on one corner, a faint inner-border glow in amber, and a header styled as a HUD instrument label (`INSTRUMENT_ID: 0x04A1`). The stagger is maintained responsively with CSS custom properties. **Band 3 — Terminal Footer Ticker** A full-width HUD status strip at the very bottom: a single horizontal scrolling ticker of instrument telemetry text (`SECTOR: G-7 | TEMP: 312K | SIGNAL: NOMINAL | ELAPSED: 00:14:22`), rendered in monospace at 11px on a `#1a0f04` near-black strip, scrolling right-to-left in a `marquee`-style CSS animation. **Spatial Rules:** - Hex cells: flat-top orientation, `r = clamp(80px, 10vw, 140px)`, gap = `r * 0.08` - Stagger offset: `translateY(calc(r * 0.866))` for odd columns - Content max-width: `min(1200px, 92vw)` - All section dividers are horizontal SVG lines with a small hex-diamond midpoint ornament ## Typography and Palette **Typography (Google Fonts only — humanist register throughout):** - **Primary display — [`Nunito`](https://fonts.google.com/specimen/Nunito)** (variable wght 300→900): Humanist warmth, slightly rounded terminals that echo the hex geometry. Used for section headings at `clamp(2.4rem, 5.2vw, 4.8rem)` weight 700, letter-spacing `-0.02em`. Also for the wordmark at weight 800 + italic. - **Body running text — [`Source Serif 4`](https://fonts.google.com/specimen/Source+Serif+4)** (variable wght 300→900): Humanist serif for long tutorial prose. 18px / 30px line-height, weight 400, color `#c4a882`. Italic weight 300 for lead paragraphs and field-note callouts. - **Instrument labels & monospace telemetry — [`Fira Code`](https://fonts.google.com/specimen/Fira+Code)** (400, 500): All HUD instrument codes, status tickers, hex-cell identifiers, and inline code. 12px–14px, color `#d4a842`, letter-spacing `0.12em`, no ligatures in ticker contexts. **Palette — Earth-tone field station with amber instrument glow:** | Role | Name | Hex | |---|---|---| | Deep earth background | Burnt Soil | `#1e1108` | | Surface background | Mesa Dark | `#2d1f0e` | | Card surface | Clay Wall | `#3d2b15` | | Card border | Dried Reed | `#5c3f20` | | Body text | Pale Ochre | `#c4a882` | | Heading text | Warm Sand | `#e8d5b0` | | Accent — instrument amber | Signal Amber | `#d4a842` | | Accent — hex cell active | Copper Pulse | `#b87333` | | Accent — secondary glow | Terracotta | `#c1603a` | | HUD dim | Charcoal Dust | `#4a3420` | All backgrounds carry a persistent `feTurbulence` SVG noise filter (`baseFrequency="0.65"`, `numOctaves="3"`, `stitchTiles="stitch"`) composited at 6% opacity to produce grain without performance cost. ## Imagery and Motifs **No photography. No stock imagery. No flat cartoon icons.** All visual matter is drawn from three motif families: **1. Hexagonal HUD overlays (the dominant motif).** SVG hex grids in `stroke: #d4a84230` (amber at 19% opacity), flat-top orientation, used as background texture behind content bands. Every 7th cell in the grid is `stroke: #d4a842` at 60% and carries a slow radial-sweep animation (a `conic-gradient` in a pseudo-element rotating over 8 seconds) simulating active sonar or geiger-cell detection. No fills on any hex — pure stroke geometry. **2. Noise-texture grain fields.** SVG `` filters applied via a `` element on a full-viewport ``, producing analogue photographic grain that sits above all backgrounds but below all text. Two grain variants: `coarse` (`baseFrequency="0.45"`, 4% opacity) for section backgrounds, `fine` (`baseFrequency="0.75"`, 8% opacity) for card surfaces. **3. Sci-fi HUD instrument panels.** Decorative UI chrome elements rendered as inline SVG: - **Radial sweep arcs**: `stroke-dasharray` animated arcs suggesting radar or oscilloscope sweeps, placed in section headers - **Hex-clip corner ornaments**: a 6-pointed clip applied via `clip-path: polygon(...)` to card corners, replacing the usual `border-radius` - **Cross-hair reticles**: `+` and `⊕` ornaments at 16px in `#d4a84280`, placed at section-break midpoints - **Status-bar fragments**: inline `NOMINAL | ACTIVE | SIGNAL_OK` strings in Fira Code at 10px, floated right in card headers **4. Topographic contour echoes.** Horizontal SVG polylines with slight sinusoidal variation, repeating every 32px vertically in the hero background, styled at `stroke: #5c3f2030`, evoking geological survey sheets beneath the hex overlay. ## Prompts for Implementation Build miris.one as **a field-station instrument console that teaches** — every piece of tutorial content is delivered as if read from a sensor readout, filed in a geologist's log, or transmitted from a remote post. The visitor is not a reader; they are an operator receiving a mission briefing. **Structural blueprint — four instrument bands, each a full-width section:** **Band 1 — Hex-Crown Hero (`#hero`):** - Full viewport height, background `#1e1108` with coarse grain filter - SVG hex grid at 30% opacity as background layer - Seven foreground hex cells in two offset rows: the center cell is larger (1.4× scale) and contains the animated sonar sweep + the domain wordmark in Nunito 800 italic at `clamp(1.8rem, 3.5vw, 3.2rem)` color `#e8d5b0` - Surrounding six cells contain: `SIGNAL: NOMINAL`, `SECTOR: G-7`, a 3-line instrument spec block, an animated `ELAPSED: 00:00:00` counter in Fira Code, a short mission-statement paragraph (2 sentences), and a single `→ ENTER CONSOLE` link in Fira Code - All cells fade in staggered (150ms delay per cell) on page load - A continuous horizontal contour-line pattern (`polyline` SVG) flows beneath the hex layer **Band 2 — Staggered Tutorial Columns (`#tutorials`):** - Background `#2d1f0e`, fine grain filter - Three columns in the stagger pattern described in Layout; each column is a scroll-triggered `IntersectionObserver` reveal (translate Y 40px → 0, opacity 0 → 1, 500ms ease-out) - Each card: `background: #3d2b15`, `border: 1px solid #5c3f20`, hex-clip on top-right corner, inner shadow `0 0 24px #d4a84215` - Card header: instrument label in Fira Code `INSTRUMENT_ID: 0x0N`, followed by heading in Nunito 700, then body in Source Serif 4 - On hover: `border-color: #d4a842`, `box-shadow: 0 0 32px #d4a84230`, card lifts `translateY(-4px)` (200ms ease) - HUD status strip appears at card bottom on hover: `SIGNAL: ACTIVE | SECTOR: G-N | OK` **Band 3 — Radial Overview Map (`#map`):** - Full-width section, background `#1e1108`, hex grid at 20% opacity - A single large SVG radial map: concentric hexagonal rings (not circles), three rings deep, with labeled nodes at each ring's six vertices — nodes are content anchors (topic names in Fira Code at 10px) - Animated: every 4 seconds, one ring highlights (stroke brightens from 20% to 80% amber, then fades) in a slow pulse - A `SCANNING...` label in Fira Code 11px orbits the outer ring via `animateTransform` **Band 4 — Footer Telemetry Strip (`#footer`):** - Height 64px, background `#1a0f04`, fine grain - Left: `miris.one` in Nunito 600 at 14px, color `#c4a882` - Center: animated ticker in Fira Code 11px, color `#d4a842`: `SECTOR: G-7 | TEMP: 312K | SIGNAL: NOMINAL | ELAPSED: 00:14:22 | STATUS: ACTIVE` - Right: three 16px hex ornaments in amber, fading in sequence (opacity loop 1→0.3→1 with 800ms stagger) **Animation budget:** - Grain filter: static SVG, zero JS - Hex sonar sweep: CSS `@keyframes rotate` on `conic-gradient`, GPU-composited - Card reveals: `IntersectionObserver`, `transform + opacity` only - Radial ring pulse: SVG `animate` element (SMIL), no JS required - Ticker: CSS `@keyframes marquee` on `translateX` **AVOID in implementation:** - CTA buttons with gradient fills - Pricing or stat grids - Any white or near-white background (`#fff`, `#f5f5f5`) - Rounded full `border-radius` cards — use hex clips only - Drop shadows that read as "card UI" rather than instrument glow ## Uniqueness Notes **Differentiators from the existing corpus:** 1. **Hex-honeycomb as primary layout grid** — hexagonal geometry is present as a decorative motif in several corpus entries, but no existing design uses staggered flat-top hexagonal cells as the actual structural layout system for content placement. miris.one's seven-cell hero and three-column stagger derive from hex geometry, not from a conventional grid. 2. **Earth-tone sci-fi HUD** — the corpus contains multiple sci-fi/cyberpunk entries (all cold-dark: blues, teals, greens) and multiple earth-tone entries (warm browns in cottagecore, wabi-sabi registers). miris.one is the **first to fuse them**: amber instrument glow, terracotta accents, and copper-pulse hex cells over burnt-soil backgrounds. This palette has no precedent in the corpus. 3. **Noise-texture grain as structural element** — grain appears in vaporwave/retro contexts in the corpus (usually as a nostalgic effect). Here it functions as a scientific field instrument artifact — the grain IS the background, reinforcing the geological survey aesthetic rather than signaling nostalgia. 4. **Tutorial content as mission telemetry** — no existing corpus design frames educational/tutorial content as instrument-panel readouts. The Fira Code instrument labels, NOMINAL status strings, and scrolling telemetry ticker give every piece of instructional content the character of a field dispatch, not a documentation page. 5. **Stagger pattern as explicit grid law** — the three-column cascading diagonal stagger (64px/128px offset per column) creates a read path that moves diagonally across the viewport before descending, unlike every other multi-column layout in the corpus which uses a flat baseline grid. **Chosen seed:** aesthetic: grainy-textured, layout: hexagonal-honeycomb, typography: humanist, palette: earth-tones, patterns: stagger, imagery: noise-texture, motifs: sci-fi-hud, tone: tech-tutorial **Avoided patterns (overused in corpus):** cottagecore, art-deco, ethereal, vaporwave, holographic, bauhaus, graffiti — none appear in miris.one's visual vocabulary.