# Design Language for miris.monster ## Aesthetics and Tone miris.monster is **the dressing-room mirror of a creature that has never agreed on a single shape** — a surreal, slightly unnerving cabinet where a being called *Miris* (from Latin *mirus* — "wondrous, strange, marvelous"; ablative *miris*, "by wonders") rehearses its reflections. The conceit: Miris is not a beast that hides in a cave. It is a polite, almost shy entity made entirely of *borrowed silhouettes* — a heron's neck stitched to a chandelier, a staircase that ends in a paw, a constellation poured into the outline of a coat. Every "page" of the site is one **mirror panel** in Miris's endless dressing room, and each panel shows the same subject wearing a different impossible body. The tone is **mysterious-moody, theatrical, dreamlike but composed** — not horror, not whimsy-cute; more like a Magritte canvas that has learned to breathe, or a Leonora Carrington tableau staged inside a velvet jewelry box. Nothing screams. Things *tilt*, *fold*, and *quietly become other things* while you watch. The emotional register: a held breath. The viewer is a guest who wandered backstage at an opera and found the costumes alive, rearranging themselves on the racks. There is reverence here, and a little vertigo. Surrealism appears in only ~2% of the cohort, and where it does it usually leans cartoonish or vaporwave-ironic; miris.monster commits to the **lucid, ceremonial surrealism** of mid-century painters — sharp edges, deep shadow, a single shaft of theatrical light, objects that are *too clearly rendered* to be a dream and yet cannot be real. ## Layout Motifs and Structure The page is built from **diagonal-sections** — full-bleed bands sheared at a consistent **-7° rake**, so the whole site reads like a stack of mirror panels leaning against a wall, each catching light at a slightly different angle. Diagonal-sections sit at only ~5% in the layout frequency analysis (almost everyone defaults to card-grid + centered + full-bleed rectangles), and miris.monster claims the diagonal for a *narrative* reason, not a decorative one: a tilted mirror shows you a body you weren't standing in front of. - **Spine:** one continuous vertical scroll, ~1100vh, divided into **seven sheared panels** (the "Seven Reflections of Miris"). Panel edges are real `clip-path` polygons cut at -7°; the seam between two panels is a 2px hairline of *bright nacre* (#E7E2D6) that behaves like the bevel of a mirror. - **Within each panel:** an **asymmetric** off-center composition — the "reflection" (a large SVG silhouette-collage of Miris in this panel's borrowed form) anchored to one third of the panel, captions and fragmentary text floating in the negative space opposite it, never in a tidy column. Text blocks are rotated to align with the -7° rake, so reading feels like leaning your head against glass. - **No top navigation bar.** Movement between Reflections happens through a thin vertical **"rail of pins"** on the left edge — seven small lozenge marks, each a different impossible-body glyph; the active one glows. This is *minimal-navigation*, ~5% of cohort. - **Depth:** each panel has three z-layers — a far backdrop (deep flat color + a single drifting celestial body), a mid layer (the reflection collage), and a near layer (a faint "smudge of breath" gradient + drifting motes). Layers shift on scroll at different rates — but slowly, like silk settling, never a theme-park parallax lurch. - The final panel breaks the rake: Reflection VII is **perfectly upright and perfectly empty** — just the nacre bevel framing the viewport and the user's own scroll position reflected as a faint moving line. Miris has run out of borrowed shapes; what's left is the mirror, and you in it. ## Typography and Palette **Fonts — Google Fonts only, three families, cast like a theatre bill.** - **Poiret One** (400) — the *display* face: the names of the Seven Reflections, the wordmark "MIRIS", panel numerals. Poiret One is a thin, geometric **art-deco-display** letterform (art-deco-display is ~3% of the cohort) — its perfect circles and hairline strokes read like wrought-iron mirror frames and 1920s vanity-table monograms. Set enormous: 9–16vw, letter-spacing 0.18em, often rotated to the -7° rake, sometimes mirrored horizontally so a word and its reflection share a baseline. - **Cormorant Garamond** (400, 500, italic) — the *speaking voice*: the fragmentary captions, the curatorial whispers ("here Miris wears the staircase"), footnotes. A high-contrast **elegant-serif** (~7% of cohort) with a long, theatrical italic — chosen over the ubiquitous mono/grotesk for the hush and old-museum-label intimacy it gives at 17–20px, leading 1.7. - **Archivo** (variable; 400–700) — the *machinery*: the pin-rail labels, micro-metadata, the single line of UI text. Plain, upright, neutral grotesk that *refuses* to be theatrical, so it grounds the page. Tiny: 11–13px, tracking 0.08em, uppercase. **Palette — jewel-tones (~3% of cohort), staged like gemstones under a single lamp. Deliberately NOT warm-default (98% of cohort is warm); this runs cool-and-deep with one ember accent.** - `#11131C` — *obsidian-velvet*: the dressing-room dark, primary backdrop. - `#1C2E3A` — *deep-teal-shadow*: secondary backdrop bands, the cold side of the mirror. - `#3B1E4A` — *amethyst-curtain*: backdrop for the most dreamlike Reflections; the violet of stage gels. - `#1A5E63` — *malachite*: jewel accent for silhouette fills and the active pin glow. - `#7A2E3B` — *garnet*: the second jewel accent — used sparingly on "wound" details where one borrowed body meets another. - `#C9A227` — *old-gold*: the ember; mirror-frame highlights, the single shaft of theatrical light, the wordmark hover state. The *only* warm note, and it earns its warmth by being rare. - `#E7E2D6` — *nacre*: the bevel hairline, body text on dark, the bright edge where light hits glass. - `#9FB7B5` — *misted-glass*: muted captions, the "breath smudge" gradient, dimmed text. ## Imagery and Motifs **Primary imagery: collage (~7% of cohort) — but vector collage, hand-drafted SVG, never photographic montage.** Every Reflection is one large composite silhouette of Miris assembled from *incompatible parts*: a heron's neck → a chandelier's tiers → a spiral staircase → a single enormous paw → a coat with stars where the lining should be. Parts are cut as flat shapes filled with the jewel-tones, joined by thin old-gold "seam" strokes (1px) so the assembly is honest about being an assembly. No gradients inside the shapes except one: a soft inner-glow on the seams, as if light leaks where the bodies don't quite fit. **Star-celestial motif (~3% of cohort) as the recurring "soul" of Miris:** in every panel, somewhere inside or behind the silhouette, drifts one small celestial body — a thin-ring planet, a hairline crescent, a single asterism of five points connected by 0.5px lines. It is always the *same* constellation, no matter what body Miris is wearing — the one constant. In Reflection VII (the empty mirror) it finally floats free, alone, centered. **Decorative system:** - **Mirror bevels:** every panel edge and every framed sub-element gets a 2px nacre hairline with a 1px old-gold inner companion line — the unmistakable double-line of a real beveled mirror. - **Breath smudges:** faint elliptical radial gradients (misted-glass at 6–10% alpha, `blur(60px)`, `mix-blend-mode: screen`) that drift slowly across the glass and *fade when the panel is centered in viewport* — Miris exhales when you look away. - **Floating motes:** 12–20 tiny nacre dots per panel, `r: 0.5–1.5px`, drifting on slow Lissajous paths — dust in a theatre lamp's beam. - **The mirror-fold:** the signature interaction-still — when text appears, it doesn't fade in; it *unfolds along a vertical crease*, the left half a half-beat behind the right, as if printed on the two leaves of a folding mirror. ## Prompts for Implementation Build miris.monster as **a single static HTML page, one stylesheet, one small ES module (~6KB minified), one ~1.6KB inline SVG sprite of the celestial glyph and pin glyphs, one Google Fonts request for three families.** No framework. No router. No React/Vue. No build step beyond a single esbuild pass. One continuous vertical scroll, ~1100vh, seven sheared panels. Total document weight excluding fonts: under 80KB. **Storytelling is the spine, not navigation.** The page is *The Seven Reflections of Miris*, scrolled top to bottom: 1. **THE DRESSING ROOM** — wordmark "MIRIS" huge in Poiret One, mirrored so the word and its reflection share a baseline; one empty mirror frame; a whispered Cormorant line: *"a creature that has never agreed on a shape rehearses, here, every shape it could wear."* 2. **THE HERON-CHANDELIER** — first composite silhouette; the celestial glyph caught in the chandelier tiers. 3. **THE STAIRCASE THAT ENDS IN A PAW** — the most architectural Reflection; -7° rake most pronounced. 4. **THE COAT LINED WITH STARS** — amethyst-curtain backdrop; the borrowed body is almost human, which is the most unsettling one. 5. **THE WOUND** — where two bodies meet badly; garnet seams; the only panel with visible "damage." 6. **THE EXHALE** — silhouette dissolving into breath-smudges and motes; text barely legible, misted-glass. 7. **THE EMPTY MIRROR** — upright, no rake, no silhouette; just the nacre bevel framing the viewport, the celestial glyph alone and centered, and a faint moving line that tracks the user's own scroll — "you in it." **Animation language — silk, not spring:** everything moves *slowly and with weight*. Panels shear into place on scroll via `clip-path` polygon transitions; the **morph** pattern (~12% of cohort, but used here for actual shape-morphing, not micro-bounces) drives the silhouettes — adjacent Reflections share SVG path vertex counts so one borrowed body can `d`-interpolate into the next as you scroll between panels (use a tiny requestAnimationFrame lerp on `getPointAtLength` samples, or pre-baked keyframe `d` strings). Text uses the **mirror-fold** reveal: a `clip-path: inset()` opening from a center vertical crease, left leaf 80ms behind the right, ease `cubic-bezier(0.22, 1, 0.36, 1)`, ~900ms. Breath-smudges drift on 70–110s loops and dim via `opacity` keyed to an IntersectionObserver `intersectionRatio`. The pin-rail's active lozenge gets a slow malachite glow-pulse (4.5s). **No cursor-follow, no magnetic buttons, no tilt-3d card hover** — those are at 79–89% of the cohort and would shatter the held-breath mood. The only pointer interaction: hovering the wordmark in Reflection I makes its mirrored twin slowly *rotate out of alignment* by 7° and back, old-gold catching the edge. **Respect prefers-reduced-motion:** morphs become instant cross-fades, drifts freeze, mirror-fold becomes a plain fade — the surrealism survives entirely in the still composition. **AVOID:** no CTA buttons, no pricing block, no stat-grid, no testimonials, no logo wall, no newsletter capture, no contact form, no chatbot, no cookie banner, no FAQ accordion, no feature comparison table, no hero-with-two-buttons. The page is *the artwork*. The only "interface" is the pin-rail and the scroll. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by another CMassC site: 1. **The monster is made of borrowed silhouettes, and the site's structure literally is a dressing-room mirror.** Most "monster" or surreal sites either go cute-creature or vaporwave-glitch. miris.monster is **lucid mid-century surrealism** (Magritte/Carrington register) where each scroll-panel is a beveled mirror panel showing the same subject in an impossible body — and the SVG silhouettes literally morph into one another via shared vertex counts. Surreal aesthetic is ~2% of cohort. 2. **Diagonal-sections used as narrative, not decoration.** The consistent -7° rake (~5% layout frequency) means "a tilted mirror shows a body you weren't standing in front of" — and the final panel *breaks* the rake to upright emptiness as the payoff. Reading text is rotated to the rake so it feels like leaning on glass. 3. **Cool jewel-tones with exactly one rare warm note.** 98% of the cohort is warm-default; miris.monster is obsidian-velvet / deep-teal / amethyst / malachite / garnet, with old-gold appearing rarely enough to feel like the single theatre lamp. No warm-gradient wash, no peach hero. 4. **Art-deco-display + elegant-serif + neutral grotesk — no mono anywhere.** 94% of the cohort uses mono type; this site has none. Poiret One (art-deco-display ~3%) for wrought-iron monogram display, Cormorant Garamond (elegant-serif ~7%) for museum-label whispers, Archivo as the deliberately un-theatrical machinery. 5. **The "breath" mechanic.** Misted-glass smudges that *fade when a panel is centered and bloom when it isn't* — Miris exhales when you look away. A behavior tied to IntersectionObserver intersectionRatio rather than a hover or click. 6. **Silk-weight motion, no spring/magnetic/cursor-follow.** Deliberately rejects the cohort's 79–93% spring/magnetic/parallax/cursor-follow stack in favor of slow `clip-path` shears, `d`-path morphs, and the vertical-crease "mirror-fold" text reveal. 7. **The empty seventh mirror reflects the user's scroll.** The site ends not with content but with the viewer: an upright bevel-framed void and a faint line tracking scroll position — "you in it." Chosen seed/style: **aesthetic: surreal, layout: diagonal-sections, typography: art-deco-display, palette: jewel-tones, patterns: morph, imagery: collage, motifs: star-celestial, tone: mysterious-moody** Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (75%), photography (98%), warm palette (98%), gradient (96%), mono typography (94%), parallax (93%), cursor-follow (89%), spring (86%), centered+card-grid+full-bleed rectangles (86–89%), magnetic (79%), stagger (76%), tilt-3d (25%).