# Design Language for nonri.xyz ## Aesthetics and Tone `nonri.xyz` is the visual language of **a circuit board that has learned to meditate**. The domain reads as a Romanized corruption of a Japanese word — silent, private, slightly foreign even to itself — and the entire design embodies that quality: technology that has achieved stillness through discipline rather than emptiness. The aesthetic is **Japanese minimalism executed in gold-on-black PCB geometry**: the negative space (ma, 間) is not blank canvas but charged silence — the insulating layer between live traces. Every centimeter of dark background is as intentional as the gold hairlines themselves. Nothing decorates. Nothing announces. Objects appear the way transistors appear on a board: necessary, precise, placed once. Mood is **mysterious-moody** in the specific register of Noh theatre — not gothic darkness, not cyberpunk neon, but the dimly lit formal atmosphere of an expensive ritual whose meaning you are not fully permitted to understand. The viewer is a respectful observer. The site does not explain itself. It simply is. Inspiration sources: early Sony product photography (1975–1985), Muji catalog negative space, PCB silkscreen typography, torii gate proportions as grid rationale, Japanese woodblock negative space, Bauhaus poster geometry. ## Layout Motifs and Structure The page is structured as **five full-viewport Z-strokes rendered as live PCB traces**. Each section is one Z-beat: upper-left anchor → diagonal trace → lower-right resolution. The Z is not metaphorical — it is drawn on screen as a single hairline SVG path in `#C8A55A`, 0.7 px stroke, animated via `stroke-dashoffset` over 1.8 seconds. The path fires when the section enters the viewport. Grid rationale is derived from **torii gate proportions**: each section observes a 1:1.618 vertical split (golden ratio) with the horizontal content zone occupying only the right 62% of the viewport on desktop, leaving the left 38% as charged ma — black silence with a faint circuit texture at 3% opacity. On mobile, this inverts: content uses the upper 62% of screen height. Layout zones per Z-beat: - **Upper-left anchor**: a single Japanese-style label in vertical text, rotated 90°, set in Jost 100 weight, tracking 0.35em, in `#C8A55A`. This is the only typographic element in the left channel. 8–12 characters maximum. - **Diagonal zone**: the SVG trace path bisects the viewport diagonally from `(5%, 40%)` to `(95%, 60%)` — shallow Z, aristocratic not aggressive. - **Lower-right resolution**: the primary content block, constrained to a 540px maximum width, left-aligned within its zone. No sticky headers. No navigation bars. Navigation is a single `+` glyph in `#C8A55A` positioned at `(4vw, 4vh)`, fixed, which expands on tap/click to reveal four single-word destinations — also vertical-set, fading in sequentially from top. Scrolling is one continuous page; section boundaries are defined by the Z-trace firing, not by visible dividers. ## Typography and Palette **Typography system: futura-geometric meets tategumi (vertical writing)** Primary font: [Jost](https://fonts.google.com/specimen/Jost) — the closest open-source descendant of Futura available on Google Fonts. Geometric, cold, structurally pure. Used at weight 100 (Ultra-Light) for vertical channel labels and large numerals; weight 400 for body; weight 700 for precisely one focal phrase per section. Secondary font: [Noto Serif JP](https://fonts.google.com/specimen/Noto+Serif+JP) — Japanese serif, used exclusively for short kanji/hiragana phrases (3–5 characters) that appear once per section as a visual counterweight to the geometric Latin type. These are set vertically using `writing-mode: vertical-rl`, weight 300, color `#C8A55A` at 60% opacity. They do not translate the Latin content — they comment on it obliquely. **Typographic scale:** - Vertical channel labels: Jost 100, 11px, letter-spacing 0.35em, `#C8A55A` - Section focal phrase: Jost 700, `clamp(3.2rem, 6vw, 7.2rem)`, tracking -0.02em, `#F0E8D0` - Body text: Jost 400, 15px, line-height 1.85, `#8A8A8A`, maximum 540px wide - Japanese accent text: Noto Serif JP 300, 13px, `#C8A55A` at 60% opacity **Palette:** - `#0A0A0A` — Background void. Not pure black; a black with faint blue undertone (approximately 10/10/12 RGB). The board substrate. - `#C8A55A` — Primary gold. Warm mid-gold, not saturated. The live trace color. - `#F0E8D0` — Off-white cream. Headline text. Closer to exposed copper than to white paper. - `#1A1A1E` — Surface elevation. Used for section hover states and the micro-texture overlay plane. - `#2C2C2C` — Secondary surface. Circuit pad highlight, very subtle. - `#8A8A8A` — Body text. Silkscreen grey — the muted legends printed on PCB boards. - `#3D2E0A` — Deep amber shadow. Used in SVG trace glow: `box-shadow: 0 0 18px #3D2E0A`. **No gradients.** The palette is flat, as if silkscreened. The only luminosity comes from the SVG trace glow and the CSS `text-shadow: 0 0 40px rgba(200,165,90,0.15)` on focal phrases. ## Imagery and Motifs **No photography. No illustration. No raster images.** The entire visual vocabulary is built from two motif families: **1. PCB trace geometry (circuit motif).** Each page section's background layer contains a procedurally generated circuit board fragment: horizontal and vertical hairlines in `#1A1A1E` (barely visible against `#0A0A0A`), connected by 90° joints and terminated in circular pads of 4px radius. These are rendered as inline SVG, generated at runtime from a seeded random walk so each section has a unique fragment. Density: approximately 0.4 lines per 100px². Color: `#1A1A1E` at 80% opacity — almost invisible, present as texture rather than decoration. The Z-path SVG sits above this layer, in `#C8A55A`, and appears to be the one live trace in an otherwise unpowered board. **2. Geometric abstract forms.** Each section has one large geometric shape rendered in SVG: - Section 1: a rectangle, stroke only, `#C8A55A` at 15% opacity, `width: 38vw`, positioned in the left ma zone - Section 2: two concentric circles, stroke only, `#C8A55A` at 8% opacity, positioned off-screen-right, bisected by viewport edge - Section 3: a row of nine evenly-spaced 6px circles (circuit pads), horizontal, `#C8A55A` at 30% opacity - Section 4: a single diagonal line at 45°, `#C8A55A` stroke 0.5px, full viewport width - Section 5: nothing — ma. The absence of shape in the final section is the shape. No icon libraries. No decorative patterns. No borders except the active Z-trace. ## Prompts for Implementation **Narrative arc:** The site is a **board powering up in darkness**. The visitor arrives at a completely black screen. A cursor blink — `#C8A55A`, 1px wide, 0.9s blink-rate — appears at `(50%, 50%)` for exactly 600ms. Then the first Z-trace begins drawing. Nothing else exists until the trace completes. This is the entire loading experience. No spinner. No progress bar. No logo reveal. Just a blinking cursor in the dark, then a gold line. **Fade-reveal implementation:** Each content element enters with a `fade-reveal` that is calibrated to feel like a component initializing rather than a web page loading. The sequence per section: 1. SVG Z-trace draws (1.8s, `stroke-dashoffset` from full length to 0, `ease-in-out`) 2. After 200ms delay: vertical Japanese text fades in (`opacity: 0 → 0.6`, 600ms, `ease-out`) 3. After 400ms delay: geometric background shape fades in (`opacity: 0 → 0.08-0.15`, 800ms) 4. After 600ms delay: focal phrase fades in and shifts up 12px (`opacity: 0 → 1`, `transform: translateY(12px) → translateY(0)`, 700ms, `cubic-bezier(0.22, 1, 0.36, 1)`) 5. After 800ms delay: body text fades in word by word — each `` wrapped word has a 30ms stagger, `opacity: 0 → 1`, 400ms No bounce. No overshoot. No spring physics. Every timing curve must feel like an oscilloscope trace approaching steady state. **Section transition:** The Z-trace for the next section begins drawing when the previous section's body text is 80% visible, creating a seamless handoff. The viewer should perceive the page as a single continuous power-up sequence, not as discrete sections loading. **Ma (negative space) enforcement:** The left 38% channel on desktop must remain untouched except for the vertical label and the hairline rectangle in Section 1. Resist all impulse to fill it. If the implementation feels "empty," that is correct. The emptiness is carrying the weight of the design. **Navigation menu:** The `+` glyph rotates to `×` on activation (CSS transform, 300ms, `ease`). The four word-links appear in vertical staggered sequence from the `+` position: each word is vertical-set Jost 100, slides in from `translateX(-8px)` to `translateX(0)`, 60ms stagger. On close, they reverse-stagger out. **Cursor behavior:** Custom CSS cursor: `cursor: none`. A 6px × 6px square (not circle) in `#C8A55A` follows the pointer via JS with a 40ms lerp lag — like a circuit probe. On hover over any interactive element, the square scales to 14px × 14px and fills to `rgba(200,165,90,0.3)`. **No CTAs. No pricing. No stat grids. No testimonials. No hero button. No newsletter modal.** This site has no conversion goal visible to the viewer. It exists as an artifact. ## Uniqueness Notes 1. **Circuit motif at 13% frequency, but always as decoration — here it is the architecture.** Every other site using circuit motifs applies them as background wallpaper or as illustrative elements separate from the content structure. This design makes the circuit trace the primary navigation and pacing mechanism: the Z-path IS the page's spine. The trace draws the structure before content appears. Circuit is not aesthetic here — it is structural logic. 2. **Z-pattern at 2% frequency, implemented as a literal PCB trace instead of a compositional guideline.** The aei.st reference design uses z-pattern as a compositional guide with a visible 1px hairline. This design takes it further: the Z is a functional SVG path that drives the entire reveal sequence, with stroke-dashoffset animation synchronized to content fade-in. The z-pattern is the circuit board's live trace, not a designer's compositional aid. 3. **Japanese tategumi (vertical text) as structural counterpoint to Western horizontal layout.** No other design in the corpus uses `writing-mode: vertical-rl` as a recurring layout element. The vertical labels in the left ma channel are not decorative Japanese characters applied as exoticism — they are load-bearing spatial anchors that define the left boundary of the content zone without using borders or visible dividers. The vertical axis is the silent infrastructure. 4. **Noto Serif JP used as tonal counterweight, not as display headline.** Japanese serif font usage in the corpus is almost always as a display typeface for dramatic headlines. Here it appears at 13px in the ma channel, whispering beside the geometric Jost. The Japanese text is smaller than the body text, functioning as a marginal notation — the way a craftsperson might sign their work in a corner. 5. **Seed:** aesthetic: japanese-minimal, layout: z-pattern, typography: futura-geometric, palette: gold-black-luxury, patterns: fade-reveal, imagery: geometric-abstract, motifs: circuit, tone: mysterious-moody. Avoided patterns from frequency analysis: parallax (77%), stagger (54%), spring (33%) — this design uses none of these high-frequency animation patterns, relying instead on the underused fade-reveal (6%) as the sole animation vocabulary, making the site distinctly quiet against the corpus.