# Design Language for miris.xyz ## Aesthetics and Tone miris.xyz inhabits the atmosphere of a 1970s Andrei Tarkovsky film recut by a playful geometer -- long, contemplative shots of impossible architecture dissolving into kaleidoscopic circuit diagrams, all rendered with the grain and warmth of anamorphic lenses. The aesthetic is **cinematic constructivism**: the slow-burn intensity of art-house cinema married to the precise, almost obsessive logic of geometric pattern-making. Imagine a title sequence designed by Saul Bass if he had been raised on Escher prints and Bauhaus textbooks, where every frame is a composition that rewards lingering attention. The tone is whimsical-creative -- not in the saccharine, confetti-and-balloons sense, but in the way a brilliant mathematician describes a proof as "elegant" or "beautiful." There is delight here, but it is the delight of unexpected symmetry, of a puzzle clicking into place, of a circuit completing itself. The mood oscillates between meditative focus and sudden bursts of visual wit: a triangle that reveals itself to be a play button, a grid that rearranges itself into a face, a waveform that spells a word. The site feels like entering a private screening room where the film playing is about the secret life of shapes -- how they tessellate, propagate, and occasionally misbehave. The atmosphere is hushed but never somber; every interaction carries a slight wink, a suggestion that the geometry knows it is being watched and is performing accordingly. ## Layout Motifs and Structure The layout follows a **bento-box** architecture -- a precisely subdivided grid where content occupies rectangular cells of carefully varied proportions, evoking both the compartmentalized elegance of a Japanese lunch arrangement and the modular logic of a circuit board. This is not a generic card grid; each cell has a deliberate aspect ratio and a specific role in the overall composition, and the gutters between cells are themselves active design elements (thin lines of #3D3A50 that pulse faintly on hover, suggesting electrical connections between compartments). **Structural Principles:** - **The Cinematic Frame:** The outermost container maintains a 2.35:1 aspect ratio on desktop viewports, letterboxed with deep charcoal bars (#1C1A2E) at top and bottom. This enforces the cinematic metaphor: the user is watching a film, not scrolling a webpage. On mobile, the aspect ratio relaxes to fill the viewport, but the letterboxing returns during transition animations to signal scene changes. - **The Bento Grid:** Within the cinematic frame, content is arranged in a CSS Grid with asymmetric column tracks -- `grid-template-columns: 1fr 1.618fr 1fr 0.618fr` -- using the golden ratio to establish proportional harmony. Row heights vary by section, but each "bento tray" (a full-viewport section) contains exactly 4-6 cells that together fill the available space with no orphaned gaps. Cells never overlap; negative space is achieved through intentional empty cells with subtle circuit-trace patterns. - **Scene Transitions:** Scrolling between bento trays triggers a cinematic dissolve -- a 0.6s crossfade where the outgoing tray desaturates to monochrome while the incoming tray fades in at full saturation. This is orchestrated with Intersection Observer and CSS opacity/filter transitions, not heavy scroll-jacking. The effect is gentle, like turning the page of a beautifully printed book. - **Progressive Disclosure Cells:** Within each bento tray, 1-2 cells are "sealed" -- they display only a geometric abstract icon and a thin border. On click or hover-hold (300ms), the cell expands in place (CSS Grid animation, `grid-row: span 2` or `grid-column: span 2`) and reveals its full content: text, secondary imagery, or an interactive diagram. This progressive disclosure mechanic rewards curiosity without punishing passive viewers, who still see a complete composition. - **The Gutter Network:** The 6px gutters between cells are styled as faint circuit traces (#3D3A50 at 40% opacity) with small circular nodes (4px diameter, same color) at intersection points. On page load, a subtle animation draws current through these traces -- a traveling highlight of #9B8EC4 (a soft violet) that moves from node to node at irregular intervals, completing circuits across the bento grid. This animation is low-frequency (one trace lights every 3-5 seconds) and uses `will-change: opacity` for performance. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with dramatic thick-thin stroke contrast, high x-height, and elegant hairline serifs that evoke both cinematic title cards and engraved circuit diagrams. Used at 3.2rem-6rem for section titles. Set with `font-weight: 700`, `letter-spacing: 0.04em`, `line-height: 1.05`. The high contrast of the letterforms creates a visual rhythm that mirrors the bento grid's proportional logic. Titles are set in sentence case, never all-caps, to preserve the whimsical tone. - **Body / Narrative Text:** "Source Serif 4" (Google Fonts) -- a robust, readable serif with optical sizing support and a slightly warmer character than Playfair. Used at 1.05rem-1.25rem for body text. Set with `font-weight: 400`, `letter-spacing: 0.01em`, `line-height: 1.72`. The generous line-height creates a sense of spaciousness within the bento cells, giving each paragraph room to breathe. The optical sizing feature ensures the type remains crisp and legible at small sizes within compact grid cells. - **Accent / Labels:** "DM Mono" (Google Fonts) -- a clean monospace with subtle personality, used exclusively for metadata labels, timestamps, grid coordinates, and interactive element labels. Set at 0.75rem-0.85rem, `font-weight: 400`, `letter-spacing: 0.08em`, `text-transform: uppercase`. Its monospaced regularity contrasts beautifully with the serif fluidity of the other two faces, and reinforces the circuit-board motif by making text feel like component labels on a PCB. **Palette:** The palette is muted but not lifeless -- think of a film stock that has been deliberately desaturated in post-production, retaining enough chroma to glow under the right light. Every color is one step removed from its "pure" version, as though viewed through a slight fog or projected onto a linen screen. | Role | Name | Hex | Description | |------|------|-----|-------------| | Primary Background | Projection Charcoal | #1C1A2E | Deep blue-black with a violet undertone, the darkness of a cinema before the projector ignites | | Secondary Background | Slate Indigo | #2A2740 | Slightly lighter, used for bento cells that need distinction from the base | | Tertiary / Gutter | Twilight Mauve | #3D3A50 | The circuit-trace color, a muted purple-gray that reads as both technical and atmospheric | | Primary Accent | Soft Violet | #9B8EC4 | The "current" color -- used for active states, hover glows, the traveling highlight in gutter traces, and focused text links | | Secondary Accent | Muted Gold | #C4A862 | A desaturated, almost smoky gold used for secondary emphasis, pull quotes, and geometric motif fills; evokes the brass of vintage projectors | | Text Primary | Linen White | #E8E4DC | Warm off-white with a slight cream cast, never pure #fff, for primary body text | | Text Secondary | Silver Fog | #A9A4B8 | A lavender-tinged gray for secondary text, captions, and metadata labels | | Highlight / Rare | Dusty Rose | #B87D8A | Used sparingly for moments of surprise -- a single geometric shape that breaks the violet-gold harmony, a notification indicator, an easter egg | ## Imagery and Motifs **Geometric-Abstract Visual System:** All imagery is constructed from geometric primitives -- circles, triangles, hexagons, and their tessellations -- composed into abstract arrangements that suggest meaning without being literal. No photography. No stock imagery. Every visual is CSS-rendered, SVG-composed, or canvas-generated. **Primary Motifs:** 1. **Circuit Tessellations:** The dominant visual motif is the circuit board reimagined as abstract art. Straight-line paths connect geometric nodes (circles of varying diameters from 4px to 24px) in patterns that suggest electrical schematics but follow no actual engineering logic. These tessellations fill background areas of bento cells, rendered as SVG with stroke-only rendering (no fills) in Twilight Mauve (#3D3A50) at 25% opacity. On hover, individual path segments illuminate to Soft Violet (#9B8EC4) with a 0.3s transition, creating the impression of live current flowing through the composition. 2. **The Miris Eye:** A signature geometric mark -- a circle inscribed within a triangle inscribed within a hexagon -- that serves as the site's visual anchor. It appears at three scales: large (occupying a full bento cell as a hero element), medium (as a section divider between bento trays), and small (as a favicon and repeated micro-ornament). At the large scale, each geometric layer rotates independently on scroll (circle: 0.5deg per pixel, triangle: -0.3deg, hexagon: 0.15deg), creating a slow, hypnotic parallactic effect. The Miris Eye is rendered in Muted Gold (#C4A862) stroke with no fill, 2px stroke-width. 3. **Fragmented Grid Overlays:** Within certain bento cells, a semi-transparent grid of fine lines (0.5px, Twilight Mauve at 15% opacity) creates a graph-paper effect that grounds the content in a sense of measurement and precision. These grids are slightly rotated (2-5 degrees) relative to the bento grid itself, creating a moiré-like visual tension that makes the composition feel alive. The rotation angle varies per section to prevent monotony. 4. **Dissolving Geometry:** Key transition moments feature geometric shapes that fragment into particles and reassemble into new configurations. A triangle breaks into 12 smaller triangles that drift apart, pause, then reassemble into a hexagon. This is achieved with CSS `clip-path` animations on individual SVG elements, timed to 1.2s with an ease-in-out-cubic curve. These dissolves occur at bento tray transitions and within progressive-disclosure reveals. 5. **Trace Animations:** Thin lines (1px, Soft Violet) that draw themselves along Bezier curves, connecting elements across the bento grid. These traces suggest the paths of thought or the flow of information through a network. They animate using SVG `stroke-dasharray` / `stroke-dashoffset` with staggered delays, so multiple traces draw simultaneously at different speeds, creating a sense of orchestrated complexity. **Decorative Details:** - Small "component labels" in DM Mono appear next to geometric elements (e.g., "NODE.07", "PATH.13", "v2.4.1"), reinforcing the circuit-board metaphor while adding textual texture. - Bento cell corners occasionally feature tiny L-shaped crop marks (2px lines, 8px length, Silver Fog color), as though the grid were a film frame being aligned for printing. - A single Dusty Rose (#B87D8A) geometric element appears once per bento tray -- always small, always unexpected -- as a visual Easter egg that rewards careful viewing. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport letterboxed frame in Projection Charcoal (#1C1A2E). For 0.8 seconds, the screen is dark -- a cinematic beat, the pause before the projector starts. Then, from the exact center, a single thin line of Soft Violet (#9B8EC4) extends horizontally in both directions, reaching the edges of the cinematic frame in 0.6s (SVG line with `stroke-dashoffset` animation). As it completes, four more lines descend vertically from the horizontal, subdividing the frame into the first bento tray. These lines draw themselves in Twilight Mauve (#3D3A50) over 0.4s with staggered 0.1s delays. As the grid structure completes, the bento cells fill with content -- text and geometric elements fade in (opacity 0 to 1, 0.5s, stagger 0.15s per cell) -- revealing the first "scene." **Progressive Disclosure Mechanic:** Sealed bento cells display a geometric icon (one of: circle-in-triangle, hexagonal node, intersecting lines) centered in the cell, rendered in Muted Gold (#C4A862) at 60% opacity. Below the icon, a DM Mono label reads "EXPAND" at 0.7rem. On click, the cell's `grid-row` or `grid-column` span increases via CSS Grid animation (the `grid-template-rows` / `grid-template-columns` values transition over 0.5s using the `interpolate-size` property or a JS-driven FLIP animation). Adjacent cells compress to accommodate, maintaining the bento tray's total area. The revealed content fades in with a 0.2s delay after the expansion completes. A second click reverses the animation. This mechanic replaces traditional accordions and modals with a spatially-integrated disclosure that preserves the grid's visual integrity. **Storytelling Through Geometry:** Each bento tray tells a "chapter" of the miris.xyz narrative. The first tray is "Signal" -- sparse, mostly empty cells with a single circuit trace animating across them, establishing the visual vocabulary. The second tray is "Structure" -- denser, with the bento grid fully populated and the Miris Eye appearing for the first time. The third tray is "Complexity" -- the grid subdivides further, progressive-disclosure cells appear, and multiple trace animations run simultaneously. The fourth tray is "Resolve" -- the grid simplifies again, the Miris Eye reassembles from fragments, and a single Dusty Rose element pulses gently, marking the narrative climax. **Animation Philosophy:** All animations follow a cinematic cadence -- slow builds, deliberate pacing, no bouncing or elastic easing. The default timing function is `cubic-bezier(0.25, 0.1, 0.25, 1.0)` (a gentle ease-out). Durations range from 0.3s (micro-interactions) to 1.2s (scene transitions), never faster, never slower. Animations should feel like camera movements: pans, dissolves, fades, and rack-focuses, not UI widget toggles. Nothing bounces. Nothing springs. Everything glides. **Technical Directives:** - Use CSS Grid exclusively for the bento layout. No flexbox for primary structure. - SVG for all geometric motifs and trace animations. No raster imagery. - `backdrop-filter: blur(4px)` on bento cells that overlay other content, maintaining the muted, slightly hazy cinematic quality. - `mix-blend-mode: screen` on Soft Violet accent elements against dark backgrounds to create a luminous, projected-light effect. - `prefers-reduced-motion` media query must disable all trace animations and dissolving geometry, replacing them with instant state changes. - The letterboxing effect uses `max-height: calc(100vw / 2.35)` on the main container with `margin: auto` and overflow hidden. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with stock photography, gradient mesh backgrounds, bouncy/elastic animations, neon glow effects, particle.js backgrounds. ## Uniqueness Notes **Differentiators from other designs:** 1. **Cinematic Letterboxing as Layout Constraint:** No other design in the portfolio uses a fixed cinematic aspect ratio (2.35:1) as the primary layout container. While other designs use full-viewport sections, miris.xyz enforces a horizontal frame that fundamentally changes the spatial grammar of the page. The letterbox bars are not decorative -- they structurally contain the experience, forcing content into a widescreen composition that privileges horizontal relationships over vertical scrolling. This is entirely absent from existing designs, where the default is full-viewport-height sections. 2. **Bento-Box Grid with Active Gutters:** The bento-box layout (at only 2% frequency) is rare enough on its own, but the addition of circuit-trace gutters that carry animated current transforms the grid from a static container into a living network diagram. The gutters are not passive whitespace; they are the connective tissue of the design, visually linking content cells into a unified circuit. No other design treats gutters as animated, thematic elements. 3. **Progressive Disclosure via Grid Expansion:** While progressive-disclosure (5% frequency) appears occasionally, the specific mechanic of CSS Grid cell expansion -- where a sealed cell physically grows to consume adjacent space -- is unprecedented. This is not a dropdown, accordion, or modal overlay; it is a spatial transformation of the grid itself, maintaining compositional integrity throughout the reveal. The bento grid literally reconfigures in response to user curiosity. 4. **Cinematic Animation Cadence with Zero Bounce:** Every animation in the design follows film-editing principles (dissolves, fades, slow pans) rather than UI animation conventions. The explicit prohibition on spring/elastic/bounce easing creates a fundamentally different motion language from the 33% of existing designs using spring animations and 14% using elastic easing. The result is meditative rather than energetic, contemplative rather than reactive. 5. **Muted Palette with Single-Color Surprise System:** While the muted palette category is common (68%), the specific implementation -- a dark violet-charcoal base with exactly one Dusty Rose element per section as a deliberate visual anomaly -- is unique. The Dusty Rose (#B87D8A) functions as a narrative device, not a UI element: it is the unexpected color in the film frame that draws the eye, the detail that signals the designer's presence. **Documented Seed/Style:** - aesthetic: cinematic - layout: bento-box - typography: elegant-serif - palette: muted - patterns: progressive-disclosure - imagery: geometric-abstract - motifs: circuit - tone: whimsical-creative **Avoided Overused Patterns:** - playful aesthetic (94%) -- replaced with cinematic (4%) - centered layout (99%) -- replaced with bento-box (2%) - mono typography (99%) -- DM Mono used only as accent, not primary; primary is elegant-serif Playfair Display (2%) - warm palette (100%) -- palette skews cool (violet-charcoal base) within the muted family - scroll-triggered as primary pattern (97%) -- progressive-disclosure (5%) is the primary interaction pattern; scroll triggers are limited to scene transitions only - friendly tone (98%) -- replaced with whimsical-creative (3%) - minimal imagery (94%) -- replaced with geometric-abstract (2%) - photography imagery (73%) -- zero photography; all visuals are SVG/CSS geometric constructions - vintage motifs (82%) -- replaced with circuit (19%) - parallax as primary motion (78%) -- no traditional parallax scrolling; the only parallactic effect is the counter-rotating Miris Eye element