# Design Language for miris.quest ## Aesthetics and Tone miris.quest is a frosted observatory floating in a dense canopy -- the kind of structure you imagine when someone describes a research station built into the crown of an ancient redwood, where every wall is translucent resin and the forest breathes condensation onto every surface. The aesthetic is **glassmorphism** pushed beyond the typical SaaS dashboard cliche into something alive and vegetal: frosted panels that don't just blur a flat gradient behind them but reveal shifting layers of gradient-mesh foliage, as though the interface itself is a window into a computational forest. The tone is **tech-tutorial** -- not the sterile "Step 1, Step 2" kind, but the patient, knowledgeable voice of someone who builds things in the woods and explains how root systems mirror network topologies. There is authority here, but it comes from hands-on knowledge rather than institutional power. Think of it as a field guide written by an engineer who camps at the edge of algorithmic wilderness -- every explanation grounded in lived experience, every diagram drawn from observation rather than abstraction. The mood sits at the intersection of Olafur Eliasson's weather installations and the matte-glass surfaces of a Dieter Rams calculator reimagined in chlorophyll. Colors filter through translucent layers the way light filters through a triple-canopy forest: attenuated, scattered, arriving at the viewer's eye having passed through multiple panes of meaning. Nothing is opaque. Everything is layered. The site feels like the inside of a greenhouse that runs on code. ## Layout Motifs and Structure The layout follows a **portfolio-grid** architecture -- but not the flat, Pinterest-derivative tile array. This grid exists in depth. Each portfolio cell is a frosted glass card that hovers at a slightly different z-depth, casting subtle `box-shadow` layers that establish a three-dimensional stage. The grid is built on a 12-column system with a base unit of 64px and 20px gutters, but the key structural innovation is the **staggered elevation model**: cards in the first row sit at `translateZ(0)`, cards in the second row at `translateZ(-8px)`, third at `translateZ(-16px)`, creating a gentle recession into the page that reinforces the forest-canopy metaphor -- things closer to you are sharper and brighter, things deeper in the grid are softer and more diffuse. **Grid behavior across breakpoints:** - Desktop (1200px+): 3-column grid with 20px gaps, max-width 1140px, cards alternate between 1-column and 2-column spans using a repeating pattern: [1, 1, 2, 1, 2, 1, 1] creating asymmetric visual rhythm - Tablet (768px-1199px): 2-column grid, all cards single-span, reduced elevation offsets (4px steps) - Mobile (below 768px): single column, full-width cards stacked vertically, no z-offset, cards become horizontally swipeable carousels for image-heavy content **Navigation:** A persistent top bar rendered as a single frosted strip (`backdrop-filter: blur(20px) saturate(180%)`, `background: rgba(18, 46, 37, 0.65)`) that becomes more opaque as the user scrolls, transitioning from 65% to 88% opacity over the first 300px of scroll distance. Navigation items are set in Libre Baskerville at 0.85rem, uppercase with 0.12em letter-spacing, colored in #A8D5BA (soft mint) with underline-draw hover animations that trace from left to right over 300ms. **Section architecture:** The page is structured as a vertical sequence of portfolio zones separated by full-width gradient-mesh dividers -- horizontal bands of flowing color (40px tall) that use CSS `mesh-gradient` approximations (layered radial gradients) to create organic transitions between content sections. These dividers breathe: they animate with a slow CSS `background-position` shift over 12 seconds, giving the sense that the forest canopy above is swaying. ## Typography and Palette **Typography:** - **Primary / Headlines:** "Libre Baskerville" (Google Fonts) -- a refined, high-contrast serif with elegant bracketed serifs and generous x-height that reads as both classical and contemporary. Used at weights 400 (Regular) and 700 (Bold). Headlines set at 2.8rem to 4.5rem, line-height 1.12, letter-spacing -0.015em. The Baskerville tradition signals scholarly authority -- appropriate for the tech-tutorial tone -- while Libre Baskerville's digital-native design ensures crisp rendering at all sizes. Headlines in Deep Canopy (#122E25) on light surfaces, or Pale Lichen (#E8F0EB) on dark surfaces. - **Secondary / Body:** "Source Sans 3" (Google Fonts) -- a humanist sans-serif with open apertures and clean geometry that pairs with Baskerville's formality without competing. Weight 400 for body text, 600 for emphasis. Body set at 1.05rem, line-height 1.72, letter-spacing 0.005em. The generous line-height creates breathing room that mirrors the open-canopy layout. Body text in Bark (#3A4A42) on light backgrounds, or #C8D6CE on dark backgrounds. - **Tertiary / Code and Labels:** "JetBrains Mono" (Google Fonts) -- the monospaced typeface for code snippets, metadata labels, and technical annotations. Weight 400, size 0.88rem, line-height 1.55. Color: #7FB89A on dark backgrounds (a green-tinted mono that feels like terminal text filtered through leaves), or #2A5A3F on light backgrounds. **Palette:** The palette is **forest-green** -- not the cartoon green of eco-branding but the actual chromatic range of a temperate rainforest observed at different times of day. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Dark | Deep Canopy | #122E25 | Page backgrounds, card dark mode, primary text on light | | Primary Mid | Moss Floor | #1E5A3A | Section backgrounds, active states, card borders | | Primary Light | Pale Lichen | #E8F0EB | Light backgrounds, card surfaces, text on dark | | Accent Warm | Resin Amber | #C7A84E | CTAs, highlights, active navigation, link hover | | Accent Cool | Fern Mist | #A8D5BA | Secondary highlights, tag backgrounds, subtle accents | | Surface Glass | Frosted Leaf | rgba(232, 240, 235, 0.55) | Glassmorphic card backgrounds | | Surface Dark Glass | Canopy Shadow | rgba(18, 46, 37, 0.70) | Dark glassmorphic overlays | | Neutral | Bark | #3A4A42 | Body text, borders, subtle UI | | Neutral Light | Understory | #C8D6CE | Muted text, disabled states, dividers | Gradient definitions: - **Canopy Gradient:** `linear-gradient(160deg, #122E25 0%, #1E5A3A 45%, #2A7A4E 100%)` -- used as the primary page background beneath glassmorphic cards - **Mesh Divider:** Three overlapping radial gradients: `radial-gradient(ellipse at 20% 50%, rgba(167, 213, 186, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(199, 168, 78, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(30, 90, 58, 0.5) 0%, transparent 70%)` -- used for section dividers and background atmosphere ## Imagery and Motifs **Gradient-Mesh as Living Background:** The foundational imagery layer is a full-viewport **gradient-mesh** -- not a static gradient but an animated composition of 5-7 overlapping radial gradients positioned at varying coordinates, each with different animation durations (ranging from 8s to 20s) that slowly orbit their initial positions using CSS `@keyframes`. The mesh uses the forest palette: deep greens, moss tones, occasional flashes of amber warmth, creating the effect of dappled sunlight shifting through a canopy. This mesh is never directly visible -- it exists behind the glassmorphic cards, experienced only as color and light bleeding through frosted surfaces. The mesh uses `will-change: background-position` for GPU acceleration and each radial gradient animates independently: ```css @keyframes mesh-drift-1 { 0% { background-position: 20% 50%; } 50% { background-position: 25% 45%; } 100% { background-position: 20% 50%; } } @keyframes mesh-drift-2 { 0% { background-position: 80% 30%; } 50% { background-position: 75% 38%; } 100% { background-position: 80% 30%; } } ``` **Glassmorphic Card System:** Every content card is a glassmorphic panel: `backdrop-filter: blur(16px) saturate(160%)`, `background: rgba(232, 240, 235, 0.45)`, `border: 1px solid rgba(232, 240, 235, 0.25)`, `border-radius: 12px`. Cards cast a double shadow: `box-shadow: 0 4px 24px rgba(18, 46, 37, 0.15), 0 1px 3px rgba(18, 46, 37, 0.08)`. On hover, backdrop blur increases to 22px, background opacity rises to 0.58, and the shadow deepens -- the card "focuses" like a lens adjusting aperture. **Tech Motifs -- Circuit-Organic Hybrid:** The motif system is **tech** but filtered through the forest metaphor. Instead of cold circuit-board traces, the decorative patterns use SVG path elements that follow the branching geometry of mycelium networks -- fractal, organic, but rendered in the precise single-pixel strokes of technical diagrams. These patterns appear as: - Card corner accents: small SVG fragments (40x40px) in Fern Mist (#A8D5BA) at 30% opacity, showing branching node patterns reminiscent of both neural networks and root systems - Section divider overlays: horizontal bands where the mycelium pattern stretches across the full viewport width, animated with a slow left-to-right path-draw that takes 6 seconds to complete - Background watermark: a large-scale (60vw) mycelium network pattern centered on the page at 4% opacity, rotating at 0.5deg per second -- barely perceptible but adding subliminal organic complexity **Magnetic Cursor Interaction:** Portfolio grid cards respond to cursor proximity with a **magnetic** attraction effect. When the cursor enters a 120px radius around a card's center, the card translates 4-8px toward the cursor using `transform: translate(Xpx, Ypx)` calculated via JavaScript `mousemove` event listener with `requestAnimationFrame`. The translation follows an eased spring function (damping: 0.15, stiffness: 0.08) so the card doesn't snap but flows toward the pointer. When the cursor leaves the radius, the card springs back with a slight overshoot. This creates the sensation of cards being alive, leaning toward attention like plants toward light. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport canvas of the animated gradient-mesh on Deep Canopy (#122E25). For the first 800ms, only the mesh breathes -- slow, organic color shifts with no text. Then, from the center of the viewport, the site title "miris.quest" fades in using Libre Baskerville at 5vw (desktop) / 9vw (mobile), weight 400, color Pale Lichen (#E8F0EB). The fade is not a simple opacity transition but a combined `opacity` (0 to 1) and `backdrop-filter: blur()` (30px to 0px) animation over 1000ms -- the text appears to come into focus as though a frosted panel is clearing. Below the title, after a 400ms stagger, a subtitle reads "a quest through code and canopy" in Source Sans 3 at 1.1rem, weight 400, letter-spacing 0.15em, uppercase, color Fern Mist (#A8D5BA). The subtitle types itself using a typewriter effect at 45ms per character. After the hero sequence completes (approximately 3.5s from load), a scroll indicator -- a simple animated chevron in Resin Amber (#C7A84E) -- appears at the bottom center of the viewport with a gentle bounce animation (translateY oscillation: 0 to 8px, duration 1.5s, ease-in-out, infinite). **Portfolio Grid Section:** Below the hero, the portfolio grid fades into view as the user scrolls. Cards enter using a stagger animation: each card translates from `translateY(40px), opacity: 0` to `translateY(0), opacity: 1` with 120ms stagger between cards, triggered when the card's top edge crosses 85% of the viewport height. The animation uses a spring easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`. Each portfolio card contains: - A header zone with a gradient-mesh thumbnail (unique per card, using variations of the forest palette) - A title in Libre Baskerville at 1.35rem, weight 700 - A brief description in Source Sans 3 at 0.95rem, weight 400, max 3 lines with `line-clamp` - A row of tech-tag pills: JetBrains Mono at 0.72rem, background Frosted Leaf, border 1px solid Fern Mist, border-radius 100px - The magnetic hover effect (cards lean toward cursor) - On hover, the card's internal gradient-mesh thumbnail begins animating (it is static by default to reduce GPU load) **Narrative Scroll Sections:** Between portfolio grid zones, full-width narrative sections tell the story of a project or concept. These sections use a different visual treatment: the glassmorphic overlay extends edge-to-edge, the text is set wider (max-width 720px, centered), and Libre Baskerville is used at 1.15rem for long-form reading. A vertical line in Resin Amber (#C7A84E), 2px wide, runs down the left margin (offset 40px from the text block), functioning as both a scroll-progress indicator and a visual thread connecting narrative sections. **Interactive Code Blocks:** Within tutorial content, code blocks are rendered as dark glassmorphic panels: `background: rgba(18, 46, 37, 0.85)`, `backdrop-filter: blur(12px)`, with JetBrains Mono at 0.85rem. Syntax highlighting uses the forest palette: keywords in Fern Mist (#A8D5BA), strings in Resin Amber (#C7A84E), comments in Understory (#C8D6CE) at 60% opacity, functions in #7FB89A. Code blocks have a subtle top border in `linear-gradient(90deg, #C7A84E, #A8D5BA)` -- a 2px amber-to-mint gradient that signals "this is interactive content." On hover, code blocks elevate slightly (translateY(-2px)) and their border brightness increases. **Footer as Root System:** The footer renders as a wide glassmorphic band at the bottom of the page with the mycelium SVG pattern at 12% opacity spreading across its full width. Navigation links in the footer use the magnetic hover effect (text nodes lean toward cursor by 2-3px). The footer background is Canopy Shadow (rgba(18, 46, 37, 0.70)) with a top border that is actually a thin gradient-mesh strip (8px tall) serving as a visual root line separating content from ground. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie-cutter SaaS landing patterns, hero images with stock photography. This is an immersive narrative portfolio, not a conversion funnel. **Bias toward:** Full-screen moments, scroll-driven reveals, atmospheric transitions, code-as-content, spatial depth through glassmorphism, organic motion that rewards patient exploration. ## Uniqueness Notes **Differentiators from other designs:** 1. **Glassmorphism as Ecosystem, Not UI Pattern:** While glassmorphism at 8% frequency typically appears as a shallow SaaS dashboard aesthetic (frosted cards over a gradient), miris.quest recontextualizes it as a natural phenomenon -- light filtering through multiple translucent canopy layers. The frosted surfaces are not decorative but metaphorical: every blur is a layer of forest between the viewer and the underlying data-mesh. No other design uses glassmorphism to simulate ecological depth. 2. **Gradient-Mesh as Living Organism:** At 2% imagery frequency, gradient-mesh is rare and typically deployed as a static background. Here, the mesh is an animated ecosystem -- 5-7 independent radial gradients orbiting asynchronously, experienced exclusively through glassmorphic refraction. The user never sees the mesh directly; they only perceive its presence through the tinted, blurred, shifting colors behind frosted panels. This indirect perception is unique across the entire design corpus. 3. **Baskerville-Refined in a Tech Context:** At 2% typography frequency, the baskerville-refined choice is almost entirely absent from tech-oriented sites, which default to geometric sans-serifs or monospace. Pairing a high-contrast transitional serif (Libre Baskerville) with JetBrains Mono for code creates a visual language that reads as "scholarly engineer" -- someone who reads Knuth and Thoreau in the same sitting. The serif headlines over glassmorphic tech cards produce a tonal dissonance that no other design in the portfolio achieves. 4. **Forest-Green Palette Without Eco-Branding:** At 1% palette frequency, forest-green is nearly unused. When green palettes appear elsewhere, they typically signal sustainability or eco-marketing. miris.quest uses forest green not as branding but as phenomenology -- the actual color experience of being inside a dense forest canopy where all light is green-filtered. The palette includes warm amber accents (Resin Amber #C7A84E) that function like sunbeams penetrating the canopy, creating warmth without abandoning the green chromatic envelope. 5. **Magnetic Portfolio Cards as Phototropism:** The magnetic cursor interaction (6% frequency) is typically a novelty hover effect. Here it is narratively motivated: cards lean toward the cursor the way plants lean toward light (phototropism). This biological metaphor transforms a generic interaction pattern into a story-consistent behavior that reinforces the forest-as-interface concept. **Documented Seed/Style:** aesthetic: glassmorphism, layout: portfolio-grid, typography: baskerville-refined, palette: forest-green, patterns: magnetic, imagery: gradient-mesh, motifs: tech, tone: tech-tutorial **Avoided Overused Patterns:** - playful aesthetic (94%) -- replaced with glassmorphism (8%) - centered layout (99%) -- replaced with portfolio-grid (2%) - mono typography (99%) -- replaced with baskerville-refined (2%), using mono only for code blocks - warm palette (100%) -- replaced with forest-green (1%), a cool-leaning green palette with selective warm accents - scroll-triggered patterns (97%) -- present but subordinate to magnetic (6%) as the primary interaction paradigm - friendly tone (98%) -- replaced with tech-tutorial (1%), authoritative but approachable through craft rather than personality - vintage motifs (82%) -- replaced with tech (22%), filtered through organic metaphor - minimal imagery (94%) -- replaced with gradient-mesh (2%), a rich, animated visual layer - photography imagery (72%) -- absent entirely; all imagery is generated through CSS gradients and SVG patterns