# Design Language for SengGack.xyz

## Aesthetics and Tone

SengGack.xyz — *생각*, the Korean noun for *a thought* — is **a sun-bleached afternoon when a thought escapes the page and floats up through warm air**. Where its sibling SengGack.com is a candlelit dark-academia oratory, the .xyz is its inverse: **light-academia uncoupled from gravity**. Picture the same Oxford reading room at 3:47 p.m. on the first warm Tuesday of April — the heavy curtains have been pulled back, sunlight is hitting linen-backed manuscripts at a low angle, and the dust motes that should have stayed suspended have learned to spell. Letters lift from the foolscap and drift across the room in slow, looping ascents. Sometimes a word shudders briefly — a glitch, a misremembering — then resolves.

The mood is **warm-inviting** in the manner of a kindly seminar tutor who has just poured tea, slid a sheaf of half-translated *생각* essays toward you, and said *"start anywhere — I'll catch up."* The .xyz suffix licenses experiment, so the academic apparatus is loose and curious: footnotes wander out of their margins, stamps come unfastened from the page, a single Korean syllable hovers somewhere off-axis like a moth that has decided the lampshade is a proposition.

This is the **soft glitch** — not the cyberpunk shatter, not the corrupted-VHS scream, but the *gentle slip* of a thought that almost completed itself and didn't. A page that almost stayed flat. A serif that almost finished its terminal. The aesthetic logic is: **everything that could be still is *almost* drifting.** Hold the cursor still for four seconds and the whole layout takes a slow, half-conscious breath upward by 6px.

The site does not sell anything, does not onboard anyone, does not collect emails. It is a **room you walked into to think**, where the room is itself thinking back at you, gently and a little distractedly.

## Layout Motifs and Structure

The structure is **minimal-navigation**: there is no header, no menu bar, no hamburger, no skip-link, no pagination, no footer-with-sitemap. There is exactly one navigational gesture available — **a 26px circular brass paperweight** in the lower-right of the viewport that, when dragged, becomes a persistent locator across the document and emits a faint warm halo. That is the entire navigation system. To move through the site, you scroll. To return, you drag the paperweight back to the top of its track.

Beneath this minimal chrome, the page is a **single vertical foolscap** — one continuous 1480px-wide off-white column centered in the viewport, padded with 18vw of cream void on either side. The column is **not a grid**. Content lives on the page the way ink does: it pools, it bleeds slightly, it leaves a faint shadow where it was almost placed somewhere else.

**The Floating Stratum.** Above the foolscap column floats an entirely independent layer of **detached typographic objects** — individual words, syllables, footnote markers, the occasional Korean glyph, a wax-seal stamp, a lone em-dash. These objects are CSS-positioned in a parallax-free *true float*: each has its own slow Lissajous trajectory (`x = A·sin(0.13t + φₓ)`, `y = B·sin(0.09t + φᵧ)`), bounded loosely to a 320×320px envelope around its anchor point. They do not respond to scroll; they respond only to time and to the cursor's distance. Approach within 80px and a floating word **becomes legible and slightly heavier** — as if the cursor is a warm hand and the letterform a piece of vellum reacting to it.

**The Five Thought-Stations.** The foolscap is divided not by sections but by five **stations** the eye arrives at as it descends. They are not headed by titles; they are marked by a single floating *paper-clip* that has come unmoored from its margin and is rotating gently at 0.8°/s.

  1. **Inkwell** (0–110vh) — the page begins blank. A single drop of *thought* falls from above the fold and spreads as soft warm radial gradient #F4D7A8 → transparent. The word *생각* fades in, drifts upward 24px, and almost — but not quite — escapes the top of the column.
  2. **Marginalia** (110–230vh) — handwritten Korean glosses materialize in the left and right voids beside the foolscap, pencil-grey and 0.6 opacity. They are real translations, real fragments — never filler text.
  3. **The Glitch Field** (230–340vh) — a single English paragraph in the center column undergoes recurring **soft chromatic-aberration glitches**: every 7.3s a random 14-character span splits into red/cyan offsets of 3px for 110ms, then resolves with a tiny upward shimmer. The text remains readable throughout.
  4. **Levitation** (340–470vh) — the foolscap column itself appears to lose 0.4kg of paper-weight: its shadow softens, its top edge floats free, and the paragraphs inside it begin to settle 1–3px below their typographic baselines, like words half-asleep. Floating syllables increase in density.
  5. **Letting Go** (470–600vh) — the page ends without ceremony. The last paragraph dissolves letter-by-letter upward into the floating stratum, joining the drift. There is no "next." There is only the empty cream void and the brass paperweight, still warm.

**The Asymmetric Cream Voids.** The 18vw side margins are not symmetric. The **right margin is always 2vw wider than the left**, an asymmetry that exists only to remind the page it is a page and not a wireframe. Floating objects exit and re-enter through these voids, which is why they are intentionally over-large.

## Typography and Palette

**Typography (Google Fonts only):**

- **Display / kinetic letterforms:** **Cormorant Garamond** italic, weights 300 and 500. Used at 9.5rem for the four-letter Hangul block *생각* and at 4.2rem for the station-marker words (*Inkwell*, *Marginalia*, *Glitch*, *Levitation*, *Letting Go*). The kinetic behavior is encoded glyph-by-glyph: each character is wrapped in a `<span>` with a unique CSS animation phase, and the glyphs **breathe** on a 9-second sinusoidal cycle — `transform: translateY()` of ±2.4px and `font-variation-settings 'opsz'` micro-shifts of ±1.5 units. The breathing is desynchronized across glyphs by a 0.18s phase offset, so a word never moves as a block; it moves like a small flock of starlings.
- **Body / Korean and English in equal weight:** **Noto Serif KR** weight 400, line-height 1.84. Korean glyphs are not afterthoughts — they are typeset at the same optical size and on the same baseline as the English. The body is set at 1.06rem on the foolscap column, with paragraph indents of 1.4em (a literary, not a web, convention).
- **Marginalia / handwritten glosses:** **Caveat** weight 500, set at 1.18rem in `#8A7855` at 0.62 opacity. Used only in the left and right voids of the *Marginalia* station and as the floating stratum's translation hovers.
- **Mono / annotations / the brass paperweight's coordinate readout:** **JetBrains Mono** weight 300, set at 0.78rem in `#5A4A38`. Used sparingly: footnote anchors, the y-position display on the paperweight, and the timestamp in the inkwell drop.

**Palette — the warm-academic gradient, but reversed.** The corpus shows `gradient` at 90% and `warm` at 90%; the differentiator is therefore not *whether* gradient and warm appear, but *how*. Where most warm gradients descend from gold to terracotta, this site's gradients **all rise** — they are vertical, low-saturation, and oriented from the lower-warm to the upper-pale, as if the page itself is being slowly bleached by an afternoon sun.

| Role | Hex | Used for |
|---|---|---|
| Page void (cream) | `#F4EBD8` | the 18vw margins, the foolscap base |
| Column foolscap (paler cream) | `#F9F2E1` | the 1480px reading column |
| Sun-warmed top edge | `#FFD7A1` | the upper 12vh of every station, soft radial bleed |
| Honey-amber accent | `#E8A85A` | the brass paperweight, footnote anchors |
| Ink-brown body text | `#3D2E22` | Noto Serif KR body, the *생각* glyphs at rest |
| Pencil-grey marginalia | `#8A7855` | Caveat handwritten glosses |
| Glitch red (chromatic offset only) | `#E04A4A` | the +3px channel during glitch events |
| Glitch cyan (chromatic offset only) | `#4AC4E0` | the −3px channel during glitch events |
| Wax-seal vermilion | `#B23A2A` | a single decorative stamp, used exactly twice |

The two glitch chromatics are the only **cool** colors in the entire palette. They are forbidden from appearing as fills — they exist exclusively as 110ms RGB-split offsets during glitch events, and never persist.

The signature gradient is `linear-gradient(0deg, #F4EBD8 0%, #F9F2E1 60%, #FFD7A1 100%)` — applied as the page background and re-quoted at 8% opacity inside every floating element so they all carry a shard of the same warm sky.

## Imagery and Motifs

**There is no photography. There are no people. There are no icons.** The visual vocabulary is composed of six hand-built primitives, all rendered as inline SVG or CSS so they animate at native fidelity and respond to time, not to scroll.

**1. Organic Blobs as Soft-Light Patches.** The page carries five very large (380–620px), very soft (`filter: blur(64px)`, `opacity: 0.42`) **organic blobs** in `#FFD7A1` and `#F4D7A8`, drifting through the cream voids on independent 38–62 second loops. They are made from a single SVG `<path>` with seven control points being interpolated through a sinusoidal morphing shader (CSS `path()` keyframes, 8 frames, eased). They look like sunlight through linen — never hard-edged, never lit from a fixed direction, never quite the same shape twice. They are the **only** imagery on the page, and they do almost all the visual work.

**2. Floating Elements (the Stratum).** Detached typographic objects — described above — are the second imagery primitive. Each carries a 0.5px hairline shadow in `#3D2E22` at 12% opacity, displaced 4px down and 6px right, so it reads as **above the page, not on it**. There are seven canonical floating glyphs that recur across stations: 생, 각, *thought*, *—*, ¶, †, and a single hand-drawn comma.

**3. The Wax Seal.** A single procedural wax-seal stamp in `#B23A2A` appears twice on the entire site — once at the bottom of the *Inkwell* station, once at the very end of *Letting Go*. The seal is generated as an SVG with three layers: a base octagon with a 2px edge-noise displacement, an interior crest of three concentric circles, and a 1px highlight arc on the upper-left to imply pressed wax. It is the **only fully saturated color** in the design.

**4. The Brass Paperweight.** A 26px circle with a radial gradient from `#E8A85A` core to `#9B6E2E` rim, carrying a single 0.5px specular highlight at 320° and a soft 8px outer shadow. When dragged, it leaves a 18px-trail of warm afterimage that decays over 600ms — a small, satisfying drag tail. It displays its current document `y` in JetBrains Mono at 0.72rem, like a navigator's depth-readout.

**5. Pencil-Drawn Margins.** The foolscap column has a 0.5px pencil-stroke border on its long sides only — drawn as an SVG `<path>` with a `stroke-dasharray` of `0.6 1.2 0.4 1.8` to emulate the stutter of a graphite pencil over slightly textured paper. The border does not enclose the content; it accompanies it.

**6. The Inkwell Drop.** A single radial-gradient bloom at the top of the page, animated once on load: a 12px circle of `#3D2E22` at full opacity descends for 1.2s with `cubic-bezier(0.4, 0, 1, 1)`, contacts an invisible baseline, and **blooms outward** into a 380px soft warm radial gradient over 2.6s. This animation runs exactly once per page load and is the site's only opening ceremony.

There are **no rectangular cards**, no buttons with rounded corners, no glassmorphic panels, no grid lines visible to the user. The only rectangles in the design are the foolscap column and the typography itself.

## Prompts for Implementation

Build SengGack.xyz as **a single immersive scroll** that performs the act of thinking under afternoon sunlight. The site is not a product — it is **a four-and-a-half-minute room** that the visitor has agreed to be inside. Every interaction should feel like reaching toward a half-formed idea: gently, without expectation, and with a willingness to let it drift.

**Mandatory storytelling sequence — five stations, in order, no nav skipping:**

1. **Inkwell (0–110vh).** Page loads on `#F4EBD8`. After a 200ms hold, the inkwell drop falls and blooms — the only fixed, scripted animation in the site. As the bloom completes, the word `생각` materializes in Cormorant italic at 9.5rem, ink-brown, dead-center horizontally, 64vh from the top. Each glyph begins its breathing cycle. After 4 seconds of held silence, the word drifts upward 24px and then resumes its sinusoidal idle. A small JetBrains Mono timestamp fades in beneath, in `#5A4A38` at 0.62 opacity, reading the user's local time — *this is the moment the thought was had*.

2. **Marginalia (110–230vh).** As the foolscap column scrolls into view, **handwritten Caveat glosses materialize** in the left and right cream voids. They are not decorative — they are real fragments of essays on Korean philosophy, translation, and thought, set at 1.18rem and 0.62 opacity in `#8A7855`. Each gloss enters with a 320ms `stroke-dasharray` reveal as if being written in real-time. The center foolscap holds three short body paragraphs in Noto Serif KR — bilingual, alternating Korean and English clauses — describing the etymology of *생각*. There must be at least one Korean sentence per paragraph. No translations in parentheses. **Korean and English are typeset as equals.**

3. **The Glitch Field (230–340vh).** The center paragraph in this station is set in slightly looser leading (1.96 line-height) and contains the substantive philosophical core of the page — a meditation on whether a thought half-remembered is the same thought. Every 7.3 seconds, a random 14-character contiguous span within the paragraph **glitches**: it splits into a red channel (`#E04A4A`, +3px x-offset) and a cyan channel (`#4AC4E0`, −3px x-offset) for exactly 110ms, then resolves with a 1.4px upward shimmer over 220ms. The glitch must never make the text unreadable. Use `text-shadow` with two offset color layers, animated via JS `requestAnimationFrame`. Never CSS `filter: hue-rotate` — that destroys the surrounding warmth.

4. **Levitation (340–470vh).** The foolscap column itself **loses gravity** — apply a smooth scroll-driven `transform: translateY(-12px)` and a `filter: drop-shadow(0 24px 48px rgba(61, 46, 34, 0.06))` interpolated from the previous station's `drop-shadow(0 6px 12px rgba(61, 46, 34, 0.10))`. Inside the column, individual words begin **misaligning with their baselines** — every fourth word in the body text receives a `transform: translateY(±1.8px)` keyed to its index. This must feel like the *paper itself is becoming aware of itself*. Floating-stratum density doubles in this station: more drifting glyphs, denser Lissajous patterns, the brass paperweight's halo brightens to acknowledge it.

5. **Letting Go (470–600vh).** The final paragraph **dissolves letter-by-letter** into the floating stratum. Use a JS routine that, on this station entering 80% viewport, walks the paragraph's text nodes, wraps each character in a `<span>`, and over the next 6 seconds detaches them one at a time (left-to-right, with a 14ms cascade), animating each glyph upward and slightly outward over 2.8s with `cubic-bezier(0.22, 0.61, 0.36, 1.0)` while fading to 0 opacity. After the last glyph leaves, the wax-seal stamp materializes in vermilion `#B23A2A` at the foot of the page, applied with a 180ms scale-and-rotate "press" animation. There is no "next page" link, no email signup, no footer copyright. The page **ends with the seal**.

**Cross-cutting interactions:**

- **The cursor as warm hand.** Every floating glyph and every footnote anchor responds to cursor proximity. Within 80px the glyph **gains weight and opacity** (Cormorant `font-variation-settings: 'wght' 500`, opacity 1.0). Beyond 80px it idles at weight 300 and opacity 0.74. Transition over 240ms. No magnetic snap — the glyph never moves toward the cursor; only its visual presence shifts.
- **The brass paperweight (entire navigation system).** Drag the 26px brass disc up or down its right-edge track. Its `y`-position controls a `scrollTo(documentY)` so the document follows. While dragging, a 0.78rem coordinate readout appears beside it: `0.428` (a normalized 0-1 progress). The track is unmarked. Release the disc and the page settles with a 380ms ease-out.
- **The four-second breath.** If the cursor remains stationary for ≥4000ms, the entire page takes a single slow inhale — `transform: translateY(-6px)` over 2.4s ease-in-out, then a 2.0s release back. This happens at most once every 14 seconds. It is a signal: *the room is still thinking.*
- **Glitch is contagious only in Glitch Field.** The chromatic-aberration glitch must not bleed into any other station. It is the *one* place the warm equilibrium is disturbed.

**Prohibitions:**

- **No CTAs.** No "Get Started," "Learn More," "Sign Up," "Subscribe," or button-like elements anywhere on the page.
- **No pricing, no plans, no tiers.** This is not a product surface.
- **No stat-grids.** No "10,000 thoughts logged" counters or any numerical bragging.
- **No card-grid.** No bento-box. No sidebar. No header. No menu.
- **No photography, no people, no AI portraits, no stock libraries.**
- **No hard-edged shapes** other than the foolscap column outline and the typography.
- **No cool colors** except the 110ms glitch-channel offsets.
- **No dark mode.** This site is daylight or it is nothing.
- **No emoji, no flags, no decorative iconography.** Only the wax seal, used exactly twice.

**Technical fidelity requirements:**

- All animations must respect `prefers-reduced-motion: reduce` by replacing the floating stratum's Lissajous motion with a static rendering (glyphs stay where their anchor + initial phase placed them) and disabling the glitch field. The breath, the dissolve, and the wax seal remain.
- The five stations must hand off scroll position without snap-points — this is a **smooth single-document read**, not a slideshow.
- Korean glyphs must use Noto Serif KR explicitly with `font-feature-settings: "kern" 1, "calt" 1` so the text **honors** the language, not transliterates around it.

## Uniqueness Notes

This design's **eight differentiators**, each chosen against the frequency analysis and against the sibling SengGack.com:

1. **Light-academia (7% prevalence) executed as a *floating* room, not a bookshelf.** The two existing light-academia designs in the corpus (MMIDDL.com, PPSS.ee, SSETTL.com) read as *seated* spaces — desks, reading rooms, equilibrium. SengGack.xyz is light-academia *mid-levitation*: the same warmth, the same Cormorant-and-Noto-Serif-KR typographic dignity, but with the page's relationship to gravity actively decaying across the scroll. No other light-academia design in the corpus has its column come unmoored.

2. **Glitch (10% prevalence) as a *warm* event, not a cyberpunk one.** Every other use of glitch in the corpus is paired with cyberpunk, vaporwave, or dark aesthetics. Here, glitch is paired with light-academia and warm-inviting tone — the chromatic aberration is a 110ms event inside a Cormorant-typeset Korean-philosophy paragraph on cream foolscap. It reads not as system corruption but as **the soft hesitation of memory**.

3. **Gradient (90% prevalence) reframed as *one* upward warm bleach.** The dominant gradient pattern in the corpus is descending warm-to-warmer or warm-to-dark. SengGack.xyz uses a single gradient direction — *upward, low-saturation, 60% terminator* — applied at 8% opacity inside every element, so the gradient is not a *design choice* but the *physics of the room*. The page is being bleached by a low afternoon sun.

4. **Floating-elements as a true independent layer with Lissajous trajectories.** Across the 40-design corpus, *floating* effects exist only as parallax (92% prevalence) — i.e., scroll-driven y-translation. SengGack.xyz's floating stratum is **scroll-independent**: glyphs move only with time and cursor proximity, computed via two independent sine functions. This is the only design in the corpus where typographic objects orbit their anchors *while the user is not interacting at all*.

5. **Organic-blobs (7% prevalence) as soft-light, not as decoration.** The few existing uses of organic-blobs in the corpus deploy them as colored shapes on neutral grounds — explicit, opaque, foregrounded. SengGack.xyz uses them at `blur(64px)` and 42% opacity, so they are imperceptible *as objects* and read instead as *the soft-light of an afternoon*. The blobs do the visual work of a window.

6. **Kinetic-animated typography (5% prevalence) as *desynchronized breath*, not as marquee or wipe.** Most kinetic typography in the corpus is text-on-arrival (typewriter, slide-in, character-stagger reveal). SengGack.xyz's kinetic behavior is **persistent, idle, ambient** — every glyph in the display words is breathing on a 9-second sinusoidal cycle with a per-glyph 0.18s phase offset, so the word never moves as a block. It moves like a small, half-asleep crowd.

7. **Minimal-navigation enforced as a single draggable brass disc.** The corpus's "minimal" sites still ship a header link or a hamburger. SengGack.xyz has **literally one navigational affordance**: a 26px brass paperweight you drag up and down the right edge of the viewport. There is no menu, no logo-link-home, no skip-link, no back-to-top. The disc *is* the entire navigation system, and it doubles as a position-readout instrument.

8. **The site ends, deliberately, with letters leaving the page.** No CTA. No newsletter. No "view next site." No social links. The final paragraph dissolves character-by-character upward into the floating stratum, and a single wax seal is pressed at the foot of the page. This rejects the dominant corpus pattern of terminal CTAs and stat-grids (forbidden in instructions) and embraces the seed's *warm-inviting* tone literally — the visitor is invited to stay for the duration of one thought, and then to leave with it.

**Chosen seed (from assignment):** *aesthetic: light-academia, layout: minimal-navigation, typography: kinetic-animated, palette: gradient, patterns: glitch, imagery: organic-blobs, motifs: floating-elements, tone: warm-inviting.*

**Avoided patterns from frequency analysis:** photography (95%, banned entirely from this design); card-grid (55%, replaced by a single foolscap column); cursor-follow magnetic motion (50% / 35%, replaced by proximity-only weight/opacity changes with no displacement); centered hero with CTA (corpus default, banned); footer with sitemap (corpus default, banned); parallax as the dominant motion language (92%, replaced by time-driven Lissajous floats independent of scroll). Where the corpus over-relies on warm gradients descending into terracotta or oxblood, this design uses a single upward bleach gradient at 8% opacity per element. Where the corpus's dark-academia and light-academia cluster around photography of libraries and candles, this site uses zero photography and one wax seal — **all academic warmth, none of its props.**
<!-- DESIGN STAMP
  timestamp: 2026-05-09T06:43:51
  domain: SengGack.xyz
  seed: against the frequency analysis and against the sibling senggack
  aesthetic: SengGack.xyz — *생각*, the Korean noun for *a thought* — is **a sun-bleached after...
  content_hash: beb0816f8f05
-->