# Design Language for muhan.studio ## Aesthetics and Tone muhan.studio is the public-facing notebook of a one-person **generative-systems studio** — a place that designs *rules*, not pictures, and lets the rules run until they exhaust themselves. The Korean word **무한 (muhan)** means "without limit," and the whole site is built as a meditation on that idea: a single page that behaves like a process which never quite finishes resolving, but never feels chaotic either. The tone is **cool, exacting, slightly austere — a mathematician's calm, not an artist's flourish**. Think the felt-tip precision of Sol LeWitt's wall-drawing instructions, the patient accretion of Vera Molnár's plotter studies, the bone-white restraint of a Muriel Cooper MIT Media Lab spread, and the quiet hum of an oscilloscope left running overnight in an empty lab. There is **no warmth-by-default here** — the corpus is drowning in honeyed neutrals and sunset gradients, so muhan.studio commits to a near-monochrome graphite-on-bone world where the *only* color is a single cold signal-cyan that appears exactly when a system reaches a fixed point. The mood is **contemplative but never sleepy**: every surface is alive with slow deterministic motion (a counter ticking, a line redrawing, a lattice breathing), the way a screensaver from a serious era was alive — purposeful, mathematical, hypnotic. The visitor should feel they have walked into a studio mid-computation and been invited to watch the iteration converge. Crucially: this is **not cyberpunk, not glitch, not data-viz dashboard, not terminal-hacker cosplay**. It is generative *art-practice* — the aesthetic of someone who writes 40 lines of code and then waits three hours for the pen-plotter to finish. Restrained. Analog-adjacent. Obsessed with the seam between order and infinity. ## Layout Motifs and Structure The site is a **single uninterrupted vertical scroll of nine "iterations"** — `ITERATION 00` through `ITERATION 08` — each one a full-viewport plate that demonstrates a different generative principle. The governing metaphor is the **margin of a graph-paper notebook**: a permanent **18mm left margin column** runs the entire height of the document, ruled with a faint hairline and filled, top to bottom, with a continuously incrementing **step counter in monospace** (`0001 0002 0003 …`) — it never resets, never stops, and scrolling faster makes it tick faster. That counter *is* the navigation: hovering it reveals nine notch-marks aligned to each iteration's scroll position. No top nav. No hamburger. No logo lockup floating in a corner. No footer with link columns. The studio name `muhan.studio` sits **once**, set vertically (rotated −90°) in the left margin at the very top, and is never repeated. Each iteration plate uses a **strict 12-column modular grid with a 1.5rem baseline** — and the *content* of each plate visibly respects, then deliberately violates, that grid as the generative system gets more recursive (Iteration 00 is perfectly gridded; Iteration 08's elements have drifted off-axis by fractional amounts). This is **immersive-scroll, not parallax** — layers don't slide at different speeds; instead each plate *self-assembles* from its constituent rules as it enters the viewport, like watching a proof being written line by line. Spatial logic per plate: a **wide left text-block (columns 1–4)** holding the iteration's "instruction" written in plain imperative language (a LeWitt-style sentence), and a **large right canvas-field (columns 5–12)** where that instruction is executed live in SVG/Canvas. Generous ma — at least 22vh of pure bone-white above each instruction sentence. Between plates, a single full-width **hairline rule** with the iteration number centered on it, breaking the rule like a chapter mark in a German textbook. ## Typography and Palette **Type system (Google Fonts only):** - **Display & instruction face:** `Fraunces` (variable, optical-size axis, weights 300–600, soft serif with a slightly old-style "wonky" italic). Used at large sizes (clamp 2.5rem–6rem) for iteration titles and the LeWitt-style instruction sentences. Fraunces' high optical contrast and gentle quirk gives the cold geometry a *handwritten-notebook* counterweight — like a theorem stated in a fountain pen. Instruction sentences run in its italic, tracking `0.005em`, line-height `1.18`. - **Structural / data face:** `Space Mono` for the step counter, iteration numbers, axis labels, coordinate readouts, and every numeral on the page. Tabular by nature; set tight at `-0.01em`, uppercase micro-labels at `0.14em`. - **Body & caption face:** `Inter` (variable, 400/500, `-0.011em`) for the rare paragraph of explanatory text beneath an instruction — kept small (0.875rem), set in measured 58-character columns, color graphite-70%. **Palette — graphite on bone, one cold signal:** - `#F4F2EC` — **Bone** — the paper. Slightly green-grey warmth removed; this is closer to old drafting vellum than cream. - `#EAE7DD` — **Bone Shade** — for the left margin column fill and recessed plates. - `#1B1C1A` — **Graphite Ink** — near-black with a faint olive cast; all primary text, all hairlines at full strength. - `#6E6F6A` — **Graphite 70** — secondary text, axis labels, the resting state of generative lines. - `#B7B8B2` — **Graphite 30** — hairline grids, ruled margins, dormant lattice nodes. - `#13B5C9` — **Signal Cyan** — the *only* chromatic color. Appears exclusively when a generative system reaches a fixed point / closes a loop / completes a tiling. Used as a 1.5px stroke or a single filled dot — never as a fill field, never in a gradient. - `#0E2D31` — **Deep Teal Ink** — used at ≤8% opacity for the faint "afterimage" trails generative lines leave behind, so motion paths read as ghosted history. No gradients anywhere. No drop-shadows except a single 1px hairline offset that reads as "this plate is a sheet of paper lifted 1px off the next." ## Imagery and Motifs **The studio has no photographs, no stock illustration, no icons-as-decoration.** Every visual is a *running generative system*, drawn live: - **ITERATION 00 — The Seed.** A single graphite dot at exact center. The instruction reads: *"Place one point. Everything else follows."* The counter ticks. Nothing moves yet. (Establishes the void.) - **ITERATION 01 — Recursive Subdivision.** A bone rectangle splits into two, then each of those into two, governed by a golden-ratio cut that alternates orientation — 8 levels deep, drawn as 1px graphite hairlines, the final cells barely 3px wide. When the last subdivision lands, a single Signal-Cyan dot blinks in the smallest cell. - **ITERATION 02 — The Lissajous Pendulum.** A slow Lissajous curve traced by a moving graphite point, leaving a Deep-Teal afterimage trail. Frequency ratio drifts almost imperceptibly (3:2 → 3.001:2), so the figure never *quite* repeats — the literal picture of muhan. Axis ticks in Space Mono around the frame. - **ITERATION 03 — Voronoi Drift.** ~24 seed points doing Brownian wander inside the canvas; their Voronoi cells redraw every frame as graphite hairlines. Cells that briefly become regular hexagons flash Signal-Cyan on their edges, then lose it. - **ITERATION 04 — L-System Branch.** A deterministic L-system (`F → F[+F]F[−F]F`) drawn stroke by stroke, tracking the visitor's scroll: scrolling *is* the iteration depth. At full depth the tree is a dense graphite thicket; the last-drawn terminal twig is cyan. - **ITERATION 05 — Penrose Region.** A non-periodic Penrose-style rhombus tiling assembling outward from a five-fold center, kites and darts in bone with graphite outlines. The instruction: *"Tile the plane. You will never see the pattern repeat. Neither will I."* - **ITERATION 06 — Cellular Automaton.** Rule 110 (the Turing-complete elementary CA) rendered as a falling lattice of 4px graphite squares, one new row per scroll-tick — the famous proof that simple rules contain everything. - **ITERATION 07 — Phyllotaxis Spiral.** 1,597 dots placed by the golden-angle (137.507°), the spiral arms emerging only in the eye, not the rule. Dot radius shrinks toward center. The 1,597th dot (a Fibonacci number) lands cyan. - **ITERATION 08 — Strange Attractor.** A Clifford or de Jong attractor traced by a single point for tens of thousands of steps, building a ghost-grey cloud with sharp graphite filaments. It never closes, never escapes. The instruction, last words of the page: *"무한 — it keeps going. Thank you for watching this far."* The step counter in the margin keeps ticking even after the content ends, on a final empty bone screen. Recurring micro-motifs: **registration crosses** (+) in plate corners like a printer's proof sheet; **coordinate readouts** that update as systems run; **the hairline graph grid** faintly underlying every canvas at 24px pitch. ## Prompts for Implementation Build muhan.studio as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. The entire experience is a ~2-minute scroll through nine self-running generative plates. There is **no CTA, no pricing table, no stats grid, no testimonials, no contact form, no email capture, no FAQ, no logo wall, no newsletter signup, no cookie banner, no chatbot**. The studio sells nothing on this page; it *demonstrates a sensibility*. **Storytelling structure (the scroll IS the iteration):** 1. **Margin counter is global state.** A single `requestAnimationFrame` loop owns one integer `step`. Its tick rate is base 4/sec, multiplied by recent scroll velocity (clamped 1×–9×). It renders into the fixed left-margin `
` as a vertical run of zero-padded monospace numbers — old numbers scrolling up and fading to Graphite-30 as new ones appear at the bottom. It never resets. On `:hover` of the margin, fade in nine 1px notch-marks at the document-scroll positions of each iteration, with the iteration label in Space Mono appearing 14px to the right. 2. **Each iteration is an `IntersectionObserver` target.** When a plate crosses 35% into the viewport, its generative system *starts from step zero* — the visitor watches it self-assemble (subdivision recursing, L-system branching, CA rows falling). Use Canvas 2D for the particle/attractor-heavy ones (02, 03, 07, 08), inline SVG with animated `` `stroke-dashoffset` for the line-drawing ones (01, 04, 05). All animation is **deterministic** — seed every PRNG with a fixed constant so the studio looks identical on every visit (the systems are *infinite*, not *random*). 3. **The fixed-point flash is the page's only reward.** Whenever a system hits its defining closure (last subdivision, Fibonacci-th dot, a momentarily-regular Voronoi cell, an L-system terminal twig), draw a single `#13B5C9` element for ~600ms with a soft `ease-out` opacity fade. This is the *entire* color budget of the site — make it count. No cyan anywhere else. 4. **Instruction sentences are typeset like LeWitt wall-drawing certificates.** Large Fraunces italic, left-aligned in columns 1–4, with the iteration number above in tiny Space Mono caps. The sentence should read as a *command to a draftsman*: "Place one point. Everything else follows." / "Tile the plane. You will never see the pattern repeat." Animate them in with a slow per-line clip-reveal (clip-path inset, 700ms, 90ms stagger) — like a hand writing each line — *not* a typewriter character effect. 5. **Grid honesty → grid drift.** Pass a CSS custom property `--drift` down each plate, increasing 0 → 1 across iterations 00 → 08. Multiply small `translate` offsets and `rotate` micro-angles (max 0.4°, max 3px) by `--drift` so the early plates are crystalline and the late plates have the faint wobble of a system that has computed itself slightly off true. The visitor feels the order loosening without being able to name why. 6. **Motion language:** everything is **slow, linear-ish, continuous** — no springs, no bounce, no elastic overshoot, no magnetic cursor-chasing, no parallax-by-scroll-multiplier. The cursor is irrelevant; this site ignores the mouse entirely except for the margin-hover notches. Respect `prefers-reduced-motion` by rendering each generative system in its *final converged state* immediately, statically — they're beautiful as stills too. 7. **Final screen:** after Iteration 08, scroll into one last full-viewport plate of pure `#F4F2EC` Bone with *nothing* on it except the still-ticking margin counter and, centered, one Graphite dot — mirroring Iteration 00. The page is a loop that refuses to close. No "back to top." No footer. Just the counter, going. Performance/accessibility concerns are explicitly out of scope; prioritize the contemplative, hypnotic, mathematically-precise feel above all. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Color as a single rationed event, not a palette.** The corpus is 98% warm and 96% gradient. muhan.studio is a near-monochrome graphite-on-bone world whose *only* hue — `#13B5C9` Signal Cyan — appears for ~600ms at a time, exclusively at mathematical fixed points. No site here treats color as a reward you have to wait for. 2. **The scroll position literally drives the computation.** Other "immersive-scroll" sites move layers at different speeds (parallax). Here, scrolling *is* the iteration variable of L-systems and cellular automata — you don't watch a finished animation, you *advance the proof* by scrolling. Scroll fast and Rule 110 falls faster; the margin counter spins up. Interaction model nobody else in the corpus uses. 3. **Generative *art-practice*, not generative-decoration or data-viz.** Most generative/glitch sites here use code-art as a background texture or a dashboard. This is the Sol-LeWitt / Vera-Molnár lineage made explicit — every plate is a *stated instruction* executed live, in the deadpan voice of a wall-drawing certificate. The aesthetic is plotter-studio austerity, not cyberpunk noise. 4. **Refuses every conversion convention.** No CTA, pricing, stats, testimonials, forms, logo wall, footer, or chatbot. The "navigation" is an infinitely-incrementing monospace counter in a notebook margin. The page is a closed loop with no exit affordance — it ends where it began, still ticking. 5. **Deliberate grid-decay as narrative.** A `--drift` value grows across the nine plates so the layout goes from crystalline to faintly, fractionally wobbly — the structure visibly *being computed slightly off true* as the systems get more recursive. The instability is authored, monotonic, and tied to the theme of unbounded iteration. **Chosen seed / style:** *generative art background* — interpreted as a generative-systems studio's notebook (aesthetic: generative; layout: immersive-scroll; typography: tech-mono + serif-revival; palette: monochrome with a single high-contrast signal; imagery: generative-art / line-illustration; motifs: grid-lines; tone: zen-contemplative crossed with scholarly-intellectual). **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (77%), warm palette (98%), gradient palette (96%), photography imagery (98%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), card-grid (89%), centered hero-dominant CTA layouts, stat-grids, pricing blocks — none of these appear. Underused patterns leaned into: generative aesthetic (14%), immersive-scroll (10%), monochrome palette (14%), zen-contemplative tone (9%), path-draw-svg, single-column / ma-negative-space.