# Design Language for nonri.net ## Aesthetics and Tone nonri.net is a **still-water contemplation space** — the visual equivalent of a single candle burning beside a window at dusk, its reflection trembling on a pale stone floor. The domain name itself feels like a whispered Japanese syllable, a negative space (*non-ri*, "without logic," or the simple phonetic openness of a name that defies easy meaning). The aesthetic is **calm maximalism**: not the riot of Memphis or the loudness of dopamine design, but a richness built from *layered quietness* — many subtle elements assembled with such precision that the total effect is dense without being noisy. The visual world is cool: slate grays, silver-white, ash, and the faintest trace of blue-gray mist. Against this cool ground, a single warm element — the **candle flame** — appears in amber-ivory (#F5E6C8) at key focal points, always small, always precise, like a pilot light that refuses to be extinguished. The candle is not decorative; it is the emotional axis of the page. Every scroll move brings the visitor slightly closer to or further from that flame. The tone is **calm-serene** without being cold. The page breathes slowly. Scroll behavior is cinematic rather than snappy — easing curves are long and gentle (cubic-bezier(0.16, 1, 0.3, 1)), as if the entire viewport were being lifted by a slow tide. Line illustrations — thin, single-stroke, architectural in precision — mark the transitions between sections like engravings in a private catalog. Mood references: a silent monastery at 4am; the surface of a still harbor before dawn; a candle-lit drawing room where someone has just closed a very long book. ## Layout Motifs and Structure The page is organized as **five full-viewport parallax sections**, each one a distinct "room" in a larger interior. The scroll mechanics separate foreground, midground, and background layers so that entering each room feels like stepping through a threshold rather than scrolling past text. **Section Architecture:** 1. **The Threshold (100svh).** Full dark — near-black gray (#1C1E22) — with a single centered candle flame SVG (line-illustration style, 2 px stroke, animated flicker at 3–5 Hz). The site wordmark *nonri* appears below in Space Grotesk Light, tracked at 0.4em, in #D8DCE4. No subheading. No CTA. Just the flame and the name. 2. **The Antechamber (100svh).** Background layer: a large-format line-illustration of an architectural interior (arches, stone columns, receding perspective) drawn in #8A9098 on #ECEEF2, parallaxing at 0.35× scroll speed. Foreground: a single block of body text in DM Sans, left-aligned, set at 18 px / 1.8 leading, in #3A3D44. The text appears via a slow vertical reveal (clip-path animation, 1.2 s ease). 3. **The Hearth (100svh).** The warmest room. Background: a slow ripple pattern — CSS or SVG-based concentric rings emanating from a single off-center point, drawn in #B8BEC8 on #D4D8DF, with the rings animating outward at 4 s intervals. The ripple origin is the candle. A second line-illustration — a candle in profile with a curl of smoke — sits at the center, perfectly still against the moving rings. 4. **The Gallery (100svh).** Split composition: left 55% holds a staggered grid of four line-illustration panels (architectural fragments: a window arch, a stone ledge, a doorframe, a spiral stair), each framed with a 1 px #8A9098 border. Right 45% holds a tall block of text. The grid panels parallax independently at rates 0.2×, 0.35×, 0.25×, 0.45× — slight misalignment creates dimensional depth. 5. **The Close (100svh).** Returns to near-darkness (#1C1E22). The candle flame returns, this time at top-right corner, small (64 × 64 px). Below, a single line of Space Grotesk in #D8DCE4: *nonri.net*. No footer links. No social icons. The ripple pattern from Section 3 plays once more, this time inverted in color (rings in #3A3D44 on #1C1E22), then fades to still. **Parallax implementation:** CSS custom properties `--scroll-y` fed by a single `requestAnimationFrame` listener. Each section's background layer reads `transform: translateY(calc(var(--scroll-y) * -0.35))` (or its section-specific multiplier). No library dependency. **Spatial grammar:** Gutters are wide — 10vw left and right on desktop. Line length capped at 60 ch. Vertical rhythm is based on a 12 px baseline grid. Section transitions use a 2 px horizontal rule in #8A9098 that draws left-to-right over 0.8 s as the section enters the viewport. ## Typography and Palette **Typography — sans-grotesk, all from Google Fonts.** The system uses exactly two typefaces, chosen for their complementary grotesk personalities: - **Display / Wordmark:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 300 (Light) for the main wordmark and section numerals. Weight 500 (Medium) for any standalone labels. Tracked at +0.04em for the wordmark, +0.12em for uppercase labels. The font's subtle quirks (the tapered terminals, the slightly irregular 'a') read as *handcrafted precision* — maximalist attention at the letterform level. - **Body / Secondary:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 300 (Light) for all body text. Weight 400 (Regular) for captions and metadata labels. Set at 17–19 px with 1.75–1.85 line-height. The optical neutrality of DM Sans lets the line-illustrations and ripple patterns carry the visual weight without typographic competition. No serif. No monospace. No display-weight headings. The page is intentionally quiet typographically — the maximalism lives in the layered imagery, not the type. **Palette — cool grays with a single warm accent:** | Role | Hex | Name | |---|---|---| | Deep ground | #1C1E22 | Ember dark | | Dark mid-tone | #3A3D44 | Slate shadow | | Mid gray | #6B7280 | Fog stone | | Light mid | #8A9098 | Ash silver | | Pale ground | #D4D8DF | Mist linen | | Near white | #ECEEF2 | Moon white | | Text on dark | #D8DCE4 | Pale pewter | | Warm accent (candle) | #F5E6C8 | Ivory amber | | Warm accent deep | #C8A96B | Burnished gold | The palette is **nine values** but reads as two systems — a cool gray ramp (seven steps) and a warm candle duality (two values). The warm values appear exclusively on candle-related elements: the flame SVG fill, the flicker glow, and the close-section rule line. Never on text. Never on backgrounds. ## Imagery and Motifs **Line illustration** is the sole imagery system. No photographs. No raster graphics. No icon fonts. All illustrations are drawn (or specified as SVGs) at **1.5–2 px stroke weight**, using `stroke-linecap: round` and `stroke-linejoin: round`. The stroke color is always a value from the cool-gray ramp, chosen to sit 2–3 steps above the background it rests on. No fills except the candle flame itself (a small, soft amber fill at 40% opacity behind the outline). **Illustration subjects:** - **Candle atmospheric:** The primary motif. A tall taper candle in profile — stem, socket, drip trails, flame with a fine inner cone. Drawn at multiple scales: a monumental version at 60 vh tall for Section 1, a miniature version at 64 px for Section 5. The flame is the only element that animates (a subtle SVG path morph cycling through three flame-shape keyframes at 3 s intervals). - **Architectural fragments:** Pointed arches, stone column capitals, a receding arcade of arches seen in perspective, a spiral staircase from above. These appear as the gallery panels in Section 4 and as the large background illustration in Section 2. - **Ripple / water surface:** Section 3 and 5 feature a pure geometric ripple — 12–16 concentric ellipses, each 1.5 px stroke, with radii stepped at 24 px intervals. The ellipses are slightly tilted (8° rotation) to suggest a water surface seen at an angle. The outermost 4 rings animate with a repeating scale-up + fade-out at 4 s, staggered by 0.5 s per ring — like the last rings of a stone dropped into still water. - **Smoke curl:** Above the candle flame, a thin procedural SVG path describes a slow curl of smoke rising and dissipating. Drawn as a single bezier path that morphs over 8 s using CSS keyframes on the `d` attribute (Firefox-safe fallback: opacity-only fade). **No icons.** No arrows. No chevrons. No logos except the wordmark. Navigation (if any) is pure text in DM Sans 300. ## Prompts for Implementation Build nonri.net as a **single continuous interior journey** — a visitor moving slowly through five rooms of a candlelit space. Every implementation decision should serve the sensation of moving through still, cool air toward a single warm light source. **Macro structure:** 1. **Section 1 — Threshold:** Full-screen `#1C1E22`. Centered SVG candle (60 vh tall) with animated flame. Below it: `nonri` in Space Grotesk 300, #D8DCE4, letter-spacing 0.4em. No other content. Fade in on load: opacity 0→1 over 2.4 s, delay 0.3 s. 2. **Section 2 — Antechamber:** Background layer (`position: absolute, z-index: 0`) holds the architectural arcade SVG, full-width, parallaxing at `translateY(calc(var(--progress-2) * -120px))`. Foreground: a single paragraph block, max-width 60 ch, centered, revealed with `clip-path: inset(0 0 100% 0)` → `inset(0 0 0% 0)` on scroll entry. Background: #ECEEF2. Section rule (2 px #8A9098 horizontal line) draws in as Section 2 enters viewport. 3. **Section 3 — Hearth:** Background: #D4D8DF. The ripple SVG lives in a `
` at `position: absolute, inset: 0`, with its origin offset to 38% left, 55% top (off-center warmth). Centered: the candle-in-profile illustration (medium scale, 240 px tall) on top of the ripple field, `position: relative, z-index: 1`. The candle flame morphs; the ripple rings animate outward. No text in this section — pure atmosphere. 4. **Section 4 — Gallery:** Two-column CSS Grid (55fr 45fr). Left: a CSS Grid of 2×2 cells, each holding one architectural SVG panel in a `border: 1px solid #8A9098` frame. Each panel has its own `translateY` parallax multiplier (--p4a through --p4d). Right: a tall text block, DM Sans 300, 17 px / 1.8 leading, #3A3D44. Text block slides in from right (`translateX(40px)` → `translateX(0)`) on scroll entry. 5. **Section 5 — Close:** Full-screen #1C1E22. Top-right: small candle SVG (64 px) with flame. Center: `nonri.net` in Space Grotesk 300, #D8DCE4, letter-spacing 0.4em. Below: the inverted ripple plays once (triggered by IntersectionObserver), then fades to opacity 0 over 3 s. Final state: the page is dark, the small candle burns, the name persists. Static. **Scroll mechanics:** One global `scroll` listener sets `--scroll-y` on `:root`. Each section calculates its own `--progress-N` value (0→1 as it traverses the viewport) via a small JS mapping function. All parallax transforms read from these custom properties — no GSAP, no ScrollMagic, no libraries. **Animation budget:** Keep animations to: candle flame morph (SVG), ripple ring expand (CSS keyframes), scroll-driven parallax (rAF + CSS custom props), section-entry reveals (IntersectionObserver). No carousel. No particle systems. No scroll-jacking (the visitor always controls scroll speed). **Do NOT implement:** sticky navigation bars, hamburger menus, CTA buttons, pricing sections, testimonial blocks, stat counters, newsletter sign-up forms, social media links, cookie banners, loading screens longer than 0.4 s, or any element that interrupts the slow interior movement through the five rooms. **Atmosphere over information.** The text in Sections 2 and 4 should read like fragments from a private journal or a descriptive essay — not product copy, not marketing language. Lowercase preferred. No imperative sentences. ## Uniqueness Notes 1. **Candle atmospheric as structural axis, not decoration.** The frequency data shows *candle-atmospheric* appearing in near-zero designs. Here the candle is not a background element or a thematic flourish — it is the literal center of Section 1 (monumental, 60 vh), the implied heat source of the ripple origin in Section 3, and the sole survivor in Section 5 when everything else fades. The flame's scale journey (60 vh → 240 px → 64 px) narrates the entire site arc. 2. **Maximalist achieved through layer density, not color density.** The frequency data shows *maximalist* at 6% — almost always implemented as pattern overload or color saturation. nonri.net achieves maximalism through *parallax layer count* (background illustration + ripple field + illustration + text + rule lines, all independently positioned) on a strict cool-gray palette. The richness is spatial and temporal, not chromatic. 3. **Ripple as the sole animated pattern at structural scale.** *Ripple* appears at near-zero in the frequency report. Here it is not a CSS hover effect — it is a full-section atmospheric environment (Section 3) and a closing ceremony (Section 5 inverted). The ripple origin doubles as the conceptual location of the candle, making the water-surface metaphor precise: the warm light dropped into cool gray stone, and these are its rings. 4. **Line-illustration at architectural scale on a parallax ground.** The frequency report shows *line-illustration* at 2%. The implementation here uses it at two distinct scales simultaneously: as a full-viewport background (Section 2 arcade) and as precision foreground objects (Section 4 gallery panels, candle SVG). The dual scale — atmospheric and intimate — is not present in other designs. 5. **Seed documented:** aesthetic: maximalist, layout: parallax-sections, typography: sans-grotesk, palette: cool-grays, patterns: ripple, imagery: line-illustration, motifs: candle-atmospheric, tone: calm-serene. Avoided overused patterns: hand-drawn (58%), editorial (52%), terminal (31%), botanical (28%), glassmorphism (20%). Preferred underused patterns: ripple (~0%), line-illustration (2%), maximalist (6%), parallax-sections (low frequency).