# Design Language for muhan.ai ## Aesthetics and Tone muhan.ai is named for the Korean word **무한 (muhan) — "the infinite"** — and the entire site is built as a single living proof of that word: a screen that never stops drawing itself. The aesthetic is **generative-art-as-background made foreground**: instead of decorating a marketing page with a particle canvas, the *whole* page is one continuous generative composition that the visitor walks through, and the "content" is just quiet captions that surface where the algorithm has settled. The mood is **cool, contemplative, faintly mathematical** — the feeling of standing in a planetarium that is rendering itself in real time, or watching an old plotter pen complete a Lissajous curve it will never actually finish. There is no hype, no exclamation, no "revolutionary." The tone is that of a patient instrument: it states the rule, then lets the rule run forever. Inspiration points: Vera Molnár's plotter drawings, Casey Reas's *Process* compositions, the recursive ink-bleeds of Korean *수묵* (sumuk) ink-wash, the asymptote you draw on graph paper and never reach, and the soft hum of a long-exposure photograph of star trails. Everything breathes on a slow ~12–20 second loop; nothing snaps. This is **dark-mode and generative**, two underused-to-mid categories, deliberately kept *minimal* in chrome — the richness lives entirely in the moving substrate, never in UI ornament. ## Layout Motifs and Structure The site rejects the card-grid / full-bleed-hero / centered-stack convention entirely. Structure is an **immersive vertical scroll through five "fields,"** each field being one full viewport tall and each one a *different generative system* sharing the same palette and the same persistent canvas layer: - **Field 0 — THE SEED.** Black viewport. A single off-white point appears dead center; from it, a recursive branching curve (a randomized space-filling L-system) grows outward to fill the screen over ~9 seconds, then the word **무한** fades up inside the negative space it left. This is the only "hero." - **Field 1 — THE RULE.** The branching freezes into a faint static lattice; on top, a short stanza of body text drifts in line by line, left-aligned to a thin vertical guide-rule at the 13% margin. Text describes what muhan.ai *is*, in three sentences. - **Field 2 — THE FIELD OF MANY.** Hundreds of tiny independent agents (flow-field particles) trace warm-grey trails; as you scroll, a low-contrast caption block sits in the lower-left "calm zone" where the flow-field is configured to leave a quiet eddy. - **Field 3 — THE RETURN.** The flow-field slowly reverses and collapses back toward a single attractor point — a literal visual *recursion* — while a second short stanza surfaces, right-aligned this time, mirroring Field 1. - **Field 4 — THE UNBOUNDED.** The attractor "overflows": the canvas zooms outward forever (a Droste-style infinite zoom built from one tiling motif) and the final line of text — a single sentence — floats at center, never fully arriving, gently parallaxing slower than everything else. Navigation is **five hairline tick-marks** on the right edge (one per field), each a 1px line that lengthens to 24px on hover and shows a monospace ordinal `0—1—2—3—4`. No top bar, no logo lockup, no hamburger, no footer beyond a single 11px monospace line `무한 · muhan.ai · the rule is still running`. Asymmetry is enforced: text never centers except in Field 0 and Field 4; in the middle three fields it clings to whichever margin the generative system has left empty, so layout is *negotiated with the algorithm* rather than imposed on it. ## Typography and Palette **Type system — Google Fonts only:** - **Display / the word 무한:** `Big Shoulders Stencil Display` is **not** used (it lacks Hangul); instead the Korean word 무한 is set in `Gowun Batang` at very large size (clamp 4rem–9rem), a refined Korean serif with calligraphic *수묵*-brush terminals — it reads like ink, not type. Latin display ("muhan.ai", field titles) uses `Fraunces` at optical size 144, italic, light weight — a soft serif-revival face with wispy serifs that echo the branching curves. - **Body / stanzas:** `Newsreader` (variable, weights 300–500, with its true italic) — a calm, readable editorial serif for the three short text passages; tracking `0.01em`, line-height `1.7`, max 52ch. - **Monospace / ordinals, ticks, captions, footer:** `Spline Sans Mono` — used at small sizes (10–13px) for the field ordinals, the right-edge nav labels, the caption blocks in Fields 2–3, and the footer line. This is the only "tech" voice and it is kept tiny and quiet. Three-plus colors (a near-monochrome dark field with two restrained accents): - **#06070A** — `void` — the base canvas black, very slightly blue-cool, never pure #000. - **#0E1117** — `deep` — secondary panel/gradient stop, for the faint vignetting at field edges. - **#E8E4D8** — `chalk` — the warm off-white of all primary text and the brightest generative strokes (paper-warm, never clinical white). - **#8A8F9C** — `ash` — mid-grey for body text, lattice lines, dormant tick-marks, secondary trails. - **#6FE3C9** — `phos` — a single phosphor-mint accent, used *only* for the live "leading edge" of any currently-drawing curve and the active nav tick — never for backgrounds, never for large fills. It is the color of the algorithm thinking. - **#C9A85F** — `brass` — a muted antique-brass second accent, used once per field at most: the guide-rule in Field 1, the attractor point in Field 3, the center sentence's underline-draw in Field 4. The color of the instrument's frame. Gradients exist only as **radial vignettes** (`void` → `deep` at 140% from center) — no warm sunset gradients, no mesh gradients. ## Imagery and Motifs There is **no photography, no stock illustration, no 3D render** — every visual is drawn live by code: 1. **The recursive branch (L-system):** a randomized branching curve that re-seeds on every visit; stroke weight tapers from 1.6px at the root to 0.3px at the tips; tips terminate in a `phos` 2px dot that fades to `ash`. This is the site's signature mark and also its favicon (a tiny 5-iteration version). 2. **The flow-field:** ~400–800 agents on a Perlin-noise vector field, drawing semi-transparent `chalk`/`ash` trails at 4% alpha so the screen accumulates into a soft topographic wash, like wind over sand. 3. **The Droste tile:** one hand-defined SVG motif — a square containing a smaller rotated square containing the 무한 ligature — tiled and infinitely zoomed in Field 4 via CSS `transform: scale()` on nested layers. 4. **Sumuk bleed:** at the bottom 80px of Fields 1 and 3, the generative strokes are given a slight Gaussian blur and increased alpha, so they pool like ink soaking into wet 한지 (hanji) paper. 5. **The asymptote line:** a single `brass` horizontal hairline that appears in Field 4, with the center sentence approaching it from above and the gap between them halving with scroll but never closing — drawn with an SVG `path-draw-svg` stroke-dashoffset animation that eases out asymptotically. 6. **Ordinal glyphs:** field numbers rendered as `0` `1` `2` `3` `4` in `Spline Sans Mono`, but each is overdrawn with one faint generative scribble pass so even the numerals look hand-plotted. Decorative pattern throughout: **fine plotted hatching** — wherever the design needs "texture," it is achieved by drawing many near-parallel `ash` lines at 1px / 6% alpha, mimicking a pen plotter filling a region. ## Prompts for Implementation Build muhan.ai as **one HTML file, one CSS file, one ES module**, plus a single fixed-position `` layer behind the text (`position: fixed; inset: 0; z-index: 0;`), with all text fields in normal flow at `z-index: 1`. No framework, no build step. Use the Canvas 2D API (no WebGL needed) and `requestAnimationFrame` with a global slow clock so every system shares one heartbeat. **Narrative / scroll choreography:** - The canvas is **always running**; an `IntersectionObserver` on the five `
` fields tells the canvas which generative system to crossfade to (systems blend over ~1.5s by lerping a `mode` parameter, never hard-cutting). - Field 0: on load, animate the L-system growth over ~9s with a slight `stagger` between branches; the word 무한 (`Gowun Batang`) does a `blur-focus` reveal (from `filter: blur(18px) opacity(0)` to sharp) timed to finish as the branches reach the edges. - Field 1 & 3: stanzas enter as `fade-reveal` line-by-line with a 120ms `stagger`, sliding 16px along their guide-rule; the guide-rule itself does a vertical `path-draw-svg`. - Field 2: caption block uses a gentle `parallax` (moves at 0.85× scroll speed); flow-field agents respond subtly to cursor with a soft `cursor-follow` deflection (radius ~120px, very low force — it should feel like the visitor is a faint breeze, not a magnet). - Field 4: the infinite-zoom uses nested scaling layers; the final sentence parallaxes at 0.6× and its `brass` underline does an asymptotic `underline-draw` (dashoffset eased with a custom `cubic-bezier` that flattens hard at the end). The footer monospace line types in once via a slow `typewriter-effect` and then stops. - Respect `prefers-reduced-motion`: freeze the canvas to one beautiful still frame per field, keep all text, drop all transitions to instant. **Content tone for copy:** three short stanzas + one closing sentence, all understated, present-tense, faintly philosophical about iteration and the unbounded — e.g. fragments like "a rule, then the rule again," "it does not arrive; it continues," "every visit reseeds the world." Korean 무한 appears as the recurring motif word; everything else is sparse English. **AVOID:** no CTA buttons, no "Get Started" / "Sign Up," no pricing tiers, no stat-grid ("10M+ users"), no feature cards, no testimonial carousel, no logo wall, no email capture, no FAQ accordion, no cookie banner, no chatbot bubble, no hero with two buttons. The page sells nothing; it *demonstrates* a word. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **The generative layer IS the layout, not the wallpaper.** Most generative/particle designs in the corpus drop a canvas behind a normal marketing page; here the text is the parasite and the algorithm is the host — text positions itself into the *emptiness the algorithm leaves*, so no two scrolls look identical and the L-system literally reseeds per visit. 2. **Hangul calligraphic serif (Gowun Batang) as the only display anchor**, treated as ink rather than type, paired with optical-size-144 italic Fraunces — a Korean-serif + soft-serif-revival pairing that does not recur in the warm/humanist/mono-dominated typography conventions of the corpus. 3. **Near-monochrome cool-dark palette with exactly two micro-accents** (`phos` mint = "the algorithm thinking," `brass` = "the instrument's frame"), each rationed to one use per field — a deliberate refusal of the 96%-gradient, 98%-warm palette norm and the 89% card-grid / 85% centered layout norm. 4. **An honest asymptote as the climax** — the final sentence approaches a brass hairline and provably never reaches it (halving gap, asymptotic easing), making the site's last gesture a *visual definition of 무한* rather than a sign-off CTA. 5. **One shared slow heartbeat (~12–20s loops, 0.85×/0.6× parallax)** across five different generative systems, so the whole site feels like one instrument rather than a sequence of effects — counter to the spring/magnetic/cursor-follow snappiness (85–92%) that dominates the patterns category. Documented chosen seed/style: **generative art background** (from seeds.json) — extended toward `aesthetic: generative + dark-mode`, `layout: immersive-scroll + asymmetric`, `typography: serif-revival + tech-mono`, `palette: monochrome + midnight-blue`, `patterns: path-draw-svg + parallax + blur-focus`, `imagery: generative-art + grain-overlay`, `motifs: flowing-curves + abstract-tech`, `tone: zen-contemplative`. Referenced avoided patterns from frequency analysis: deliberately avoids the saturated **hand-drawn (96%)**, **glassmorphism (77%)**, **photography (98%)**, **warm palette (98%)**, **gradient (96%)**, **card-grid (89%)**, **full-bleed (89%)**, **centered (85%)**, **cursor-follow (89%)**/**magnetic (80%)**/**spring (85%)** snappiness, and **mono-as-primary-typeface (94%)** — instead leaning on the underused **generative (14%)**, **dark-mode (13%)**, **immersive-scroll (10%)**, **layered-depth (9%)**, **generative-art imagery (8%)**, **zen-contemplative tone (9%)**, and **path-draw-svg (37%)** as the lone "common" pattern, used here for an asymptote rather than a logo flourish.