# Design Language for SengGack.com ## Aesthetics and Tone SengGack.com — *생각*, the Korean noun for "thought" — is a **dark-academia oratory transplanted into a server rack**. Imagine a candlelit Oxford library where the carrels have been replaced with brushed-burgundy server blades, the leatherbound philosophy texts are still on the shelves, and a single fern grows out of the patchbay. Every page is the moment a graduate student leans forward, presses an enter key, and a thought becomes a transmission. The mood is **bold-confident** in the manner of a thesis defense — not loud, but unwavering. There is the warmth of oxblood leather, the weight of late-night oak, the cold focus of a monospaced terminal. Burgundy is not a color here; it is a *temperament* — the color of dried ink, of a magistrate's robe, of a thought that has cooled long enough to be true. Foliage interrupts the formality: a single ivy frond unfurls across a frosted glass card, a fallen oak leaf rests on a code block, a vine threads through a hyperlink as if the library has been quietly reclaimed by the forest while the scholar was thinking. This is **not nostalgia for academia** — it is academia armed with a compiler. Every "thought" on the site is presented as both *artifact* and *executable*: a meditation rendered in serif italic above its tech-mono shadow. When the user is wrong, the page does not apologize. It **shudders** — a precise, crisp, single-frame `shake-error` — as if a leatherbound volume has been slammed shut. The site's voice is the senior scholar who has decided, after thirty years of equivocating, to say exactly what they mean. Tone keywords: oratorical, oxblood-warm, foliated, exact, declarative. The user should feel they have been admitted to a private reading room where the only currency is the well-formed sentence. ## Layout Motifs and Structure The layout obeys an **organic-flow** logic — there is no grid, only the meander of thought down a page. Sections do not align: they spiral inward like marginalia accumulating around a central argument. The reading rhythm is asymmetric and deliberately irregular, emulating the way ink soaks unevenly into thick rag paper. **The Vine Spine.** A single SVG ivy stem, ~6% viewport width, climbs the **left margin from footer to header** — *upward*, against gravity, against scroll. As the user scrolls down, the vine grows up: new leaves unfurl into view from below, threading between sections. Each leaf is a `path` element with a stroke-dashoffset reveal of 1.4s and a slight stochastic rotation (±7°). The vine is the only constant element on the page; everything else drifts around it. **Glassmorphic Reading Cards** float in an unstructured, hand-placed cloud. Each card is a 32–58% width frosted-burgundy panel, `backdrop-filter: blur(28px)` over a deep-oxblood field, with a 1px inner border at `rgba(212, 175, 138, 0.18)` (parchment, semi-transparent). Cards rest at irregular vertical offsets — minimum 24px gap, maximum 320px gap, never repeating — and lean slightly (rotate -1.4° to +1.6°), as if pages had been laid down in a hurry by a working scholar. Two leaves overlap each card by design: one tucked under the upper-left corner like a bookmark, one resting across the lower-right edge. **Five movements**, each at least 100vh, separated by a slow oxblood-to-charcoal gradient transition (`mask-image: linear-gradient(to bottom, black, transparent)` of 12vh): 1. **The Reading Room** — first card centered, oversize, holds only the word *생각* in 11rem Cormorant Garamond italic, pulsing at 0.04 Hz. 2. **The Stacks** — six cards drift in from offcanvas-right at staggered scroll-triggered velocities, each holding a single aphorism on thinking. 3. **The Patchbay** — the page briefly *un-blurs* — glass becomes wireframe — exposing the tech-mono substrate beneath. Cards become terminals. The vine remains. 4. **The Shudder** — an interactive panel where any wrong input triggers `shake-error` across the *entire viewport* (8px → -6px → 4px → 0, 240ms) and a single oak leaf falls. 5. **The Margin** — final card is tiny, lower-right, italic mono, signed. There is no nav bar, no hero CTA, no pricing. The reader **descends through the argument**, not across a product page. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / arguments / aphorisms:** `Cormorant Garamond` italic, weights 300–500. Used at 7rem–11rem for the word *생각* and at 2.4rem for movement titles. The serif is the *thesis*. - **Body / Korean glyphs / philosophical prose:** `Noto Serif KR` weight 400, line-height 1.78, used in 1.05rem for the long meditations. Korean and English typeset as equals, never one as caption to the other. - **Tech-mono substrate / annotations / terminal:** `JetBrains Mono` weight 500/700 for code blocks, footnotes, citations, and the patchbay movement. Letter-spacing `-0.01em`, never `text-transform: uppercase` — the mono is *speaking softly*, not shouting. - **Marginalia / leaf-tags / vine labels:** `IBM Plex Mono` italic 400, 0.78rem, the size of fountain-pen marginalia. Reserved for the few words that orbit each card. The typographic **rule**: every aphorism is set twice — once in `Cormorant Garamond` italic, then immediately below in `JetBrains Mono` 500 at 78% size, the same string, character-for-character. The serif is the thought; the mono is the receipt. The user reads both as one. **Palette (deep-burgundy, with parchment and forest accents):** - `#2A0A12` — **Oxblood Pitch** — page ground, the cooled-ink black-burgundy of the entire site - `#5B0E1F` — **Magistrate Burgundy** — primary surface, glass card tint, robe-deep - `#7A1F2E` — **Wine Velvet** — secondary surface, hover state, vine-shadow - `#A33A4B` — **Carmine Quill** — emphasis, link-rest, leaf-vein highlight - `#D4AF8A` — **Parchment Cream** — body text on dark, card border, fern stem - `#E8DCC4` — **Foxed Page** — display headline color, the warm cream of an aged book leaf - `#3F4A2E` — **Closet Moss** — vine and oak-leaf default fill, deep forest green - `#6B7F49` — **Library Fern** — leaf highlights, hover-leaf glow - `#1A0508` — **Margin Shadow** — used only for the 1px shadow under glass cards; never as a fill Gradients are **forbidden as backgrounds** — they appear only as 12vh transition masks between movements. Color is applied flat, with weight, like ink absorbed. ## Imagery and Motifs There is **no photography**. There are **no people**. The visual vocabulary is built from four hand-built primitives, all rendered as SVG or CSS so they animate at native fidelity. **Glassmorphic cards** are the architectural element — every block of text lives inside one. Each card carries: - a `backdrop-filter: blur(28px) saturate(140%)` over the burgundy ground - an inner 1px parchment border at 18% opacity - a 0.5px outer shadow in `#1A0508` - a single soft inner highlight at the top edge (1px gradient, parchment → transparent over 4%) — the gleam of frosted glass under candlelight **Leaf-organic motifs.** Three leaf species recur, all SVG `path` elements, all in `Closet Moss` (`#3F4A2E`) or `Library Fern` (`#6B7F49`): - **The Ivy** — five-lobed, threading the left vine spine, ~24 instances per page, each unfurling on scroll via stroke-dashoffset - **The Oak** — single fallen leaf, rendered six times per page, used as a punctuation mark — it lands on a card corner, on a code block, on the cursor when hovering a wrong button - **The Fern Frond** — slow-growing fractal, used once at the bottom of each glass card as if pressed flat between pages **Vine-and-margin grammar.** Every glass card has a leaf tucked under one corner. Every code block ends with a small fern frond. Every link is a hyperlink in the original sense — *under-vined* — a 1px curving tendril grows under the link on hover (no straight underline; the line is biological). **Tech-mono substrate.** Beneath every cluster of glass cards, faintly visible at 8% opacity, is a tiled `JetBrains Mono` 13px lattice of repeating Korean Hangul block characters: 생, 각, 책, 잎. The substrate is the page's *DNA* — the user perceives it as texture, not text. **Candle, but mechanical.** A single warm point of light (radial gradient, parchment → transparent over 380px) follows the cursor at a 220ms spring lag. It is the reading-lamp; it is the cursor-follow done with restraint. Without the cursor, the page is in low candlelight; under the cursor, the glass warms. No icons. No emoji. No isometric anything. No stock illustrations. The page contains exactly: glass, vine, leaf, ink. ## Prompts for Implementation Build SengGack.com as **a single immersive scroll**, top-to-bottom, that tells the story of one thought from inception to transmission. The site is not a product; it is a **performance of thinking**. Every scroll position is a paragraph; every interaction is a marginal note. **Mandatory storytelling sequence — five movements, in order, no nav skipping:** 1. **The Reading Room (0–100vh).** Page loads black. Over 1.8s, the deep oxblood ground fades up. The vine begins to climb from the footer — the user does not see this yet. A single glass card centers itself at viewport mid-height. Inside the card, *생각* is typeset in `Cormorant Garamond` italic 11rem, color `Foxed Page`, with a slow 0.04 Hz opacity pulse (0.92 → 1.0). Below it, in `JetBrains Mono` 700 at 1.4rem, the receipt: `seng_gack :: noun :: thought`. Cursor warms the glass on hover. Scroll prompt is one falling oak leaf at 78vh, drifting on a 9-second loop. 2. **The Stacks (100vh–280vh).** Six glass cards drift in, staggered, from offcanvas-right at varying scroll-velocities (0.6×, 0.85×, 1.0×, 1.15×, 0.7×, 1.3× of scroll). Each card holds one aphorism in the dual-typeset rule (Cormorant italic above, JetBrains Mono below, identical string). Sample aphorisms: *"A thought that fits in a sentence has been pruned."* / *"To compile is to commit to one reading."* / *"Marginalia is the soul of the text."* The vine spine continues climbing on the left, leaves unfurling. Hovering a card triggers a soft 220ms parchment-warm; the leaf at its corner rotates 4°. 3. **The Patchbay (280vh–420vh).** The user scrolls past a 12vh gradient-mask transition. On the other side, the glass cards have *un-frosted*: their `backdrop-filter` animates from `blur(28px)` to `blur(0px)` over 1.2s, and a wireframe — pure tech-mono — is exposed underneath. Cards become terminal panels with blinking carmine cursors. Each panel holds a code block: `// thought = compile(observation, rest, observation)`. The vine remains, but its leaves have *also* become wireframe outlines — `stroke: #A33A4B; fill: none; stroke-dasharray: 2 3`. This movement holds for 140vh, then re-frosts. 4. **The Shudder (420vh–520vh).** The user is presented with a single glassmorphic prompt: *"Type the word for thought."* Input field, monospace, parchment-on-burgundy. Correct answers (`생각`, `seng_gack`, `senggack`, `thought`) trigger a slow vine-flourish: three new leaves unfurl, the card glows parchment for 800ms. **Wrong answers trigger `shake-error` across the entire viewport** — a precise 8px → -6px → 4px → -2px → 0 oscillation over 240ms, easing `cubic-bezier(0.36, 0.07, 0.19, 0.97)`. Simultaneously a single oak leaf falls from the top of the viewport in 1.4s, lands on the input field, and stays there until the next attempt. The shake is not punitive; it is **the slam of a closed book**. 5. **The Margin (520vh–620vh).** Final card is tiny — 14% viewport width, lower-right. Italic Cormorant: *"— a thought, transmitted."* Below in IBM Plex Mono 0.78rem: `// end of file`. The vine reaches the top of the viewport and terminates in a single open leaf, as if still growing past the page. **Animation system:** - Master easing: `cubic-bezier(0.22, 0.61, 0.36, 1)` for all entrances - Shake easing only: `cubic-bezier(0.36, 0.07, 0.19, 0.97)` - All durations a multiple of 80ms (240, 320, 480, 800, 1200, 1600) - No bounce. No elastic. No overshoot. This is academia, not a toy. **Cursor behavior:** - Default: warm parchment radial gradient (380px) at 220ms spring lag - Hover glass: gradient brightens 14%, glass card border opacity 18% → 32% - Hover wrong: gradient inverts to oxblood; an oak leaf orbits the cursor **Forbidden:** - No CTA buttons. No "Get Started." No pricing. No stat grids. No testimonial cards. No feature lists. No newsletter modal. - No parallax beyond the vine and the gradient masks. - No carousels, no tabs, no accordions. - No emoji, no icons, no stock photography. - No light mode. The site refuses morning. **Permitted interactions:** - Scroll - Hover (glass-warm) - One typed input (in The Shudder) - One link at the very bottom (`mailto:` or `/feed`), under-vined The page should feel like reading a single, perfectly-bound 1937 thesis on cognition that has been quietly absorbed into the operating system of a server rack. Everything is dim. Everything is precise. Everything thinks. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from monorepo defaults and from the dark-academia cliché: 1. **Dark-academia aesthetic without a single library photograph.** The frequency analysis shows photography at 93% adoption across this monorepo and dark-academia at only 3%. SengGack uses neither: zero photography, zero stock images, zero AI-generated "moody library" textures. The academic feeling is built entirely from glass, ink, vine, and serif — the architectural primitives — never from imagery of academia. This is dark-academia *practiced*, not depicted. 2. **Tech-mono paired with serif-italic, dual-typeset on every aphorism.** Every thought appears twice — once in `Cormorant Garamond` italic (the thesis), once in `JetBrains Mono` (the receipt) — at 78% size, identical string. Tech-mono sits at 6% adoption in the corpus and is almost always used alone, in terminal-cyberpunk contexts. Pairing it with serif italic to create a "thought + executable" duality is, as far as the corpus shows, unique to this site. 3. **Deep-burgundy palette with no gradient backgrounds.** `deep-burgundy` does not appear in the frequency analysis at all (most palettes lean muted, monochrome, or duotone). Gradients are forbidden as backgrounds — they exist only as 12vh transition masks. Color here is applied as ink: flat, weighted, absorbed. 4. **Organic-flow layout against the grid grain.** Of 30 analyzed designs, 83% use full-bleed and 70% are centered; only 6% use organic-flow and 0% use it without a fallback grid. SengGack has *no* grid — only meander, only hand-placed asymmetric drift, with a vine-spine as the only constant element. Sections sit at irregular vertical offsets that never repeat. 5. **Glassmorphic-cards as the only container, paired with leaf-organic overlays.** `glassmorphic-cards` appears in the imagery vocabulary but registers at 0% specific use across the corpus (glassmorphism aesthetic at 56% is general, not card-specific). And `leaf-organic` motif registers at 0%. Their pairing — frosted burgundy panels with leaves tucked under their corners — is, in this monorepo, original. 6. **`shake-error` as a narrative beat, not a form-validation tic.** `shake-error` registers at 3% in the corpus and is used as utility microinteraction. SengGack promotes it to a **set-piece movement** (The Shudder), with viewport-wide shudder, falling oak leaf, and "slam of a closed book" semantics — the wrong answer is choreographed as the page being closed in disagreement. 7. **No CTA, no nav, no product surface.** Of the analyzed designs, all have at least one of: navigation, hero CTA, feature grid, or pricing block. SengGack has none. The page is a single descending argument with one optional input. The frequency analysis-favored patterns of `parallax` (90%), `cursor-follow` (46%), `stagger` (53%) are all present — but rebuilt as restraint: parallax is one vine, cursor-follow is one candle, stagger is six aphorisms drifting in from the right. **Documented chosen seed:** *aesthetic: dark-academia, layout: organic-flow, typography: tech-mono, palette: deep-burgundy, patterns: shake-error, imagery: glassmorphic-cards, motifs: leaf-organic, tone: bold-confident*. Every term in this seed sits in the rare-or-zero band of the frequency analysis. The combination is, by construction, original to this corpus. **Avoided overused patterns (from frequency.sh):** - `hand-drawn` aesthetic (86%) — refused - `photography` imagery (93%) — refused - `full-bleed` layout (83%) — refused (organic-flow instead) - `mono` typography unqualified (90%) — refused (tech-mono specifically, paired with serif italic) - `card-grid` (53%) — refused (cards are unstructured drift, never gridded) - `centered` (70%) — refused (asymmetric throughout, except the hero word) - `muted` palette (56%) — refused (deep-burgundy is saturated, not muted) - generic `glassmorphism` (56%) — sharpened to `glassmorphic-cards` with leaf overlays, never used as full-page wash The site reads like nothing else in `sites/`. That is the brief.