# Design Language for nonri.xyz ## Aesthetics and Tone nonri.xyz channels the spirit of a 1960s Swiss international design studio that has been quietly overtaken by a rogue generative algorithm -- the kind of place where Josef Muller-Brockmann's grid posters hang on the walls but the plotter in the corner has developed a mind of its own, producing drawings that drift away from strict Cartesian logic into organic, breathing forms. The aesthetic is **swiss** in its bones -- the devotion to systematic clarity, the belief that information has an inherent visual order -- but the surface is restless, alive with procedural textures and computational artifacts that seep through the rationalist framework like ivy through a modernist facade. The tone is **approachable-casual**: this is not the forbidding Swiss design of corporate annual reports, but the warm, slightly conspiratorial voice of a designer who genuinely loves grids and then gleefully breaks them. Think of it as a letter from a friend who happens to think in Bezier curves -- technically precise but never cold, structured but never rigid, knowledgeable but never condescending. The domain name "nonri" (a phonetic echo of the Korean word for logic/reasoning, "nonli") suggests a playful relationship with rationality itself: logic that knows when to let go. The visual mood sits at the intersection of three references: (1) the matte, paper-textured precision of mid-century Swiss poster design (Armin Hofmann, Karl Gerstner), (2) the warm sepia-toned nostalgia of early computer graphics manuals from the 1970s-80s (think SIGGRAPH proceedings printed on cream stock), and (3) the living, evolving textures of contemporary generative art (Tyler Hobbs' fidenza, Manolo Gamboa Naon's organic tangles). The result is a site that feels like a technical manuscript that has learned to breathe. ## Layout Motifs and Structure The layout follows an **organic-flow** composition -- a deliberate departure from the rigid column-row grids that dominate 99% of web layouts. Instead of snapping content to a 12-column grid, sections are positioned along flowing, path-like trajectories that meander across the viewport like a river seen from above. Content blocks are placed along these invisible flow-paths, creating a reading experience that feels less like scanning a spreadsheet and more like following a marked trail through a landscape. **Flow-Path Architecture:** - **Primary Flow Spine:** An invisible cubic Bezier curve runs from the top-left of the viewport to the bottom-right, gently curving through the center. Content blocks are anchored to points along this spine, with their horizontal position determined by the curve's x-coordinate at their vertical scroll position. As the user scrolls, content appears to drift left and right in a sinuous pattern rather than marching straight down. - **Secondary Tangent Lines:** At each content block's anchor point on the spine, a tangent line extends outward. Supplementary elements (captions, metadata, decorative generative fragments) are placed along these tangent lines, radiating from the main content like branches from a trunk. The tangent angle determines the tilt of these satellite elements, creating subtle rotational variety. - **Variable Spacing:** Unlike conventional layouts with uniform section gaps, the spacing between content blocks varies according to a sine function tied to scroll position: tighter clusters of content alternate with expansive breathing spaces. Dense zones feel like paragraphs; sparse zones feel like chapter breaks. The rhythm is 3:1:3:1 -- three tight sections, one wide gap. - **Viewport Width Usage:** Content never occupies more than 60% of the viewport width at any point, but that 60% window slides left and right along the flow spine. On the widest screens, the unused 40% is filled with generative background textures that react to cursor proximity, creating a living margin. - **No Traditional Navigation Bar:** Instead, a small circular element (32px diameter, filled with a slowly rotating generative pattern) sits fixed in the top-right corner. On hover, it expands into a radial menu where navigation items are arranged in a circle around the cursor, each label set along a radial spoke. This replaces the conventional horizontal or hamburger menu entirely. **Grid Substructure (Hidden Order):** Beneath the organic flow, a 6-column Swiss grid exists as a ghost structure. Content blocks are constrained to widths that are multiples of this hidden grid (2-col, 3-col, 4-col), but their horizontal positions are not grid-aligned. This creates the sensation of underlying order without visible grid lines -- the swiss skeleton under the organic skin. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a geometric skeleton but distinctive quirks (the angular lowercase 'a', the squared-off curves of 'e' and 'o'). It embodies the Swiss-meets-eccentric spirit: rational structure with personality leaking through. Used at 3rem-7rem for primary headings, weight 700, letter-spacing -0.03em (tightened for that dense Swiss poster feel). Always lowercase -- uppercase is too authoritative for the approachable tone. - **Body / Running Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with moderate contrast and slightly brushed curves. Lora provides warmth and readability that a geometric sans cannot, and its subtle calligraphic roots introduce an organic counterpoint to Space Grotesk's engineered precision. Used at 1.05rem, weight 400, line-height 1.72, max-width 38em per line. The generous line-height creates vertical breathing room that echoes the layout's variable spacing philosophy. - **Accent / Metadata / Labels:** "IBM Plex Mono" (Google Fonts) -- a monospace typeface that bridges the gap between Swiss technical precision and the nostalgic warmth of early computing. Used at 0.78rem, weight 400, letter-spacing 0.05em, always in small-caps. This typeface handles timestamps, navigation labels, section numbers, and any text that functions as system annotation rather than authored prose. - **Eclectic-Hybrid Strategy:** The three-typeface system is intentionally eclectic: a geometric sans for authority, a transitional serif for warmth, a monospace for technical precision. They should never appear in the same line but can coexist within the same visual block (e.g., a Space Grotesk heading above Lora body text with IBM Plex Mono metadata in the margin). The contrasts between them -- geometric vs. organic, proportional vs. fixed-width, modern vs. nostalgic -- embody the site's central tension between Swiss rationalism and generative chaos. **Palette (sepia-nostalgic):** The palette is drawn from the tonal world of aged technical paper, faded blueprint ink, and the amber warmth of old cathode-ray displays: | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Parchment Cream | #F5ECD7 | Main page background; the base layer everything sits on | | Background Secondary | Warm Vellum | #EDE3C9 | Card backgrounds, content block fills, hover states | | Text Primary | Charcoal Walnut | #3B3228 | Body text, headings; a warm near-black that avoids pure #000 | | Text Secondary | Faded Umber | #7A6B5A | Metadata, captions, secondary labels, IBM Plex Mono text | | Accent Primary | Aged Ink Blue | #4A6670 | Links, interactive elements, the radial nav circle outline | | Accent Secondary | Oxidized Copper | #8B6F4E | Hover states, active indicators, generative line strokes | | Generative Warm | Burnt Sienna Glow | #C4895A | Generative art fill areas, warm accent highlights | | Generative Cool | Faded Cyanotype | #6B8E9B | Generative art secondary strokes, cool-toned contrast elements | | Divider / Ghost | Sepia Mist | #D8CEBC | Subtle dividing lines, ghost-grid lines, low-contrast separators | The palette operates on a strict warm-cool tension: the background and text colors are all warm (amber, sienna, walnut), while the accent and generative colors introduce controlled cool notes (blue-gray, cyanotype). This tension mirrors the site's conceptual opposition between nostalgic warmth and computational precision. ## Imagery and Motifs **Generative Art as Primary Visual Language:** nonri.xyz uses no photographs, no stock illustrations, no icons. Every visual element is generated procedurally through code -- SVG paths, canvas drawings, and CSS-driven patterns that are computed rather than designed. This is the imagery strategy of generative-art at 1% frequency: extremely rare in the portfolio and central to this site's identity. **Generative Techniques:** 1. **Flow Field Backgrounds:** The background of each major section contains a flow-field visualization: hundreds of short line segments whose angles are determined by a Perlin noise function. The flow field is rendered in Sepia Mist (#D8CEBC) against the Parchment Cream (#F5ECD7) background, creating an almost-invisible texture that reveals itself on close inspection -- like watermarks in handmade paper. The noise seed changes per section, so each flow field is unique. Cursor proximity warps the flow field locally: lines within 120px of the cursor bend toward it (the cursor-follow pattern), creating a magnetic distortion that follows the user's gaze. 2. **Organic Tangles:** At transition points between content sections, clusters of intertwined cubic Bezier curves form tangle motifs -- knotted, flowing line structures that recall both circuit-board traces and vine growth. Each tangle is drawn with 15-30 curves in Oxidized Copper (#8B6F4E) and Faded Cyanotype (#6B8E9B), stroke-width 1.5px, with varying opacity (0.3-0.8). The tangles are generated from a seed that incorporates the section's content hash, so each tangle is deterministically tied to the content it decorates. 3. **Dot-Matrix Portraits:** Where a conventional site might place a hero image, nonri.xyz renders dot-matrix patterns: rectangular grids of circles whose radii vary to encode a grayscale image. The source image is never visible; only the dot-matrix interpretation appears, rendered in Charcoal Walnut (#3B3228) on Warm Vellum (#EDE3C9). The dots pulse subtly on scroll (radius oscillates by +/-0.5px over 3 seconds), giving the image a living, breathing quality. 4. **Grid Ghost Lines:** Faint lines representing the hidden 6-column Swiss grid occasionally become visible as decorative elements -- thin vertical strokes in Sepia Mist (#D8CEBC) at 0.15 opacity that fade in and out as the user scrolls. These ghost-grid lines reinforce the swiss underpinning without imposing it, a visual whisper of the rationalist skeleton. **Tech Motifs:** The decorative vocabulary is drawn from the language of technology and computation: - **Section Numbers:** Each content section is numbered in IBM Plex Mono (e.g., "001", "002") in Faded Umber (#7A6B5A), positioned along the flow spine's tangent line, rotated to match the tangent angle. This numbering system evokes both Swiss typographic catalogs and computer memory addresses. - **Coordinate Annotations:** Small coordinate pairs (e.g., "x:412 y:890") appear near generative elements, annotating their position as if the page is a technical drawing under construction. These are purely decorative but reinforce the computational theme. - **Process Indicators:** Thin progress-bar-like elements appear at the edges of content blocks during scroll transitions -- subtle horizontal lines that fill from left to right as a section enters the viewport, styled as Aged Ink Blue (#4A6670) at 0.4 opacity. They suggest the site is "loading" or "computing" its own content. - **Hash Fragments:** Truncated hash strings (e.g., "a8f3...c2d1") appear as watermarks behind content blocks at very low opacity (0.08), rotated 12 degrees. These reference the deterministic nature of generative art (every visual derived from a seed hash) and add a layer of cryptographic texture. ## Prompts for Implementation **Full-Screen Narrative Flow Experience:** The site opens to a full-viewport canvas of Parchment Cream (#F5ECD7). In the center, the domain name "nonri.xyz" fades in letter by letter over 2.4 seconds, set in Space Grotesk at 5rem, weight 700, lowercase, Charcoal Walnut (#3B3228). As each letter appears, a small burst of flow-field lines radiates outward from the letter's position -- 20-30 short line segments that spiral outward and fade over 1.5 seconds, drawn in Oxidized Copper (#8B6F4E) at 0.5 opacity. The total effect: the name appears to be writing itself into existence while the generative system reacts to each new character. Below the name, after a 1-second pause, a subtitle emerges in Lora at 1.1rem, Faded Umber (#7A6B5A): a single sentence that describes the site's purpose. This subtitle fades in as a complete unit (no letter-by-letter), accompanied by a horizontal line (Sepia Mist, #D8CEBC) that draws itself from center outward to 30% viewport width in both directions. **Scroll-Activated Flow Path:** As the user scrolls past the opening screen, the organic-flow layout engages. The first content block slides into view from the left side of the flow spine, arriving at its anchor point with a spring-physics ease (initial velocity, overshoot, settle). Simultaneously, the background flow-field texture behind this section generates itself: lines appear one by one over 800ms, painting the flow field in real-time as if the page is thinking about what pattern to show. Each subsequent content block enters from alternating sides of the flow spine (left, right, left, right), with its entry direction determined by the tangent angle at its anchor point. The stagger between blocks is 200ms -- fast enough to feel cohesive, slow enough to preserve the sense of sequential revelation. **Cursor-Follow Generative Interaction:** The cursor-follow pattern is the site's signature interaction. Wherever the cursor moves, the flow-field background within a 120px radius warps to point toward the cursor position. Outside that radius, the flow field returns to its noise-determined angles. The transition between warped and natural states uses a smooth falloff (cubic ease), creating a magnetic-lens effect that moves with the cursor. Additionally, the cursor leaves a fading trail of 5-8 dots (3px diameter, Burnt Sienna Glow, #C4895A) that persist for 1.2 seconds before fading out. This trail transforms the cursor from a pointer into a drawing instrument, reinforcing the generative-art theme. On touch devices, the trail activates on touch-drag instead. **Section Transitions:** Between major content sections, a transition animation plays: the organic tangle motif for the upcoming section draws itself path-by-path over 1.5 seconds, each curve appearing as a Bezier that extends from one endpoint to the other. The drawing order is randomized, so the tangle assembles unpredictably. Once complete, the tangle remains as a static decorative element while the next content block slides into position. **Radial Navigation:** The 32px generative circle in the top-right corner contains a miniature flow-field that rotates slowly (360 degrees per 30 seconds). On hover, it expands to 280px diameter over 400ms (spring ease), revealing navigation items arranged radially. Each nav item is set in IBM Plex Mono small-caps, Faded Umber (#7A6B5A), positioned along a radial spoke. Hovering a nav item causes its spoke to extend outward by 20px and the text to shift to Aged Ink Blue (#4A6670). The expanded nav has a Warm Vellum (#EDE3C9) background with 0.92 opacity, blurred slightly (backdrop-filter: blur(8px)). **Responsive Behavior:** On viewports below 768px, the organic flow spine straightens to a near-vertical line with reduced horizontal meandering (maximum 5% viewport-width offset instead of 20%). The radial navigation converts to a bottom-sheet that slides up from the viewport floor. Flow-field background complexity reduces (fewer line segments, larger grid spacing) for performance. The dot-matrix imagery reduces resolution (larger dots, wider spacing). The cursor-follow trail disables; the flow-field warp activates on touch-move only. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie banners with bright buttons, fixed bottom bars. This is a narrative experience, not a conversion funnel. **Bias toward:** full-screen narrative sequences, slow reveals, breathing space, generative texture as atmosphere, the cursor as a creative tool rather than a pointer. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Swiss + Generative Art Collision (3% + 1% frequency):** No other design in the portfolio combines Swiss rationalist aesthetics with generative art imagery. Swiss design appears at 3% and generative-art at 1%, making their intersection essentially unique. The concept of a hidden Swiss grid underlying an organic, procedurally-generated visual surface creates a tension (order vs. emergence) that no other site explores. Other Swiss-influenced designs tend toward clean minimalism; this one uses Swiss structure as a scaffold for computational chaos. 2. **Organic-Flow Layout (4% frequency):** While 99% of portfolio designs use centered layouts and 51% use asymmetric layouts, organic-flow appears at only 4%. nonri.xyz takes this further by defining the flow path as a literal Bezier curve with tangent-line offshoots, creating a layout that genuinely meanders rather than simply breaking grid alignment. The variable-spacing sine rhythm (3:1:3:1) adds another layer of organic cadence that no grid-based layout can replicate. 3. **Cursor as Generative Drawing Instrument:** The cursor-follow pattern at 5% frequency is already uncommon, but nonri.xyz extends it beyond simple parallax-tracking into a creative tool: the cursor warps flow fields, leaves colored trails, and transforms the browsing experience into a collaborative drawing act between the user and the algorithm. The cursor does not merely follow -- it participates in the site's visual generation in real time. No other design treats the cursor as a co-author of the visual experience. 4. **Eclectic-Hybrid Typography at 3% Frequency:** The three-typeface system (geometric sans + transitional serif + technical mono) is deliberately eclectic rather than harmonized. Most designs pick typefaces that complement each other smoothly; nonri.xyz picks typefaces that argue productively -- Space Grotesk's engineered geometry against Lora's organic brush-roots against IBM Plex Mono's fixed-width rationality. The argument between them is the typography. 5. **Sepia-Nostalgic Palette Without Vintage Aesthetic:** While the palette draws from aged-paper and old-display tones (sepia-nostalgic at 6%), the site avoids the vintage aesthetic entirely (vintage motifs at 85% frequency are explicitly avoided). The sepia warmth is recontextualized as computational warmth -- the amber glow of early CRT monitors, the cream of dot-matrix printer paper -- rather than nostalgic pastiche. This creates a unique temporal ambiguity: the site feels like it could be from 1978 or 2028. 6. **Zero Photography, Zero Stock Art:** At a portfolio level where photography appears at 73% and minimal imagery at 94%, nonri.xyz's complete reliance on procedurally generated visuals is a stark departure. Every visual element is code-produced, reinforcing the generative-art identity and ensuring that no two page loads produce identical visual experiences. **Chosen seed/style:** aesthetic: swiss, layout: organic-flow, typography: eclectic-hybrid, palette: sepia-nostalgic, patterns: cursor-follow, imagery: generative-art, motifs: tech, tone: approachable-casual **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), minimal imagery (94%), friendly tone (98%), vintage motifs (85%), photography imagery (73%), gradient palette (90%). While the palette is warm-toned, it is classified as sepia-nostalgic rather than generic warm, and the cool accent colors (Aged Ink Blue, Faded Cyanotype) prevent it from reading as another all-warm design.