# Design Language for miris-project.net ## Aesthetics and Tone miris-project.net channels the raw exuberance of the 1980s Memphis Group -- Ettore Sottsass, Nathalie du Pasquier, Michele De Lucchi -- but transplanted into a horizontal landscape that scrolls like a panoramic diorama of a botanical research station built inside a Memphis showroom. Think terrazzo countertops supporting terrariums, laminate shelving in salmon pink holding specimen jars, zigzag-patterned dividers separating greenhouse rooms. The Memphis vocabulary -- squiggles, triangles, stepped columns, clashing geometries -- is deployed not as ironic retro pastiche but as a genuine organizational principle: each geometric motif serves as a wayfinding element through the horizontal scroll. The tone is conversational and unhurried, like a botanist friend walking you through their eccentric studio, pointing at things and telling you stories about each plant, each project, each peculiar shelf arrangement. There is no corporate voice here, no pitch-deck cadence. Sentences are short. Explanations meander. The voice has the warmth of a handwritten postcard and the specificity of a field journal. The mood sits at the intersection of scientific curiosity and aesthetic delight -- a place where data collection and decoration are the same activity. Colors are pastel but never insipid; they carry the chalky, slightly dusty quality of Italian stucco walls or Japanese chalk pastels. The overall effect should feel like entering a space that is both a laboratory and a living room, where every surface has been considered and every object has a story. ## Layout Motifs and Structure The entire site is a single, continuous **horizontal scroll** -- a format at 0% usage in the current portfolio, making it the most distinctive structural choice available. Content flows left to right like a scroll painting or a zoetrope strip, with no vertical scrolling whatsoever (the scrollwheel is remapped to horizontal movement via CSS `overscroll-behavior` and JavaScript `wheel` event translation). **Structural Grid:** The horizontal canvas is divided into "rooms" -- discrete sections that are each exactly 100vw wide, snapping into place via CSS `scroll-snap-type: x mandatory`. Each room has its own internal grid: a 6-row by 4-column system within the viewport, with rows at approximately 16.6vh each and columns at 25vw each. This internal grid is deliberately loose -- elements are placed at grid intersections but frequently break alignment by 8-16px in a Memphis-inspired "off-grid" manner. Nothing sits perfectly centered. **Room Sequence:** 1. **Room 0 (Entry):** The domain name "miris-project.net" rendered as a Memphis-style architectural element -- letters stacked vertically like a totem, each character sitting on a different colored geometric pedestal. A single horizontal arrow at the bottom right hints at the scroll direction. 2. **Rooms 1-3 (Narrative):** Content rooms where text blocks sit inside Memphis-shaped containers -- paragraphs inside stepped frames, headings balanced on triangular shelves, pull quotes enclosed in terrazzo-textured circles. 3. **Room 4 (Specimen Gallery):** A horizontal gallery-within-the-gallery where thumbnail cards tilt and rotate in 3D space on hover. 4. **Room 5 (Greenhouse):** A full-viewport botanical illustration overlaid with Memphis geometric wireframes, creating a collision of organic and synthetic. 5. **Room 6 (Exit):** A closing room with contact information arranged as a Memphis-style "still life" -- email as a label on a geometric vase, social links as colored pegs on a zigzag shelf. **Navigation:** No traditional nav bar. Instead, a thin horizontal progress indicator at the very top of the viewport (height: 3px) fills from left to right as the user scrolls, using a gradient that cycles through the pastel palette. Small numbered dots along this bar correspond to rooms, clickable to snap-scroll to that section. This is the only navigation element. **Spatial Relationships:** Elements within rooms use deliberate z-index layering to create a sense of depth: background geometric shapes (z-index: 1) sit behind text containers (z-index: 2), which sit behind floating decorative squiggles (z-index: 3). The layered composition gives each room the quality of a stage set viewed from the wings. ## Typography and Palette **Typography:** - **Display / Headlines:** "Zilla Slab" (Google Fonts) -- weight 700. This slab-serif has the industrial solidity and geometric rigor that aligns perfectly with Memphis design philosophy. Its thick, bracketed serifs echo the blocky, architectural quality of Sottsass furniture. Used at 3rem-5.5rem for room titles and primary headings. Always set in sentence case. Letter-spacing: 0.02em. Line-height: 1.05 for tight, monumental stacking. - **Body / Narrative:** "Nunito" (Google Fonts) -- weight 400 for body, 600 for emphasis. A rounded sans-serif that provides the conversational warmth the tone demands. Its soft terminals and generous x-height make long-form horizontal reading comfortable. Set at 1.05rem-1.15rem, line-height 1.65, max-width per text block: 38ch (narrower than typical to prevent eye fatigue during horizontal scanning). Color: #4A4453 against light backgrounds. - **Accent / Labels:** "Zilla Slab" weight 500 at 0.8rem-0.95rem, used for specimen labels, room numbers, navigation dots, and metadata. All-caps with letter-spacing 0.15em for these micro-elements only. Color: varies per room, always matching the room's accent geometric. - **Pull Quotes:** "Zilla Slab" weight 700 italic at 1.8rem-2.2rem. Used sparingly (maximum once per room) for conversational asides or memorable phrases. Rotated 2-4 degrees and placed inside a colored geometric container. **Palette:** The palette draws from the dusty, chalky pastels of Memphis Group originals -- not the saturated neon pastels of contemporary "dopamine design" but the muted, almost powdery pastels of 1980s Italian industrial design. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Primary | Pale Lilac | #E8E0F0 | Default room background, text containers | | Background Alternate | Soft Cream | #F5F0E6 | Alternate room background for rhythm | | Accent 1 | Salmon Pink | #F2A7A0 | Memphis triangles, decorative squiggles, Room 1 accent | | Accent 2 | Mint Foam | #A8DBC5 | Memphis circles, botanical overlays, Room 2 accent | | Accent 3 | Dusty Mauve | #C4A0B9 | Memphis stepped columns, pull quote containers | | Accent 4 | Butter Yellow | #F0DDA0 | Memphis zigzag lines, progress bar segments | | Accent 5 | Powder Blue | #A7C4D9 | Memphis arcs, Room 5 greenhouse wireframes | | Text Primary | Deep Plum | #4A4453 | Body text, main headings | | Text Secondary | Warm Gray | #8A8494 | Labels, metadata, captions | | Geometric Dark | Charcoal Grape | #3D3548 | Outline strokes on Memphis shapes, 2px weight | **Color Rules:** - Each room has a designated primary accent color that dominates its geometric decorations - Background alternates between Pale Lilac and Soft Cream from room to room - Geometric outlines are always Charcoal Grape (#3D3548) at 2px stroke - No gradients on geometric shapes -- flat fills only, true to Memphis orthodoxy - The progress bar gradient cycles: Salmon Pink -> Butter Yellow -> Mint Foam -> Powder Blue -> Dusty Mauve ## Imagery and Motifs **Imagery Approach: Minimal but Structural** The imagery strategy is minimal in quantity -- no photographs, no photographic textures, no stock imagery. Instead, all visual content is constructed from two sources: CSS/SVG geometric primitives (the Memphis vocabulary) and line-drawn botanical illustrations (the nature motif). These two systems coexist in deliberate tension. **Memphis Geometric Vocabulary:** Every room contains a curated set of geometric elements drawn from the Memphis canon: - **Triangles:** Equilateral, always filled with Salmon Pink (#F2A7A0), outlined in Charcoal Grape (#3D3548). Used as shelf-brackets supporting text blocks. Sizes: 40px-120px. - **Circles:** Filled with Mint Foam (#A8DBC5), used as terrazzo-dot backgrounds (30-50 circles per room at 6px-14px diameter, scattered randomly but seeded per room for consistency). Also used at 200px+ diameter as containers for pull quotes. - **Stepped Columns:** The signature Memphis form -- a rectangle with a smaller rectangle offset on top, with a still smaller one offset on that. Used as vertical dividers between content blocks. Filled with Dusty Mauve (#C4A0B9). - **Zigzag Lines:** SVG polylines with 45-degree angles, stroke-only in Butter Yellow (#F0DDA0) at 3px weight. Run along the bottom of rooms as baseboard decoration. - **Squiggles:** Freehand SVG paths that undulate in sine-wave patterns, stroke-only in rotating accent colors at 2px weight. Float in z-index 3 as decorative overlays. **Botanical Line Drawings:** Nature motifs appear as thin-line (1.5px stroke) SVG illustrations of plant specimens: fern fronds, monstera leaves, ginkgo fans, seed pods. These are rendered in Charcoal Grape (#3D3548) with no fill -- pure line art, like botanical field sketches. They appear at 60-80% opacity so they recede behind text. In Room 5 (the Greenhouse), they dominate the viewport at full opacity and larger scale (400px-800px), overlaid with Memphis geometric wireframes in contrasting accent colors to create the signature collision of organic and synthetic. **Terrazzo Pattern:** A subtle terrazzo texture (CSS-generated using radial-gradient with randomized positions) appears on select surfaces -- the interior of large circle containers, the background of the navigation progress bar, and the Entry room floor. The terrazzo chips use all five accent colors at 30% opacity against the background. **Motif Interaction:** The key visual idea is that Memphis geometry contains and frames nature: triangles hold fern fronds like specimen frames, circles enclose seed pods like petri dishes, stepped columns support trailing vine illustrations. The geometric is the architecture; the botanical is the inhabitant. ## Prompts for Implementation **Horizontal Scroll Engine:** The foundation is a single `
` element set to `display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; height: 100vh; width: max-content;`. Each room is a `
` with `width: 100vw; height: 100vh; scroll-snap-align: start; flex-shrink: 0;`. The mousewheel is captured via JavaScript: `wheel` events translate `deltaY` into horizontal `scrollLeft` adjustment. Touch devices use native horizontal swipe. Keyboard arrow keys also navigate rooms. **Tilt-3D Interactions:** All interactive cards and geometric containers respond to mouse position with CSS perspective transforms. On hover, elements calculate the mouse offset from their center and apply `transform: perspective(800px) rotateX(Ydeg) rotateY(Xdeg)` where X and Y range from -8 to 8 degrees. This tilt effect gives the flat Memphis shapes a sense of physicality, as though they are laminated cards on a display table. The tilt animates with `transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` for a smooth, spring-like response. **Room Transition Choreography:** When a room snaps into view (detected via IntersectionObserver at threshold 0.6), its internal elements animate in with staggered timing: 1. Background geometric shapes scale from 0 to 1 over 400ms (ease-out) 2. Text containers slide in from the right by 60px over 500ms (ease-out), staggered 80ms apart 3. Botanical line drawings fade from 0 to their target opacity over 600ms 4. Floating squiggles draw themselves via SVG stroke-dashoffset animation over 800ms 5. Pull quotes (if present) rotate from -10deg to their final 2-4deg rotation over 500ms with a slight bounce (cubic-bezier(0.34, 1.56, 0.64, 1)) **Full-Screen Narrative Experience:** The site opens to Room 0 -- the entire viewport is Pale Lilac (#E8E0F0) with the domain name totem centered. No navigation is visible until the user begins scrolling, at which point the thin progress bar fades in at the top (opacity 0 to 1 over 300ms). There is no header, no footer, no hamburger menu. The experience is purely linear: enter from the left, exit from the right. Each room tells a piece of the story. The conversational tone is embedded in the content itself -- short paragraphs, direct address ("you" language), rhetorical questions, parenthetical asides. **Memphis Shape Generation:** All geometric decorations are generated via a deterministic pseudo-random system seeded per room index. A simple LCG (linear congruential generator) produces consistent positions, sizes, and rotations for each shape, ensuring the layout is reproducible but appears organic. The generation function takes (roomIndex, shapeIndex) and outputs {x, y, size, rotation, color}. This means the same page always renders the same arrangement -- no layout shift, no randomness on reload. **Specimen Card Interaction (Room 4):** Cards in the gallery room are 240px x 320px with a 2px Charcoal Grape border and a flat accent-color background. Each card contains a botanical line drawing (top 60%) and a text label (bottom 40%). On hover: the card tilts in 3D (as described above), the botanical drawing's stroke animates from Charcoal Grape to the room's accent color over 200ms, and the label text weight shifts from 400 to 600. Cards are spaced 24px apart and overflow the room width, creating a nested horizontal scroll within the main horizontal scroll (using `-webkit-overflow-scrolling: touch` for momentum). **AVOID:** - CTA buttons, call-to-action blocks, pricing tables, stat-grids - Vertical scroll layouts of any kind - Sticky headers, footers, or fixed navigation bars - Photography or photographic imagery - Gradient fills on Memphis shapes (flat fills only) - Centered symmetrical compositions (Memphis is deliberately asymmetric) - Dark mode or dark backgrounds (the pastel palette requires light surfaces) - Generic grid layouts (the horizontal scroll IS the grid) ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal Scroll as Primary Navigation:** At 0% frequency in the current portfolio, horizontal-scroll layout is completely unused. This is not a "horizontal scroll section within a vertical page" -- the entire site IS a horizontal scroll. Every interaction, every transition, every spatial relationship is organized along the x-axis rather than the y-axis. This fundamentally alters how users experience content and creates a museum-walkthrough cadence that no other design in the portfolio achieves. 2. **Memphis Aesthetic at 1% Frequency:** Memphis design -- with its specific vocabulary of terrazzo, stepped columns, zigzag lines, and pastel-on-pastel color clashing -- appears in only 1% of existing designs. This implementation is faithful to the original Memphis Group principles (Sottsass, du Pasquier) rather than the genericized "80s retro" that sometimes passes for Memphis. The geometric vocabulary is used structurally (as containers, dividers, and wayfinding elements) rather than decoratively. 3. **Memphis-Botanical Collision:** The specific combination of Memphis geometric vocabulary with botanical line-drawing motifs does not exist in any other design. The conceptual frame -- a botanical research station built inside a Memphis showroom -- creates a narrative justification for this collision that prevents it from feeling arbitrary. Geometry contains nature; nature softens geometry. 4. **Tilt-3D on Flat Memphis Shapes:** Applying perspective-based 3D tilt effects (at 3% frequency) to deliberately flat, two-dimensional Memphis shapes creates a productive visual paradox: forms that insist on their flatness through solid fills and hard outlines suddenly acquire depth through interaction. This is a genuinely novel combination -- tilt-3d is almost always applied to cards or photographic elements, never to geometric primitives. 5. **Slab-Serif Typography in Memphis Context:** The pairing of "Zilla Slab" (slab-serif at 3% frequency) with Memphis geometry is historically resonant -- slab-serifs were a favored typographic choice in 1980s Italian design -- but absent from the current portfolio. Most Memphis-adjacent designs default to geometric sans-serifs. The slab-serif's industrial weight grounds the pastel playfulness. **Documented Seed/Style:** `aesthetic: memphis, layout: horizontal-scroll, typography: slab-serif, palette: pastel, patterns: tilt-3d, imagery: minimal, motifs: nature, tone: conversational` **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with horizontal-scroll (0%) - Warm palette (100%) -- replaced with pastel (7%) - Scroll-triggered patterns (97%) -- replaced with tilt-3d (3%) and room-snap transitions - Mono typography (99%) -- replaced with slab-serif (3%) - Friendly tone (98%) -- replaced with conversational (3%) - Vintage motifs (81%) -- replaced with nature (31%) - Playful aesthetic (95%) -- replaced with memphis (1%)