# Design Language for miris.one ## Aesthetics and Tone miris.one channels the spirit of the Bauhaus Dessau building at twilight -- that specific hour when the glass curtain walls become translucent screens, the interior grid of fluorescent tubes becomes visible from outside, and the entire structure hovers between diagram and dwelling. The aesthetic is **Bauhaus zen**: not the popularized Bauhaus of primary-color posters and geometric clip art, but the contemplative, almost monastic Bauhaus of Anni Albers's weavings and Josef Albers's meditations on color interaction. Every element exists because it must. Every relationship between elements is deliberate. The mood is one of focused stillness -- the kind of quietude found in a well-organized workshop after all the students have gone home, where tools hang in their appointed places and the drafting table holds a single unfinished composition. The visual direction draws from three specific Bauhaus sources: (1) Herbert Bayer's universal grid systems, where type and image occupy mathematically determined positions, (2) Moholy-Nagy's photograms, where objects are revealed not by direct depiction but by the light and shadow they cast, and (3) the Bauhaus stage workshops, where human figures moved through geometric spaces in slow, ritualized sequences. This last reference is crucial -- miris.one should feel like a stage set awaiting its performer, every element precisely placed but vibrating with potential movement. The zen dimension is not decorative. It manifests as disciplined restraint: the willingness to leave most of the viewport empty, to let a single typographic element breathe in isolation, to allow transitions to complete slowly rather than snap into position. The contemplative tone means the site never rushes, never shouts, never tries to persuade. It simply presents itself, the way a stone garden presents its rocks -- take it or leave it, the arrangement will not change for you. ## Layout Motifs and Structure The layout employs a **Bauhaus modular grid** system built on a strict 12-column base, but the content occupies only the central 6 columns for primary information, creating deep margins that function as meditative negative space. This is centered layout elevated to philosophy -- the centering is not a default choice but an intentional act of bilateral symmetry that references both Bauhaus compositional theory and the centered axis of zen calligraphy scrolls. **The Grid as Visible Architecture:** Unlike conventional web grids that remain invisible scaffolding, miris.one makes its grid partially visible. Thin hairline rules (#5C1A2A at 0.08 opacity) mark every column boundary, running from top to bottom of the viewport. These lines are always present, always faintly visible, creating a ruled-paper quality that whispers "this space is organized." On scroll, the content moves but the grid lines remain fixed (position: fixed), so elements appear to slide along rails -- a direct reference to Bauhaus stage machinery where performers moved on tracks and pulleys. **Vertical Rhythm Module:** All vertical spacing derives from a single base unit of 8px. Section breaks use 16 base units (128px). Paragraph breaks use 4 base units (32px). This mathematical consistency creates a metronomic rhythm that reinforces the zen quality -- the eye learns the beat and relaxes into it, the way a meditation practitioner relaxes into counted breaths. **Three Compositional Zones:** 1. **The Threshold:** The opening viewport is a single screen of burgundy-tinted cream (#F2E8E0) containing only the domain name and a single horizontal rule. No navigation, no scroll indicator, no animation. The visitor must discover that scrolling is possible. This deliberate withholding of affordance is a zen gesture -- the site does not beckon, it waits. 2. **The Corridor:** The main content area unfolds as a vertical sequence of centered text blocks and isometric illustrations, each separated by exactly 128px of breathing space. Each content unit is self-contained: a heading, a body of text, and optionally an isometric icon cluster. The corridor never varies its width or alignment. This repetitive, almost ritualistic structure creates a meditative cadence. 3. **The Terminus:** The page ends not with a footer but with a gradual fade -- content becomes progressively more sparse, spacing increases from 128px to 256px to 512px, until the final element floats alone in an ocean of cream space. The last visible element is a single isometric cube rendered at 50% opacity, slowly rotating on its axis via CSS animation at 60 seconds per revolution -- so slow that the movement is subliminal. ## Typography and Palette **Typography:** - **Display / Headlines:** "Libre Baskerville" (Google Fonts) -- the refined, high-contrast serif that carries the intellectual gravity of 18th-century typographic rationalism into the Bauhaus grid. Used at 2.8rem to 5rem, weight 700, with `letter-spacing: 0.02em` and `line-height: 1.15`. The Baskerville letterforms -- with their sharp, thin serifs and strong vertical stress -- echo the precision of Bauhaus draftsmanship while introducing a classical warmth that pure geometric sans-serifs cannot achieve. Headlines are always set in sentence case. Color: #3A0F1A (deep burgundy-black). - **Body Text:** "Libre Baskerville" regular (400 weight) at 1.05rem with `line-height: 1.75` and `letter-spacing: 0.01em`. The generous line-height creates vertical airiness within the text block, making each line feel like a separate breath. Body text color: #5C1A2A (burgundy-brown), which is softer than black and harmonizes with the cream background without sacrificing readability. Maximum line length: 38em, enforced by the 6-column constraint. - **Captions / Labels:** "IBM Plex Sans" (Google Fonts) -- light weight (300) at 0.8rem, all uppercase, with `letter-spacing: 0.15em`. This geometric sans-serif provides necessary contrast against the serif body text and references Bauhaus typographic tradition directly. Used for navigation labels, image captions, date stamps, and metadata. Color: #8C4A5A (muted rose). - **Monospace Accents:** "IBM Plex Mono" (Google Fonts) -- used sparingly for numerical data, coordinates, or grid references that appear as decorative marginalia. Weight 400, 0.75rem, color: #B07A8A (pale burgundy). These numerical fragments float in the margins outside the main 6-column content area, visible only on viewports wider than 1200px, referencing Bauhaus technical drawing annotations. **Color Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Primary | Warm Cream | #F2E8E0 | Page background, primary surface | | Background Secondary | Parchment | #EDE0D4 | Alternate section backgrounds, card surfaces | | Text Primary | Burgundy Black | #3A0F1A | Headlines, primary text emphasis | | Text Body | Burgundy Brown | #5C1A2A | Body paragraphs, secondary text | | Text Muted | Muted Rose | #8C4A5A | Captions, labels, metadata | | Accent Primary | Deep Burgundy | #6B1D2A | Links, interactive elements, icon strokes | | Accent Secondary | Dusty Mauve | #B07A8A | Hover states, decorative accents, grid lines | | Highlight | Oxidized Copper | #8A5A3A | Sparse highlight moments, isometric icon fills | | Shadow | Wine Shadow | #2A0A12 | Deep shadows in isometric illustrations | | Grid Lines | Burgundy Ghost | #5C1A2A (8% opacity) | Visible grid structure overlay | The palette deliberately avoids pure whites and pure blacks. The darkest value (#2A0A12) is a concentrated burgundy that reads as near-black but carries chromatic warmth. The lightest value (#F2E8E0) has enough yellow-pink undertone to feel like aged linen rather than sterile white. This tonal compression creates a hushed, low-contrast environment that reinforces the contemplative mood -- nothing screams, everything murmurs. ## Imagery and Motifs **Isometric Icons as Primary Visual Language:** The sole imagery system is a family of **isometric technical illustrations** rendered in a strict Bauhaus-influenced style. These are not playful isometric cartoons or corporate infographic elements -- they are precise, almost architectural projections of abstract objects: cubes, cylinders, stepped platforms, L-shaped brackets, nested frames, and interlocking modules. Every isometric illustration is built from the same 30-degree projection angle and shares a common unit size, so any two illustrations can be placed side by side and their geometries will align perfectly. **Construction Rules:** - All isometric forms are built from CSS/SVG, never raster images - Stroke weight: exactly 1.5px for primary outlines, 0.75px for internal detail lines - Stroke color: #6B1D2A (deep burgundy) at 70% opacity - Fill palette limited to: #F2E8E0 (cream face), #EDE0D4 (shadow face), #8A5A3A (copper accent face -- used on maximum one face per object) - No gradients within fills -- flat color only, with dimensional depth conveyed purely through the isometric projection and face-color differentiation - Every isometric cluster contains exactly 3 or 5 objects (odd numbers create visual tension; even numbers feel resolved and static) **Icon Subjects:** The isometric icons are abstract architectural fragments rather than representational objects. They suggest: partially assembled structures, modules mid-connection, geometric forms in states of becoming. This abstraction reinforces the Bauhaus philosophy that form follows function while leaving function deliberately ambiguous. Specific configurations include: - A stack of three cubes with the top cube rotated 45 degrees, creating a pinwheel shadow - Two cylinders bridged by a flat platform, suggesting infrastructure - An L-shaped bracket cradling a small sphere, implying containment without closure - A stepped ziggurat with one face open, revealing internal grid structure **Grid Lines as Decorative Motif:** The visible column grid extends beyond functional layout into pure decoration. At certain scroll positions, the grid lines brighten from 8% to 15% opacity and additional horizontal rules appear, creating a brief moment where the page resembles a sheet of graph paper. This "grid reveal" occurs at transition points between content sections, lasting 400ms before fading back to baseline. The effect is subtle -- most visitors will not consciously notice it, but it contributes to a subliminal sense of underlying order. **Marginalia System:** In the deep margins flanking the central content column, small typographic fragments appear: grid coordinates like "C4.R12", module references like "M-03", or single words in uppercase IBM Plex Sans at 0.65rem. These elements are positioned at mathematically precise intervals (every 512px vertically) and are rendered in #B07A8A at 40% opacity. They reference the annotation systems used in Bauhaus technical drawings and architectural plans, creating the impression that the visible page is a surface layer atop a deeper organizational system. ## Prompts for Implementation **Full-Screen Meditative Scroll Experience:** The site opens to a full-viewport threshold screen of warm cream (#F2E8E0). The domain name "miris.one" is set in Libre Baskerville Italic at 4.5rem, centered both horizontally and vertically, in #3A0F1A. Below the name, separated by 64px of space and a single 120px-wide horizontal rule (1px, #6B1D2A at 40% opacity), sits a subtitle phrase in IBM Plex Sans Light at 0.85rem, uppercase, letter-spaced at 0.12em. Nothing else. No hamburger menu. No scroll indicator. No animation. The site begins in absolute stillness. **Blur-Focus Transition System:** All content enters the viewport in a blurred state and resolves to sharpness as the user scrolls. This is the primary animation vocabulary -- not fade-in, not slide-in, but **focus-in**, as if the user is adjusting a lens. Implementation uses CSS `filter: blur()` transitioning from `blur(8px)` to `blur(0)` over 800ms with an `ease-out` timing function, triggered by Intersection Observer at a 0.3 threshold. The blur transition is paired with a simultaneous opacity shift from 0.4 to 1.0. This creates the sensation of thoughts crystallizing, of meaning emerging from contemplation -- perfectly aligned with the zen-contemplative tone. **Isometric Icon Animation:** The isometric illustrations do not appear statically. Each one assembles itself as it enters the viewport: individual geometric faces draw in sequence (left face, right face, top face) with 200ms stagger between each face, using CSS `clip-path` animations that reveal each face as if being constructed in real-time. The assembly animation runs once and does not repeat. Combined with the blur-focus system, the effect is: the overall form focuses into view while its individual faces are still completing their construction -- a layered reveal that rewards patient attention. **Grid Pulse Effect:** At each section boundary (every 128px major break), the background grid lines perform a subtle "pulse" -- their opacity increases from 8% to 18% and back over 600ms with an ease-in-out curve. This pulse ripples outward from the center column, with each column's grid line pulsing 50ms after its inner neighbor, creating a gentle breathing effect that reinforces the meditative rhythm. Implementation: CSS custom properties controlled by Intersection Observer callbacks, with `transition-delay` calculated per-column. **Scroll Velocity Response:** The site responds to scroll speed. When the user scrolls slowly (deliberate reading pace), blur-focus transitions are smooth and complete. When the user scrolls quickly (scanning), elements snap to focus instantly with no transition, acknowledging that the user is not in contemplative mode. Detection uses a simple velocity calculation comparing `scrollY` deltas over 100ms intervals. Threshold: if delta > 200px per 100ms, disable transitions; otherwise, apply full blur-focus system. **Typography Micro-Animations:** Headlines have a subtle letter-spacing animation: on first entering the viewport, letter-spacing starts at 0.08em and contracts to 0.02em over 1200ms with a custom cubic bezier (0.23, 0.95, 0.38, 1.0). This gives each headline a gentle "exhale" quality -- the letters breathe in from an expanded state and settle into their final, tighter arrangement. The effect is barely perceptible at normal scroll speeds but adds organic life to what would otherwise be static typography. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images, gradient backgrounds, parallax depth effects, hamburger menus, sticky navigation bars, card-based layouts, animated counters, modal popups, notification badges, progress bars, tabbed interfaces. The site has no commercial intent and no interactive UI components beyond scrolling. It is a visual essay, not an application. **Color Temperature Shift:** As the user scrolls deeper into the page, the background color subtly warms: starting at #F2E8E0 and gradually shifting to #EDE0D4 by the midpoint, then to #E8D8CC by the terminus. This shift is imperceptible in any single viewport but creates a cumulative sense of deepening warmth, as if moving from a sunlit room into a candlelit alcove. Implementation: background-color tied to scroll position via CSS custom property updated by a throttled scroll listener. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus-Zen Synthesis:** No other design in the portfolio combines Bauhaus systematic grid philosophy with zen contemplative restraint. The Bauhaus aesthetic appears at only 1% frequency, and the zen-contemplative tone at only 3%. Their intersection is entirely novel. Where other Bauhaus-influenced designs tend toward primary colors and dynamic compositions, miris.one uses the Bauhaus grid as a framework for stillness rather than movement -- the grid contains emptiness instead of content. 2. **Visible Grid as Atmospheric Element:** While grid-lines appear as motifs at 8% frequency, no other design treats the structural grid as a permanently visible, breathing decorative layer. The fixed-position column rules that pulse at section boundaries create an ever-present sense of underlying architecture that visitors feel rather than see. This technique -- making the invisible scaffolding partially visible -- is borrowed from architectural practice (exposed structural steel, visible wiring) but applied to web layout for the first time in this portfolio. 3. **Baskerville in Bauhaus Context:** The baskerville-refined typography category sits at only 1% frequency. The deliberate collision of 18th-century transitional serif typography with 20th-century Bauhaus spatial logic creates a temporal paradox: the letterforms predate the grid system they inhabit by 200 years. This anachronism generates visual tension that prevents the design from feeling like a Bauhaus pastiche. Libre Baskerville's vertical stress and sharp serifs actually complement the isometric geometry -- both share an obsession with precise angles. 4. **Blur-Focus as Sole Animation Vocabulary:** The blur-focus pattern appears at only 2% frequency. By making it the exclusive transition method (no fades, no slides, no parallax), miris.one creates a unique perceptual signature. The metaphor of focusing -- of bringing things into clarity through attention -- perfectly serves the zen-contemplative tone. It also creates a functional connection: blur implies the content was always there, waiting to be seen clearly, rather than entering from outside the frame. 5. **Isometric Illustration as Architectural Abstraction:** While isometric imagery exists at low frequency elsewhere, no other design uses isometric forms as abstract, non-representational architectural fragments with a strict construction-animation system. The face-by-face assembly animation transforms each icon from a static illustration into a miniature construction event, referencing both Bauhaus workshop practice and the zen concept of process over product. 6. **Anti-Velocity Scroll Response:** The scroll-speed detection system that toggles between contemplative (slow, full transitions) and scanning (instant, no transitions) modes is unique in the portfolio. It acknowledges that not every visitor will engage contemplatively, but rewards those who do with a richer visual experience -- a quietly zen position that does not impose its rhythm but offers it. **Documented Seed/Style:** ``` aesthetic: bauhaus layout: centered typography: baskerville-refined palette: burgundy-cream patterns: blur-focus imagery: isometric-icons motifs: grid-lines tone: zen-contemplative ``` **Avoided Overused Patterns:** - playful aesthetic (94%) -- replaced with bauhaus (1%) - friendly tone (98%) -- replaced with zen-contemplative (3%) - minimal imagery (94%) -- replaced with isometric-icons (rare) - photography imagery (72%) -- no photography whatsoever; all imagery is constructed geometry - scroll-triggered as primary pattern (97%) -- while Intersection Observer is used for timing, the actual animation vocabulary is blur-focus (2%), not generic scroll-triggered fades - vintage motifs (82%) -- replaced with grid-lines (8%) - warm palette dominance (100%) -- while the palette is technically warm, it is a compressed, monochromatic burgundy-cream range rather than the typical broad warm palette with golden/amber tones - mono typography (99%) -- absent; the typographic system is built entirely on serif (Libre Baskerville) and sans-serif (IBM Plex Sans) with monospace used only for decorative marginalia