# Design Language for quietjoon.com ## Aesthetics and Tone The site is built around a single Korean word stitched into a name — **"quiet joon"** — and treats the whole page as a *long exhale*. Imagine a hanji-papered alcove at dawn: undyed mulberry paper, the faint warmth of a paper lantern that was switched off an hour ago, a single sumi ink stroke still drying on the wall. This is **wabi-sabi / Korean-ascetic zen**, not the cliché "lots of white space" minimalism — it is *aged* minimalism. Surfaces are slightly imperfect: a paper grain you can almost feel, a deckled edge, a watermark ring where a tea bowl once sat. Tone is **zen-contemplative** with a thread of **grounded-earthy** quietness. Nothing announces itself. Type fades up the way condensation clears from glass. There is no urgency, no "above the fold" anxiety — the page assumes the visitor came to *sit*, not to convert. Copy (whatever the page ends up saying) should read like a single line of a *seonbi* journal: short, observed, unhurried. The emotional target is the feeling of holding a still-warm ceramic cup with both hands. Crucially: **silence is the loudest element**. Where other sites fill, this one *withholds*. A section that would normally hold a stat grid instead holds one sentence and a vast field of paper. The luxury here is room to breathe — the antithesis of the dashboard. ## Layout Motifs and Structure The governing principle is **ma (間) — negative space as a structural member**, not leftover margin. The page is a **single vertical column of full-bleed "rooms"**, each room one viewport tall, each holding *almost nothing*: one ink mark, one line of text, one object, surrounded by deliberate emptiness. You scroll the way you walk a temple corridor — pause, room, pause, room. - **The seam:** Every room is separated from the next by a single hairline horizontal rule rendered as a hand-inked stroke (1px, slightly wavering SVG path, not a CSS border) — like the fold line of a folding screen (*byeongpung*). Six to eight panels total. - **Off-center anchoring:** Within each room, the one element sits on a loose *rule-of-thirds* point — never dead center. A mark might cling to the lower-left; the next room's mark to the upper-right, so the eye drifts diagonally down the page like a stone skipped across still water. - **The hanging scroll:** The hero room is composed like a *jokja* (hanging scroll): a tall, narrow vertical band of content (the name set vertically, top-to-bottom) flanked by enormous quiet margins, with a faint "mounting silk" border of a barely-different paper tone. - **No chrome:** No top nav bar, no sticky header, no footer link farm. Navigation, if any, is a thin vertical list of room-names pinned to the far right edge, set tiny, rotated 90°, like the spine label of a thread-bound book — and it dims to near-invisible until the cursor approaches. - **Asymmetric, never gridded:** Reject card-grids and bento boxes entirely. This is **organic-flow / single-column**, composition by intuition, not by 12-column math. ## Typography and Palette **Typography — all Google Fonts:** - **Display / the name / room titles:** **"Cormorant Garamond"** — a high-contrast, slightly fragile serif with calligraphic terminals; set LIGHT (300) and LARGE, with generous letter-spacing, sometimes run **vertically** (writing-mode: vertical-rl) for the hero so the name reads like a hanging scroll. Its thin hairlines echo a brush lifting off paper. - **Body / the single observed lines:** **"EB Garamond"** — a warm, humanist old-style serif at a comfortable reading size, loose leading (~1.9), measure kept narrow (~52ch) so each line feels weighed. - **Whisper text / room labels / the spine nav:** **"IBM Plex Mono"** at 11–12px, wide tracking, lowercase, dimmed — the one tiny "technical" voice, like a curator's pencil annotation in the margin. Used sparingly: a date, a coordinate, a footnote. **Palette — undyed-paper warmth, ink, and one faded persimmon:** - `#F4EFE4` — *hanji* base. Warm, slightly grey-cream paper, the default background everywhere. - `#E9E1CF` — *mounting silk*. A half-shade darker paper used for the hero's faux-mat border and subtle panel shifts. - `#2B2620` — *sumi*. Not pure black — a warm near-black brown-grey, the ink. Body text, the brush strokes. - `#6E6555` — *driftwood*. Muted taupe for secondary text, the mono whispers, the hairline screens. - `#B5552E` — *faded persimmon (gam)*. The single accent — a dried-orange terracotta. Appears once or twice total: a seal stamp, a single underline that draws itself, the dot over a character. Never a button fill, never a wash. - `#8A9676` — *celadon shadow* (optional tertiary). A dusty grey-green for the faintest of leaf motifs / a single pressed-plant illustration. Used at very low opacity if at all. High-key, low-contrast, warm. The whole page should look like it was *printed*, then left in the sun. ## Imagery and Motifs - **The sumi stroke** — the recurring hero element: a single, confident **ink brushstroke rendered as a hand-shaped SVG path** with a slightly tapered, dry-bristle end. One per room, each different (a downstroke, a comma-like flick, a horizontal sweep, an *enso*-like incomplete circle in the final room). Never clip-art; drawn to feel like one breath of a brush. It may carry a subtle internal gradient from `#2B2620` to a thinner `#6E6555` to suggest pressure changing. - **The seal (낙관 / nakgwan)** — a small square *vermilion-on-paper* stamp, ~32px, with a few abstract carved strokes inside a rough border, in `#B5552E`. Appears once near the hero and once at the very bottom as a "signed" close. This is the only saturated thing on the page. - **Paper grain** — a faint, tiled fibrous noise (subtle SVG `feTurbulence` or a low-opacity grain image) over the whole background, plus an occasional **deckled / torn edge** on a panel (an irregular SVG mask along one side). - **The tea-ring** — a single faint circular watermark, off in a corner of one room, like a cup was set down. Pure atmosphere. - **One pressed leaf** — a delicate `#8A9676` botanical line-illustration (a single ginkgo or bamboo leaf), placed once, very small, low opacity — a memento tucked into a book. - **Vertical rhythm marks** — tiny IBM Plex Mono "ㅡ ㅡ ㅡ" or simple dot markers running down the spine nav, like the knots of a stab-bound book. - **No photography. No gradient meshes. No glassmorphism. No 3D.** If anything is "rendered," it's rendered to look hand-made and slightly worn. ## Prompts for Implementation - **Build the rooms first.** Markup is a stack of `
` elements, each `min-height: 100svh`, each a flex/grid container that places its *one* element on a thirds anchor. Resist adding a second element to any room; if a room feels empty, that's the design working. - **Entrance = ink developing on paper.** On load and on scroll-into-view, each room's brushstroke SVG should *draw itself* via `stroke-dasharray` / `stroke-dashoffset` over ~1.6s with a gentle ease-out — and the accompanying text should `fade-reveal` upward with a soft blur-to-sharp (`filter: blur(6px) → blur(0)`, `opacity 0 → 1`, `translateY(12px → 0)`), staggered ~120ms after the stroke begins. Use IntersectionObserver; never animate on a timer. - **Parallax, but barely.** As the page scrolls, let the brushstrokes and the paper-grain layer drift at ~0.92× scroll speed — almost imperceptible, just enough to feel like the page has *depth*, like looking into a shadow box. Honor `prefers-reduced-motion` by disabling all of this and showing everything settled. - **The hero is a hanging scroll.** Center column, the name in **Cormorant Garamond 300** set with `writing-mode: vertical-rl; letter-spacing: 0.3em;` running top-to-bottom; faint `#E9E1CF` "mounting" border with extra padding above/below; the vermilion seal stamped at the lower portion, rotated a degree or two off-true. Below it, one line of EB Garamond, then a huge field of paper before the first seam. - **The seams animate.** The hand-inked hairline between rooms should draw itself left-to-right (or like a brush dragged) when it enters view — a small, satisfying punctuation between sections. - **Cursor as a slow brush.** Optional, gentle: a very subtle, large, soft-edged warm halo (`#F4EFE4` lightening) that *lags well behind* the cursor with heavy easing — like breath fogging the paper near where you're looking. No magnetic snapping, no particle trails, no cursor-follow gimmickry. It should be so subtle a visitor might not consciously notice it. - **Tell a story, not a pitch.** The page should read as a slow descent: *name → a held breath → an observation → a turning → a fragment → an unfinished circle → a seal*. Each room is one beat. **Absolutely avoid:** CTA buttons, pricing tables, stat/number grids, testimonial carousels, feature cards, mega-footers. If the content demands a link, it's a single underlined word in driftwood that draws its persimmon underline on hover. - **Make it feel printed.** Slight, consistent paper grain everywhere; let one panel have a torn edge; keep contrast soft; never use pure `#000` or pure `#fff`. ## Uniqueness Notes Differentiators from other designs in the set: 1. **Aged, withholding minimalism — not "clean" minimalism.** Where the common moves are crisp Swiss/Muji whitespace or dark-neon "minimal," this is *wabi-sabi*: warm undyed-paper grain, deckled edges, a tea-ring watermark, a single faded persimmon — minimalism that looks *used and sun-faded*, composed by intuition rather than a grid. 2. **The page as a folding screen of one-viewport "rooms" with ma as a structural member.** Not a card-grid, not a bento box, not immersive-scroll-with-lots-of-content — a vertical sequence of near-empty panels, each holding exactly one ink mark and one line, separated by hand-inked byeongpung seams. The emptiness is the content. 3. **A hanging-scroll hero with the name set vertically, plus a vermilion seal as the only saturated pixel on the entire site.** Korean *jokja*/*nakgwan* references rather than generic "elegant serif over a hero image." Color discipline is near-monastic: ~98% warm greyscale paper-and-ink, one terracotta accent used twice. 4. **Animation that imitates ink developing and breath fogging paper** — strokes that draw themselves, blur-to-sharp text reveals, a sub-perceptible lagging warm halo — explicitly rejecting magnetic cursors, particle trails, tilt-3D, glass panels, and counter animations. Chosen seed/style: **japanese zen portfolio** (wabi-sabi · zen · ma-negative-space · single-column / organic-flow · elegant-serif + tech-mono · honeyed-neutral / muted-vintage · zen-contemplative). Avoided overused patterns from frequency analysis: glassmorphism (81%), hand-drawn-cutesy (95%), card-grid (91%), photography (98%), cursor-follow/magnetic/spring gimmickry (~85%), warm-but-saturated dopamine gradients, bento-box, dashboard, tilt-3d, counter-animate.