# Design Language for nonri.day ## Aesthetics and Tone nonri.day is a raw-authentic Memphis-inflected experience built around the visual language of water — not serene water, but water at the microscopic level: bubbles forming against glass, crystalline lattices, the geometry of surface tension. The Memphis movement's bold primary geometry is reinterpreted through the lens of liquid physics: triangles become refracted light through bubbles, dots become cross-sections of spherical cells, stripes become ripple interference patterns. The tone is raw and unpolished in a deliberate way — not lo-fi or broken, but honest. Text is not smoothed into corporate-speak. Shapes are slightly imperfect, as if drawn by hand then vectorized. The overall mood evokes a science notebook kept by someone who finds equal beauty in a bubble's iridescence and in the Memphis design movement's irreverence. The color palette is analogous: a band of blue-greens and cyan-purples that mimic the iridescent sheen on soap bubbles — colors that shift from aqua to violet depending on the angle, never settling into a single dominant hue. This iridescence is applied sparingly through CSS conic-gradient overlays on certain shapes. **No hero copy. No feature lists. No pricing.** The site is a single continuous scroll that functions as a visual essay — the product or message emerges through the texture of the experience, not through explicit labeling. ## Layout Motifs and Structure **Centered single-column composition** with a maximum content width of 680px, surrounded by active negative space that carries the decorative language. The background itself is not empty — it is populated with the site's Memphis-water motif system. **Background layer (fixed, pointer-events: none):** A full-viewport SVG containing: - 12–18 large circles (80–240px radius) positioned at irregular intervals, filled with the analogous palette at 12% opacity, each with a 1.5px stroke in the same color at 40% opacity — representing macro bubbles - 6–8 crystalline hexagonal polylines drawn at 0.8px stroke, partially visible at viewport edges, suggesting crystal lattice structure - 3–4 concentric ripple rings (SVG `` elements at 150%, 200%, 250% of a base radius) centered on specific page coordinates, not the viewport center — these anchor the composition asymmetrically despite the centered column **Content column:** Sections are separated by visual rhythm, not horizontal rules. Each section has a different typographic weight relationship (heavy heading + light body, or mono label + regular paragraph), creating contrast through weight rather than dividers. **Floating Memphis accents** (absolute-positioned, scattered behind text): - Solid triangles in #00D4C8 at various rotations, 16–32px - Dot grids (3×3, 4×4) in #9B72CF, 8px dots, 24px gap - Thick bars (8px height, 60–120px width) in #FF6B6B, rotated 15–35° The page has exactly **five content beats** scrolled vertically: opening identity, tension/premise, method/belief, evidence/story, and a quiet closing — no section labels, they read as continuous text. ## Typography and Palette **Primary typeface: Space Grotesk** — used for all headings, the distinctive optical irregularities in its letterforms (the slightly uneven `g`, the compressed `a`) echo the handmade quality of Memphis graphics. **Body typeface: DM Sans** — clean, neutral, pairs as a rational counterpart to Space Grotesk's personality. Weight 300 for long-form body, weight 400 for pull-quotes. **Accent/label typeface: Space Mono** — used only for short metadata labels (dates, categories, indices), appearing in 10px uppercase tracked at 0.15em. The monospace rhythm contrasts with the grotesque's natural spacing. **Type scale:** - Display: Space Grotesk 700, 56px / 1.05 leading, tracked at -0.02em - H2: Space Grotesk 600, 32px / 1.2 leading - Body: DM Sans 300, 17px / 1.72 leading - Pull-quote: DM Sans 400 italic, 22px / 1.5 leading, color #9B72CF - Label: Space Mono 400, 10px uppercase, 0.15em tracking **Color palette (analogous: aqua → cyan → blue-violet → soft violet):** | Token | Hex | Use | |---|---|---| | `--bubble-aqua` | `#00D4C8` | Primary accent, bubble strokes, heading underlines | | `--bubble-cyan` | `#00B8D9` | Secondary accent, ripple rings | | `--crystal-blue` | `#4A90D9` | Large background circle fills | | `--crystal-violet` | `#9B72CF` | Pull-quote text, dot grid accents, subtle glow | | `--deep-night` | `#0F1923` | Page background, primary text | | `--surface-mist` | `#E8F4F8` | Body text on dark background | | `--membrane-warm` | `#FF6B6B` | Sparse Memphis bar accents — the one warm intruder | | `--iridescent-overlay` | conic-gradient(`#00D4C820`, `#9B72CF20`, `#00B8D920`) | CSS overlay on featured shapes | Background is `--deep-night` (`#0F1923`). All text is light on dark. ## Imagery and Motifs **Water-bubble imagery system:** All visual imagery is generated as SVG inline, not photography. Each "image" in the design is a composed SVG scene: 1. **The bubble cross-section** — a large circle (200–280px) with: - Fill: radial-gradient from `#00D4C808` (center) to `#00B8D930` (edge) - Stroke: 1px `#00D4C870` - A smaller highlight circle (15% of radius) positioned at 30° upper-left, filled `#FFFFFF25` - CSS `backdrop-filter: blur(2px)` on the element — a real bubble lensing effect 2. **The crystalline lattice** — a repeating SVG pattern of hexagons connected by lines at exactly 60° angles, stroke 0.6px `#4A90D940`, used as a CSS `background-image` on specific section wrappers (not the full page) 3. **Memphis geometry overlays** — scattered across the background layer: - Right triangles, fill `#00D4C8`, 24px, opacity 0.7, rotation varies by 30° increments - Filled circles, 10px, `#9B72CF`, arranged in irregular clusters (not grids) - Rectangles 8×64px, fill `#FF6B6B`, rotated 20°, opacity 0.6 4. **Ripple rings** — each ripple is 4 concentric SVG circles centered at the same point, radii at 1×, 1.4×, 1.8×, 2.2× base, stroke `#00B8D9` tapering from 1.2px to 0.3px, opacity tapering from 50% to 8%. Animated with a CSS `@keyframes` scale-out, 4-second loop, staggered delay between rings. **Motif vocabulary summary:** - Spherical: bubbles, circular gradients, highlight specular - Crystalline: hexagonal lattice, polyline facets, angular Memphis triangles - Fluid: ripple rings, CSS blur, iridescent conic gradients - Memphis: bold triangles, color bars, dot clusters — always subordinate to the water language ## Prompts for Implementation Build this as **a single full-viewport-scrolling experience** where the visitor feels they are slowly descending through water — the background elements shift subtly on scroll (parallax at 0.15× scroll speed for background SVG layer), ripple animations play at rest, and crystalline lattice patterns only appear when an element enters the viewport. **Scroll behavior:** - `scroll-behavior: smooth` on html - Background SVG layer: `transform: translateY(calc(var(--scroll-y) * -0.15))` — updated via `requestAnimationFrame` with a single scroll listener - Content column: no parallax, anchored normally - Memphis accent shapes: `translateY(calc(var(--scroll-y) * 0.08))` — drift upward slightly as you scroll down, like objects rising in water **Section rhythm (five beats, no section labels):** *Beat 1 — Identity (opening)*: Full-viewport height. Domain name or project name in 56px Space Grotesk 700, `--bubble-aqua`, centered. Below it, a single line of body text in `--surface-mist`. A bubble cross-section SVG floats in the upper-right quadrant, partially clipped. Ripple rings animate from a point slightly off-center left. *Beat 2 — Premise (tension)*: 80vh height. Two-paragraph block. The first paragraph in DM Sans 300 17px. The second in DM Sans 400 italic 22px as a pull-quote in `--crystal-violet`. A dot-cluster Memphis accent (9 dots, 3×3, `--crystal-violet`) sits in the right margin at mid-height. *Beat 3 — Method (belief)*: 100vh height. A Space Grotesk 600 32px heading followed by 3–4 short paragraphs. The section wrapper has the crystalline lattice as a CSS background pattern at 6% opacity. A Memphis color bar (8×80px, `--membrane-warm`, rotated 25°) appears in the left margin. *Beat 4 — Evidence (story)*: 120vh height. The longest section. Uses a staggered layout: odd paragraphs have a 64px left indent, even paragraphs are flush. The visual weight creates a zipper pattern without requiring a two-column grid. A large bubble cross-section SVG (260px) centered in the column at the section's midpoint, with text flowing around it via `float: left; shape-outside: circle(50%)`. *Beat 5 — Closing (quiet)*: 60vh height. A single short statement in Space Grotesk 700 32px, center-aligned. Below it, contact or link information in Space Mono 10px uppercase, `--bubble-aqua`. No buttons, no CTAs. The ripple ring animation re-enters at the page bottom, suggesting continuation beyond the viewport. **Animation details:** Ripple rings: ```css @keyframes ripple-out { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } } .ripple-ring { animation: ripple-out 4s ease-out infinite; } .ripple-ring:nth-child(2) { animation-delay: 1s; } .ripple-ring:nth-child(3) { animation-delay: 2s; } .ripple-ring:nth-child(4) { animation-delay: 3s; } ``` Lattice reveal on scroll: ```css .lattice-section { opacity: 0; transition: opacity 0.8s ease; } .lattice-section.in-view { opacity: 1; } ``` `IntersectionObserver` adds `.in-view` when 20% of the element is visible. Iridescent shape hover: ```css .bubble-svg:hover { filter: hue-rotate(30deg) brightness(1.1); transition: filter 0.6s ease; } ``` **Avoid absolutely:** - CTA buttons with fill backgrounds - Pricing tables or feature grids - Navigation bars with multiple links - Footer columns - Any use of `box-shadow` in the corporate card style - Flat solid-color hero backgrounds without the background SVG layer active ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: memphis, layout: centered, typography: sans-grotesk, palette: analogous, patterns: ripple, imagery: water-bubbles, motifs: crystalline, tone: raw-authentic **Differentiators from the existing corpus:** 1. **Memphis reinterpreted through liquid physics, not nostalgia.** The standard Memphis reading is retro-80s bold shapes as decoration. Here, every Memphis element (triangles, dots, bars) is subordinated to a water-science visual logic — triangles are refracted-light prisms, dot clusters are cross-sections of bubble arrangements, bars are meniscus-edge artifacts. The aesthetic key is the same but the referential system is entirely different. 2. **Analogous palette on a dark background.** The frequency report shows the corpus is dominated by warm palettes and gradient palettes, almost exclusively on light backgrounds. This design uses an analogous aqua→cyan→blue-violet range on `#0F1923` — a dark-background analogous scheme that appears nowhere else in the registry. 3. **Crystalline lattice as section texture, not illustration.** Most designs use imagery as focal illustration elements. Here, the hexagonal crystalline lattice is applied as a CSS `background-image` repeating pattern on section wrappers, creating texture that lives at a sub-content layer rather than competing for focal attention. 4. **Ripple animation as structural rhythm, not decoration.** The ripple rings are not placed randomly — they are anchored to specific page coordinates that correspond to the five content beats. When Beat 1 is in view, its ripple plays from a left-offset point. When Beat 5 is in view, a new ripple originates from the page bottom. The animation system is the page's heartbeat, not wallpaper. 5. **Five-beat essay structure with no section labels.** The information architecture is implicit — five distinct rhythmic sections flow without headings marking transitions. The visitor reads the page as a continuous statement, not as a navigated document. This directly avoids the CTA-heavy, stat-grid, feature-column pattern that is overrepresented in the corpus frequency report. **Patterns avoided from frequency analysis:** - No `cursor-follow` (overused: appears in top patterns) - No `gradient` palette (dominant in corpus) - No `warm` palette (dominant in corpus) - No horizontal navigation - No feature/stat grids