# Design Language for miris.tech ## Aesthetics and Tone miris.tech inhabits the cockpit of a spacecraft that never existed -- a vessel designed by someone who studied both Tamara de Lempicka's chrome-skinned portraits and Syd Mead's Blade Runner production paintings. The aesthetic is **dark-mode** with an art-deco lineage: every surface is obsidian-black, every accent line is beveled gold or tarnished copper, every typographic element is set in the geometric elegance of 1920s exhibition posters transplanted into a starship bridge. This is not the glossy, consumer-friendly dark mode of a settings toggle; this is the absolute darkness of deep space punctuated by the amber glow of instrument panels and the cold geometry of navigational overlays. The tone is **energetic** -- not in the bouncing, exclamatory sense of a startup landing page, but in the kinetic sense of a turbine winding up, a launch sequence counting down, a radar sweep completing its arc. Every element on screen carries momentum. Text slides into position along beveled rails. Geometric forms rotate on invisible axes. The energy is controlled, precise, and relentless -- the heartbeat of a machine that never sleeps. Inspiration sources: Metropolis (1927) title cards, Chris Foss spacecraft illustrations, the Alien (1979) Nostromo bridge interfaces, Cassandre's art-deco travel posters, the instrument panels of Concorde, the Tokyo Metropolitan Expressway at midnight shot on Cinestill 800T. ## Layout Motifs and Structure The layout follows an **immersive-scroll** paradigm -- a single continuous vertical journey through distinct environmental zones. There is no traditional navigation bar. Instead, the viewport functions as a porthole into a progressively unfolding space station interior. Scrolling is the only interaction model; it drives everything from section transitions to animation triggers to parallax depth shifts. **Structural Zones (top to bottom):** 1. **Command Deck (Hero):** Full-viewport entry zone. A central circular HUD element (SVG) dominates the view -- concentric rings of thin gold lines rotating at different speeds, with the domain name "miris.tech" rendered in art-deco display type at the dead center. The background is pure #0A0A0F with faint geometric grid lines fading toward the edges at 3% opacity in #2A2630. 2. **Corridor Section:** A narrow-band transitional zone (40vh) where the HUD rings compress and flatten into horizontal rules that become the dividing lines for the next section. The background shifts from pure black to #12111A via a 200px CSS gradient. Thin vertical lines (1px, #3D2E1F at 15% opacity) appear at column positions, evoking bulkhead ribbing. 3. **Operations Bay:** Content area using a 12-column grid with 24px gutters on a 1440px max-width container. Content blocks are positioned asymmetrically -- primary content occupies columns 2-8, secondary annotations float in columns 9-11. Each content block is framed by a 1px border in #3D2E1F (tarnished bronze) with chamfered corners (achieved via `clip-path: polygon()` cutting 8px triangles from each corner, producing the deco-faceted look). Blocks are spaced 64px apart vertically. 4. **Observatory:** A full-viewport section with a dark radial gradient (#0A0A0F center, #0F0E17 edges) where geometric-abstract imagery floats in parallax layers. Three to four SVG compositions of interlocking triangles, hexagons, and arc segments drift at different scroll-speed multipliers (0.2x, 0.5x, 0.8x), creating depth. Text content here is minimal -- a single statement or manifesto rendered at 4rem. 5. **Docking Bay (Footer):** A compressed zone where all geometric elements converge toward a central vanishing point. Contact/link information is arranged in a radial pattern around a central point, like coordinates on a star chart. **Grid System:** Base unit 8px. Primary grid 12 columns at 1440px. Content never touches viewport edges -- minimum 48px padding on all sides. On mobile (<768px), the grid collapses to a single column with 24px padding, but the HUD elements scale down proportionally rather than disappearing. ## Typography and Palette **Typography:** - **Display / Headlines:** "Poiret One" (Google Fonts) -- a purely geometric decorative typeface whose perfectly circular O's, razor-thin strokes, and art-deco DNA make it the typographic equivalent of a chrome hood ornament. Used at 4rem-8rem for hero text, section headers, and the central domain name. Weight: 400 (the only available weight). Letter-spacing: +0.08em for headlines to let the geometric forms breathe. All caps for primary titles. Line-height: 1.1. - **Secondary Headlines / UI Labels:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif inspired by 1920s Scandinavian design with elegant, slightly elongated proportions. Weight: 300 (Light) for secondary titles at 1.5rem-2.5rem, 600 (SemiBold) for UI labels and navigation text at 0.875rem. Letter-spacing: +0.12em when used in all-caps for labels, creating the instrument-panel readout effect. Line-height: 1.3. - **Body Text:** "IBM Plex Sans" (Google Fonts) -- a humanist-inflected grotesque with enough warmth to remain readable in long passages against dark backgrounds, and enough technical precision to feel at home in a spacecraft interface. Weight: 300 (Light) for body at 1rem (16px), 500 (Medium) for emphasis. Letter-spacing: +0.01em. Line-height: 1.7 for comfortable reading against dark surfaces. - **Monospace / Data:** "IBM Plex Mono" (Google Fonts) -- used for code snippets, numerical data, timestamps, and any content that should read as machine-generated. Weight: 400 at 0.875rem. Tabular numerals enabled. Color: #C9A84C (muted gold) to distinguish data from prose. **Palette:** | Role | Hex | Description | |------|-----|-------------| | Void Black | #0A0A0F | Primary background -- the darkness of unlit space | | Deep Indigo | #12111A | Secondary background -- subtle purple-black for depth zones | | Tarnished Bronze | #3D2E1F | Borders, structural lines, chamfered-corner frames | | Muted Gold | #C9A84C | Primary accent -- instrument readouts, active states, key typography | | Oxidized Copper | #7A5C3E | Secondary accent -- hover states, secondary lines, aged metal | | Faded Alabaster | #D4C9B5 | Body text -- warm off-white with sepia warmth against dark backgrounds | | Signal Amber | #E8A832 | High-energy accent -- sparingly used for CTAs, warnings, key highlights | | Gunmetal Violet | #2A2630 | Tertiary surface -- card backgrounds, overlay panels | | Ash Pewter | #6B6575 | Muted text -- captions, metadata, secondary information | The palette is **muted-vintage** at its core -- no pure whites, no saturated primaries. Every color has been aged, oxidized, or desaturated as if exposed to decades of UV radiation aboard a generation ship. The gold is not gold-leaf bright but brass-tarnished. The copper is not polished but patinated. Even the text color (#D4C9B5) is not white but the yellowed ivory of a century-old engineering blueprint. ## Imagery and Motifs **Geometric-Abstract as Visual Language:** All imagery is **geometric-abstract** -- no photographs, no illustrations of recognizable objects. Instead, visual compositions are built from pure geometric primitives: circles, triangles, hexagons, arcs, and radial line arrays. These forms are rendered as SVG with thin strokes (1-2px) in Muted Gold (#C9A84C) or Oxidized Copper (#7A5C3E) against the void backgrounds. Specific geometric compositions: 1. **The Concentric HUD:** A central motif of 5-7 concentric circles of varying radii (from 80px to 320px) with differing stroke-dasharray patterns. The outermost ring has a dash pattern of `8 4`, the next `12 6`, creating a machine-precision visual rhythm. Small triangular tick marks at 30-degree intervals around the outer ring, like a chronograph bezel. Four cardinal crosshairs extend from the center, each terminating in a small diamond shape. 2. **Triangulated Mesh Fields:** Background decorative zones filled with Delaunay-style triangulation patterns -- irregular triangles tessellated across the surface, stroked in #3D2E1F at 8% opacity. The mesh density increases toward focal points (text blocks, interactive elements), creating a gravitational-lensing effect where geometry crowds around areas of importance. 3. **Arc Sector Diagrams:** Decorative elements resembling radar sweep displays -- 90-degree or 120-degree arc sectors with concentric rings inside them, filled with gradient from Muted Gold at 5% opacity to transparent. These sit behind text blocks as halos, giving content a sense of being scanned or tracked. 4. **Chevron Streams:** Repeating chevron (>>>) patterns that flow along scroll direction, used as transitional decoration between sections. Each chevron is a thin V-shape in Oxidized Copper, staggered in a stream of 8-12 elements that animate sequentially during scroll. **Sci-Fi HUD Motifs:** The **sci-fi-hud** motif system is the connective tissue of the entire design. Every functional element borrows from the visual language of heads-up displays: - **Corner brackets** on content cards: L-shaped marks at each corner (12px arms, 1px stroke in #3D2E1F), replacing traditional border-radius. - **Targeting reticles** as loading/focus indicators: two concentric circles with a gap, crosshair lines, animated rotation. - **Scan lines:** A full-viewport SVG overlay of horizontal lines (1px, #C9A84C at 2% opacity) spaced 4px apart, creating the CRT-monitor atmosphere without readability loss. - **Data readout strips:** Small rectangular zones (120px x 24px) at section edges displaying coordinates, timestamps, or status codes in IBM Plex Mono at 0.625rem in Ash Pewter (#6B6575). Content: "SEC.03 // STATUS: ACTIVE" or "LAT 35.6762 // LON 139.6503". - **Radial navigation markers:** At the right edge of the viewport, a vertical strip of small dots (4px diameter) indicating scroll position, each dot connected by a hairline to a section label in Josefin Sans at 0.625rem. ## Prompts for Implementation **Full-Screen Narrative Opening Sequence:** The site loads to absolute void -- #0A0A0F filling the viewport with zero visible content. After a 400ms pause, a single horizontal scan line (1px, #C9A84C at 40% opacity) sweeps from top to bottom over 800ms with eased deceleration (`cubic-bezier(0.16, 1, 0.3, 1)`). As the line passes the vertical center, the concentric HUD rings begin drawing themselves via SVG `stroke-dashoffset` animation -- outermost ring first, each subsequent ring starting 120ms after the previous, total build time ~900ms. The rings rotate: outer ring at 0.5rpm clockwise, next at 0.3rpm counter-clockwise, alternating. Once the rings are drawn, the domain text "MIRIS.TECH" fades in at center over 500ms, set in Poiret One at 6vw, color transitioning from #3D2E1F to #C9A84C (bronze-to-gold emergence). Simultaneously, four cardinal crosshair lines extend outward from center, 200ms each, staggered 100ms apart. **Scroll-Driven Morph Transitions:** The **morph** animation pattern governs all section transitions. As the user scrolls from the Command Deck to the Corridor, the HUD rings do not simply scroll away -- they morph. The circles flatten into horizontal lines via SVG path interpolation (use `flubber` or `d3-interpolate-path` for smooth shape morphing). The circular tick marks stretch into elongated dashes. The domain text scales down from 6vw to 1rem and slides to a fixed position in the top-left corner, becoming a persistent ghost label at 30% opacity in Ash Pewter. This morph occurs across a 300vh scroll distance, mapped via Intersection Observer or scroll-timeline API. Between the Operations Bay and Observatory, content cards morph their chamfered borders into the triangulated mesh -- the card outlines dissolve into the Delaunay pattern, the text fades, and the geometric background asserts itself. The morph timing follows `cubic-bezier(0.33, 1, 0.68, 1)` -- fast initiation, slow resolution, giving the impression of mass and inertia. **HUD Element Micro-Animations:** - Corner brackets on cards pulse subtly on hover: the L-shapes extend their arms by 4px over 200ms, then retract. Color shifts from #3D2E1F to #C9A84C. - Data readout strips cycle their text content every 8 seconds using a typewriter-delete-then-retype animation in IBM Plex Mono. Characters appear at 40ms intervals; the cursor is a solid 2px block in Signal Amber (#E8A832). - The scan-line overlay slowly drifts downward at 0.5px per frame, wrapping seamlessly, creating persistent CRT atmosphere without distracting motion. - Targeting reticles appear on interactive elements when hovered: two concentric circles (16px and 24px radius) draw themselves via stroke-dashoffset over 200ms, then the crosshair lines extend over 100ms. On mouse-out, the animation reverses. **Immersive Scroll Behaviors:** The immersive-scroll layout requires careful scroll-hijack management. Do NOT fully hijack scroll. Instead, use CSS `scroll-snap-type: y proximity` on the main container to provide gentle snap points at section boundaries without trapping the user. Each section is `min-height: 100vh` with `scroll-snap-align: start`. Momentum scrolling is preserved; the snap is a suggestion, not a prison. Parallax layers in the Observatory section use `transform: translateY(calc(var(--scroll-progress) * -Xpx))` driven by a lightweight scroll listener that updates a CSS custom property. Three depth planes: background mesh at 0.15x, mid-ground arcs at 0.4x, foreground chevrons at 0.75x. **Storytelling Structure:** The site is not a portfolio or a service listing -- it is a journey through a space. Each section reveals a facet of what miris.tech represents, but through atmosphere rather than exposition. The Command Deck establishes presence. The Corridor builds anticipation through compression. The Operations Bay delivers substance. The Observatory provides reflection. The Docking Bay offers connection. The narrative arc is: arrival, approach, engagement, contemplation, departure. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, cookie banners as design elements, stock photography, gradient backgrounds that could belong to any SaaS site, rounded-corner cards with drop shadows, the word "solutions." ## Uniqueness Notes **Differentiators from other designs:** 1. **Art-Deco-meets-Spacecraft-Bridge Aesthetic Fusion:** The combination of dark-mode (4% frequency) with art-deco-display typography (2% frequency) creates a visual language that does not exist in any other design in the portfolio. No other site merges 1920s geometric elegance with deep-space instrument panel interfaces. The chamfered-corner frames, the concentric HUD rings rendered in tarnished gold, and the Poiret One display type collectively create an atmosphere that is simultaneously retro and futuristic -- a retro-futurism that is not the chrome-and-neon variety (already at 3%) but the oxidized-brass-and-void variety. 2. **SVG Shape Morphing as Primary Transition Model:** While morph patterns appear at 10% frequency in other designs, no other design uses SVG path interpolation as the **sole transition mechanism** between full-viewport sections. The concentric-circles-to-horizontal-rules morph, the card-borders-to-triangulated-mesh dissolution, and the hero-text-to-ghost-label scale transition are all achieved through continuous geometric metamorphosis rather than opacity fades, slide-ins, or parallax offsets. This creates a sense that the entire site is a single shape-shifting organism rather than a sequence of discrete pages. 3. **Muted-Vintage Palette in a Technology Context:** The muted-vintage palette (1% frequency) has never been applied to a tech-domain site in this portfolio. Technology sites default to cool blues, neon greens, or high-contrast dark-neon schemes. miris.tech inverts this expectation by dressing its technology content in the visual language of aged brass, oxidized copper, and yellowed blueprint paper. The palette communicates that technology is not ephemeral but enduring -- instruments that age with dignity rather than planned-obsolescence consumer electronics. 4. **Immersive-Scroll Layout Without Scroll Hijacking:** The immersive-scroll layout (0% frequency in existing designs) is implemented through CSS scroll-snap proximity and CSS custom properties rather than JavaScript scroll-hijack libraries. This preserves native scroll physics while creating environmental transitions, a combination not attempted in any other design. 5. **Scan-Line and Data-Readout Ambient Layer:** The persistent CRT scan-line overlay and the cycling data-readout strips create a living atmospheric layer that no other design implements. These elements are not interactive; they are environmental -- the hum of machinery, the flicker of monitors in an unmanned control room. They add presence without demanding attention. **Documented Seed/Style:** aesthetic: dark-mode, layout: immersive-scroll, typography: art-deco-display, palette: muted-vintage, patterns: morph, imagery: geometric-abstract, motifs: sci-fi-hud, tone: energetic **Avoided Overused Patterns:** playful aesthetic (94%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), minimal imagery (94%), friendly tone (98%), vintage motifs (82%). None of these dominant patterns appear as primary choices in this design. The design deliberately occupies the low-frequency end of every category.