# Design Language for nonri.day ## Aesthetics and Tone nonri.day is an underwater theater -- a Memphis Group exhibition submerged in the abyssal zone of the Pacific Ocean, where Ettore Sottsass's candy-colored totems have been colonized by bioluminescent organisms and the geometric irreverence of 1980s Italian postmodernism glows with the electric blue-green of deep-sea anglerfish. The name "nonri" evokes the Japanese word for "unreasonable" or "absurd" (non-ri, literally "without logic"), and the design leans into that spirit: why should bold geometric squiggles and terrazzo patterns exist at the bottom of the ocean? They shouldn't. That's the point. The tone is **bold-confident** -- not aggressive, but assured in its own strangeness. There is no apology for the collision of deep ocean blues with hot coral Memphis zigzags. The site speaks with the authority of someone who has seen the bottom of the sea and decided to redecorate it with Nathalie du Pasquier textiles. Every visual choice is deliberate and unapologetic. The confidence comes not from shouting but from the sheer conviction of the composition: each element placed with the gravitational certainty of a coral formation that has been growing for ten thousand years. The mood oscillates between the meditative pressure of deep water (slow, heavy, immersive) and the electric surprise of Memphis pattern explosions (sudden, geometric, defiant). Scroll down the page and you descend deeper into the ocean; the color temperature drops, the pressure increases, and the Memphis geometries become more bioluminescent, more alien, more beautiful. The experience should feel like Jacques Cousteau discovered a Memphis showroom at 4,000 meters depth and filmed it on a hand-cranked Bolex camera. ## Layout Motifs and Structure The layout is built on a **parallax-sections** architecture -- a vertical descent through layered oceanic zones, where each section occupies the full viewport and scrolls at different speeds to create genuine depth perception. Unlike the centered layouts that dominate the existing portfolio (99%), this design uses parallax not as a superficial decoration but as the structural metaphor: the user is literally diving deeper. **Section Architecture (5 Zones):** 1. **Epipelagic Zone (0-200m)** -- The entry section. Full viewport. Light ocean colors (#0A6E8A against white-blue gradients). Memphis zigzag borders rendered as SVG patterns at the top and bottom edges. The domain name "nonri.day" floats in the center, rendered in kinetic typography that undulates like surface waves. Background: subtle horizontal light rays (CSS linear-gradient at 15-degree angles, #C1F7F5 to #064E73) shifting slowly via CSS animation. 2. **Mesopelagic Zone (200-1000m)** -- The twilight section. The background darkens to #053B50. Memphis geometric shapes (triangles, circles, zigzag lines) begin appearing as floating SVG elements with reduced opacity (0.3-0.6), drifting slowly on parallax layers that move at 0.3x and 0.7x scroll speed. Glassmorphic cards emerge here: frosted glass panels (backdrop-filter: blur(20px) saturate(180%)) containing short text fragments about the domain's identity. Cards have Memphis-inspired borders -- dotted lines in #FF6B5B and #00E5B0 alternating. 3. **Bathypelagic Zone (1000-4000m)** -- The midnight section. Background: near-black ocean (#041C2C). Here, aurora-light motifs begin: CSS-animated gradient ribbons (using @keyframes with translate3d and hue-rotate) that snake across the viewport in bands of #00E5B0, #0A6E8A, and #7B4AE2, simulating the aurora borealis as refracted through miles of water. Memphis patterns are now fully bioluminescent -- the same zigzags and terrazzo dots, but rendered with CSS box-shadow glow effects (0 0 15px #00E5B0, 0 0 30px rgba(0, 229, 176, 0.4)). 4. **Abyssopelagic Zone (4000-6000m)** -- The abyss. Pure black background (#020B13) with scattered bioluminescent dots (CSS radial-gradient particles). A single glassmorphic card, massive (80vw x 60vh), floats in the center with aurora-gradient borders (animated border-image using conic-gradient). Inside the card: the core narrative text, rendered with skeleton-loading animation that types itself into existence character by character. 5. **Hadopelagic Zone (6000m+)** -- The trench. The final section. Background: absolute black (#000000). A single Memphis squiggle, enormous (spanning the full viewport width), pulses with aurora light colors. The domain "nonri.day" reappears, now rendered as a bioluminescent entity -- each letter glowing independently with staggered CSS animation delays, breathing slowly like a deep-sea creature. **Grid System:** No traditional grid. Each parallax section is a full-viewport (100vw x 100vh) container. Internal elements are positioned using CSS transforms (translate3d for parallax offset) and absolute positioning within each section. The horizontal center varies per zone -- elements drift left and right as the user descends, creating the sensation of currents pushing the viewer. **Navigation:** None. The only interaction is scrolling down. A subtle depth indicator -- a thin vertical line on the right edge (#00E5B0, 2px wide) with a small circle marker showing current scroll position -- serves as the sole orientation device. The circle pulses gently (CSS animation: scale 1.0 to 1.4, 2s ease-in-out infinite). ## Typography and Palette **Typography:** - **Display / Headlines:** "Bungee" (Google Fonts) -- a heavy display face designed specifically for vertical and horizontal signage, with a bold, blocky character that channels Memphis Group poster typography. Its extreme weight and geometric construction make it ideal for the bold-confident tone. Used at 4rem-8rem for zone titles and the domain logotype. Set with `letter-spacing: 0.08em` and `text-transform: uppercase`. On dark backgrounds, Bungee is rendered in #C1F7F5 with a text-shadow glow: `0 0 20px rgba(0, 229, 176, 0.6), 0 0 40px rgba(0, 229, 176, 0.3)`. - **Body / Narrative Text:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a geometric skeleton and slightly squared-off terminals that complement Bungee's blockiness without competing with it. Used at 1.125rem-1.5rem for glassmorphic card content and depth-zone descriptions. Weight: 400 (Regular) for body, 500 (Medium) for emphasis. Color: #C1F7F5 on dark backgrounds, #041C2C on light backgrounds. Line-height: 1.7 for readability against frosted glass surfaces. - **Kinetic-Animated Behavior:** All headline text uses kinetic typography -- not static display, but animated letterforms. In the Epipelagic zone, each letter of "nonri.day" oscillates vertically with staggered sine-wave CSS animations (each letter has `animation: float [duration] ease-in-out infinite`, with duration varying from 2.5s to 4s and delay incrementing by 0.15s per character). In deeper zones, the kinetic behavior shifts: letters don't float, they breathe -- scaling from 1.0 to 1.05 and back, with opacity pulsing from 0.85 to 1.0, like bioluminescent organisms. The transition between float-kinetics and breathe-kinetics happens in the Mesopelagic zone. - **Accent / Labels:** "Space Mono" (Google Fonts) -- a monospaced companion to Space Grotesk, used exclusively for the depth indicator labels ("200m", "1000m", "4000m", "6000m") and any technical annotations. Set at 0.75rem in #0A6E8A with 60% opacity. **Palette:** The palette is **ocean-deep** -- a descending gradient from sunlit surface to absolute abyss, punctuated by Memphis-inspired accent colors that become progressively more bioluminescent. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Surface Light | Seafoam Mist | #C1F7F5 | Epipelagic backgrounds, headline text on dark | | Surface Medium | Tidal Teal | #0A6E8A | Mesopelagic backgrounds, depth indicator labels | | Twilight | Deep Current | #053B50 | Mesopelagic-to-Bathypelagic transition | | Midnight | Abyss Blue | #041C2C | Bathypelagic backgrounds | | Trench | Hadal Black | #020B13 | Abyssopelagic backgrounds | | Void | Absolute Black | #000000 | Hadopelagic background, final zone | | Memphis Coral | Living Coral | #FF6B5B | Memphis zigzag patterns, card borders, accent | | Memphis Emerald | Bioluminescent Green | #00E5B0 | Aurora lights, glowing elements, depth indicator | | Memphis Violet | Abyssal Violet | #7B4AE2 | Aurora secondary, glassmorphic card borders | | Memphis Gold | Anglerfish Gold | #FFB830 | Sparse accent, terrazzo dots, final zone squiggle | The palette descends in luminosity as the user scrolls: the top of the page lives in #C1F7F5 and #0A6E8A territory; the bottom lives in #020B13 and #000000. The Memphis accent colors (#FF6B5B, #00E5B0, #7B4AE2, #FFB830) remain constant in hue but shift in rendering -- at the top they are flat solid fills, at the bottom they are glowing (box-shadow, text-shadow) against darkness. ## Imagery and Motifs **Glassmorphic Cards as Primary Content Vessels:** All textual and narrative content is housed inside **glassmorphic cards** -- panels with frosted-glass surfaces that create the illusion of looking through semi-opaque ice or deep-sea glass. Technical implementation: `background: rgba(10, 110, 138, 0.15); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(193, 247, 245, 0.2); border-radius: 16px;`. In the deeper zones, the cards shift to darker glass: `background: rgba(4, 28, 44, 0.3)` with aurora-gradient borders (animated via `@keyframes auroraBorder` cycling through #00E5B0, #7B4AE2, #FF6B5B over 8 seconds). Cards are not arranged in grids. They float at different parallax depths within each section -- some closer to the viewer (larger, more opaque, moving faster on scroll), others farther (smaller, more transparent, lagging behind). This creates a sense of looking through layered glass panes in dark water. **Aurora-Light Motifs:** The aurora lights are the site's signature visual motif. They are implemented as wide, translucent SVG paths or CSS gradient ribbons that snake horizontally across the viewport, primarily in the Bathypelagic and deeper zones. Each aurora ribbon is a `
` spanning 150vw (to extend beyond viewport edges) with a `background: linear-gradient(90deg, transparent, #00E5B0, #7B4AE2, #FF6B5B, transparent)` and animated via `@keyframes auroraMove { 0% { transform: translateX(-30vw) translateY(0) rotate(2deg); } 50% { transform: translateX(10vw) translateY(-5vh) rotate(-1deg); } 100% { transform: translateX(-30vw) translateY(0) rotate(2deg); } }` over 20-30 seconds. Multiple ribbons (3-5) are stacked at different vertical positions with varying opacity (0.15-0.4) and animation durations, creating a complex, organic light display. The effect should evoke the aurora borealis reimagined as a deep-sea phenomenon. **Memphis Pattern Language:** Memphis elements appear throughout the site as decorative, non-functional visual punctuation: - **Zigzag Lines:** SVG polylines with a classic Memphis zigzag profile (30px amplitude, 60px wavelength), stroked in #FF6B5B or #00E5B0, 2px weight. In upper zones: flat, solid. In deeper zones: glowing with `filter: drop-shadow(0 0 8px currentColor)`. - **Terrazzo Dots:** Scattered circles of varying sizes (4px-16px radius) in #FFB830, #FF6B5B, #7B4AE2, positioned randomly within parallax layers. Each dot has a subtle CSS animation: slow drift (translateX and translateY by 10-30px over 15-25 seconds, infinite, ease-in-out). - **Geometric Totems:** In the Mesopelagic zone, 2-3 tall, narrow SVG compositions stack triangles, circles, and rectangles in Memphis palette colors -- referencing Sottsass's Carlton bookcase silhouette. These totems are partially obscured by glassmorphic panels passing in front of them, creating layered depth. - **Squiggle Lines:** Freeform curved SVG paths (cubic bezier curves) in #00E5B0, used as section dividers between parallax zones. Each squiggle animates its stroke-dashoffset from full length to 0 as it enters the viewport (scroll-triggered path-draw animation), taking 1.5 seconds to complete. **Bioluminescence Effect:** In zones 3-5, all Memphis geometric elements gain a bioluminescent quality. This is achieved through layered CSS: each element gets a primary fill/stroke color, a `box-shadow` or `filter: drop-shadow` with the same hue at higher spread (creating a soft glow halo), and a CSS `animation` that pulses the shadow spread between 8px and 20px over 3-5 seconds. The result: geometric shapes that appear to emit their own light in the darkness, like deep-sea creatures that evolved Memphis patterns. **Skeleton-Loading Pattern:** The glassmorphic cards in the Abyssopelagic zone (Zone 4) use a **skeleton-loading** reveal animation. When the card scrolls into view, it first appears as a skeleton: rectangular placeholder bars (8px height, 60-90% width, background: linear-gradient(90deg, rgba(193,247,245,0.05), rgba(193,247,245,0.15), rgba(193,247,245,0.05)), animated with `background-size: 200% 100%` sliding left-to-right over 1.5 seconds). After 2 seconds of skeleton display, the actual text content fades in (opacity 0 to 1 over 0.8 seconds) while the skeleton bars fade out simultaneously. This creates the sensation of data materializing from the deep -- as if the information itself is being retrieved from the ocean floor. ## Prompts for Implementation **Full-Screen Narrative Descent:** The entire site must be built as a vertical dive. There is no header, no footer, no navigation menu, no call-to-action buttons, no pricing blocks, no stat grids. The only interaction is the scroll wheel (or touch-drag on mobile). The experience is a continuous descent from light to dark, from surface to abyss, from the familiar to the alien. The scroll length should be substantial -- approximately 500vh total -- to create a genuine sense of journey and duration. **Parallax Engine:** Each of the 5 oceanic zones is a `
` with `position: relative; height: 100vh; overflow: hidden;`. Within each section, elements are placed on parallax layers using CSS `transform: translate3d(0, calc(var(--scroll-offset) * [speed-factor]), 0)` where `--scroll-offset` is updated via a lightweight JavaScript scroll listener (using `requestAnimationFrame` for performance). Speed factors range from 0.1 (far background, moves barely) to 0.9 (near foreground, moves almost with scroll). The parallax creates genuine optical depth -- not the flat "image moves slower than text" cliche, but a true multilayer diorama effect. **Kinetic Typography Engine:** The headline animation system uses CSS `@keyframes` with `animation-delay` staggering. For the surface float effect: ``` @keyframes letterFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } ``` Each letter is wrapped in a `` with incrementing `animation-delay` (0s, 0.15s, 0.30s, ...). For the deep-zone breathe effect: ``` @keyframes letterBreathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } } ``` The transition between float and breathe occurs via Intersection Observer on the Mesopelagic section boundary. **Aurora Light CSS Implementation:** Aurora ribbons use absolutely-positioned `
` elements with `pointer-events: none` (so they don't intercept scroll), `mix-blend-mode: screen` (so they blend additively with the dark background), and long-duration CSS animations. Each ribbon is 150vw wide, 15-40vh tall, with a radial or linear gradient in aurora colors. The `will-change: transform` property is set for GPU acceleration. Three to five ribbons overlap at different vertical offsets and animation phases to create complexity. **Glassmorphic Card Construction:** Each card is a `
` with: - `background: rgba(10, 110, 138, 0.12)` (adjusts per zone) - `backdrop-filter: blur(20px) saturate(180%)` - `-webkit-backdrop-filter: blur(20px) saturate(180%)` (Safari) - `border: 1px solid rgba(193, 247, 245, 0.18)` - `border-radius: 16px` - `padding: 2.5rem` - `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)` Cards in deeper zones add animated aurora borders via `border-image` or a pseudo-element with rotating conic-gradient. **Skeleton Loading Sequence:** Skeleton bars are `
` elements with: ```css .skeleton-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(193,247,245,0.05) 25%, rgba(193,247,245,0.15) 50%, rgba(193,247,245,0.05) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` Five to seven bars of varying widths (60%, 80%, 45%, 90%, 70%, 55%, 85%) stack vertically inside the card, spaced 12px apart. After a 2-second delay triggered by Intersection Observer, a `.loaded` class is added which fades in the real content and fades out the skeleton bars. **Animation Principles:** - All animations use `ease-in-out` or custom cubic beziers for organic feel - Nothing should feel mechanical or linear - Aurora ribbons: 20-30 second cycles (glacial, mesmerizing) - Memphis drift: 15-25 second cycles (barely perceptible) - Bioluminescent pulse: 3-5 second cycles (slow breathing) - Kinetic text: 2.5-4 second cycles (gentle undulation) - Skeleton shimmer: 1.5 second cycles (the fastest animation, but still calm) **AVOID:** CTA buttons, pricing tables, stat counters, testimonial carousels, hamburger menus, hero images, stock photography, team grids, feature comparison tables. This is a narrative experience, not a product page. **Mobile Behavior:** On viewports below 768px, parallax speed factors are halved (to prevent motion sickness on touch devices). Glassmorphic cards expand to 90vw. Aurora ribbons reduce to 2 (from 5) for performance. Kinetic text letter-spacing tightens. The depth indicator moves from the right edge to the bottom edge (horizontal bar). ## Uniqueness Notes **Differentiators from other designs:** 1. **Memphis-Meets-Abyssal Fusion:** No other design in the portfolio combines Memphis Group aesthetics with deep-ocean imagery. Memphis appears at only 1% frequency, and this is the only instance where Memphis geometric vocabulary (zigzags, terrazzo, totems) is reinterpreted as bioluminescent deep-sea organisms. The conceptual collision -- 1980s Italian postmodern design at the bottom of the Pacific -- is entirely unprecedented in the collection. 2. **True Parallax-Sections Layout (0% frequency):** The parallax-sections layout has never been used in any existing design. While 76% of designs use generic parallax effects, this is the only design where parallax layering IS the layout structure -- 5 distinct full-viewport sections creating a literal depth descent. The parallax isn't decorative; it's architectural. 3. **Five-Zone Vertical Descent Narrative:** No other design structures content as a physical descent through named oceanic zones (Epipelagic through Hadopelagic). The palette literally darkens as you scroll, the typography behavior transforms (float to breathe), and the Memphis elements evolve from flat to bioluminescent. This environmental progression has no parallel in the existing designs. 4. **Kinetic-Animated Typography (1% frequency):** While many designs use animated text, this is among the very few using a dedicated kinetic typography system where individual letters have independent animation profiles that change based on scroll position. The float-to-breathe transition keyed to ocean depth zones is unique. 5. **Aurora-Light Motifs as Bioluminescence (1% frequency):** Aurora lights appear in only 1% of existing designs. Here they serve a narrative purpose -- reimagined as underwater light phenomena, they bridge the gap between celestial (aurora borealis) and abyssal (bioluminescence), creating a visual metaphor that exists nowhere else in the collection. 6. **Skeleton-Loading as Narrative Device:** While skeleton loading is a UI pattern (4% frequency), no other design uses it as a storytelling mechanism -- the idea that content "materializes from the deep" rather than simply loading. The 2-second skeleton display is not a performance indicator but a dramatic beat. **Documented Seed/Style:** ``` aesthetic: memphis layout: parallax-sections typography: kinetic-animated palette: ocean-deep patterns: skeleton-loading imagery: glassmorphic-cards motifs: aurora-lights tone: bold-confident ``` **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with parallax-sections - Warm palette (100%) -- replaced with ocean-deep cool spectrum - Friendly tone (98%) -- replaced with bold-confident - Playful aesthetic (95%) -- replaced with memphis (specific, historical) - Scroll-triggered patterns (97%) -- de-emphasized in favor of skeleton-loading and continuous CSS animations - Mono typography (99%) -- replaced with kinetic-animated display + geometric sans - Minimal imagery (94%) -- replaced with glassmorphic-cards and aurora-light compositions