# Design Language for miris.tech ## Aesthetics and Tone miris.tech is presented as **the field-manual of a small instruments collective** — people who build measuring devices: mirrors that read light, gauges that read pressure, plumb-lines that read gravity. The name *miris* is treated as a coined word meaning *"that which measures the world quietly"*, and the whole site behaves like a 1958 industrial-design brochure for a precision-instruments firm that somehow survived into the present and now publishes its catalogue on the web. The aesthetic is **mid-century modern, but the engineering side of mid-century** — not the lounge chair, the oscilloscope; not the starburst clock, the slide rule. Think Braun under Dieter Rams' first decade, Olivetti's Divisumma calculators, Charles-and-Ray Eames' *Powers of Ten* film, the Atomium's strut-and-sphere geometry, and the warm orange-and-cream of vintage Kodak boxes. The mood is **optimistic-bright and confident** — the unshakable post-war faith that a well-made dial can explain the universe — but never twee, never "retro pastiche". Every curve is a real radius; every angle is 30°, 60°, or 90°; every color was mixed for a reason. The page should feel like turning the matte pages of a heavy, square-format brochure that smells faintly of letterpress ink and machine oil. Tone in copy: terse engineering captions. "Reads to 0.2 lux." "Holds calibration for nine years." "Made of one bent sheet." Sentences like specifications. No hype words, no exclamation marks except in the rare diagram callout. ## Layout Motifs and Structure The site is a **single long vertical document divided into diagonal-section bands**, where each band is sheared along a consistent 18.4° baseline (the arctangent of 1/3 — a "three-to-one fall", the same slope used in technical isometric drawing). Bands alternate between cream and a deep ink, and the diagonal cut between them is never decorative noise — it always carries a thin measurement tick-strip along its hypotenuse, like the edge of a steel rule laid across the page. Within each band the composition is a **strict 12-column engineering grid with a visible 8px baseline rhythm**, but content is placed *asymmetrically* on that grid — captions hang in a 3-column gutter on the left while a large instrument illustration occupies columns 5–12, or vice versa on the next band, producing a gentle left-right sway as you scroll. Negative space is generous and intentional: roughly 40% of every band is empty cream or empty ink, treated as "bench surface" the instruments rest on. Navigation is a **slim fixed left rail styled as a vernier scale** — a vertical ruler with engraved tick marks; the current section's position is shown by a small orange "cursor" that slides along the rail as you scroll, and each major tick is labelled with a two-digit section number (01, 02, 03…) in tiny Futura-style numerals. No top bar, no hamburger, no logo lockup floating in a corner — the wordmark *miris* appears once, full-size, in the opening band and never again. Page sequence (bands): **01 Cover plate** (huge wordmark + one-line definition) → **02 The premise** (why quiet measurement matters, three-to-one diagonal intro) → **03 The instrument family** (a row of four flat vector device portraits — mirror-meter, pressure gauge, plumb-line, light cell — on a shared bench line) → **04 Anatomy** (one device exploded into labelled parts along leader lines) → **05 How it reads** (an animated SVG schematic of a needle settling) → **06 The collective** (a small grid of round "badge" portraits, like buttons on a control panel) → **07 Colophon** (paper stock, type, the 18.4° fact, a single quiet sign-off line). No pricing band, no testimonial carousel, no stat counters. ## Typography and Palette **Type system — Google Fonts only:** - **Display & wordmark:** `Jost` (weights 400, 500, 600) — a geometric sans in the Futura lineage with perfect-circle 'o', single-storey 'a', and high-waisted 'e'; used for the *miris* wordmark at enormous size (clamp up to ~22vw, tracked tight at `-0.02em`), all section numbers, and band titles. This is the "engraved on the faceplate" voice. - **Body & captions:** `Archivo` (weights 400, 500, 600; also its narrow optical sibling feel via `font-stretch` where supported) — a grotesque with a slightly mechanical, drawing-office character; set at 17–19px, `line-height: 1.55`, `letter-spacing: 0.005em`. Specification captions are set in **Archivo at 13px, uppercase, tracked `0.12em`**, mimicking dymo-tape labels. - **Numerals & data:** `Spline Sans Mono` (weight 400) for any measured value, calibration figure, leader-line dimension, or vernier-rail tick label — tabular, even, the readout font. **Palette — mid-century instruments, warm and exact:** - `#F4ECDB` — *brochure cream* (primary light ground; matte paper) - `#E7DCC4` — *aged card* (secondary panels, the "bench") - `#1E2A26` — *machine ink* (dark bands, primary text on cream) - `#D5641C` — *signal orange* (the firm's accent — needle tips, the vernier cursor, active leader lines, the underline on the wordmark) - `#2F6D5E` — *patina teal* (secondary accent — schematic guide lines, hover states, the "calibrated" tag) - `#B8A77E` — *brass* (hairline rules, tick marks, exploded-view leader lines on cream) - `#8A1E12` — *deep vermilion* (used sparingly: warning callouts, the single closing flourish) Contrast logic: cream bands carry ink text + brass hairlines + orange accents; ink bands carry cream text + brass hairlines + teal guides + orange needles. Never more than two accent colors active in one band. ## Imagery and Motifs **Core motif — the instrument, drawn as flat vector engineering portraits.** No photography anywhere. Each device is rendered as a clean SVG line-and-flat-fill illustration in the manner of an exploded-view manual: 1.5px brass strokes, large flat cream/teal areas, a single orange element (the reading needle, the active sensor face). The four instruments: - **Mirror-meter** — a tilted circular mirror on a forked yoke with a protractor arc and a thin light-beam line bouncing off at 30°. - **Pressure gauge** — a round dial with a fan of tick marks, an orange needle frozen at about two-thirds, a knurled bezel ring. - **Plumb-line** — a small brass cone hanging from a thread inside a thin vertical frame, perfectly centered, with a level bubble at the top. - **Light cell** — a flat hexagonal panel of small squares (the "powers of ten" grid), one square glowing orange. **Recurring decorative system:** - **Tick-strips** — wherever an edge exists (band hypotenuse, section divider, the left vernier rail), it carries evenly spaced measurement ticks with every fifth tick longer, in brass on cream / cream on ink. - **Leader lines** — thin elbowed lines (always 90° bends) connecting a part of an illustration to its caption, ending in a tiny open circle, animated to draw themselves on scroll. - **The Atomium strut** — a faint background lattice of connected spheres-and-rods (30°/60° angles), used at very low opacity behind the cover band only, as a watermark of "structured space". - **Round badge buttons** — circular framed portraits/icons resembling the pilot lights and buttons of a control console; used for the collective grid and any link affordance. - **The 18.4° fact** — the slope is named explicitly somewhere in the colophon, with a tiny right-triangle diagram labelled "1" and "3". No gradients except a single barely-there paper-grain texture (SVG fractal noise at ~3% opacity) over cream grounds. No drop shadows softer than a crisp 2px offset; instruments cast a single hard brass-tinted shadow as if lit by one bench lamp. ## Prompts for Implementation Build miris.tech as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a slow, deliberate scroll through a square-format precision-instruments brochure. There is **no CTA, no pricing table, no email capture, no testimonials, no stat counters, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner.** The only "interaction" is reading and scrolling. **Structure & scroll choreography:** 1. **Band 01 — Cover plate.** Full-viewport cream. The wordmark `miris` enters with each letter rising from a 24px offset, staggered 60ms, settling on a spring (low stiffness, slightly underdamped — a needle finding zero). Beneath it, a single hairline and the definition line typed out character-by-character in Spline Sans Mono ("miris — *(n.)* that which measures the world quietly"). The Atomium lattice watermark fades in last at 4% opacity. A small "scroll" tick mark pulses once. 2. **Band 02 — The premise.** First diagonal cut (18.4°) reveals an ink band sliding up from below. Three short specification-style sentences fade in line by line, each preceded by a brass tick that draws itself left-to-right. 3. **Band 03 — Instrument family.** Cream band. Four flat-vector device portraits sit on a shared horizontal "bench line". As the band enters the viewport, the bench line draws itself left-to-right (path-draw-svg), then each instrument fades up in sequence with a 90ms stagger; the orange element in each (needle, glowing square, beam) animates last — the needle swings in and overshoots once. Hovering an instrument: it lifts 4px with its hard brass shadow lengthening, and its caption block (Archivo 13px uppercase) brightens. 4. **Band 04 — Anatomy.** Ink band. One instrument (the pressure gauge) shown large, then six leader lines elbow out one after another to labelled callouts as you scroll through the band — tie the draw progress to scroll position so the diagram "assembles" under the user's control. Each leader ends in a tiny open circle that pops in with a small elastic scale. 5. **Band 05 — How it reads.** Cream band. A single SVG schematic: a dial arc, a needle, a damping spring drawn as a coil. On entering, the needle does a full sweep test then settles to a reading with two diminishing overshoots — a literal animation of measurement. A mono caption counts up alongside it ("0.0 → 4.7 lux") synced to the needle. 6. **Band 06 — The collective.** Ink band. A grid of round "control-panel button" portraits; on hover each depresses 2px (inset shadow) and a teal ring lights around it. Names in Jost, roles in Archivo uppercase micro-caps. 7. **Band 07 — Colophon.** Cream band, quietest of all. Paper/type credits set like a real colophon, the 18.4° right-triangle diagram, and one closing line in deep vermilion: a single understated sign-off (e.g. "Calibrated by hand. Lisbon to wherever you are.") **Motion rules:** every entrance is spring-based and slightly underdamped (the "needle settling" feel) — never bouncy-cartoonish. SVG path-draw is the workhorse animation (bench lines, ticks, leader lines, the damping coil). The left vernier rail's orange cursor tracks scroll progress smoothly with a tiny lag. Reduce all motion to simple fades if `prefers-reduced-motion`. Cursor: a thin crosshair-like custom cursor (two 12px brass strokes) that magnetizes gently toward instrument hotspots and leader-line endpoints. **Texture & finish:** apply the SVG fractal-noise paper grain at ~3% over cream grounds; ink grounds get a fainter ~2% grain. All rules are exactly 1px or 1.5px, brass-tinted. All diagonal cuts are exactly 18.4°. Bias the entire experience toward *quiet, full-screen, document-like reading* — it should feel like being handed a beautifully made manual, not sold a product. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Mid-century *engineering*, not mid-century *décor*.** The corpus's handful of mid-century sites lean on furniture, starbursts, and atomic-age kitsch. miris.tech takes only the technical-drawing / Braun-Olivetti / *Powers of Ten* strand: protractors, vernier scales, exploded views, the 18.4° isometric slope as a literal layout constant. It reads as a precision-instruments brochure, not a Palm Springs interior. 2. **A consistent geometric law instead of vibes.** Every diagonal in the site is the same 18.4° fall, every leader-line bend is 90°, the whole layout is an 8px-baselined 12-column drawing-office grid, and the slope's derivation is even printed in the colophon. This is rare in a corpus dominated by 89% full-bleed / 88% card-grid / 86% centered layouts — diagonal-sections is a ~5% layout choice and here it's load-bearing, not ornamental. 3. **Photography-free, all flat-vector instrument portraits.** Against a corpus where 98% of designs use photography, miris.tech bans it entirely in favour of SVG exploded-view illustrations of invented measuring devices — and uses path-draw-svg (a ~33% pattern, but rarely as the *primary* motion language) to make those diagrams "assemble" under scroll control. 4. **Geometric-sans + grotesque + readout-mono triad with no mono-as-aesthetic.** Mono appears in ~94% of designs, almost always as the "techy" vibe font. Here `Spline Sans Mono` is restricted strictly to *measured values* — a functional readout face, not a costume — while `Jost` (Futura lineage) and `Archivo` carry voice and body. Palette is warm brochure-cream + machine-ink + signal-orange + patina-teal + brass — a deliberately physical, ink-on-matte-paper set, avoiding the gradient (96%) and glassmorphism (75%) defaults. 5. **Zero conversion furniture.** No CTAs, pricing, stats, testimonials, forms, logo walls, or banners — the page is a seven-band document you read once, like a real catalogue, ending on a single quiet vermilion sign-off line. Chosen seed/style: *mid-century modern furniture* — reinterpreted as `aesthetic: mid-century, layout: diagonal-sections, typography: futura-geometric, palette: burnt-orange, patterns: path-draw-svg, imagery: vector-art, motifs: geometric-shapes, tone: optimistic-bright`. Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (75%), photography (98%), full-bleed/card-grid/centered layouts (89/88/86%), gradient + warm-only palettes (96/98%), cursor-follow/spring-as-everything excess, parallax (93%), pastoral-romantic / warm-inviting tones. Preferred underused traits: diagonal-sections layout, isometric/mid-century geometry, vector-art imagery over photography, geometric-sans display, burnt-orange/brass/teal physical palette.