# Design Language for SengGack.org ## Aesthetics and Tone SengGack.org — *생각*, the Korean noun meaning **"thought"** — is rebuilt here as a **neomorphic thought-foundry**: a non-profit civic-thinking organization rendered as a single soft-pressed monolith of plum velvet, where every idea, every dissent, every footnote rises out of the surface or sinks into it as if pressed into clay. The `.org` suffix is deliberate; this is the **public commons of thinking**, not a product, not a personal essay. Imagine the neon-jewel interior of a 1960s Soviet metro station crossed with a Braun calculator from 1972, then run through a velvet noise-grain filter — that is the visual mood. Soft shadows, raised pads, sunken slots, and **never, ever a hard edge**. The tone is **energetic** — not aggressive, not corporate-cheerleader-energetic, but the kinetic, slightly-impatient buzz of a roomful of thinkers who keep finishing each other's sentences. The page wants to be *used*, prodded, pressed, dragged. Buttons want to be punched in. Cards want to flip. Underlines want to draw themselves under every word the visitor's eye hovers over. Nothing is static for longer than 1.4 seconds. Three uncompromising mood pillars: 1. **Soft physical truth.** Every surface obeys a single light source at 135° (top-left). Highlights live there; shadows live opposite. The site looks **carved, not drawn**. If you screenshot any region and zoom 400%, you should still feel the bevel. 2. **Public-commons gravitas without the librarian-shush.** This is not dark-academia. SengGack.org is loud about thinking. Headlines yell in jewel-saturated emerald and amethyst; serifs are kicked aside in favor of an **eclectic-hybrid** voice that jumps between display-grotesque and a Korean rounded-sans within a single sentence. 3. **Grid-lines as architecture, not decoration.** A faint diamond lattice is etched into the velvet ground at 8% opacity. Every neomorphic pad snaps to it. The lattice is the **public square's flagstones** — communal, geometric, undeniably there. This is the SengGack family member that **shouts in jewel-tones**. (Compare to SengGack.com, which whispers in oxblood and serif.) ## Layout Motifs and Structure The layout is **diagonal-sections**, executed at exactly **−18°** clockwise from horizontal. This is not subtle. Every major section is a parallelogram slab, sliced through the viewport edge-to-edge, sliding past the next section in alternating directions like the gears of a tilted typewriter. The diagonals are **structural**, not decorative — page anchors, scroll snap-points, and color regions all align to the same 18° axis. **Eight diagonal slabs, in mandatory scroll order:** 1. **The Foundry Plate (0–100vh).** Full-bleed plum velvet with the diamond lattice. The wordmark *생각.org* sits inside an enormous neomorphic pad, raised 14px off the surface, beveled at 18° so the highlight runs *along* the section diagonal. 2. **The Manifesto Slot (100–200vh).** The slab tilts the *opposite* way — +18°. A long sunken trough holds a 6-line manifesto in 18° rotated typesetting. Reading it requires a slight head-tilt; this is the point. 3. **The Lattice (200–300vh).** Pure grid-lines section. Twelve neomorphic pads arranged on the diamond grid, each labeled with a verb of cognition: *doubt, refute, append, redact, cite, dissent, agree, abstain, withdraw, propose, sleep-on-it, recant*. 4. **The Corridor (300–400vh).** Horizontal-scroll inside vertical scroll: the slab opens into a sideways corridor of recessed thought-cards. Drag-scroll only. Mouse-wheel within the slab pans horizontally. 5. **The Kiln (400–500vh).** A single enormous neomorphic dial — a thinking-temperature gauge from "cool reflection" (deep sapphire) to "white-hot debate" (molten amber). The dial is draggable; the page background **shifts hue** in response. 6. **The Dissent Drawer (500–600vh).** A pull-out neomorphic drawer that contains *contrary opinions to whatever the visitor just dragged the dial to*. Energetic friction. 7. **The Open Forum (600–700vh).** A diagonally-tiled floor of 36 small neomorphic submission slots. Each slot is a deflate-on-click depression that reveals a public micro-essay (≤140 words). 8. **The Press (700–800vh).** Final slab. A single colossal velvet button labeled `PRESS TO TRANSMIT YOUR THOUGHT`. On press, the button sinks 22px, the page does a single 4° rotational shake, and a typewriter-effect prints the visitor's submission across the diagonal. **No section uses a 0° horizontal baseline.** The footer itself is sliced at 18°, with the copyright text running along the slope. **Spatial system:** - 16-column **diagonal grid**, columns oriented at −18° to vertical. - Vertical rhythm in 18px, 36px, 72px (3-step modular scale, tied to the slope angle). - All rounding: **24px** on outer corners, **12px** on inner sunken slots — never zero, never less than 8. - Section transitions are **slide-shear** (CSS `clip-path: polygon(...)` keyframes); content slides while the diagonal mask shears past it. Never a fade. ## Typography and Palette **Fonts (Google Fonts only — eclectic-hybrid pairing of four):** - **Display / verbs / wordmark:** `Bricolage Grotesque` weight 800, optical size 96, used at 7rem–14rem. Its slightly-irregular character widths sit perfectly on the diagonal — letters appear to lean *into* the slope. - **Display alternate / pull-quotes:** `Fraunces` italic weight 600 with `opsz` set to 144 and `SOFT` axis at 100. Used **only** for words borrowed from another language inside an English sentence (and vice versa). The two displays alternate within a single line, hybridizing rather than choosing. - **Body / commentary / Korean ground:** `Gowun Dodum` regular for Korean, `Inter` 17pt weight 400 for English, locked to the same 1.62 line-height so the two scripts share a baseline rhythm. Korean and English are typeset **as equal partners** — neither gets caption status. - **Monospaced punctuation / annotations / debug captions:** `JetBrains Mono` weight 500 — used in lower-case for footnotes, citation IDs, and the dial's numerical readouts. Provides the only square-cornered character in an otherwise rounded type system. Display tracking: `Bricolage Grotesque` runs at letter-spacing −0.025em (tight, energetic). Body runs at +0.005em (a hair open, for readability across English/Korean/Romaja code-switching). **Palette — jewel-tones, eight colors total:** - `#2A0E33` — **Plum Velvet (ground)**. The base surface. All neomorphic shadows are computed from this hue. - `#3F1B4D` — **Amethyst Lift**. The +Y highlight color for raised pads. - `#1A0820` — **Onyx Sink**. The -Y shadow color for sunken slots. - `#0F8B6E` — **Emerald Verdict**. Primary accent. Used on the wordmark, the Press button, and any "agree/transmit" affordance. - `#C72A6B` — **Garnet Dissent**. Secondary accent. Used on contrary-opinion drawers, the Dissent Drawer's pull-handle, and any retraction marker. - `#E8B339` — **Topaz Spark**. Tertiary accent. Reserved for the Kiln dial's hot-end glow and for typewriter cursor blinks. Maximum 2% of any viewport. - `#3CA3D9` — **Sapphire Cool**. Tertiary accent. The Kiln dial's cool-end glow; also the underline-draw pen color on hover. - `#F4ECE0` — **Bone Paper**. The single near-white in the system. Used for body type set on plum velvet at 92% opacity (never 100%, never pure white). **Underline-draw pen:** every English word above 0.95rem on hover gets a hand-drawn `path-draw-svg` underline animated over 320ms — `#3CA3D9` Sapphire Cool, 2px stroke, slight 4° wobble that mirrors the section's diagonal. Korean words get a horizontal underline drawn *below* the syllable block instead of below the line. ## Imagery and Motifs **No photography. No people. No 3D renders. No AI-generated stock.** The visual vocabulary is built from five hand-built primitives, all rendered as SVG, CSS, or Canvas2D so they animate at native fidelity. **1. Noise-texture velvet ground.** A full-page Canvas2D layer renders a pre-baked gaussian-noise PNG at 2× density, blended `multiply` at 14% opacity over the plum base. The noise has a slight directional bias along the −18° axis — running your eye along the slope reveals faint ridges, like brushed plum suede. **This noise is non-negotiable; the entire neomorphic illusion collapses without it.** **2. Diamond grid-lines lattice.** A repeating 64×64px SVG pattern of **interlocking diamonds**, etched at 1px stroke, `#3F1B4D` at 8% opacity, oriented to the −18° section axis. The lattice gains opacity (up to 22%) inside any sunken trough — an embossed-grid visible *inside* the slot but faint outside it. **3. Neomorphic pads & slots.** Every interactive element is one of two primitives: - **Pad (raised):** `box-shadow: 14px 14px 28px #1A0820, -10px -10px 22px #3F1B4D, inset 0 1px 0 rgba(244,236,224,0.06)`. Always rounds at 24px. - **Slot (sunken):** `box-shadow: inset 12px 12px 24px #1A0820, inset -8px -8px 18px #3F1B4D`. Always rounds at 12px. The two primitives never mix on the same element. Hovering a pad **does not lift it more** — it instead presses the surrounding noise-velvet *down* by raising surrounding shadow blur, which is more energetic and surprising. **4. The Kiln dial.** A single colossal neomorphic dial, 480px diameter, drawn as an SVG with twelve detent ticks. The dial's pointer is a beveled needle in `#E8B339` Topaz Spark when hot, transitioning to `#3CA3D9` Sapphire Cool when cold. Drag-rotation is constrained to ±150° from straight up. The dial's glow halo is a `radial-gradient` that **bleeds onto adjacent diagonal slabs**, dyeing the noise-velvet a shade warmer or cooler. This is the only color-shifting element on the site. **5. The Energetic Underline-Draw.** SVG paths drawn live with `stroke-dasharray` keyframes. Wobble curve is generated on hover from a Perlin-noise seed tied to the word's character offset — the same word always wobbles the same way, a deterministic flourish. Korean syllables get a *boxed* underline (a tiny rectangle drawn under each block); English words get a *line* underline. **Forbidden imagery:** photography, library shelves, candles, leaves, fish, marble texture, glassmorphic blur, stock library photography, AI-generated faces. None. Ever. ## Prompts for Implementation Build SengGack.org as **a single immersive eight-slab tilted-scroll**, telling the story of one civic thought from proposal to public transmission. The site is not a product page; it is **a public commons of thinking, sliced at 18° and pressed into velvet**. **Mandatory storytelling sequence — eight diagonal movements, in order, no nav skipping:** 1. **The Foundry Plate (0–100vh).** Page loads at full plum velvet. Over 1.6s, the noise-texture fades up. The diamond lattice etches itself line-by-line (a `path-draw-svg` rolling from upper-right to lower-left along the −18° axis, 280ms). Once the lattice is in, the wordmark `생각.org` rises out of the surface as a single neomorphic pad, with shadow keyframes simulating the pad being **stamped from below** rather than placed from above. The Korean glyph is in `Bricolage Grotesque` (yes — Latin display set to render the Korean as a transliterated *생각* shape via SVG path; the *.org* runs in `Fraunces` italic). Subtitle in 1.05rem Bone Paper: "*공공의 생각이 모이는 곳 — a public commons of thinking.*" 2. **The Manifesto Slot (100–200vh).** The slab tilts to +18°. A long sunken neomorphic trough is carved across it. Inside the trough, a six-line manifesto is typeset at +18° (so it reads horizontally against the slab, but diagonally against the screen). Each line is a single sentence: *"To think is a public act."* *"To dissent is a public act."* *"To revise yesterday's thought is a public act."* *"To withhold a thought is a private act, and you are still welcome here."* *"To press TRANSMIT is a permanent act."* *"To delete a transmission is to ring a bell that everyone heard."* The manifesto is etched, not displayed — it appears as if the velvet itself were stamped. Hover any word: underline-draw fires in Sapphire Cool. 3. **The Lattice of Verbs (200–300vh).** Twelve neomorphic pads on the diamond grid, each holding one verb of cognition (*doubt, refute, append, redact, cite, dissent, agree, abstain, withdraw, propose, sleep-on-it, recant*). Hovering a pad **presses the surrounding velvet down by 6px** (not lifting the pad — energetic inversion). Clicking a pad pins it; the pad sinks into a slot, and a 90-character definition rises out of the **adjacent** pad. Verb pads can chain: pin three in a row to construct a sentence. Pinned verbs persist across the rest of the scroll as a small floating reading-strip in the upper-right corner — the visitor's improvised manifesto. 4. **The Corridor (300–400vh).** Vertical scroll locks; horizontal scroll opens. A long horizontal trough holds 24 recessed thought-cards, each a sunken slot containing a single 80-word public micro-essay submitted by a (fictional, stylized) participant. Cards are dragged like piano keys — pulling one toward you tilts it forward and a typewriter-effect annotation appears in the margin. The corridor must scroll smoothly via wheel-to-pan with a 320ms easing curve; trackpad horizontal gestures pass through. 5. **The Kiln (400–500vh).** Vertical scroll resumes. The dial dominates. Drag the needle: the page background hue shifts on a continuous gradient from `#1A2A4D` (cool-thinking sapphire) through plum to `#4D2A1A` (hot-debate amber). The dial's audio-cue (a soft electrical hum, single sine wave) is **optional and off by default**; toggle is a small neomorphic switch on the dial's chassis. The dial's reading is also bound to the URL hash, so a visitor can share `senggack.org/#kiln=72` and the recipient lands on the same temperature. 6. **The Dissent Drawer (500–600vh).** A neomorphic drawer-pull (Garnet Dissent handle) protrudes from the slab's edge. Drag the handle outward: the drawer slides open with a 420ms spring, revealing **opinions contrary to whatever the visitor pinned in slab 3 + dialed in slab 5**. The contrary opinions are pre-written for every dial-temperature × verb combination and selected dynamically. This is the site's most kinetic moment: the spring-overshoot is exaggerated to 12% past target, then settles. Energetic, never settled. 7. **The Open Forum (600–700vh).** A diagonally-tiled floor of 36 small neomorphic deflate-on-click slots. Each slot, when pressed, depresses with a 220ms ease and reveals a 140-character public submission. A "+ add yours" slot is always present at position (4,7) on the lattice. Submissions are local-storage only (no backend in this prototype) but the visual contract is full-fidelity: the page **typewriter-effect-prints** the new submission into the next empty slot on press. 8. **The Press (700–800vh).** Final slab. A single colossal velvet button — 60% of viewport width, 22vh tall, neomorphic raised at 22px — labeled `PRESS TO TRANSMIT YOUR THOUGHT` in `Bricolage Grotesque` 800 at 4.5rem, Emerald Verdict on Bone Paper. On press: the button **sinks the full 22px in a single 280ms easeIn-back curve**, the entire page does one 4° rotational shake (300ms cubic-bezier wobble), and a typewriter-effect prints the visitor's pinned-verb-sentence across the diagonal of the slab in 24pt Fraunces italic. The transmission stays on screen for 6 seconds, then the typewriter *un-types* it character by character — leaving only an underline-draw flourish behind. **Animation budget (every section):** - All transitions ease at `cubic-bezier(0.34, 1.56, 0.64, 1)` (slight overshoot — energetic). - All neomorphic shadow transitions: **140ms**, never less, never more. This is the system's heartbeat. - All section-shear transitions on scroll: 480ms, masked by `clip-path` polygons matching the −18° axis. - Scroll velocity above 2200px/s briefly **doubles the noise-grain density** as a visual smear cue. Slow back down and it relaxes. **Storytelling rules:** - The cursor leaves a small 6px Sapphire Cool dot trail with a 90ms decay — it's the visitor's own thought-trail, painting onto the velvet. - The diamond lattice never disappears. Every section sits on the same flagstones. - No CTA buttons except the final TRANSMIT. No pricing blocks. No "Our Team." No stat-grids. No testimonials. No FAQ. No newsletter signup. - No nav menu in the conventional sense — instead, eight neomorphic divot-markers along the right edge, one per slab, each labeled with a Roman numeral (`I`–`VIII`) in JetBrains Mono. Press a divot to scroll-snap. - The site loads with `prefers-reduced-motion`-respect: the 4° page shake becomes a single 0.5° pulse; the spring drawer becomes a linear slide; the noise-grain remains. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from monorepo defaults: 1. **Neomorphism executed without the usual gray malaise.** The frequency analysis shows neomorphism barely registers in this monorepo. SengGack.org pairs it with **jewel-tones plum/emerald/garnet/topaz** instead of the gray-on-gray that gives neomorphism its "soft-but-boring" reputation. The result is **opulent neomorphism** — velvet, not pillow. 2. **Diagonal-sections at a strict −18° axis, used as structure not flourish.** Diagonal-sections sits at zero in the monorepo's layout frequency. Every slab, every grid, every footer-rule, every shadow gradient on this site agrees on one angle. The site is **mathematically tilted**, not "designed with some diagonals." 3. **Eclectic-hybrid typography that mixes Bricolage Grotesque + Fraunces *within a single sentence*.** Most sites that claim hybrid typography just use one display + one body. SengGack.org alternates display faces *by language-of-origin* inside running text. Code-switching glyphs are typographic citizens. 4. **Underline-draw as the *only* hover affordance.** No color shift, no scale, no background-fill, no glow. The interaction vocabulary is reduced to a single hand-drawn pen wobbling under each word. Once you see it once, you know exactly what is hoverable everywhere — every word, no exceptions. 5. **Noise-texture as load-bearing, not decorative.** Most sites use noise as a finishing-touch overlay. Here the noise is the **physical substrate** — remove it and the neomorphism reads as flat blob. The noise is computed once, served as a static PNG, and tiled with directional bias along the section diagonal. It is the velvet itself. 6. **Grid-lines as public-commons flagstones.** The diamond lattice is not a designer's grid-overlay; it is the diegetic ground of the site, present in every slab, gaining opacity inside slots as if dust had settled into the carved channels. Sections are *placed on* the lattice, not *over* it. 7. **Energetic tone without a single CTA, popup, badge, "buy now," "subscribe," or count-up stat.** The energy comes from kinetic interaction (drawer-springs, dial-drag, pad-press, page-shake) and typographic confidence — never from marketing-funnel pressure. Compare to dopamine-neon sites in this monorepo, which lean on CTAs to manufacture urgency. SengGack.org is energetic because thinking is energetic. **Chosen seed (planned, used verbatim):** *aesthetic: neomorphism, layout: diagonal-sections, typography: eclectic-hybrid, palette: jewel-tones, patterns: underline-draw, imagery: noise-texture, motifs: grid-lines, tone: energetic.* **Avoided patterns from frequency analysis:** - Avoided **hand-drawn aesthetic** (90% saturation in the monorepo) — this site is carved and pressed, not sketched. - Avoided **photography** (95% saturation) — zero photographs, zero stock images, zero people. - Avoided **glassmorphism** (65% saturation) and the entire **glassmorphic-cards** vocabulary — neomorphism is its inverse, and we commit fully. - Avoided **full-bleed centered card-grid** (the dominant layout trio) — replaced with diagonal-sections at −18°, which has zero adoption. - Avoided the **dark-academia / candle-atmospheric / leaf-organic** cluster used by the SengGack.com sibling — that family is for whispering. This `.org` is for **shouting in jewel-tones** at the public commons. **Sibling differentiation (vs. SengGack.com):** - `.com` whispers in oxblood serif; `.org` shouts in plum-velvet hybrid. - `.com` uses organic-flow with a vine-spine; `.org` uses diagonal-sections at −18°. - `.com` is dark-academia + glassmorphic-cards; `.org` is neomorphism + noise-texture. - `.com` is one private thinker becoming a transmission; `.org` is many public thinkers building a commons. - The two share only the Korean word *생각* and the typewriter-effect on transmission — everything else is deliberately inverted.