# Design Language for miris.monster ## Aesthetics and Tone miris.monster occupies a seductive intersection between high-end cosmetics branding and deep-space science fiction. The name itself — *miris*, evoking both wonder (*mirum* in Latin) and a character with monster-tier beauty — sets the stage for something opulent, alien, and self-aware. The visual direction borrows from neomorphism's soft, tactile depth but refuses its typical sterile pallor. Instead, surfaces glow from within: candy-pink and electric-lilac extrusions press forward through gradients, casting soft chromatic shadows that read as bioluminescent rather than gray. Every card, button, and container looks like it could be a piece of futuristic wearable tech — rounded, pillowy, alive with inner luminescence. The tone is unapologetically **luxurious**: the kind of luxury that doesn't whisper but leans in and glows. Not the beige-and-linen luxury of a spa brand — this is the luxury of a galactic flagship store. Surfaces shimmer. Empty space breathes. Every interaction is deliberate, tactile, and slightly otherworldly. Think: the UI inside a sentient beauty ship. Inspiration: Fenty Beauty × Mass Effect × Glossy K-beauty × Blade Runner 2049 product inserts. ## Layout Motifs and Structure The layout follows **ma-negative-space** principles — the Japanese concept of *ma* (間), where the absence of content is itself content. The page is generously empty between moments, allowing each section to breathe and arrive with presence. - **Entry**: Full-viewport opening with a single floating object centered in deep space. A glowing sphere/face rendered via CSS radial gradients, no background image. - **Scroll story**: Sections appear at ~33vw intervals. Each section is an island — a neomorphic card floating in void. Cards have a minimum width of 460px and never stack predictably; they drift left, then right, then centered in a deliberate sine-wave vertical procession. - **HUD overlays**: Thin sci-fi brackets (`┌─`, `─┐`, `└─`, `─┘`) appear around interactive zones via CSS pseudo-elements, scanning-animation included. Crosshair and arc reticles mark focal points. - **Z-depth theater**: Three depth planes: background (deep purple void, 0%), midground (floating neomorphic panels, transforms), foreground (HUD overlays, floating particles). Achieved with `perspective` + `translateZ` on scroll. - **No traditional nav bar**: Navigation is a minimal floating cluster of 4–5 pill-shaped glowing buttons at bottom-center, persisted via `position: fixed`. Each pill has neomorphic depth — inner glow, soft shadow. Grid: No CSS grid in the conventional sense. Sections are positioned with `place-items: center` on a full-viewport flex container; horizontal position shifts via `margin-inline: auto` with asymmetric padding to create drift. ## Typography and Palette **Typography** Primary Display: **Nunito** (Google Fonts) — Extra Bold 800, tracking -0.02em. Rounded terminals make the sci-fi brutality feel approachable and luxurious simultaneously. Secondary / Body: **DM Sans** (Google Fonts) — Regular 400 and Medium 500. Clean, subtly rounded, reads beautifully at small sizes against dark candy backgrounds. Accent / Data Labels: **Space Mono** (Google Fonts) — Used exclusively for HUD readouts, coordinate displays, and micro-labels. Monospaced, tightly kerned, all-caps with `letter-spacing: 0.2em`. Type scale: - Hero: `clamp(4rem, 10vw, 9rem)` Nunito 800 - Section title: `clamp(2rem, 5vw, 4rem)` Nunito 700 - Body: `1.125rem / 1.8` DM Sans 400 - HUD label: `0.65rem` Space Mono 400 uppercase **Palette** | Role | Name | Hex | |---|---|---| | Void Background | Deep Nebula | `#0d0814` | | Surface Base | Midnight Plum | `#1a0f2e` | | Neomorph Shadow Low | Shadow Bloom | `#110a1f` | | Neomorph Highlight | Pale Cosmos | `#2d1e4a` | | Primary Accent | Candy Fuchsia | `#ff3cac` | | Secondary Accent | Electric Lavender | `#c77dff` | | Tertiary Accent | Neon Aqua | `#00f5d4` | | Text Primary | Lunar White | `#f0e6ff` | | Text Muted | Amethyst Gray | `#8b7aaa` | | HUD Green | Scan Lime | `#a8ff78` | Neomorphic shadow formula (dark variant): ```css box-shadow: 6px 6px 16px #110a1f, -6px -6px 16px #2d1e4a, inset 0 0 0 0 transparent; ``` Pressed/active state: ```css box-shadow: inset 4px 4px 10px #110a1f, inset -4px -4px 10px #2d1e4a; ``` ## Imagery and Motifs **Collage aesthetic** — imagery is assembled rather than shot. Translucent overlapping planes, color-shifted product cutouts (perfume bottles, crystals, spheres), and anatomical beauty references (lips, eyes, hands) float at varying opacities. No photography with white backgrounds; everything is composited into the deep-purple void. **Sci-fi HUD motifs:** - Scanning brackets around feature zones (CSS `::before` / `::after`) - Circular reticles: thin `1px` rings with `border-radius: 50%` and a gentle rotation animation (`@keyframes rotate-slow: 0→360deg over 12s`) - Corner brackets: 8×8px `border-top-left-radius: 0` boxes with only top+left borders visible - Data stream: a vertical column of tiny hexadecimal numbers scrolling at 0.2x scroll speed (parallax), positioned at the right edge of the viewport, `opacity: 0.25`, `color: #a8ff78` - Arc indicators: SVG `` arcs with `stroke-dasharray` animations giving a "charging" visual **Decorative elements:** - Floating micro-orbs: 6–12px circles with `background: radial-gradient(circle, #ff3cac, #c77dff)`, scattered at pseudo-random positions, slow drift animation (Lissajous paths via CSS `@keyframes` with compound `translate`) - Chromatic aberration text effect on hero headline: three overlapping copies of text at `opacity: 0.4` offset by 2–3px in R, G, B channels using `mix-blend-mode: screen` and `color` shifts - Iridescent shimmer overlay on cards: a `::after` pseudo-element with `background: linear-gradient(135deg, rgba(255,60,172,0.08), rgba(199,125,255,0.08), rgba(0,245,212,0.08))` animated to shift via `background-position` ## Prompts for Implementation **Opening Sequence (Hero Section)** Build a full-viewport section with `background: #0d0814`. Center a single neomorphic circle (320px diameter) that pulses gently (`scale: 1 → 1.04 → 1` over 4s, infinite). Inside the circle, render a CSS portrait — layered radial gradients suggesting a face or alien beauty artifact. No actual image. Float the domain name "miris.monster" in `Nunito 800` at `clamp(3rem, 8vw, 7rem)` in `#f0e6ff` with chromatic aberration applied. Below it, one line of body text: `DM Sans 400` muted, e.g. "beauty from another dimension." A single glowing downward-chevron pulses at the bottom. **Scroll-Triggered Reveal Pattern** Use `IntersectionObserver` with `threshold: 0.15`. Each section card starts at `opacity: 0; transform: translateY(40px) scale(0.97)` and transitions to `opacity: 1; transform: translateY(0) scale(1)` over `600ms cubic-bezier(0.16, 1, 0.3, 1)`. Stagger child elements by 80ms each. Apply HUD bracket pseudo-elements only *after* the card fully enters — add a class `hud-active` on intersection and animate brackets via CSS clip-path reveal. **Neomorphic Card System** All content cards: `border-radius: 24px`, `background: #1a0f2e`, neomorphic dual-shadow as above. On hover, transition shadow from extruded to pressed state over 200ms. Add inner `border: 1px solid rgba(199, 125, 255, 0.15)` for glass edge. Cards should never have hard rectangular crops; always rounded heavily. **Floating Navigation Pills** `position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%)`. A `display: flex; gap: 12px` row of pill buttons. Each pill: `border-radius: 999px`, neomorphic shadow, `padding: 10px 20px`, `font-family: Space Mono`, `font-size: 0.65rem`, uppercase. Active pill gets `background: #ff3cac; color: #0d0814`. Hover: subtle `box-shadow` glow with `0 0 12px rgba(255,60,172,0.5)`. **Data Stream Sidebar** A fixed right-side column (hidden on mobile): `position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%)`. Contains 20 lines of mock hexadecimal strings in `Space Mono 0.6rem #a8ff78 opacity-25`. Animate with CSS: `@keyframes data-scroll { 0% { transform: translateY(0) } 100% { transform: translateY(-50%) } }` running at 8s linear infinite on a doubled list for seamless loop. **Collage Float Zones** Between major sections, insert a "float zone" div: `height: 40vh; position: relative; overflow: hidden`. Inside, absolutely-position 3–5 cutout-style elements (CSS shapes: circles, pill shapes, irregular blobs via `clip-path: polygon(...)`) in candy and aqua accent colors at 30–60% opacity. Add slow `@keyframes float-drift` with X and Y oscillation at different frequencies (prime number seconds: 7s, 11s, 13s) to prevent synchronized bobbing. **Scroll-Triggered Color Temperature Shift** On scroll past 60vh: transition `--void-bg` CSS custom property from `#0d0814` toward a slightly warmer deep purple `#160b28` using a JS scroll listener that linearly interpolates the value and writes it to `document.documentElement.style.setProperty`. This gives the illusion the user is traveling deeper into a warmer dimension. **Typography Hierarchy in Practice** - Section titles: Nunito 800, `color: #f0e6ff`, no text-shadow unless chromatic-aberration variant - Product/feature names: DM Sans 500 italic, `color: #c77dff` - Descriptive copy: DM Sans 400, `color: #8b7aaa`, `line-height: 1.8`, max 55ch per line - All HUD labels: Space Mono uppercase, `color: #a8ff78`, `letter-spacing: 0.2em` **AVOID:** - No pricing blocks, no "3 plans" grids - No hero CTAs with button arrays ("Get Started" / "Learn More" side by side) - No stat grids ("10k users", "99% uptime") - No footer with 4-column link lists - No testimonial carousels - No stock photography lightboxes ## Uniqueness Notes **Differentiators:** 1. **Neomorphism in dark candy space** — Most neomorphic designs use light gray/beige surfaces. This design inverts the paradigm entirely: deep purple/midnight plum base with extruded candy-pink and electric-lavender shadows, making neomorphism feel alien and opulent rather than soft and corporate. 2. **Sci-fi HUD as living decoration** — The HUD elements (scanning brackets, arc reticles, data streams) are not UI affordances — they are purely decorative narrative artifacts that make the page feel like an interactive interface from a future beauty brand's flagship installation. 3. **Ma-space between moments** — Each content island is separated by 40–60vh of intentional void, forcing the user to experience the space between sections rather than a seamless scroll. This creates rhythmic breathing that luxury editorial sites use but implemented with a sci-fi character. 4. **Typography contrast: Nunito + Space Mono** — The pairing of ultra-rounded display type (Nunito 800) with zero-personality monospace (Space Mono) creates cognitive dissonance that reinforces the brand's duality: beautiful/alien, approachable/technical, luxury/digital. 5. **Chromatic aberration on hero text** — The R/G/B channel split on the domain name headline is a deliberate imperfection in an otherwise highly polished surface, echoing the "monster" in the domain — something beautiful with a glitch, an edge. **Chosen seed / style:** aesthetic: neomorphism, layout: ma-negative-space, typography: rounded-sans, palette: candy-bright, patterns: scroll-triggered, imagery: collage, motifs: sci-fi-hud, tone: luxurious **Avoided patterns from frequency analysis:** - `layered-depth` (7% — overused) — replaced with neomorphic Z-depth via box-shadow, not stacked layers - `bento-box` (7% — overused) — avoided grid-of-cards layout entirely; islands float freely - `editorial-flow` (5% — overused) — structure is experiential/scroll-story, not editorial column flow - `broken-grid` (5% — overused) — asymmetry achieved through drift/parallax, not broken grid columns - `holographic` palette (5%) — avoided holographic sheen; used candy-specific fuchsia/lavender/aqua instead