# Design Language for senggack.net ## Aesthetics and Tone **Senggack** (생각) is the Korean word for "thought" — the quiet interior event before language, the flicker of cognition just before it becomes speech. The site treats this etymology as its governing aesthetic: a place where ideas are *caught in amber*, mid-crystallization, neither fully formed nor fully dissolved. The visual language is **playful-scholarly** — a rare hybrid in which the earnestness of an academic journal collides head-on with the maximalist chromatic joy of dopamine-neon design culture. The mood is a **lit library at midnight with neon tubes installed between the shelves**. Think a semiotics professor who wallpapers her office with candy-bright Post-it notes, each annotated in Garamond italic. The tone never condescends and never shouts — it invites the reader to think alongside the site, to linger, to follow a footnote into unexpected territory. Every design decision serves this proposition: *rigorous play* and *chromatic seriousness*. Primary inspiration draws from three sources: (1) the layout discipline of **French literary magazines** like *La Nouvelle Revue Française* circa 1960 — tight typographic columns, generous white gutters, section numbers in the margin; (2) the chromatic audacity of **risograph-printed zines** from Seoul's Hongdae district — electric pinks, acid greens, phosphorescent yellows crashing against near-black; and (3) the textural depth of **Carrara marble bookends** — cool, veined, impossibly smooth surfaces that make the neon look even hotter by contrast. ## Layout Motifs and Structure The page is built on a **magazine-spread** skeleton — a strict 12-column grid at 1440 px, collapsed to 6 columns at 768 px and single column below. The grid is never invisible: a hairline `#FF2D78` rule (1 px, opacity 18%) underlays every content zone, echoing the red-thread annotation of a manuscript returned from a rigorous editor. **Structural logic — five spreads, each two-page in composition:** 1. **Masthead Spread** — columns 1–4 hold a giant Korean numeral (생각 as a single enormous glyph, 30 vw, set in Playfair Display italic) that bleeds off the left edge. Columns 5–12 hold the English subtitle in three stacked lines of 14 px Lora, tracked at +0.12em, all caps. A horizontal marble-texture band (full width, 6 vw tall) separates masthead from body below. 2. **Feature Spread** — an asymmetric two-column layout: left column 5 units wide (body text, 18 px Lora regular), right column 7 units wide (a full-bleed marble photograph treated with neon duotone). Column gutter is 48 px. Section number appears in the left margin as an oversized numeral, `#B8FF00` acid green. 3. **Essay Spread** — three equal columns in the Swiss editorial tradition. Each column begins with a 3-line drop cap set in Playfair Display Bold at 4× the body size, the cap rendered in `#FF2D78` neon magenta. Running footnotes appear in a sub-baseline strip between columns, set at 10 px Lora italic in `#FF9E00`. 4. **Interlude Spread** — full-width, zero columns. A single ripple animation (concentric wave rings in `#FF2D78` and `#B8FF00`) emanates from a central fixed candle illustration. The candle is decorative only — a static SVG of a marble-based candlestick with a live CSS flame animation (flickering opacity 0.85–1.0 at 1.8 s easing). Text overlaid at center: a single Korean character in `#FFFFFF` at 40 vw. 5. **Closing Spread** — returns to the masthead grid. Left columns: a compact bibliography-style list of references in 11 px Lora. Right columns: the site's colophon, set in ornamental borders borrowed from 19th-century Korean printing houses, rendered as inline SVG. **Navigation** is a single fixed strip at top, 48 px tall, with section names set at 10 px Lora Bold all-caps on a translucent `rgba(12,8,26,0.85)` background — dark enough to ground the neon, light enough to let marble veins show through. **Spatial rhythm:** Section headers are always preceded by 10 vw of whitespace — generous, almost wasteful, deliberately so. The site breathes in before it speaks. ## Typography and Palette ### Typography — serif-revival The typographic system is **serif-revival editorial** — a deliberate return to the humanist serif tradition of European literary printing, pushed into tension with the neon palette by refusing to use a "safe" modern sans. - **Display / Titling:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weights 400 italic and 700. Used for drop caps, section numerals, and the masthead Korean glyph treatment. Set at 6–30 vw for display contexts, 2.4 rem for sub-display. Tracked at `–0.01em` tight. - **Body / Running Text:** [Lora](https://fonts.google.com/specimen/Lora), weight 400 and 400 italic. 18 px / 1.75 line-height for body, 11 px for footnotes and marginalia. The workhorse of the design — warm, bookish, slightly rustic. - **Accent / Labels:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), Small Caps weight 600. Used exclusively for section labels, running headers, and the navigation strip. Set at 10–12 px with +0.18em tracking — gives the navigation an old-broadsheet authority. No sans-serif fallback in the visual design; the revival purity is the point. System fallback chain: `"Playfair Display", Georgia, "Times New Roman", serif`. ### Palette — dopamine-neon Five-color system built on **near-black as the darkest ground**, allowing neon hues to vibrate at maximum intensity. | Role | Name | Hex | |------|------|-----| | Ground / Background | Ink Night | `#0C081A` | | Primary Neon | Magenta Strike | `#FF2D78` | | Secondary Neon | Acid Phosphor | `#B8FF00` | | Tertiary Warm Neon | Saffron Pulse | `#FF9E00` | | Marble Surface | Carrara Cream | `#F4F0EC` | | Marble Vein | Cool Lavender | `#C9C0E8` | | Text Primary | Ghost White | `#F8F5FF` | | Text Secondary | Warm Mist | `#A89EC0` | Marble-texture elements use `#F4F0EC` as base with `#C9C0E8` veining rendered as SVG path overlays. Neon elements always appear against `#0C081A` or against the marble base — never against each other, which would collapse the contrast hierarchy. ## Imagery and Motifs ### Marble Texture The marble treatment is the site's material signature. Every horizontal divider band is a full-width marble photograph (actual Carrara marble, photographed overhead at 45° in natural north-facing light) converted to a **duotone**: shadow channel mapped to `#0C081A`, highlight channel mapped to `#C9C0E8` lavender. A semi-transparent `#FF2D78` wash at 8% opacity sits above the duotone, giving the marble a faint neon flush — as if the stone itself is lit from within by a pink LED strip. Marble appears in three places only: 1. The masthead horizontal band (full width, 6 vw) 2. The Feature Spread right column (full bleed, 100% of column height) 3. The Closing Spread colophon background (60% opacity over `#0C081A`) ### Candle Atmospheric The candle is a **recurring atmospheric motif**, not a functional icon. It appears as: - A large SVG illustration in the Interlude Spread — a marble-based candlestick (base modeled after 17th-century Korean brass candlestick proportions, rendered in `#F4F0EC` with `#C9C0E8` shadow) with a CSS-animated flame. The flame is two overlapping ellipses, one `#FF9E00` and one `#FF2D78`, animated at different speeds (flame body: 1.8 s ease-in-out; inner heat: 0.7 s ease-in-out) to produce a convincingly restless flicker. - A small 16 px favicon variant: single flame silhouette in `#FF2D78` on `#0C081A`. - A decorative drop shadow treatment for section numbers — the number appears to be lit from below by an off-screen candle, achieved via `text-shadow: 0 8px 24px rgba(255,45,120,0.6)`. ### Ripple Pattern The ripple animation is deployed in two contexts: 1. **Interlude Spread** — large decorative ripple rings centered on the candle SVG. Implemented as concentric `border-radius: 50%` divs, each expanding from 0 to 80 vw over 4 s with `opacity: 0 → 0.6 → 0` easing. Three rings staggered by 1.3 s each. Ring colors cycle: `#FF2D78` → `#B8FF00` → `#FF9E00`. 2. **Click/tap micro-interaction** — any section number or drop cap, when tapped, produces a single ripple ring (200 px diameter, 600 ms, `#B8FF00`) that fades from opacity 0.8 to 0. Purely decorative, affirming the playful register. ### Decorative Ornaments Section transitions use inline SVG ornamental rules drawn from Korean printing traditions — specifically **banchon** (반촌) letterpress border fragments: double-line rules with small diamond interruptions at regular intervals, rendered in `#FF9E00` at 60% opacity. These appear between every spread, 32 px tall, full width. ## Prompts for Implementation Implement senggack.net as a **single long-scroll magazine**, five spreads tall, with no pagination, no tab switching, and no off-canvas content. The entire site is the essay; the essay is the site. **Critical implementation requirements:** - **Grid:** Use CSS Grid with `grid-template-columns: repeat(12, 1fr)` at desktop. Gap: 24 px. Margins: `max(48px, 4vw)` left and right. All five spreads share the same 12-column grid context — sections are children of one grid wrapper, not nested grids. - **Marble Texture:** Load the marble image as a `
` with `object-fit: cover`. Apply the duotone via CSS `mix-blend-mode: luminosity` on a `#C9C0E8` overlay div, plus an `#FF2D78` at `opacity: 0.08` second overlay. Do not use CSS filter-based duotone (poor browser support for full color transforms). - **Candle Animation:** The candle SVG lives in a `position: sticky; top: 40vh` container inside the Interlude Spread, so it stays centered in viewport as the spread scrolls. Flame animation is pure CSS `@keyframes` — no JS required. - **Ripple System:** Use a single `ripple.js` module, ~30 lines. On `DOMContentLoaded`, attach a click listener to `.ripple-target` elements. On click: append a `` to the target, animate it with Web Animations API (`element.animate([...], { duration: 600, easing: 'ease-out' })`), then remove it on `finish`. - **Scroll-triggered Reveals:** Each spread's content uses `IntersectionObserver` at 20% threshold. On intersection: add `.is-visible` class. CSS transition: `opacity: 0 → 1` over 700 ms, `transform: translateY(20px) → translateY(0)` over 700 ms. Stagger child elements using CSS `transition-delay: calc(var(--i) * 80ms)` where `--i` is a custom property set inline. - **Typography:** Load Google Fonts via `` + ``. Import: Playfair Display (400 italic, 700), Lora (400, 400 italic), Cormorant Garamond (600). Use `font-display: swap`. Never use system fonts in rendered content. - **Drop Cap:** Implement via `::first-letter` pseudo-element with `font-family: "Playfair Display"; font-size: 4em; float: left; line-height: 0.85; margin: 0.05em 0.12em 0 0; color: #FF2D78`. Apply only to the first paragraph of each column in the Essay Spread. - **Navigation:** Fixed top strip, `z-index: 1000`, `backdrop-filter: blur(8px)`. Section labels as `` elements with `scroll-behavior: smooth` href targeting. Active section highlight: left border `2px solid #FF2D78`, color `#F8F5FF`. Transition: 200 ms ease. **Avoid:** CTAs ("Get started", "Sign up", "Contact us"), pricing blocks, testimonials, stat counters, feature comparison tables, email capture forms, social proof rails, sticky pop-ups, cookie banners styled as UI features, hero sections with a single H1 and subtext and nothing else. The site is a literary-aesthetic object, not a conversion funnel. **Storytelling bias:** Every spread should feel like turning a page in a beautifully printed book — deliberate, sequential, each one earning the next. Use the whitespace before section headers to build anticipation. Let the candle in the Interlude burn as a visual pause, a moment of stillness between two dense typographic passages. ## Uniqueness Notes 1. **Magazine-spread layout at 3% frequency, combined with dopamine-neon palette at 3% frequency — an unprecedented pairing in the corpus.** No other design in the registry combines the slow, disciplined editorial rhythm of a literary magazine with the chromatic aggression of dopamine-neon. The tension is the point: the layout restrains the neon, and the neon electrifies the layout. Neither element is softened to accommodate the other. 2. **Candle-atmospheric motif (3%) deployed as a literal CSS-animated object, not just a metaphor.** The frequency report shows `candle-atmospheric` used by only 3% of designs, and none use it as a live interactive SVG animation. The candle here is not a mood-word in the design brief — it is a specific rendered object, animated in real time, functioning as a visual pause point in the scroll narrative. 3. **Marble-texture imagery (4%) treated as a duotone with neon flush rather than classical neutral surface.** In every other design using marble, it signals luxury or classical restraint. Here the marble is contaminated by neon — a `#FF2D78` wash at 8% opacity makes the stone look radioactive. The familiar material is made strange. 4. **Korean etymology as a literal typographic display element.** The site's domain name carries the meaning "thought" in Korean. Rather than translating or explaining this, the design uses the Korean character (생각) as a 30 vw display element in the masthead — making the word itself a visual object. No other design in the corpus uses non-Latin script as a primary display glyph. 5. **Ripple micro-interactions (11% frequency) elevated to a thematic pattern aligned with the intellectual concept of the site.** Ripple is common in the corpus (11%), but here it is semantically motivated: a "thought" radiates outward from a point of origin like a ripple on still water. Every ripple in the design is connected to a moment of conceptual contact — a tap on an idea, a candle flame disturbing the air. **Chosen seed:** aesthetic: playful, layout: magazine-spread, typography: serif-revival, palette: dopamine-neon, patterns: ripple, imagery: marble-texture, motifs: candle-atmospheric, tone: scholarly-intellectual **Avoided overused patterns from frequency analysis:** `ripple` (11% — deployed but semantically motivated rather than decorative default), `playful` (14% — avoided as surface aesthetic; here playfulness is structural, not decorative), `serif-revival` (6% — not treated as a retro nostalgia move but as a tension-creating counter to the neon palette).