# Design Language for nonri.net ## Aesthetics and Tone nonri.net -- "nonri" evokes the Japanese word for logic/reason (論理, ronri) with the first character twisted, a deliberate corruption of rationality -- inhabits the visual world of a cyberpunk museum after hours, where classical marble statuary has been wired with neon conduit and programmed to track your gaze. The aesthetic is **cyberpunk classicism**: the collision between Greco-Roman sculptural tradition and the electric, over-saturated visual language of Akihabara signage at midnight. Imagine Bernini's Apollo and Daphne mounted on a rotating pedestal inside a Shibuya pachinko parlor, bathed in magenta light, while a serif inscription etched into the plinth scrolls upward in real time like a terminal log. The tone is **playful** -- not cute-playful, but the playfulness of a trickster god who quotes Heraclitus while juggling neon tubes. There is intellectual mischief here: the site takes classical ideas seriously enough to desecrate them lovingly. Every interaction should feel like the page is aware of you, that it has noticed your cursor, that it is performing for an audience of one. The playfulness manifests as surprise -- text that rearranges itself when hovered, marble textures that crack to reveal electric pink underneath, scroll positions that trigger philosophical non-sequiturs appearing in the margins like the annotations of a deranged scholar. The mood references: the neon-soaked museum sequences in the film "Ex Machina," the typographic obsession of Stanley Kubrick's title cards, the deliberate anachronism of Virgil Abloh's classical quotation marks on streetwear, and the visual density of Blade Runner's cityscape but focused inward -- on a single room, a single sculpture, a single idea illuminated from too many angles at once. ## Layout Motifs and Structure The layout follows an **immersive-scroll** architecture -- a single continuous vertical journey with no visible navigation, no header bar, no footer. The entire site is one unbroken corridor that the user descends through, each section flowing into the next with no hard boundaries but clear atmospheric shifts. Think of it as walking through a long gallery tunnel where the lighting changes room by room, but the walls never actually divide. **Structural Principles:** - **The Corridor:** The viewport is the frame. Content occupies the full width and height of the screen at key moments, then contracts to a narrow central column (max-width: 720px) for reading passages, then expands again. This breathing between full-bleed and intimate scale creates rhythm without explicit section breaks. The transitions are not snaps but smooth scroll-linked interpolations: as you scroll past a threshold, the content width eases from 100vw to 720px over 200px of scroll distance. - **Depth Layers:** Three persistent visual layers exist throughout the scroll journey. Layer 0 (deepest): a slow-moving marble texture that parallax-shifts at 0.15x scroll speed, providing a constant classical substrate. Layer 1 (middle): the content itself -- text, images, interactive elements. Layer 2 (foreground): neon accent lines and cursor-reactive particles that exist in front of everything, creating the sensation that the screen surface itself is electrified. - **Vertical Rhythm Zones:** The scroll journey is divided into approximately 7-9 zones, each 120vh to 180vh tall. Within each zone, content is positioned using sticky elements that pin at certain scroll positions, creating moments where the user scrolls "through" a fixed composition before it releases and the next zone begins. No two zones use the same internal layout: one might be a single enormous word filling the viewport; the next might be a three-column text arrangement; the next might be empty except for a cursor-following marble fragment. - **No Navigation Chrome:** There is no menu, no hamburger, no header. The only navigation affordance is a thin vertical progress indicator on the far right edge -- a 2px line in neon cyan (#00F0FF) that fills downward as the user scrolls. Clicking anywhere on this line scrolls to that proportional position in the document. On hover, the line widens to 8px and shows a ghosted preview label of the nearest zone. - **Margin Annotations:** Throughout the scroll, short text fragments appear in the left margin (positioned at 2vw from the left edge) -- philosophical fragments, code-like comments (prefixed with //), or single words in Greek or Latin. These annotations scroll at 0.8x the main content speed, creating a subtle parallax within the text layer itself. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- a high-contrast serif with roots in Claude Garamond's 16th-century typefaces but redrawn with sharper, more dramatic thick-thin transitions that look stunning at large sizes. Used at 4rem to 12rem, weight 600 (SemiBold) and 700 (Bold). At display sizes, the hairline strokes of letters like "N," "O," and "R" become almost invisible against dark backgrounds, creating a flickering, partially-dissolved effect that reinforces the cyberpunk corruption of classical forms. Letter-spacing: -0.02em at display sizes. The serifs are long and elegant, evoking chiseled Roman inscriptional capitals while the overall proportions remain readable on screen. For the site's name "NONRI" rendered at 10rem+, the letters should be set in all-caps with `font-feature-settings: 'liga' 0, 'kern' 1` to prevent ligatures and maintain the monumental, inscriptional quality. - **Body / Reading Text:** "Source Serif 4" (Google Fonts) -- a transitional serif designed for long-form reading on screen. Weight 400 (Regular) for body text at 1.125rem (18px) with line-height 1.75. The transitional serif style bridges the gap between the old-style Cormorant Garamond in headlines and the modern, digital context. Color: #E8E0F0 (a cool lavender-white) against dark backgrounds, providing softer contrast than pure white. For emphasis, weight 600 (SemiBold) in the neon magenta (#FF00DD) rather than italic, creating electric highlights within otherwise classical paragraphs. - **Accent / Annotations / Code:** "IBM Plex Mono" (Google Fonts) -- used exclusively for the margin annotations, progress indicators, and any code-like fragments. Weight 400 at 0.75rem, letter-spacing: 0.06em, color: #00F0FF (neon cyan) at 60% opacity. All annotation text is set in lowercase. This monospace voice represents the "system" layer -- the machine commenting on the classical content. **Palette:** The palette is **neon-electric** -- high-intensity chromatic accents against deep, near-black backgrounds, with marble-white as the classical counterpoint. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void Black | Near-black with blue undertone | #0A0A14 | Primary background, the darkness of the corridor | | Marble White | Warm classical white | #F0EDE6 | Text on dark, marble texture base, classical elements | | Neon Magenta | Electric pink-magenta | #FF00DD | Primary accent, hover states, emphasis text, section transitions | | Neon Cyan | Bright cyan-blue | #00F0FF | Secondary accent, progress bar, annotations, cursor trail | | Bruised Purple | Deep muted purple | #2D1B4E | Mid-tone backgrounds, zone transition gradients | | Vein Gold | Metallic warm gold | #D4A843 | Tertiary accent, marble vein details, rare highlight moments | | Crack Pink | Desaturated rose | #C46B8A | Marble crack interiors, soft glow behind shattered surfaces | | Static Gray | Cool neutral gray | #4A4A5E | Disabled states, subtle borders, secondary body text | The background is never pure black but always #0A0A14, which has enough blue to feel like deep space or a darkened museum gallery rather than an absence. Neon colors are used sparingly but at full saturation -- they should feel like actual neon gas tubes, not like tinted UI elements. When neon magenta and neon cyan appear near each other, a subtle CSS glow (box-shadow or text-shadow with 20px blur at 40% opacity) simulates the light bleed of real neon signage. ## Imagery and Motifs **Collage as Compositional Method:** The imagery approach is **collage** -- the deliberate juxtaposition of classical sculptural photography with digital interference patterns, neon line art, and fragmented typography. No image exists in isolation; every visual element is layered with at least one other register. **Marble-Classical Motif System:** The defining visual motif is **marble-classical** -- fragments of Greco-Roman sculpture, architectural details, and inscriptional letterforms treated as raw material for digital manipulation: 1. **Marble Fragment Photography:** High-contrast, dramatically lit photographs of marble surfaces -- close-ups of veined Carrara marble, broken pediment corners, the bridge of a Roman nose, the fold of a stone toga. These images are desaturated to near-monochrome (#F0EDE6 highlights, #2D1B4E shadows) and used as large background panels within scroll zones. Critical: these are not generic marble textures but recognizable sculptural fragments -- a hand, an ear, a column capital -- cropped so tightly they become abstract. 2. **Neon Overlay Lines:** Thin (1-2px) neon-colored lines (#FF00DD, #00F0FF) drawn over marble imagery, tracing the contours of sculptural forms but extending beyond them into geometric patterns -- as if someone projected a wireframe onto a statue and the wireframe took on a life of its own. These lines are SVG paths animated with `stroke-dashoffset` to draw themselves on scroll. 3. **Crack-and-Glow Effect:** At key moments in the scroll journey, marble surfaces develop cracks -- thin fissures rendered as SVG paths -- and from within these cracks, neon light bleeds outward. The crack interiors glow in #C46B8A or #FF00DD, with a `filter: blur(8px)` halo, as if the classical surface is literally breaking apart to reveal electric energy underneath. This effect is the central metaphor of the entire design: reason (marble) fracturing to reveal something irrational and luminous beneath. 4. **Floating Marble Shards:** Small (60px-140px) irregularly shaped fragments of marble texture that float in parallax layers around the main content. These shards rotate slowly (one full rotation per 30 seconds) and respond to cursor position via the cursor-follow pattern: they drift 10-25px toward the cursor when it moves near them, as if magnetically attracted, then ease back to their original positions when the cursor moves away. 4-6 shards are visible at any given scroll position. 5. **Typographic Collage Elements:** Large single letters or short words ("LOGOS," "NEON," "RATIO," "CHAOS") rendered in Cormorant Garamond at 20rem+, placed at oblique angles (-15 degrees to +8 degrees), partially obscured by other elements, with reduced opacity (15-25%). These function as watermarks or graffiti -- classical words haunting the composition. **Cursor-Follow System:** The cursor is the user's torch in the corridor. A custom cursor replacement: a small (12px) circle of neon cyan (#00F0FF) with a 4px blur glow, trailing 3-4 ghost copies that fade over 300ms (creating a comet-tail effect). Additionally, within designated "reactive zones," the cursor's position influences: - The drift direction of floating marble shards (magnetic attraction) - A subtle radial gradient spotlight (60px radius, 5% white opacity) that follows the cursor, simulating a flashlight scanning a dark gallery - The parallax offset of Layer 0 (marble background), which shifts up to 15px based on cursor position relative to viewport center ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to a full-viewport screen of Void Black (#0A0A14). For 800ms, nothing is visible -- just darkness, the cursor's neon cyan dot the only light. Then, from the center of the viewport, a single crack appears: a thin SVG path drawn in #C46B8A, branching outward like a fracture in glass, animated over 1.2 seconds. As the crack completes, neon magenta (#FF00DD) light bleeds through the fissure -- a `filter: blur(12px)` glow that expands for 400ms. Through this crack, the letters N-O-N-R-I emerge in Cormorant Garamond at 10rem, weight 700, each letter fading in sequentially at 150ms intervals. The letters are #F0EDE6 (Marble White) with a subtle 2px neon magenta text-shadow. Below, after all letters are visible, a single line appears in IBM Plex Mono at 0.875rem: "// a corruption of logic" in #00F0FF at 50% opacity. A small downward-pointing chevron pulses at the bottom of the viewport (opacity oscillating between 0.2 and 0.6 over a 2-second cycle), inviting the first scroll. **Zone 1 -- The Premise (scroll position: 100vh to 280vh):** As the user begins scrolling, the opening title shrinks and lifts away (scale from 1 to 0.4, opacity to 0, position sticky releasing at 100vh). A marble texture fades in as the Layer 0 background -- a close-up of veined stone, warmly lit from the left. The content column narrows to 720px centered. Body text in Source Serif 4 introduces the site's concept, whatever "nonri" represents -- a project, a philosophy, a collection. The text appears in 3-4 paragraphs, each fading in as it enters the lower third of the viewport. In the left margin, IBM Plex Mono annotations appear at 0.8x scroll speed: "// premise" ... "// or is it?" ... "// scroll deeper." **Zone 2 -- The Gallery (scroll position: 280vh to 450vh):** The content expands to full-bleed. Three or four large marble fragment images are arranged in an asymmetric collage: one fills 60% of the viewport, another overlaps its corner at 30%, a third floats above-right at 25%. As the user scrolls, each image parallaxes at a different rate (0.3x, 0.5x, 0.7x), creating depth. Neon overlay lines trace the contours of the sculptural forms, drawing themselves via stroke-dashoffset keyed to scroll position. Between the images, short phrases in Cormorant Garamond at 3rem drift across the viewport on scroll, pinned for 50vh of scroll distance each. **Zone 3 -- The Fracture (scroll position: 450vh to 600vh):** The marble background develops cracks. Multiple SVG fracture paths spread across the viewport as the user scrolls, each crack triggered at a specific scroll threshold. The cracks glow with neon magenta. Through the largest crack, a new color emerges: Bruised Purple (#2D1B4E) floods the background over 80vh of scroll distance, replacing the marble. The floating marble shards appear for the first time, drifting into the viewport from the edges. The cursor-follow spotlight becomes more pronounced in this zone (8% white opacity instead of 5%), rewarding the user for exploring with their cursor. **Subsequent Zones** continue this pattern of alternating between intimate reading (narrow column, serif text, classical tone) and immersive spectacle (full-bleed, neon, marble fragmentation, cursor reactivity). Each zone introduces one new visual element or interaction to maintain novelty across the scroll journey. **Technical Guidance:** - Use `position: sticky` extensively for pinned compositions within zones - Implement scroll-linked animations via `IntersectionObserver` for triggering and `requestAnimationFrame` for smooth cursor tracking - Marble crack SVGs should use `stroke-dasharray` and `stroke-dashoffset` animated by scroll position for the drawing effect - Neon glows use layered `box-shadow` and `text-shadow` rather than filter-heavy approaches (for performance) - The cursor-follow system uses `mousemove` event listeners with `requestAnimationFrame` throttling, applying CSS `transform: translate()` to affected elements - Marble shard parallax uses CSS custom properties (`--cursor-x`, `--cursor-y`) updated via JS and consumed via `calc()` in transform declarations - **AVOID:** CTA buttons, pricing grids, stat counters, testimonial carousels, team grids, feature comparison tables. This is a narrative environment, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Immersive-Scroll Layout at 0% Frequency:** No other design in the portfolio uses immersive-scroll as its layout architecture. While scroll-triggered animations are nearly universal (97%), the specific layout pattern of a single continuous corridor with no navigation chrome, no section boundaries, and scroll-linked width interpolation between full-bleed and narrow column is entirely unrepresented. This is a genuinely novel structural approach in the collection. 2. **Serif-Classic Typography at 0% Frequency:** No other design uses serif-classic as its primary typographic identity. While humanist (36%) and handwritten (20%) appear frequently, the specific choice of a high-contrast Garamond-lineage serif (Cormorant Garamond) as the dominant display face -- deployed at monumental 10rem+ sizes to evoke Roman inscriptional capitals -- is absent from the existing portfolio. The pairing with Source Serif 4 for body text creates an all-serif reading experience that is a radical departure from the mono-dominated (99%) typographic landscape. 3. **Cyberpunk-Classical Collision as Conceptual Framework:** The cyberpunk aesthetic appears at only 5% frequency, and marble-classical motifs at only 4%. But more importantly, no existing design combines these two vocabularies. The specific conceit of classical marble sculpture fractured to reveal neon light underneath -- reason corrupted by electric irrationality -- is a conceptual pairing that does not exist anywhere in the 304-design corpus. This is not cyberpunk-as-dashboard or classical-as-decoration but a genuine synthesis where each tradition interrogates the other. 4. **Neon-Electric Palette at 1% Frequency:** The neon-electric palette is nearly absent from the collection. Most designs gravitate toward warm (100%), gradient (90%), or muted (69%) palettes. The commitment to full-saturation neon (#FF00DD, #00F0FF) against near-black backgrounds is a dramatic chromatic departure, made more distinctive by the inclusion of Vein Gold (#D4A843) as a classical metallic counterpoint to the synthetic neon. 5. **Cursor-Follow as Spatial Narrative Device:** While cursor-follow appears at 4% frequency, it is used here not as a decorative micro-interaction but as the primary spatial metaphor: the cursor is a flashlight in a dark museum corridor. The cursor influences marble shard drift, activates a spotlight gradient, and shifts the background parallax -- making the user's presence felt throughout the entire scroll journey rather than in isolated hover moments. **Documented Seed/Style:** - aesthetic: cyberpunk - layout: immersive-scroll - typography: serif-classic - palette: neon-electric - patterns: cursor-follow - imagery: collage - motifs: marble-classical - tone: playful **Avoided Overused Patterns:** - Layout: centered (99%) -- replaced with immersive-scroll corridor - Typography: mono (99%) -- replaced with serif-classic pairing (Cormorant Garamond + Source Serif 4) - Palette: warm (100%), gradient (90%), muted (69%) -- replaced with neon-electric (1%) - Imagery: minimal (94%), photography (73%) -- replaced with collage (7%) - Patterns: scroll-triggered used but not as primary identity; cursor-follow (4%) elevated to central role - Tone: friendly (98%) -- playful is assigned but executed as intellectual mischief rather than generic friendliness - Motifs: vintage (85%), nature (30%) -- replaced with marble-classical (4%)