# Design Language for gunsul.studio ## Aesthetics and Tone gunsul.studio is staged as **the private night-library of a fictional 19th-century Korean polymath who, by candlelight, hand-soldered the first electrical circuits onto the margins of his Confucian commentaries** — a place where lacquered cherry-wood study desks meet whisper-thin etched copper traces, where the smell of old paper coexists with the clean metallic tang of solder rosin, and where every shelf, every annotation, every diagram is in equal parts **scholarly artifact** and **printed circuit board**. The aesthetic core is **dark-academia** — but not the Oxford-cliché dark-academia of tweed and ivy and Latin epigrams. This is *electrified dark-academia*: the same burgundy hush, the same dust-mote light, the same ink-stained reverence for old books, but the books themselves are mid-restoration and the conservator's tools are oscilloscopes and tweezer-tipped microprobes. Every page in gunsul's archive has been gently lifted and traced over in a fine pale-cream filigree of conductive paint that — when you scroll past — discovers itself to be functional, glowing softly along its routed paths the way a low-current trace warms a vintage tube radio. The tone is **pastoral-romantic**, but the pasture is *interior*: not meadows, not creeks, not cottage gardens, but the slow inner pasture of a single scholar's reading lamp at 2 a.m., the cream of the lampshade, the burgundy of the desk leather, and the absolute outside-darkness pressing against the window like a sleeping animal. There is rain on that window. There has always been rain on that window. The visitor is a guest, not a customer; nothing is being sold; an old friend is showing them a manuscript they have been working on for thirty years, and the manuscript happens to be alive. Mood references — none of them adopted whole, all of them filtered through this specific synthesis: - The brass-and-mahogany interiors of late-Joseon scholar-rooms (*sarangbang*) lit by oil lamps with cream paper shades. - The Glenn Gould 1981 Goldbergs played at 36% volume through a single rear speaker. - The hand-drawn schematics in Forrest Mims' *Engineer's Mini-Notebooks*, redrawn in burgundy ink on cream stock. - The copper-trace beauty of an unpopulated PCB photographed under a single warm key-light. - The pollen-soft yellow of an early-morning gradient mesh seen through condensation on antique glass. Nothing on this site is loud. Nothing strobes. Nothing demands. The cursor is a guest at someone's desk; the page breathes at the rate of a sleeping reader. ## Layout Motifs and Structure The page is built as **seven full-viewport parallax-sections stacked vertically**, each one a *different room* of the polymath's mind, and each one parallaxing on **three explicit depth-planes**: - **Plane −1 (deep / 0.35× scroll):** the gradient-mesh atmosphere of the room (cream-to-burgundy mist, ember glow, pre-dawn through paper window). - **Plane 0 (subject / 1.0× scroll):** the open manuscript or schematic at the room's center — the artifact you have come to read. - **Plane +1 (foreground / 1.45× scroll):** the *circuit overlay* — pale-cream conductive traces routed across the foreground glass, occasional pulse-blips of warm signal flowing along the trace from one section into the next, drifting across the viewport edges like reflections in a windowpane. The seven rooms, in scroll order: 1. **The Threshold** — the title plate. A single burgundy serif word (gunsul) tooled into a cream PCB silkscreen, with one trace exiting the period and routing off-screen down-right toward room 02. 2. **The Reading Desk** — a candle-lit study with one open codex; the codex's marginalia is *circuit*, slowly being drawn (path-draw-svg) as the reader scrolls. 3. **The Cabinet of Components** — five small drawer-cards each holding one electrical primitive (resistor / capacitor / coil / diode / vacuum tube), each drawn as a botanical-illustration-style pen-and-ink specimen plate, with the schematic symbol shown beneath in burgundy. 4. **The Schematic Folio** — a single full-bleed double-page hand-drawn schematic of a dream-amplifier (functional but fictional), lottie-driven so a single signal pulse traces the entire ladder over 6.4 seconds when the section locks in. 5. **The Letters** — three letters from the polymath to himself, each pinned to a corkboard with a single brass tack, each annotated in red conservator's pencil with the *circuit equivalent* of the emotional content. 6. **The Listening Room** — a small dark room with one warm lamp and one phonograph, the gradient-mesh now nearly black at edges and bleeding to a single ember in the center; a 28-second lottie of a stylus dropping onto a record, looping silently. 7. **The Closed Book** — the codex from room 02 reappears, now closed; the bookmark ribbon trails off the page and across the entire viewport, becoming a single circuit trace that loops back up to room 01 if the visitor scrolls upward. Each section locks to viewport on scroll-snap (**`scroll-snap-type: y mandatory`**), with a deliberate **180ms ease-out unlock** so the room "settles" before parallax begins moving inside it. Inside-room parallax happens *after* the snap — the reader arrives, breathes, then the room reveals its layers. There is **no horizontal scroll, no carousel, no modal, no tab, no accordion, no hamburger menu**. The page is a corridor of rooms; the visitor walks them in order or not at all. A whisper-thin **left-edge progress-thread** runs the full document — a single 1.5px cream conductive trace with seven small solder-pad nodes corresponding to the seven rooms. The active room's pad glows ember (6px halo, 1.2s pulse). This is the *only* navigation chrome. There is **no top nav, no logo lockup, no contact CTA, no pricing, no testimonials, no stat-grid, no FAQ accordion, no email capture, no chatbot, no cookie banner, no footer link list**. The page ends. The lamp goes out. ## Typography and Palette **Type system — Google Fonts only, three faces, each load-bearing:** - **Cormorant Garamond** (variable, weights 300–700, with italic) — the *display-bold* face is here interpreted as **bold-weight Cormorant**, not a thick grotesque. Cormorant at 700 is a tall, narrow, deeply-cut display serif with extreme contrast and a slight late-19th-century scholarly ferocity; this is the room-title face, set at `clamp(64px, 11vw, 196px)`, used once per section as the room's name (THE READING DESK / THE CABINET / etc.). All-caps, letter-spacing `0.02em`, tracking-loose enough to feel inscribed rather than typed. - **EB Garamond** (regular + italic, 400 / 500) — body face. Old-style serif with the genuine printed-warmth of a 17th-century type cut. Used for all running prose, marginalia, and letters. Body is set at 18px / 1.7 line-height on burgundy-on-cream; italic is used for the polymath's own voice, and `font-variant-numeric: oldstyle-nums` is mandatory (numbers must drop below baseline like in a real hand-set book). - **JetBrains Mono** (regular, 400) — used *only* for the circuit-overlay annotations: pin-numbers, voltages, tiny `R₁ = 4.7kΩ` labels, and the dot-rail's section codes (`§01 / §02 / …`). Set at 11px, color cream-on-burgundy, never above body weight. This is the *technician's hand* layered atop the *scholar's hand* — and the contrast between Garamond serif and JetBrains mono is the typographic argument of the whole site: that the bookbinder and the engineer are the same person. **Palette — burgundy-cream, eight calibrated tones:** - `#3A0E14` — *Ink-burgundy.* Body text, deep field, the lacquer color of the desk. Functions as black on this site. - `#5E1A22` — *Library-burgundy.* Mid-burgundy used for headings on cream, and for the desk-leather plane. - `#8B2D36` — *Ember-burgundy.* The pulse color of live circuit traces and the active dot-rail node. - `#A84A52` — *Dawn-burgundy.* Used only in gradient-mesh atmospheres; never for text. - `#F6EBD2` — *Lamp-cream.* Primary background. The exact warmth of an oil-lamp shade at 2700K. - `#E8D9B4` — *Vellum-cream.* Cards, drawer-faces, codex pages. Slightly more yellow than the field. - `#D9C496` — *Aged-cream.* Edges, fold-shadows, paper darkening near the binding. - `#FBF6E6` — *Highlight-cream.* The inner glow of the lamp halo, the brightest pixel on the page. The palette **never goes pure black or pure white**. The darkest pixel on the page is `#3A0E14`; the brightest is `#FBF6E6`. There is no hue outside the burgundy-cream axis except for two carefully-rationed conductor accents: - `#C9A86B` — *Brass.* Used only for tack-heads, lampshade rim, and the four solder-pads of the dot-rail when at-rest. - `#3E5D4A` — *Patina-green.* Used only for the corner-stamps of the conservator (tiny 8px square monogram in three rooms) and one verdigris-stained letter in room 05. **Texture overlay:** every plane carries a 1.5%-opacity fine paper-grain (40px tile, multiply-blend) and a 0.4%-opacity vignette ring around viewport edges. No noise above 2% — this is not a grainy-textured aesthetic, it is a *quiet* aesthetic that admits texture only the way old paper admits dust. ## Imagery and Motifs The visual world is constructed from four registers, layered in deliberate proportion: **1. Gradient mesh (the atmospheric base layer of every room).** Each room has a hand-tuned 4-stop or 5-stop CSS-radial gradient mesh (or, in modern browsers, `conic-gradient` + `mask-image`) that establishes its emotional temperature. The Reading Desk is a center-warm cream mesh fading to ember at 9-o'clock (the candle direction). The Cabinet is an even-lit vellum mesh with no directional warmth (it is the morning room). The Listening Room is a near-black field with a single 18%-radius cream ember at 47% / 62% screen position (the lamp). These meshes parallax at 0.35× — they breathe behind the artifacts. They are *never* used decoratively in the foreground; gradient-mesh on this site is always the *air of the room*, not the *subject of the page*. **2. Circuit motif (the structural connective tissue).** The signature visual gesture of gunsul.studio is the **conductive trace** — a 1.2px cream line with rounded-rectangle pads at junctions, drawn as a single SVG `` per room and revealed via `path-draw-svg` (stroke-dashoffset animation) as the reader scrolls. Critically, the traces do not stay still: a single ember-burgundy *signal blip* (a 6px-radius radial gradient at full opacity) travels along the trace at a measured 180px/second, repeating every 11 seconds in the active room. Between rooms, traces *route off the bottom of room N and emerge from the top of room N+1*, so the visitor's scroll is mirrored by the visible flow of charge through the entire document. The seven rooms are wired in series; the document is one circuit. Trace topology rules: - All traces are orthogonal-with-45deg-corners, drafter-style — never freehand-curved. - Pads are 4px radius, brass-colored at rest, ember when the signal blip passes. - Traces never cross without a visible *jumper* (a small arc indicating a topological hop). - Vias (layer-changes) are drawn as 3px circles with a 1px cream inner core. **3. Botanical-style pen-and-ink specimen plates (the cabinet rooms only).** In room 03 (The Cabinet of Components), each electrical primitive is rendered as if it were a Victorian botanical plate — fine line-work, 0.3px hatching, a Latin-style *binomial* beneath each (e.g., *Resistorus carbonum / 4.7kΩ*), and a small herbarium-style inventory tag in the lower-right with a hand-numbered specimen ID. The components are drawn at 1:1 actual size on cream vellum cards, and they cast a 3px-soft drop-shadow as if pinned. This is the only room with multiple specimens; the rest of the site is single-artifact-per-room. **4. Lottie animations (the heartbeat of the page).** Lottie is the underused (2%) pattern, promoted here to *signature animation system*. Five purpose-built Lotties: - *The Candle Flicker* (Room 02) — a 6.2s loop of a single candle flame, 12fps, pen-style hand-drawn, 240×320px, tinted lamp-cream over ember. Plays continuously while room 02 is in view. - *The Schematic Trace* (Room 04) — a 6.4s one-shot of a single signal-pulse routing through the dream-amplifier ladder, drawn as a thickening-then-thinning cream stroke. Plays *once* on enter; replays on re-enter. - *The Letter Unfolds* (Room 05) — a 2.8s one-shot of a folded letter opening to reveal its annotation. Plays staggered for each of the three letters (0ms / 320ms / 640ms). - *The Stylus Drop* (Room 06) — a 28s silent loop: stylus arm lowers, contacts groove, rotates, lifts, returns — the entire phonograph cycle. Plays only when room 06 is the locked viewport. - *The Lamp Extinguish* (Room 07, end of page) — a 4.0s one-shot. The lamp halo retracts to a single point and the page fades by 40% lamp-cream toward ink-burgundy. Plays exactly once, when the closing room reaches `intersectionRatio = 0.95`. After it plays, the page does not re-light. **5. Manuscript artifacts (single hero per room, hand-drawn or hand-set).** The codex pages, the marginalia, the schematic folio, the three letters, the corkboard, the phonograph — all rendered as SVG with hand-tuned `` data, no photography, no stock illustration, no AI-generated art, no 3D render. Pen-weight is 0.6–1.1px depending on artifact. Ink color is always ink-burgundy on a vellum-cream substrate. Items that would in reality be other colors (the brass tack, the verdigris stamp) appear in the rationed accent colors only. The **negative space** between artifacts is treated as a fifth motif: cream silence is load-bearing. Every room has at least 38% empty cream/dark field around its central artifact. The page is allowed to be quiet. ## Prompts for Implementation Build gunsul.studio as **one HTML file, one CSS file, one ES module**, plus a `lotties/` directory of five `.lottie` JSON files and an `svg/` directory of seven hand-tuned room artifact files. **No framework. No build step required. No router. No service worker. No analytics. No tracking. No external CDN at runtime except Google Fonts and lottie-web.** **Document length and pacing.** The page is approximately **700vh tall** (seven 100vh rooms). A first-time visitor's full read takes 90–120 seconds at scroll-snap pace. The visitor cannot scroll faster than the snap allows; this is intentional — the page sets the reading tempo, not the reader. **Opening sequence (first 3 seconds).** First paint is `#F6EBD2` (lamp-cream) field. At 240ms, the gradient-mesh of room 01 fades up over 480ms with the slow center-warm ember at the midline. At 720ms, the title `gunsul` (Cormorant 700, ink-burgundy, clamp(120px, 18vw, 240px)) draws in via `clip-path: inset(0 100% 0 0)` reveal, left-to-right, over 1100ms. At 1840ms, a single circuit trace exits the period of `gunsul` — drawn via `stroke-dashoffset` animation — routes 240px to the right, 90deg down, and exits the bottom of the viewport. At 2300ms, an ember signal blip enters the trace from the period and travels its length, signaling that the document is now powered. The dot-rail materializes at 2600ms via 7-staggered fade (60ms each). The page is ready. **Scroll mechanics.** Use `scroll-snap-type: y mandatory` on the document. Each `
` is `scroll-snap-align: start` and `min-height: 100lvh`. Inside each section, parallax on the three depth-planes is implemented via `IntersectionObserver` + `transform: translate3d(0, calc(var(--scroll-progress) * Xpx), 0)`, where `--scroll-progress` is updated only while the section's `intersectionRatio > 0.05`, bounded to the section's own scroll range so depth-planes never bleed across rooms. **Do not use `scroll-behavior: smooth` globally** — the snap-unlock easing is hand-tuned per section to give the "settle" feeling. **Circuit overlay implementation.** Each room has one full-viewport SVG (`pointer-events: none`, `position: fixed` while section is locked, `position: absolute` otherwise) containing the room's trace topology. Use `getTotalLength()` on the path, set `stroke-dasharray` and `stroke-dashoffset` to the same value at first paint, then animate `stroke-dashoffset` to 0 driven by section scroll-progress. The signal-blip is a separate `` with a radial gradient fill (ember at center, transparent at 6px), positioned along the path via `` (or `getPointAtLength()` per rAF tick if you need cross-room continuity). **Inter-room continuity.** Traces *must* visually connect across section boundaries. Implement this by giving each section's trace SVG a 60px overshoot top and bottom (so the path exits below the section), and ensuring the next section's path enters at the matching x-coordinate. The reader perceives one continuous wire from room 01 through room 07. **Lottie integration.** Load `lottie-web` as the only third-party JS. Each Lottie is initialized with `autoplay: false` and triggered by an `IntersectionObserver` at the threshold appropriate to that Lottie's narrative role (continuous loops at threshold 0.4, one-shots at threshold 0.6, the final extinguish at threshold 0.95). Do not preload all five at once — lazy-attach as the user crosses room 03. **Text reveal.** Body prose in each room fades up in groups of three lines, staggered 80ms each, when the section's `intersectionRatio` crosses 0.5. Use `clip-path: inset(0 0 100% 0)` reveal (top-down wipe) — this gives the feeling of a page being slowly read down, not text appearing from nowhere. **Cursor.** Default cursor is hidden. A custom cursor element follows the pointer: a 6px ember dot inside a 14px cream-stroke ring. When the cursor passes over a circuit pad, the pad pulses ember and the cursor ring contracts to 10px. There is no hover-magnetism, no spring-trail, no constellation-drawing — this is a quiet site, the cursor is also quiet. **Audio (optional, off by default).** A single `