# Design Language for gunsul.quest ## Aesthetics and Tone gunsul.quest is a **single-scroll meditation column shaped like a hanging silk scroll** — a long, narrow, vertically-read essay about *gunsul* (군술 / 軍術), the old Korean word for the practice and study of military arts. Not a martial-arts gym landing page. Not a weapons catalog. Not a "join our dojo" CTA wall. The site is a **calm, sepia-toned reading experience** built around the conceit that you have unrolled an old hanji-paper scroll on a low desk in a quiet room at dusk, weighted the corners with smooth river stones, and are reading down the column at your own pace. Off the page, a small glass bowl of water sits beside the scroll; three goldfish drift through it — *the only moving things in the entire experience.* The aesthetic frame is **japanese-minimal** (1% of the registry — almost nobody picks this), but applied with deliberate restraint and **without** the cliché traps the trend has accumulated: no enso circles drawn in single brushstrokes, no scattered cherry blossoms, no calligraphic Wingdings, no "東京" stamped across the hero in 240px Source Han Sans, no tatami-grid PNG backdrops. Instead the design borrows the *spatial logic* of Japanese minimal print design — the Muji catalogue, Kenya Hara's *White*, Kohei Sugiura's book interiors, Shiseido's pre-war pharmacy ledgers — applied to a Korean military-arts subject. Korean *gunsul* studied Japanese *bujutsu* for centuries and was studied by it in turn; the design treats the page as a quiet bilingual annotation between the two reading traditions, not a takeover by either. Mood targets: **calm-serene** (5% of the registry — also rare; most sites in this corpus reach for "warm-inviting" or "pastoral-romantic"). The reader's heart rate should drop while they are on the page. There are no notifications, no badges, no stat-counters, no hero CTA, no pricing block, no "get started" button anywhere on the entire site. There is only the scroll, the water bowl, and one very small ink-stamped seal at the bottom that, when clicked, gently shakes once and reveals the author's email rendered as if hand-stamped in vermillion. That shake is the entire interaction repertoire of the site, and it is the only place where motion is sharp instead of slow. Inspiration boards in plain words: a hanji scroll in a Joseon scholar's study at the hour of the wood-rat; a Sugimoto seascape in sepia; a single page of an Ogawa photogravure album left open on a pine desk; the tropical-fish bowl that sat on Akira Kurosawa's editing-room table during the cutting of *Sanjuro*; a Hara Museum exhibit catalogue with deckle edges; a ledger of *muye dobo tongji* technique names transcribed in a fountain pen with brown ink that has aged for forty years. Tone of voice in copy: short declarative sentences, lower-case, no exclamation marks, no questions to the reader. The site is not asking for anything. It is showing one thing. ## Layout Motifs and Structure **Single-column** (18% of the registry) is the absolute spine — chosen specifically to fight the corpus's 85% card-grid / 94% full-bleed defaults. The page is one column, **42rem wide on desktop, 100% on mobile, never wider than 42rem regardless of viewport.** Around that column on desktop is a generous *ma* of empty sepia paper. The reader's eye is held in a narrow vertical channel for the whole experience. There is no sidebar, no second column, no two-up image gallery, no inline cards. Anything that wants to break out of the column gets one of three explicit affordances: a **margin note** (sets in 80% smaller type in the right gutter on desktop, inlines on mobile), a **full-bleed photographic plate** (the *only* time the column rule is broken — used twice on the whole page), or a **footnote** at the very bottom of the scroll. **Vertical structure (top to bottom).** 1. **The roller bar** (60vh of paper above the title): an aged sepia paper texture with the very faint horizontal striations of a hanji sheet that has been rolled and re-rolled for years. Two small carved-wood scroll-roller endcaps sit at the very top edge, drawn in flat geometric SVG, no shading, just two filled rounded rectangles. The reader scrolls past this empty paper on first load, which conditions the whole experience: this site is in no hurry. 2. **The title plate.** The Korean wordmark *군술* set in 96px Noto Serif KR Light, sitting on the centerline. Below it, in much smaller Futura PT Light at 18px, the romanization *gunsul* and a one-line gloss: *the old Korean word for the disciplined study of arms.* No tagline, no pitch, no nav. There is no nav anywhere on this site. 3. **The water-bowl ornament.** Inset directly below the title, centered, a 220×140px circular SVG bowl of water in which three tropical-fish silhouettes drift in slow elliptical orbits. They are the only moving thing on the page and they move at roughly 9-second orbital periods. They fade slightly when they cross the bowl's rim and slightly brighten in the bowl's center, so the eye reads them as swimming under glass. The bowl casts a soft sepia shadow on the paper. 4. **The reading body.** Five sections, marked only by a small Futura-set roman numeral (I — V) flush right in the gutter. No section headings in 56px display type. No card backgrounds. No background-color blocks. Just paragraphs, set in Noto Serif KR Regular at 17px / 1.85 line-height, the dot above the *i* in romanizations rendered as a tiny brown circle rather than a default-rendered period. The five sections are: *(I) etymology* (군 + 술), *(II) the muye dobo tongji and what it is and is not*, *(III) the 24 disciplines, by name only, in a column*, *(IV) what the practice looks like at dawn*, *(V) why this is a quest, not a subject.* Section IV contains the **first** of the two full-bleed photographic plates (a sepia long-exposure of an empty wooden floor at sunrise, with one wooden practice sword lying diagonally across it). Section V contains the **second** (the same room from a higher angle, two hours later, with the sword gone and a single circular pool of light from a high window). Both plates are framed by 32px of paper margin and a hairline 0.5px sepia ink rule. 5. **The colophon.** A short paragraph in the footer giving the source texts (Muye Dobo Tongji, 1790; Bonchojeongyo, 1454), set 12px Futura PT Book, italicized in places, with the roman numerals matched in size. 6. **The seal.** A single 56px round vermillion ink-stamp graphic at the bottom centerline. It says *군술* in seal script. This is the only interactive thing on the page besides the fish. Click the seal: the seal **shakes once** (the only `shake-error` instance on the site, used here ironically — the seal "rejects" being clicked, then yields), and a single line of text appears beneath it: an email address, rendered as if it were the next stamped impression on the paper. **Grid spec.** A vertical rhythm of 8px is used for all margins and paddings. Paragraphs are separated by exactly 32px. Section markers (roman numerals) sit on the same baseline as the first line of their section, set in the right gutter at -32px from the column's right edge on desktop. On mobile they slip inline as a small superscript before the section's first sentence. The two photographic plates each consume exactly 80vh of vertical space and are vertically centered within that 80vh by `display: grid; place-items: center` so the eye lingers on them. **Layout patterns explicitly avoided.** No card-grid (85% — overused). No bento-box. No dashboard. No hero-dominant. No asymmetric breakout columns. No diagonal sections. No horizontal scroll. The single-column spine is the entire idea. ## Typography and Palette **Type stack — Google Fonts only, three families, no more.** - **Futura PT** (weights: Book 400, Light 300, Demi 600) — *the futura-geometric pick from the seed* (3% of the corpus, deliberately underused). Used for: all Latin-alphabet copy, romanizations, roman-numeral section markers, the colophon, dates, footnote markers, the small caption under the title. Never used for the Korean wordmark. Tracked +0.04em at small sizes, +0.00em at the wordmark's display size. This is a pre-war geometric sans whose proportions are calmer than Futura's modern revivals — its 'a' is a true single-storey circle, its 'o' is mathematically round, and its lower-case 'g' has an open tail rather than a Bauhaus loop. It pairs unexpectedly well with deep Korean serif because both faces share a *constructed-on-paper* quality. - **Noto Serif KR** (weights: Light 300, Regular 400, Medium 500) — used for *all* Korean copy, including the 96px wordmark and the body text of the reading column. Korean serif (명조) gives the page its calligraphic spine; Noto Serif KR is the only Korean-language Google serif with full hangul + hanja coverage and a proper Light weight at large display sizes. The wordmark is set in Light, not Bold, so the title reads as *quiet* rather than *announced.* - **Cormorant Garamond** (weight: Italic 400) — used in *exactly one place*: the italicized phrase fragments inside the colophon ("*Muye Dobo Tongji*", "*Bonchojeongyo*"). Cormorant's old-style italic gives those titles the right book-spine register — Futura's italic is too geometric to feel like a book title — and one italic register is the cheapest way to make the colophon read as scholarly without screaming about it. No display face. No condensed face. No mono. No handwritten. The corpus is at 95% mono, 35% handwritten, 53% humanist; this design uses *none* of those registers. That alone makes the type voice instantly distinct. **Palette — sepia-nostalgic** (3% of the registry, properly rare). Eight values, all warm, all quiet, no saturation above 30%. - `#F2EBDC` — **page paper.** The base sepia of an aged hanji sheet. Slightly warmer than ivory, slightly cooler than vanilla. This is the entire background. - `#E8DEC8` — **paper shadow.** Used only for the water bowl's cast shadow on the page and the very faint roller-bar striations. - `#5A4A3A` — **ink primary.** A deep brown-black used for all body text and the wordmark. It is *not* `#000`. The richest dark on the page is still warm. - `#7C6B58` — **ink secondary.** Used for romanizations, captions, the section roman numerals, and Futura body text. One step lighter than primary. - `#A89478` — **ink tertiary.** Used for the colophon, footer text, and the inner detail strokes of the wood roller endcaps. - `#B85546` — **vermillion seal.** Used in *exactly one place* — the seal stamp at the very bottom of the scroll. Nowhere else on the page. The redness is muted; this is dried cinnabar, not fresh paint. - `#3F4847` — **water-bowl rim.** A cool, slightly bluish-green-brown used only for the bowl's rim and the inner shadow at the rim's underside. It is the only non-warm value on the page and exists specifically to make the water inside the bowl feel cold. - `#9CADAA` — **bowl water.** The only cool tint on the page. Faintly seafoam-grey, used at 60% alpha over the page paper, plus a 2% inner radial gradient toward the bowl's center so the water has a lensed quality. **Tropical-fish accent** (5% of the registry — used here meaningfully). The three fish in the bowl are the *only* place on the page where any color outside the sepia-nostalgic system appears, and they appear at very low saturation: `#C77A5C` (a sun-faded koi orange), `#8B7E5E` (a tarnished-gold), and `#5A6B6E` (a cool grey-teal). All three are dampened to 70% alpha so the water reads through them. These three fish-accent values do not appear anywhere else — not in links, not in hover states, not in section markers. Their scarcity is the design. ## Imagery and Motifs **Imagery system: lens-flare** (7% of the registry — picked deliberately to act *against* type rather than with it). Used in two ways, in two specific locations only: 1. **The first photographic plate (Section IV).** A long-exposure sepia photograph of an empty wooden practice floor at dawn. A single horizontal lens-flare streak slides across the upper third of the frame — the kind of warm sun-bloom you only get from a 50-year-old uncoated lens shooting east into a low sun. The flare is *real photographic flare*, not a Photoshop "lens flare" star. It is one warm horizontal smear, low-contrast, and it lands across the empty floor exactly where a practitioner would stand. 2. **The second photographic plate (Section V).** Same room, two hours later, no flare in the upper third — but the high-window pool of light on the floor *is* itself a soft circular bloom, with one faint internal halo ring. This is lens-flare reframed as architecture: the design is saying that the discipline's "absence" in Section V leaves behind only the room and the light. Both plates are presented as **duotone-photo** sepia conversions — black-point mapped to `#5A4A3A`, white-point mapped to `#F2EBDC`, no full white anywhere. They sit on the page with no caption and no border except the hairline ink rule. The reader has to work out what they are showing. **Motifs: tropical-fish** (5% of the registry — used as the page's single living element). The fish are not literal koi; they are *small tropical-aquarium fish* of an indeterminate species, drawn in flat side-profile silhouette in SVG, single fill color each, no outlines. Each fish is roughly 18×8px and made from three SVG paths: a body curve, a tail triangle, and a single 1px-radius circle for the eye. They drift in slow elliptical orbits inside the water bowl, slightly out of phase with each other, so that they almost-but-never collide. There is *no* school behavior — they are three independent solitary fish sharing a bowl, which is the right register for a calm-serene tone (versus the energetic schooling that "tropical fish" usually implies in design corpora). The fish's path is randomized within an envelope, so no two visits produce the same arrangement. **Other motifs.** Three small ornamental elements, used sparingly: - **Two carved-wood scroll-roller endcaps** at the very top of the page, drawn as filled flat-color rounded rectangles in `#A89478` over the paper, with one 1px inner darker stroke. No grain texture, no woodgrain attempt — flat geometric forms in the muji manner. They sit there as pure spatial markers, telling the reader "this is the top of a scroll." - **One vermillion seal** at the bottom (described above). Drawn in SVG with a deliberately uneven outer outline, as if the stamp had been pressed unevenly. It uses an SVG `feTurbulence` filter at very low frequency to give the inside of the seal a slightly broken-up, ink-on-rough-paper texture. - **River-stone weights** at the four corners of the page on desktop only — four small irregular oval SVG silhouettes, filled in `#A89478`, that "weight down" the corners of the scroll. They are decorative; they do not move, do not interact, and disappear below 900w. **Anti-motifs explicitly avoided.** No photography in the photography sense (only the two duotone sepia plates). No 3D renders. No icon font. No emoji. No flags. No swords or weapons drawn anywhere on the page (despite the subject — the discipline is about study, not display). No skulls. No "ninja" silhouettes. No torii. No cherry blossoms. No "Made in Korea" graphic. No flags of any nation. ## Prompts for Implementation Build gunsul.quest as **one HTML file, one CSS file, one tiny ES module** (≤2KB compressed) — no framework, no build step, no router, no service worker, no analytics, no fetch. The whole site is reachable in one document. Total uncompressed budget: under 50KB excluding the two photographic plates (which are external WebP files, around 80KB each, lazily loaded only when the reader is within 1.5 viewport heights of them). **The reading experience is an unscrolled scroll.** When the document first paints, the reader sees only the empty paper "roller bar" — 60vh of sepia paper with the two wooden roller endcaps at the very top edge. The title is *below the fold.* This is intentional and uncompromising: the user has to scroll once before they are even told what site they are on. This single act of scrolling is the design's first contract with the user — *you have committed to the scroll.* **Page event timeline (from first paint downward).** - **0.00s — first paint.** Page paper background renders. The two wooden roller endcaps fade in over 600ms with a `cubic-bezier(0.16, 1, 0.3, 1)` ease — slow and reluctant. No spring, no bounce. - **As the reader scrolls down.** No `scroll-triggered` reveals (corpus 20% — overused), no parallax (corpus 95% — extremely overused), no path-draw-svg (corpus 28% — overused), no stagger-in. The page is just *there.* The text was on the paper before the reader arrived. Sections appear because the reader has scrolled to them, not because they have been animated in. - **The water-bowl loop.** Once the bowl is within the viewport (`IntersectionObserver`, threshold 0.1), three SVG fish silhouettes begin orbital animation via `requestAnimationFrame` — each fish has its own ellipse parameters (radius x, radius y, phase offset, period 7–11s) and a slight Y-bobbing (`±2px`) on a 1.6Hz sine. The `feGaussianBlur` filter on the bowl's rim is used to softly fade the fish as they cross under the rim's inner shadow zone. When the bowl scrolls out of view, the animation pauses to save CPU. **No cursor-follow** (corpus 86% — extremely overused); the fish do not react to the mouse at all. They live their own lives. - **The two photographic plates.** Each plate fades up its luminance from 0 to 100% over 1200ms with a low-pass gradient — the image *develops* on the paper rather than slides or pops in. This is a deliberate analog reference (a darkroom print appearing in fixer). No scale, no parallax-on-scroll, no Ken-Burns. Just luminance. - **The seal.** When clicked: a single `shake-error` animation, custom-tuned. Total duration: 320ms. Translation in X only: `[0, -3px, 4px, -2px, 1px, 0]` over six keyframes, with `cubic-bezier(0.36, 0.07, 0.19, 0.97)` ease. This is the only `shake-error` instance on the entire page, and it is used inverted — not to communicate failure, but to communicate that the seal is *resisting* and then yielding. After the shake, the email line below the seal fades up over 800ms in `#5A4A3A`. The sequence is non-repeatable: subsequent clicks do not re-shake; the seal stays "yielded." **Storytelling architecture.** The site is a single argument made in five movements (the five reading sections), with the bowl above and the seal below acting as silent bookends. The reader's takeaway is not a fact set, not a CTA, not a product. The takeaway is **a half-hour of quiet** centered on a single Korean word and a small ritual of reading. If the user closes the tab without doing anything, the site has succeeded. **Things explicitly forbidden in implementation.** - No CTAs anywhere. No "join", "subscribe", "learn more", "buy", "book", "schedule", "contact" buttons. - No pricing. No tiers. No plans. No comparison tables. - No stat-grid. No "10,000 students" or "since 1790" or "24 disciplines" rendered as a `display: grid` of three big numbers. - No testimonials. - No newsletter signup. No email-capture modal. No exit-intent overlay. No cookie banner that uses any color other than `#5A4A3A` on `#F2EBDC`. - No social-share buttons. - No video. No autoplay anything. - No sticky header. No sticky anything. No fixed nav. No header at all. - No dark-mode toggle. The site is sepia by daylight and sepia by lamplight. There is no other mode. - No language switcher; the page sets `lang="ko"` on `` and uses Korean and English in their natural reading registers within the body. **CSS specifics.** Body uses `font-feature-settings: "kern" 1, "liga" 1, "onum" 1` for old-style numerals in the colophon and the section markers. The body line-height is 1.85 — slightly long, deliberately, to slow reading. Korean text gets `word-break: keep-all` so noun phrases don't break across lines. Latin text uses `text-wrap: pretty` where supported. The two photographic plates use `image-rendering: high-quality` and are wrapped in `
` with no `
`. The whole page uses `color-scheme: light only` to opt out of UA dark-mode inversion. **JS specifics.** The ES module is roughly: (1) a 60-line fish-orbit animator using `requestAnimationFrame`, (2) a 20-line `IntersectionObserver` to pause the fish when off-screen, (3) a 30-line click-handler on the seal that runs the shake keyframe via the Web Animations API and reveals the email. Total source under 2KB. No external dependencies. No polyfills. Modern evergreen browser only. ## Uniqueness Notes This design's distinct departures from the corpus and from the seed's defaults: 1. **Single-column at 42rem max-width, on a subject the corpus would default to dashboard or hero-dominant.** "Military arts" sites in this corpus would normally land in `bento-box` or `dashboard` or `card-grid` (a grid of "the 24 disciplines"). Instead the 24 disciplines appear *as a vertical list of names* inside the single column, with no images, no cards, no descriptions — and the reader must read each name aloud in their head. This is a deliberate opt-out of the 85% card-grid default and the 33% dashboard default. 2. **Calm-serene + japanese-minimal + sepia-nostalgic together — three rare picks reinforcing each other.** Each of these three vocabulary items lives below 6% of the corpus on its own. Stacked, they describe a register the corpus has essentially never visited: a Korean-subject site rendered in Japanese editorial spatial logic, sepia-toned, calm. The combination is the site's first differentiator. 3. **`shake-error` (4% of corpus) used inversely — once, on the seal, as a non-error meaning.** The pattern's normal semantic ("this input was wrong, jiggle to indicate") is borrowed for an emotional opposite — a small ritual of yielding. This is the design's only sharp motion against an otherwise still page, and that scarcity is what makes the gesture feel earned. 4. **Tropical-fish (5% of corpus) reframed as solitary, not schooling.** Most tropical-fish design treatments default to bright reefs and energetic schools. Here, three fish drift independently in a sepia bowl. The "tropical" half of the motif token is honored only in the species silhouette; the *behavior* and *color* are pulled toward calm-serene. 5. **Lens-flare (7% of corpus) used architecturally, not decoratively.** The flare is not a decorative bloom dropped over a hero. It appears in *exactly two photographic plates* and acts as a structural reading cue: presence in Section IV (the flare marks the practitioner's standing-place), absence in Section V (the practitioner is gone, the room remains). The flare is part of the argument the page is making. 6. **Futura-geometric (3% of corpus) deliberately *not* used for the wordmark.** Most "futura" picks in design land would set the title in 96px Futura Bold. This design refuses that move and gives the title to Noto Serif KR Light — a Korean serif — and confines Futura to the supporting English copy, the roman numerals, and the colophon. Futura is the *companion* face, never the lead. 7. **Zero CTA, zero pricing, zero stat-grid, zero hero — refusing the entire SaaS-landing vocabulary.** This is rare in the corpus. Most sites in the registry, regardless of subject, hold onto at least one CTA-shaped element. gunsul.quest has none. 8. **The site is below the fold on first paint.** The 60vh empty paper roller bar means the title is not even visible without one scroll gesture. The corpus's 94% full-bleed default loads its hero into the first viewport. This design intentionally does the opposite — the first viewport is "the paper before the writing began." 9. **Three Google Fonts, no more, with one of them used in exactly one place.** Cormorant Garamond Italic appears only inside the colophon for two book titles. This is a level of typographic restraint the corpus rarely shows: the average corpus site uses 4–6 weights/families. 10. **The whole site has one interactive element besides scrolling.** The seal click. Everything else is passive reading and a single ambient animation. This is a deliberate inversion of the corpus's 86% cursor-follow and 79% magnetic interaction defaults. **Chosen seed (from assignment):** *aesthetic: japanese-minimal, layout: single-column, typography: futura-geometric, palette: sepia-nostalgic, patterns: shake-error, imagery: lens-flare, motifs: tropical-fish, tone: calm-serene.* **Frequency-aware avoidances applied from `frequency.sh` analysis:** - Avoided **hand-drawn** aesthetic (96%), **glassmorphism** (65%), **editorial** (38%) — picked **japanese-minimal** (1%) instead. - Avoided **photography** as the imagery base (99%) — picked **lens-flare** (7%) and used it on only two duotone-sepia plates. - Avoided **full-bleed** (94%), **card-grid** (85%), **centered** (82%) layouts — held to **single-column** (18%) with a 42rem cap. - Avoided **gradient** (97%), **warm** generic palette (97%) — picked **sepia-nostalgic** (3%), eight discrete values, no gradients except a single 2% radial inside the water bowl. - Avoided **parallax** (95%), **cursor-follow** (86%), **spring** (85%), **stagger** (79%), **magnetic** (79%) interaction patterns — picked **shake-error** (4%) and used it in exactly one place, once per session. - Avoided **mono** typography (95%), **humanist** (53%), **handwritten** (35%) — picked **futura-geometric** (3%) and paired it with **Noto Serif KR**, which is in no high-frequency typography bucket. - Avoided **vintage** (24%), **nature** (16%), **tech** (15%) motifs — picked **tropical-fish** (5%) and made the fish solitary rather than schooling. - Avoided **pastoral-romantic** (36%), **warm-inviting** (29%), **friendly** (18%), **energetic** (15%) tones — picked **calm-serene** (5%) and let the page run silent.