# Design Language for SengGack.net ## Aesthetics and Tone SengGack.net is **cottagecore reimagined as a thought-aquarium suspended in dawn light** — a single, edgeless meadow-pond viewed from underwater, where each rising bubble is somebody's still-forming thought drifting up toward a pale gold sky. The domain *생각* ("thought") meets the *.net* suffix not as a tech-network but as a **fishing net of woven reed**, slack in the current, catching ideas before they break the surface. The visual law of the site is therefore submerged-pastoral: cottage warmth softened by water refraction, cottage clutter replaced with the orderly chaos of bubbles and motes, cottage florals translated into duckweed and pondweed silhouettes. The tone is **bold-confident** — but in the cottagecore key. Not the bravura of an enterprise SaaS landing page; the bravura of someone who has hand-mended their own linen shirt and is wearing it to the village fair. Type sits LARGE and unapologetic. The hero word *생각* fills more than half the viewport on first load. There are no fragile thin-weight serifs apologising for their presence; everything is set in confident classic Garamond, italic where the work demands feeling, roman where it demands resolve. No taglines hedge. No buttons say "Learn more." When the page has something to say, it says it the size of a barn door. Inspirations to internalise: Andrew Wyeth's tempera *Christina's World* repainted underwater; the algae-lit chapel of Monet's *Water Lilies, Morning* at the Orangerie; the still-life pondscapes of Beatrix Potter's flooded watercolours; a Jane Austen-era hand-illuminated manuscript that has been left in a creek for a season and survived; the visual confidence of Ghibli's Ponyo opening sequence (the bubble-cradled voyage upward). Most importantly: the site **breathes** in two opposing directions at once. The viewport ascends with the bubbles. The thought-cards below descend, sinking like seedpods. This is the **counter-animate** law. Wherever something rises, something else falls at the exact reciprocal velocity — a visual conservation of motion that gives the whole experience the eerie, calm momentum of a well-tuned pendulum. ## Layout Motifs and Structure The page is **full-bleed** in the truest sense: there is no max-width container, no padded page-margin, no centered column. The viewport edges *are* the pond walls. Every element either touches the edge of the screen or is suspended in the open water at the middle. There are no cards-on-a-grid, no service-tiles, no four-column feature blocks. The layout reads vertically as **a single immersive water column**, and vertical scroll is a slow descent — yet the *content* the user reads rises past them as bubbles. So while scrolling moves the camera downward, the perceived motion of meaning is upward. Reading SengGack.net feels like sitting on the bed of a pond and watching the world above through the lens of clear water. The page is composed of **seven depth-zones**, each a full viewport tall (`100lvh`), with no hard section breaks — the eye descends through them by hue and density of bubble traffic, not by horizontal rules. 1. **Surface (0–100vh).** The viewport opens looking *up* through water at a sun-warmed cottagecore meadow. Pale gold gradient ceiling. A single hand-illustrated SVG silhouette of pondweed sways at the very top edge. The hero word *생각* is set in 18vw Garamond italic, anchored full-bleed across the surface with letter-tracking at -0.04em — almost touching, almost merging. 2. **Stillwater (100–200vh).** A single statement of intent floats here, set as a 6.4vw Garamond block, italicised, centered horizontally but vertically held at the **golden ratio drop** (61.8% from the top of this zone, never 50%). Around it, ten translucent bubbles rise; for each bubble that rises off the top, a white duckweed leaf falls from the zone's ceiling at the inverse rate — the **counter-animate signature**. 3. **The Watercress Index (200–300vh).** A vertical rhythm of seven hand-set quotations, each one in a different size (descending by a 1.272 ratio: 4.8vw → 3.78vw → 2.97vw → ... ), each one anchored alternately full-left-bleed and full-right-bleed. As the user scrolls, every quotation block is countered by a small pondweed-glyph rising from the *opposite* edge. 4. **Bubble-Census (300–400vh).** A single full-bleed underwater "ledger" — a transparent column of fifty-seven thoughts catalogued as rising bubbles, each labelled in 0.96rem Garamond. They drift upward at staggered velocities (the **counter-animate law**: their numerical labels tick *down* from 57 to 1 as the bubbles tick *up* the screen). This is the only "data" the site shows, and it is shown as a slow ascent, not a chart. 5. **The Mended Net (400–500vh).** Full-bleed SVG illustration of a hand-knotted reed net stretched diagonally across the viewport, anchored in the top-left corner and the bottom-right corner. As the user scrolls, the net's knots rotate counter to scroll direction. A short paragraph of body text sits *inside one cell of the net*, reading-length 56ch. 6. **Goldlight (500–600vh).** The water "warms": gradient shifts to honey-and-rose. Bubbles enlarge. A single oversized bubble — radius 38vw — rises slowly through the entire zone, with the second statement of the site set *inside its meniscus*, the type magnified by an SVG `` displacement-map to suggest refraction. 7. **The Open Net (600–700vh).** Full-bleed footer-meadow. The net of the previous zone is now seen from above, slack on a sunlit creek bank. The domain wordmark *SengGack.net* sits in 9vw Garamond italic, full-bleed, baseline kissing the viewport bottom edge. Below the wordmark — outside the safe area, partly cropped — a single hand-drawn dragonfly hovers at the right margin, antennae unfinished, as if the drawing itself is still rising. There is no header navigation. There is no hamburger menu. There is no sticky sidebar, no breadcrumb, no search. Discovery is purely vertical. The site is a single descent and a thousand ascents. ## Typography and Palette **Typography (Google Fonts only):** - **Display & Editorial Body:** *EB Garamond* across the entire site. Roman 400 for paragraphs (1.05rem, line-height 1.74, optical size 8). Italic 400 for every hero word, every section title, and every refrain (this is the **garamond-classic** signature). Bold 700 only for the singular wordmark *SengGack.net*. Numerals are old-style throughout, including the bubble-census ticker. Tracking is -0.04em on all 4vw+ display, +0.012em on body. - **Korean Glyphs:** *Gowun Batang* weight 400 — a hand-cut Korean serif tuned to live alongside Garamond at the same x-height and stroke weight. The hero glyph *생각* is set in *Gowun Batang* italic-leaning style at 18vw. Korean is never a translation of English; the site is bilingual at parity, and many sections are Korean-first with English bubbling beneath. - **Marginal Whisper:** *Cormorant Garamond* italic 300 at 0.84rem, used only inside bubbles for the catalogue labels, with letterforms feathered by a 0.4px CSS `text-shadow` that simulates ink-bleed on wet paper. This is the only voice that whispers; everything else speaks at scale. **Palette (eight named colours, all derived from a dawn-pond gradient stack):** - `--gold-surface: #F5E0A4` — the ceiling of the pond at sunrise, the topmost band of every gradient. - `--rose-shallow: #E9B79A` — the warmth of low light passing through 30 cm of clear water. - `--cream-meadow: #FAF1DD` — the cottage wall behind the pondweed, the cream of fresh butter. - `--mint-shallow: #BDD9C2` — the duckweed canopy seen from below. - `--algae-mid: #6B8B7C` — the mid-water hue, where bubbles are most legible. - `--reed-deep: #2F4A45` — the deep where the net is woven, the type-on-water colour. - `--ink-pondbed: #1A2723` — the silt floor, used only for the heaviest serif strokes and the dragonfly silhouette. - `--bubble-glow: #FFFCEE` — pure light, used inside every bubble's meniscus and the wordmark *SengGack.net*. **Gradient law (the palette signature):** every full-bleed background is a *vertical* gradient that runs the entire zone height, with the gold/rose band always at the top and the reed-deep band always at the bottom. As the user scrolls down, the *whole page* is one continuous descending gradient — the seven zone gradients are stitched seam-to-seam at exact hue handoffs. This is what makes "scroll" feel like "sink." There is no flat colour anywhere on the page except inside individual bubbles. Cottagecore typically lives in honeyed neutrals — by stretching that warmth into a deep mossy reed-green at the bottom, the site reclaims **gradient** from saas/dopamine clichés and routes it through pond-dawn naturalism. ## Imagery and Motifs There is **no photography**. There are **no AI mood images**. Every visual element is hand-built SVG or CSS, inspired by 19th-century botanical hand-engravings and Beatrix Potter pondscapes, then routed through cottagecore's hand-made aesthetic. **1. Water-bubbles (the principal motif).** Bubbles are rendered as SVG circles with a four-stop radial gradient (transparent center, faint `--bubble-glow` ring at 70%, `--gold-surface` highlight crescent at 30deg, transparent outer). Each bubble carries an `feGaussianBlur` displacement on its meniscus to suggest curved water tension. There are 247 bubbles on the page at any one time, each animated on its own random-seeded sine path, never on a uniform vertical. Bubble sizes follow a logarithmic distribution: many tiny (4–8px), several medium (16–48px), a few large (96–240px), one enormous (38vw — the Goldlight bubble). **2. Floating-elements (the secondary motif).** Suspended in mid-water across every zone are hand-drawn cottagecore icons rendered in 0.6px ink-stroke SVG: a sprig of meadowsweet, a fragment of broken eggshell, a single bee turned belly-up, three feathers, a bone needle, a rolled sheet of birch bark, a thimble, a hairpin, a pressed buttercup, a folded note. None of them is anchored to a side or to a column — every floater drifts on a slow Lissajous orbit (period 22–47s) inside its zone. The orbits are **counter-animate**: when the bubbles in a zone rise on the left, the floaters on the right sink. They never collide. The effect is gentle equilibrium, not chaos. **3. The Pondweed Banner (top of every zone).** A repeating SVG pattern of pond-grass strokes runs along the top edge of each zone in `--algae-mid`, swaying with `transform-origin: bottom` on a 7s sinusoid. The sway phase is **opposite** between odd and even zones — so as the user scrolls, the grass alternately tilts left/right with hypnotic regularity. **4. The Reed Net (zone 5 only).** A diagonal hand-knotted reed net rendered as a hex-mesh SVG of 312 reed-strands. Every reed is a `` with a 0.4px brown stroke and a soft 0.8px gold inner-glow. Knot intersections are hand-illustrated four-strand overhand knots, each one slightly different (no reuse of a single symbol; they are **hand-drawn** seven times and randomised). On scroll, the net's individual knots rotate **opposite** to scroll direction, slowly — `(scrollY * -0.0008) rad`. **5. The Dragonfly (footer only).** A single large hand-drawn dragonfly, wings rendered in 1.2px ink, body in 2px ink, antennae unfinished (the strokes literally fade to opacity 0 mid-line), positioned at the right margin half-cropped. Wings beat at 12 Hz for 0.4s every 9s — a real dragonfly's wingbeat compressed into perceivable rhythm. This is the only animation on the page that is *not* counter-paired; the dragonfly is the asymmetry that proves the rule. There are no icons-as-buttons, no avatars, no logo grid, no testimonial portraits. The cottagecore vocabulary is materially specific: linen, reed, beeswax, eggshell, birchbark, bone, copper, honey, dew. None of these is a stock concept; each is drawn by hand at SVG-pixel precision. ## Prompts for Implementation Build SengGack.net as **a single immersive descent through seven water-zones**, vertical scroll only, no horizontal navigation, no clickable CTAs, no pricing block, no feature grid, no testimonial carousel. The page is a meditation, not a funnel. The visitor's reward for arriving is the experience of being underwater in a cottagecore meadow at dawn for ninety seconds. **Mandatory storytelling sequence — seven zones, in order, no skip, no nav.** 1. **Surface.** First paint: cream-meadow `#FAF1DD` flooding the viewport. Over 1.4s the gold-surface gradient warms in from the top edge. The hero glyph *생각* fades in at 18vw EB Garamond italic + Gowun Batang italic blend — the K and the G actually *cross-fade* to a Korean glyph as the page settles. Pondweed at the top edge begins its first sway. Six bubbles begin their first ascent. 2. **Stillwater.** As scroll begins, the gradient shifts from gold to rose-shallow. The site's first declaration appears, written in 6.4vw EB Garamond italic, in `--reed-deep`: *"A thought, before it surfaces, is already a place."* (Mirrored in Korean directly below in *Gowun Batang* italic at parity.) For every bubble that escapes the top of the zone, exactly one duckweed leaf falls from the top — counter-animated with the same pixel velocity but inverted vector. 3. **Watercress Index.** Seven aphorisms cascade down the zone in alternating left-bleed and right-bleed, each anchored to a viewport edge. As the user scrolls, the unread aphorisms drift slowly *upward* (rising thoughts), while the already-read ones slowly *downward* (settling silt). Reading direction reverses subtly: the eye learns to read *up* in this section. 4. **Bubble-Census.** A vertical full-bleed catalogue. 57 bubbles rise in tight column, each carrying a tiny EB Garamond label inside its meniscus (0.96rem). The labels are short Korean nouns — *바람*, *비*, *기다림*, *손목*, *우물*, *밤*, *입김*, *씨앗*, ... — each a thing that is also a thought. As bubbles ascend, the running counter at the bottom-right ticks *down* from 57 → 1 in EB Garamond old-style numerals. Both motions complete in the same 18s. **This is the central counter-animate set piece.** 5. **The Mended Net.** Full-bleed reed-net SVG. Inside one cell of the net (the 7th from top-left), a single 56ch paragraph reads about the etymology of *생각* and the meaning of *.net* as a fishing-net rather than a wire-network. The paragraph appears word-by-word as the user scrolls, each word fading in over 240ms. Knots rotate counter to scroll. 6. **Goldlight.** Gradient shifts to honey/rose. The 38vw Goldlight Bubble begins its slow ascent through the zone. Its interior magnifies the second declaration of the site (*"Some thoughts are net-caught, some are bubble-borne — both belong to the surface eventually."*) via SVG ``. As the bubble rises, the displacement scale increases from 0 to 14, so the type *flexes* around the bubble's curvature in real time. When the bubble exits the top of the viewport, the displacement releases and the next zone arrives. 7. **The Open Net.** Gradient bottoms out at reed-deep + ink-pondbed. The reed net of zone 5 is shown again, but now collapsed and slack on a sunlit bank, viewed from above. Cottagecore floaters of the entire page — every meadowsweet, eggshell, feather, bone needle, pressed buttercup — are lying nestled in the slack net, no longer floating. They have been *caught*. The wordmark *SengGack.net* appears 9vw EB Garamond italic, baseline kissing viewport bottom edge, in `--bubble-glow`. The dragonfly hovers at the right margin and beats its wings once. End. **Animation principles (binding rules):** - **Counter-animate every paired motion.** No scroll-triggered effect may move in a single direction; everything that rises must be paired with something falling at the same velocity. This includes the bubble-census numerals (rising bubbles ↔ descending count), the duckweed/bubble pair in zone 2, the floater/bubble pairs in every zone, and the pondweed sway phase between odd/even zones. **This is the design's thumbprint and must be preserved everywhere.** - **Never use easing presets named `ease-in`, `ease-out`, or `ease-in-out`.** Every transition uses a custom cubic-bezier tuned to "water-resistance": `cubic-bezier(0.32, 0.04, 0.18, 0.98)` for ascents, and the *exact mirror* `cubic-bezier(0.82, 0.02, 0.68, 0.96)` for descents. The mirror is the **counter-animate** law applied to easing itself. - **Scroll-velocity dampening.** The viewport scroll speed is multiplied by `0.78` via a smooth-scroll layer; the page sinks *slower than the user expects*. This subjective "underwater drag" is essential. - **Pondweed sway must be SVG ``, not CSS keyframes.** This is a craft signal: hand-tuned per blade, with three blades using slightly off-rhythm 6.8s, 7.2s, 7.5s periods that intentionally desynchronise after about 90s of viewing — the meadow becomes irregular over time, like a real meadow. - **Bubble physics.** Bubbles rise on individual sine paths (amplitude 8–24px, period 3–9s). They never rise straight. They never collide with floaters. Bubble opacity ramps from 0.0 → 1.0 over the first 8% of each rise, and from 1.0 → 0.0 over the last 6% — so they appear to be *forming* and *bursting at the surface*. - **Type rendering.** All EB Garamond display uses `font-optical-sizing: auto` and `font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1, 'kern' 1`. The hero glyph *생각* uses `text-rendering: geometricPrecision`. No webfont fallback flash — preload subsets including all Korean glyphs used. - **The dragonfly is the only autonomous element.** Everything else moves in response to scroll. The dragonfly moves on its own clock — it is the proof that the meadow continues without the visitor. **STRICTLY AVOID:** stat-counter widgets, pricing tables, "Trusted by" logo strips, three-column feature blocks, hero-with-CTA-button patterns, modal popups, cookie banners (none — the site collects nothing), testimonial slabs, FAQ accordions, newsletter sign-ups, social share buttons, any element with `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`, any rounded-corner card with `border-radius: 12px`, any "Get started" or "Learn more" microcopy, any hover-lift on cards (there are no cards), any neon-glow, any gradient mesh blob, any glassmorphic frosted card. This site is the absence of all of those. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from the corpus average and from the cottagecore cliché: 1. **Cottagecore underwater.** The frequency analysis shows cottagecore at 7% across the corpus — already rare — but the few existing examples are dry meadows with linen and dried herbs. SengGack.net is the **only fully aquatic cottagecore** in the corpus: a meadow viewed from beneath the surface of its own pond, with cottagecore objects (linen, eggshell, meadowsweet, beeswax, copper, bone needle) suspended *as* floaters in mid-water. This single re-framing produces a vocabulary nobody else in the corpus can use. 2. **Counter-animate as a global law, not a local effect.** Counter-animate appears at 10% in the corpus, almost always as a single isolated trick (a counter that ticks while a bar fills). SengGack.net elevates counter-animate to **architectural law**: every paired motion on the page obeys it (bubbles ↔ floaters, ascending ledger ↔ descending count, odd ↔ even pondweed phase, ascent easing ↔ descent easing as exact bezier mirrors). The motion language is the message. 3. **Garamond-classic at 2% prevalence — uncontested.** The corpus uses garamond-classic in only 2% of designs, and never as the *sole* display face. SengGack.net commits to EB Garamond / Cormorant Garamond / Gowun Batang as a closed three-font system with no sans, no mono, no display-bold competitor. The cottagecore aesthetic + classic Garamond pairing is unique within the corpus. 4. **Full-bleed gradient as the entire page, not as a hero band.** Full-bleed (85%) and gradient (90%) are both saturated patterns in the corpus, but they are almost always combined as a *hero gradient banner* sitting above flat-coloured content sections. SengGack.net stitches one continuous vertical gradient across all 700vh of the document — the gradient is the page, not a section of it. Scroll = sink. 5. **Water-bubbles as bilingual ledger, not decoration.** Water-bubbles appears at 5% in the corpus, always as ambient background filler. SengGack.net makes bubbles **load-bearing content** — the central Bubble-Census zone catalogues 57 Korean nouns inside bubble menisci, and every bubble carries a typeset label rendered with refraction displacement. Bubbles are the site's primary information design. 6. **Floating-elements at zero corpus prevalence.** The frequency analysis shows floating-elements at 0% — no other design in the corpus has used this motif. SengGack.net introduces it via hand-drawn cottagecore artefacts (meadowsweet, eggshell, hairpin, bone needle, pressed buttercup, folded note) that drift on Lissajous orbits inside each zone. This is a **first-of-kind** motif language for the corpus. 7. **Bold-confident in cottagecore key.** Bold-confident sits at 7% in the corpus, almost always paired with corporate/dopamine/cyberpunk aesthetics where loudness is expected. SengGack.net wields bold-confident in a cottagecore frame — 18vw hero glyph, no hedging copy, no "Learn more" button, no apologetic light weights — proving that quiet aesthetics can carry big type. The hand-mended-linen-shirt-at-the-village-fair confidence. **Avoided patterns from frequency analysis (deliberately not used):** parallax (92%, omitted — the page sinks, it does not parallax), stagger animation (62%, omitted — counter-animate replaces it), spring easing (62%, omitted — water-resistance bezier replaces it), cursor-follow (50%, omitted — the visitor is a passive observer in the pond), magnetic hover (35%, omitted — there are no targets to magnetize toward), photography (95%, omitted — every visual is hand-built SVG), card-grid (55%, omitted — there are no cards), centered layout (72%, omitted — full-bleed is total), hand-drawn aesthetic (90%, omitted as a primary aesthetic — it is *only* used internally for the cottagecore floaters' line-quality, not as the overall site language), glassmorphism (65%, omitted — no frosted blur), warm palette (90%, transformed — warmth exists only at the top of the gradient, descending into deep reed-green, escaping the warm/honey monoculture). **Documented chosen seed:** *aesthetic: cottagecore (rare 7%), layout: full-bleed (popular 85%, used as total law not banner), typography: garamond-classic (rare 2%), palette: gradient (popular 90%, used as continuous 700vh sink not a hero band), patterns: counter-animate (rare 10%, elevated to architectural law), imagery: water-bubbles (rare 5%, used as bilingual content not decoration), motifs: floating-elements (zero in corpus — introduced here), tone: bold-confident (rare 7%, applied in cottagecore key).* The seed combines two saturated dimensions (full-bleed + gradient) with six rare-or-zero dimensions and reframes the saturated ones via the rare ones, producing a configuration unrepresented elsewhere in the 40-design corpus.