# Design Language for miris.day ## Aesthetics and Tone miris.day is the daily record of someone who looks at the world through frosted glass — not to obscure it, but because the distortion is honest. The name carries the Latin echo of *mirum*, wonder, and the TLD `.day` anchors everything in the rhythmic, impermanent present: a single day, then another, a life made of them. The aesthetic is **glassmorphism** used not as a SaaS dashboard polish move but as a **perceptual philosophy** — surfaces that hold light, let shapes blur through from behind, and catch the hour of day in the color of their frost. The tone is **raw-authentic**: there is no corporate smoothness here, no paragraph that sounds like it was committee-approved. The writing is first-person, present-tense, sometimes incomplete. The design holds that rawness without embarrassment — translucent panels float over imagery that is imprecise, isometric diagrams that admit they are simplifications of a complicated interior, organic blob shapes that refuse to sit still. The visual temperature shifts across the page as the implied hour of day changes — dawn (pale lavender frost, #E8E4F7), mid-morning (near-white ice, #F0EFFF), early afternoon (cool aqueous, #C8D9F0), and dusk (deep violet glass, #3B2D6B). These are not decorative color stops; they are the page's argument that a day has a body, a shape, a light of its own. The overall mood is what you feel on an overcast winter morning when a single shaft of sun hits a glass of water and throws a spectrum across the table: **precise in its accident, beautiful because it didn't try to be**. ## Layout Motifs and Structure The page is structured as a **magazine-spread read** — each viewport-height section is a double-page spread opening onto the next, left-right weight balanced but never symmetrical. The model is not a digital magazine but the physical sensation of turning a heavy-stock page and finding the gutter still warm from the press. **Spread logic.** On desktop (min-width 1024px), every section is composed on a 12-column CSS grid with a deliberate gutter-bleed: the dominant content panel occupies 7 columns, the secondary panel occupies 4 columns, and 1 column is pure air. The columns switch dominance every other spread — left-heavy, right-heavy, left-heavy — creating a reading rhythm the eye follows without being directed. **Glass layer stack.** Each spread contains three layers of depth: 1. **Background wash** — a full-bleed gradient field behind everything, specific to the hour of day implied by that section. 2. **Floating glass panels** — `backdrop-filter: blur(18px) saturate(140%)` panels with a thin `1px rgba(255,255,255,0.25)` border and `rgba(255,255,255,0.08)` fill. These are the primary reading surfaces. 3. **Isometric icon layer** — small, precise isometric icons and diagrams that sit at mid-depth, overlapping both the background and the glass panels, bridging the two planes. **Organic blob dividers.** Sections do not separate with horizontal lines. Instead, an organic SVG blob (roughly 60vw wide, 20–30vh tall) acts as a transitional zone between spreads — its fill is a gradient stepping from the outgoing section's dominant color to the incoming section's. The blob is always slightly off-center, never mirrored. **Navigation.** A vertical rail of frosted-pill indicators on the right edge (6 pills, one per spread), each `4px × 32px` expanding to `4px × 56px` on active. No hamburger. No top bar. The navigation is a thermometer of progress, not a menu. **No hero CTA, no pricing, no stat-grid.** The page is a first-person magazine essay in six spreads, and the last spread is not a sign-up form but a colophon. ## Typography and Palette **Typography — expressive-variable system, all on Google Fonts.** Three typefaces, each carrying a named structural role. No fourth face appears anywhere. - **Display: *Fraunces*** (Google Fonts). An optical-size, variable serif with a built-in "wonky" axis — letters lean into each other with the casual confidence of handwriting that went to finishing school. Used for all section titles, pull quotes, and the site wordmark. Variable axes: wght 100–900, opsz 9–144, WONK 0–1. On spreads 1 and 6, WONK axis cranks to 1 (maximum expressiveness). On spreads 2–5, WONK sits at 0.4 (composed but alive). Size range: 72px–120px display, 38px–52px subhead. - **Body: *DM Sans*** (Google Fonts). A low-contrast geometric sans with optical adjustments at small sizes. All body prose, captions, labels. Weight 300 (light) for long-form paragraphs, weight 500 (medium) for captions and navigation labels. Size: 17px body, 13px captions. Line-height: 1.65 body, 1.4 captions. - **Accent/Mono: *Space Mono*** (Google Fonts). Used exclusively for dates, timestamps, and metadata strings (e.g., "08:14 —", "spread 03 of 06"). Weight 400 only. Size: 11px–13px. Letterspace: 0.12em. This face is not prose; it is measurement. **Palette — translucent-frost.** All color values are given as both hex (background fields) and rgba (glass surfaces). The palette is built from a single hue family — violet-blue — desaturated toward white at the cool end and deepened toward indigo at the warm end. | Role | Hex | Usage | |---|---|---| | Dawn Frost | #E8E4F7 | Section 1 background wash | | Ice White | #F0EFFF | Glass panel fill base | | Aqueous Day | #C8D9F0 | Section 3–4 background wash | | Deep Violet | #3B2D6B | Section 5–6 background wash, dark text on light surfaces | | Midnight Indigo | #1A1233 | Page base / deepest shadow | | Ghost White | #FAFCFF | Type color on dark glass panels | | Soft Iris | #9B8CC4 | Accent — isometric icon face highlights, active nav pill | **Glass surface recipes:** - Light panel: `background: rgba(255,255,255,0.10); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,0.28);` - Dark panel (sections 5–6): `background: rgba(27,18,51,0.45); backdrop-filter: blur(22px) saturate(120%); border: 1px solid rgba(155,140,196,0.22);` **Color NOT used here:** No warm hues, no orange, no green, no red. The frost palette is deliberately monochrome-cool — the rawness comes from typography and text, not from saturated color drama. ## Imagery and Motifs **Imagery is exclusively isometric icons — no photography, no raster assets, no stock.** All visual elements are constructed as isometric SVG icon sets, rendered inline, with a consistent isometric projection (30° top-down, cabinet oblique). Each icon is composed of three faces: top face (lightest shade), left face (mid shade), right face (darkest shade). The face shading uses the palette's violet-blue family — no other fill colors. **The isometric corpus (six icons, one per spread):** 1. **Spread 1 — "the glass"**: A transparent drinking glass rendered in isometric SVG. The three faces are Ice White, Aqueous Day, and Deep Violet respectively. Inside the glass, a refracted vertical bar of Ghost White simulates light passing through. Size: 180px × 180px. 2. **Spread 2 — "the window"**: A casement window, open at 45°, in isometric. The glass pane is rendered as a glassmorphic rectangle (partial blur applied via SVG filter). The frame is midnight indigo. Size: 200px × 200px. 3. **Spread 3 — "the day grid"**: A simple isometric calendar cube — six visible faces with ruled grid lines in Soft Iris at 0.5px. One cell is highlighted in Dawn Frost fill. This is not decorative; it is the section's content proposition. 4. **Spread 4 — "the signal"**: An isometric antenna tower, composed from rectangular prisms. From the tip, an SVG arc radiates in Soft Iris. The arc is animated (opacity 0→0.7→0 over 2.2s, eased). Size: 160px × 200px. 5. **Spread 5 — "the prism"**: A triangular prism in isometric, refracting a sliver of spectrum across the dark-panel background. The spectrum is a 6-stop linear gradient from Deep Violet through Ghost White and back. Size: 140px × 140px. 6. **Spread 6 — "the door"**: An isometric door, open, threshold light warm but still within the frost palette — a mix of Ice White and Ghost White to suggest warmth without breaking the hue family. Size: 160px × 200px. **Organic blob motifs.** Between each spread, an SVG organic blob (generated using Bézier curves with 6–8 control points, never more, never symmetric) serves as the section divider. Each blob has a `fill` of a gradient from the departing section's dominant color to the arriving section's. Blob shapes do NOT repeat — each is a distinct path. Blobs are never filled with solid colors; they always carry the gradient bridge. **No photography.** The rawness of the tone is carried by words and type choices, not photographic texture. The glassmorphism aesthetic provides all the visual richness needed through light manipulation and translucency. ## Prompts for Implementation Build miris.day as a **six-spread vertical magazine** that the visitor reads like a physical publication — each spread is a full viewport experience that transitions through an organic blob divider into the next. The site has no navigation drawer, no modal overlays, no cookie banners, no footer nav links. The right-rail pill navigator is the only chrome. **Spread 1 — Dawn / The Glass (section background: Dawn Frost gradient #E8E4F7→#C8D9F0):** The opening spread is the coldest and the quietest. A full-bleed Dawn Frost wash behind a single large glass panel centered at 7/12 columns. Inside the panel: the site wordmark "miris.day" in Fraunces 900wght 120px, WONK axis 1.0, color Ghost White. Below the wordmark, a first-person sentence in DM Sans 300 17px: two lines maximum, no period at the end — it trails off. The isometric glass icon floats at mid-depth, overlapping the panel edge at the 9/12 column mark. The slide-reveal entrance: on load, the glass panel slides up 40px and reaches opacity 1.0 over 700ms cubic-bezier(0.16, 1, 0.3, 1). The isometric icon follows with a 180ms delay. **Spread 2 — Morning / The Window (section background: Ice White #F0EFFF→#E8E4F7):** Two glass panels, left-heavy (7 col panel left, 4 col panel right). Left panel: a block of prose in DM Sans 300 17px, 5–6 lines, raw-voice personal writing. Right panel: the isometric window icon, large (200px), with Space Mono timestamp "08:14 —" above it at 11px letterspace 0.12em in Deep Violet. Slide-reveal: left panel slides in from the left 60px, right panel slides in from the right 60px, both triggered by IntersectionObserver at 0.2 threshold, 500ms offset between them. **Spread 3 — Day / The Grid (section background: Aqueous Day #C8D9F0→#D4E4F5):** The structural centerpiece. Right-heavy (4 col left, 7 col right). Left: the isometric calendar cube, large (180px), with the date of that day's entry rendered in Space Mono below it. Right: a deep glass panel (dark variant: rgba(27,18,51,0.45) backdrop-blur 22px) containing the longest prose section — 8–10 lines of DM Sans 300 17px, Ghost White on dark glass, line-height 1.65. This is the heart of the day's entry. **Spread 4 — Afternoon / The Signal (section background: layered gradient #C8D9F0 at top → #8899C0 at bottom):** Left-heavy (7 col left, 4 col right). Left panel: a pull quote set in Fraunces 500wght 52px WONK 0.4, Ghost White, two lines maximum. The quote is not attributed — it floats alone. Right: the isometric antenna with the animated arc in Soft Iris. The animation is `@keyframes pulse-ring` — arc scales from 0.8→1.2→0.8 in opacity while expanding. Slide-reveal on this spread: the pull quote text itself does the motion — each word slides in from opacity 0 position +10px, staggered 40ms per word, triggered by scroll. **Spread 5 — Dusk / The Prism (section background: Deep Violet #3B2D6B→#1A1233):** The page's darkest moment. Centered composition (6 col each side, icon centered at the gutter). The prism icon casts its spectrum gradient across the dark background — implemented as an SVG `` attached to a `` overlay at 35% opacity behind the icon. Above the prism: a single line of Fraunces 100wght 72px, WONK 0.4, letterspace -0.02em, Ghost White: "what today cost". Below the prism: two lines of DM Sans 300 17px, Ghost White 80% opacity, the most honest sentence on the page. **Spread 6 — Night / The Door (section background: Midnight Indigo #1A1233→#2A2050):** The colophon. Left: isometric door icon. Right: Space Mono text block — the day's metadata (time written, words typed, location if known) followed by a single Fraunces italic 400wght 38px line that is the day's final thought. The right-rail nav pills here show all six filled, indicating completion. No sign-up. No CTA. The page ends as a diary does: quietly, the door open. **Animation system:** - All section entrances use `slide-reveal` via IntersectionObserver + CSS transforms (`translateY(-40px)` or `translateX(±60px)` + `opacity: 0` → reset). No GSAP required; pure CSS transitions with JS trigger. - Transition easing: `cubic-bezier(0.16, 1, 0.3, 1)` for all reveals (Fast Out, Slow In — feels physical). - Blob dividers between sections: no animation. Static, present. - The prism spectrum overlay: `animation: spectrum-shift 8s ease-in-out infinite alternate` — hue-rotate 0→20deg on the gradient, slow enough to be subliminal. - Reduce motion: all animations disabled via `@media (prefers-reduced-motion: reduce)`. **Implementation notes:** - `backdrop-filter` support: Include `-webkit-backdrop-filter` prefix. On browsers without support, fall back to `background: rgba(255,255,255,0.20)` (no blur, slightly more opaque). - The 12-column grid: CSS Grid, `grid-template-columns: repeat(12, 1fr)`, `column-gap: 24px` on desktop, collapses to 4-column on tablet and 2-column on mobile. - Fraunces variable font: loaded via Google Fonts with `display=swap` and `wght@100..900` range. WONK axis toggled via CSS custom property `--wonk`. - All isometric SVGs: inline in HTML, not `` tags, so CSS can target their face elements for hover states (face highlights shift on hover, `transition: fill 300ms`). ## Uniqueness Notes 1. **Glassmorphism as phenomenology, not UI trend.** The corpus uses glassmorphism at 21% — but universally as a dashboard/SaaS surface treatment (frosted cards, floating nav). miris.day inverts the premise: the glassmorphism *is the subject*, not the container. The page argues that looking through frosted glass is what a day actually feels like — imprecise, light-caught, beautiful because nothing is fully resolved. This is the first design in the corpus to make the aesthetic's metaphysical claim literal in the content. 2. **Magazine-spread at 4% (rare), married to first-person diary voice.** Magazine-spread layouts in the corpus treat the format editorially — feature journalism, portfolio lookbooks. miris.day brings the physical weight of a magazine page to personal, confessional writing. The left-heavy / right-heavy column alternation creates reading rhythm that signals "this is worth sitting with" without any content-signaling tricks. 3. **Isometric-icons at 2% (very rare), used as phenomenological symbols, not UI chrome.** The corpus's isometric icon usage is exclusively in technical/SaaS contexts (feature illustrations, product diagrams). Here each isometric icon is a *metaphor for a time of day* — the glass, the window, the calendar cube, the antenna, the prism, the door. Isometric precision (angles, faces, shading) creates an intentional dissonance with the raw-authentic written voice, as if someone very precise was trying to describe something very imprecise. 4. **Translucent-frost palette at near-zero corpus frequency.** The corpus palette analysis shows translucent-frost as effectively unused. The cool violet-blue monochrome with no warm accent and no gradient drama is rare — the corpus overwhelmingly uses gradient (78%), warm (97%), and muted (32%) palettes. The frost palette's restraint is the design's most distinctive formal choice. 5. **Seed:** aesthetic: glassmorphism, layout: magazine-spread, typography: expressive-variable, palette: translucent-frost, patterns: slide-reveal, imagery: isometric-icons, motifs: organic-blobs, tone: raw-authentic. 6. **Avoided overused patterns:** photography (90% — avoided entirely), centered layout (86% — using left/right alternating spread dominance instead), full-bleed as primary structure (72% — present only as background wash, not content container), hand-drawn imagery (60% — replaced with precise isometric construction), gradient palette (78% — gradients present but never as the palette identity; frost blue is the identity), vintage motifs (43% — not present).