# Design Language for senggack.com ## Aesthetics and Tone **senggack** (생각) is the Korean word for *thought* — the silent interior movement of mind before words form. The site exists at the threshold between a thought and its utterance: that suspended instant of clarity that precedes speech, when an idea is still fully yours and the world has not yet touched it. The aesthetic is **Scandinavian brutalism warmed by candlelight** — the severe geometric restraint of Nordic modernism cracked open by one persistent amber glow. Think Alvar Aalto's library in Viipuri if it had been photographed by candlelight at 2 AM: pale birch, bare concrete, deep terracotta shadow, and one unsteady flame that makes all the geometry live. The mood is **introspective and bold simultaneously** — confident in its silence, deliberate in every negative space. No decorative excess. No cheerful rounded buttons. No "product" language. The site is a space for a single sustained thought — the visitor arrives, encounters the thought in its fullness, and leaves changed by it. The visual tone is how it feels to think clearly in a cold, beautiful room. Color temperature ranges from near-white birch through warm terracotta clay into near-black charcoal. The only warmth source is the candle motif — all yellows, oranges, ambers — and it appears against cool stone. This tension between Nordic cool and hearth-warm orange is the site's emotional engine. ## Layout Motifs and Structure The layout is **asymmetric with deliberate imbalance** — not chaotic, but the kind of asymmetry a careful architect produces when they decide one wall should hold more weight than the other. The page operates as a sequence of **five asymmetric panels**, each tilted between 0° and 3° from the horizontal axis using CSS 3D transforms, so the viewer never quite settles into a predictable reading rhythm. **Macro composition rule:** The viewport is divided on a 5:8 ratio — not 50/50, never centered. Text columns always occupy the narrower side; visual columns occupy the wider side. On alternating panels, the ratio flips, but it is always 5:8 or 8:5, never equal. The asymmetry is consistent, not random. **Panel anatomy:** - Panel 1 — Hero: The domain name `senggack` in full-screen Bebas Neue at ~22vw, left-aligned, its baseline touching the horizontal midpoint of the viewport. Below it, a single Korean character 생각 at 4vw in a hairline weight. No subheading. No CTA. The panel is tilted 1.5° clockwise and the background is the deepest charcoal `#1C1814`. - Panel 2 — The Thought Field: A full-width terracotta-to-bone gradient mesh background, with a block of text (up to 200 words) in Bebas-scale uppercase at 2.4vw, left-aligned at the 8-column mark, running the height of the viewport. The text column is tilted -1° (counter-clockwise) against the background tilt, creating a subtle cross-axis tension. - Panel 3 — The Candle: A near-full-bleed SVG candle animation — a single wax column, wick, and flame — centered horizontally but positioned at 60% of the panel height. The flame flickers via a CSS keyframe that subtly alters the flame path's `d` attribute using a WAAPI animation. The panel background is `#2B1F17`. - Panel 4 — Fragment Grid: An irregular grid of five floating text fragments in different sizes (ranging from 0.9rem to 6rem), each tilted at a different 3D angle (`rotateY(12deg)`, `rotateX(-8deg)`, etc.), creating a sense of thoughts suspended in mid-air at varying depths. The grid is explicitly NOT aligned to columns — fragments float in a field of `#EDE5D8`. - Panel 5 — Colophon: A minimal left-aligned signature panel in the darkest tone — domain, year, a single sentence. No social links. No footer nav. Bebas at 1.2rem, tracked wide at `letter-spacing: 0.3em`. **Spatial rhythm:** Negative space is the primary layout element. Every panel contains at least 50% empty field. Content is sparse and intentional — no filler, no repeated modules. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Primary Identity:** [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all caps, condensed grotesque with extreme personality. Used for the wordmark, panel headings, and the floating thought fragments. Set between 0.9rem and 22vw depending on context. Letter-spacing: tight (-0.02em) at large sizes, wide (0.3em) at small sizes. No mixed case — strictly uppercase. Weight: 400 (the only weight available). - **Body / Counterpoint:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono) — monospace, clinical, cool. Used for the Korean character 생각, for body text passages, and for the colophon. The monospace grid of DM Mono creates a programmatic coldness that offsets Bebas's warm expressiveness. Weight 300 italic for longer passages, 400 for labels. - **Accent / Korean Script:** The single Korean character `생각` is rendered in DM Mono to deliberately strip it of calligraphic warmth — this makes it foreign and immediate, a thought reduced to its skeleton. **Palette:** | Role | Name | Hex | |---|---|---| | Background (deep night) | Charcoal Ember | `#1C1814` | | Background (warm void) | Dark Clay | `#2B1F17` | | Background (bone) | Birch Pale | `#EDE5D8` | | Primary text (on dark) | Warm Cream | `#F5EDD8` | | Primary text (on light) | Charcoal | `#1C1814` | | Accent warm | Terracotta | `#C4622D` | | Accent warm bright | Amber Flame | `#E8893A` | | Accent warm glow | Candle Gold | `#F2C46D` | | Gradient mesh low | Clay Rose | `#B85C3A` | | Gradient mesh high | Pale Dune | `#E8D5B8` | All gradients in the gradient mesh use only the warm spectrum: `#B85C3A` → `#E8893A` → `#E8D5B8`, with mesh points controlled by CSS `background: radial-gradient` stacks at 4–6 focal points, creating an organic heat-map effect without photography. ## Imagery and Motifs **All imagery is SVG and CSS — no photography.** This is the sharpest departure from the corpus (photography 86%). The site contains exactly four types of visual element: 1. **The Candle (primary motif).** A single precise SVG candle: wax body in `#EDE5D8`, wax drip paths in `#D4C4A8`, wick in `#1C1814`, and a flame rendered as a compound path that morphs through three keyframes — straight, leaning left, leaning right — on a 2.4s infinite loop with `animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1)`. The flame fill is a radial gradient: `#F2C46D` at center, `#E8893A` midway, `#C4622D` at the outer edge, with `opacity: 0.92`. A glow is achieved via `filter: blur(18px)` on a duplicate flame element at `opacity: 0.35`, layered behind the crisp path. The candle does not have a holder, base, or plate — it sits alone in empty space, as if held by the air. 2. **The Gradient Mesh Background (Panel 2 and Panel 4).** CSS gradient mesh composed of 5 overlapping `radial-gradient` layers at different positions and radii, all using the terracotta-warm palette. The mesh is not a photograph — it is a pure CSS construction. It evokes warmth without depicting anything. The layers animate very slowly (60–90s loops) — focal points drift 3–8% of viewport width — creating a subtle breathing effect the visitor will only notice subconsciously. 3. **Floating Thought Fragments (Panel 4).** Five short phrases, each rendered as a pure text element in Bebas Neue, positioned absolutely in a viewport-relative coordinate system, each with a unique `transform: rotateX() rotateY() rotateZ()` combination. On scroll into view, each fragment transitions from `opacity: 0; transform: rotate3d(...) scale(0.85)` to `opacity: 1; transform: rotate3d(...) scale(1)` over 600ms with staggered delays (0ms, 120ms, 240ms, 360ms, 480ms). The 3D tilt is preserved post-reveal — fragments remain tilted, never snap to flat. 4. **The Typography Itself as Motif.** The wordmark `senggack` in Bebas Neue at 22vw is a visual object, not just text. It is treated as the primary hero image. No supplementary illustration, no icon, no logo mark beyond the letterforms. **No icons, no emoji, no stock illustration, no photography, no external image assets.** ## Prompts for Implementation **The story to tell.** A visitor arrives at senggack.com in the middle of the night. They have been trying to articulate something — a thought that keeps slipping away before they can name it. The page opens in the dark. The word `SENGGACK` fills the screen, enormous, commanding, slightly tilted — as if it arrived before they did. Below it, barely visible, the Korean: 생각. *thought.* The visitor scrolls. Warmth arrives — a gradient mesh the color of terracotta and dry grass, and in it, text that expresses one complete thought in precise language. They keep scrolling. A candle appears. Alone. Flickering. They watch it for a moment. They keep scrolling. Five fragments of thought hang in the air — each one an aperture into a different angle on the central idea. Then it ends: a single attribution, cool and narrow in the dark. **Implementation philosophy:** - The scroll is continuous and slow — `scroll-behavior: smooth` on the container, with each panel anchoring at 100vh minimum. - `perspective: 1200px` set on the `` or a `.stage` wrapper. All panel tilts use `transform: rotateX(Xdeg) rotateZ(Zdeg)` within this 3D context. - The tilt-3d pattern is applied at the panel level, not the element level (except for Panel 4 fragments). Panel rotations should be subtle: between 0.8° and 2.5°, never more. - Intersection Observer drives all reveal animations — no scroll-event listeners. - The candle SVG flame animation runs always (not scroll-triggered) once the panel enters the viewport. - Color scheme respects `prefers-color-scheme` only in one way: dark-mode is the default and only mode. No light-mode variant. - `font-display: swap` on all Google Fonts. Load `Bebas+Neue` and `DM+Mono:ital,wght@0,300;0,400;1,300` from fonts.googleapis.com. - No JavaScript framework. Vanilla JS only — under 4KB gzipped. - CSS custom properties for every palette value. The full palette lives in `:root`. **AVOID:** CTA buttons, pricing blocks, feature grids, testimonials, navigation menus, hamburger icons, stat counters, logo carousels, parallax background images (use CSS gradient animation instead), scroll-jacking, modal popups, cookie banners, sticky headers, form elements of any kind. **AVOID from frequency overuse:** centered layout (42% corpus — we use asymmetric throughout), photography (86% corpus — we use zero photography), vintage motifs (35% corpus — we use no vintage), minimal imagery (43% corpus — we use active gradient mesh and 3D fragment animation). ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Bebas Neue at 22vw as the primary hero image with no supplementary visual.** The corpus treats typography as layout element, but no other design makes the letterforms themselves the full-screen visual artifact — replacing hero photography, hero illustration, and logo mark simultaneously. At 22vw, `SENGGACK` is architectural, not typographic. 2. **Tilt-3D applied at panel level in a persistent 3D perspective stage, not as a hover micro-interaction.** The corpus uses `tilt-3d` (6%) almost exclusively as hover effects on cards. This site applies tilt at the macro composition level — entire panels are rotated in 3D space. The visitor's reading path is itself tilted, creating a sustained disorientation that is never resolved. 3. **Gradient mesh built entirely from stacked CSS radial-gradients with slow animated focal-point drift — no photography, no SVG, no Canvas.** The corpus achieves warmth via photography. This site achieves warmth via pure CSS geometry. The gradient mesh breathes (60–90s loops) in a way that evokes firelight without depicting it — a formal echo of the candle motif. 4. **Candle as sole motif with no competitor imagery.** No abstract shapes, no botanical illustration, no geometric patterns, no device mockups. The candle is alone. This restraint — one motif, maximum space around it — is the Scandinavian discipline applied to the atmospheric warmth of candlelight. No other registry entry attempts this degree of motif singularity. 5. **Korean language integrated typographically as a cold clinical element, not as cultural decoration.** 생각 in DM Mono strips the Korean script of its calligraphic warmth, treating it as a code token — the thought before it becomes language, rendered in the most unsentimental possible typeface. This is unprecedented in the registry. **Chosen seed:** aesthetic: scandinavian, layout: asymmetric, typography: bebas-bold, palette: terracotta-warm, patterns: tilt-3d, imagery: gradient-mesh, motifs: candle-atmospheric, tone: bold-confident **Patterns avoided (high frequency in corpus):** centered layout (42%), photography (86%), vintage motifs (35%), minimal imagery (43%), serif-revival typography (6%).