# Design Language for senggack.xyz ## Aesthetics and Tone `senggack.xyz` is built on a bilingual pun that most visitors will never consciously parse but will *feel*: the domain reads phonetically as **생각** (saeng-gak), the Korean word for **thought**, **idea**, or **the act of thinking**. The site is a generative botanical thinking-machine — a greenhouse where ideas grow in real time, rendered as living botanical illustration pressed against the cool, still surface of gray slate. The aesthetic is **"herbarium generatif"** — the intersection of a 19th-century botanical specimen cabinet and a live procedural art engine. Every page element is either a pressed-and-classified specimen (static, taxonomic, precise slab-serif labels) or an organism in mid-growth (morphing SVG outlines, generative leaf-vein paths). The two states coexist in tension: the grid is ruthlessly structured, but inside each grid cell something is always quietly becoming something else. Tone is **bold-confident** in the mode of a museum curatorial statement, not a startup pitch deck. The site does not ask for anything. It presents its work with the quiet authority of a researcher who has already published, already been cited, already moved on to the next question. Statements end in periods. Nothing begs to be clicked. The mood is **cool, intellectual, slightly foreign** — gray slate light coming through a north-facing window, a Korean name in Roman letters, botanical Latin printed in slab-serif on cream-over-gray. The visitor should feel they have entered a private collection that happens to be open to the public today. ## Layout Motifs and Structure The portfolio-grid is the spine, but it is a **specimen-tray grid**, not a card-wall. Imagine: a museum drawer pulled open to reveal botanical specimens arranged by a scientist who cares about order but also about how things look when arranged. The grid is: - **Asymmetric 12-column base** with cells that span 4, 8, or 12 columns and 1–3 row-heights. No cell is the same size as its immediate neighbor. - **One dominant specimen per row:** every row has one cell that is 2× the height of the others, offset left or right alternately. This creates a slow cadence — wide-narrow-wide-narrow — that reads like pages being turned. - **Gutters are meaningful:** 32px gutters carry a 0.5px hairline rule in `#B8BEC5` — the specimen-drawer edge. On hover these rules thicken to 2px and shift hue to `#7EC8A4` (the one botanical accent color in the palette). - **No full-bleed hero.** The viewport opens directly into the grid at 24px margin on all sides. The domain name `senggack.xyz` appears in the top-left as a 14px slab-serif label, no logo, no nav bar — just the name and a thin 1px underline. - **Navigation** is a single vertical column of 5–7 slab-serif labels (`Work`, `Archive`, `Studio`, `Contact`, `생각`) fixed to the right edge at 90° rotation, reading bottom-to-top, each 13px. These are not links until hovered, at which point they rotate to 0° and expand inline — a morph transition (300ms, cubic-bezier spring). - **Footer:** A single row, full-width, containing only the specimen-taxonomy line: `Kingdom: Digital · Genus: Senggack · Species: xyz · Collected: 2026` in 11px slab-serif spaced at 0.3em tracking. No social links, no copyright boilerplate. ## Typography and Palette **Type System (all Google Fonts):** - **Display / Headings — [Zilla Slab](https://fonts.google.com/specimen/Zilla+Slab)**, weights 400 and 700. Zilla Slab has the taxonomic authority of a 19th-century scientific press — slightly wide letterforms, robust serifs that read at small sizes on gray, ink-on-paper feel. H1 is 72px / weight 700 at desktop. H2 is 28px / weight 400. All headings set at -0.01em tracking. - **Body — [Spectral](https://fonts.google.com/specimen/Spectral)**, weight 300, 16px / 1.75 leading. Spectral is a screen-optimized slab-serif designed specifically for long reading — it pairs with Zilla Slab without competing, slightly lighter in weight, with a more humanist counters. Used for project descriptions, specimen notes, all paragraph content. - **Label / UI — [Zilla Slab](https://fonts.google.com/specimen/Zilla+Slab)**, weight 400, 11–13px, tracking 0.25–0.35em, ALL CAPS. Used for nav items, grid cell categories, footer taxonomy, input labels. - **Accent / Korean — [Noto Serif KR](https://fonts.google.com/specimen/Noto+Serif+KR)**, weight 300. Used exclusively for the Korean word `생각` and any Korean text fragments — it is the specimen's native label, the name before translation, appearing only where the bilingual pun surfaces. **Palette (cool-grays with one botanical breakthrough):** | Role | Hex | Name | |---|---|---| | Background | `#F2F4F6` | Specimen Paper — off-white with the faintest blue cast | | Surface | `#E4E8ED` | Museum Drawer — slightly darker for card backgrounds | | Grid Rule | `#B8BEC5` | Slate Rule — the hairline between specimens | | Primary Text | `#1C2430` | Carbon Label — near-black with blue undertone | | Secondary Text | `#5A6472` | Pencil Gray — for metadata, dates, categories | | Muted Text | `#8B96A2` | Faded Notation — for footer taxonomy, captions | | Botanical Accent | `#4A9E7C` | Pressed Leaf — the single non-gray color; used sparingly | | Botanical Tint | `#D8EFE6` | Chlorophyll Wash — hover states, subtle fills | | Dark Substrate | `#0E1620` | Camera Obscura — used only in the generative SVG layer | The palette is **90% cool-gray, 10% botanical-green**. The green appears only on hover, in morphing SVG veins, in the active nav indicator, and in the grid hairline on hover. Every other element is gray. This restraint makes the green feel like a living thing breathing in a still room. ## Imagery and Motifs **No photography. No raster imagery.** All visuals are vector or generative. **1. Botanical Illustration Engine (primary imagery system):** Each portfolio grid cell contains a generative botanical illustration rendered as inline SVG. These are not stock botanical drawings — they are procedurally generated specimens, each unique to that project. The algorithm: - Draws a primary stem using cubic bezier curves, slightly asymmetric (±12px random offset from axis) - Branches at 3–7 points, each branch at 25–65° from the stem, lengths following a golden-ratio decay - Generates leaves as closed path shapes: each leaf is a rotated ellipse deformed by a perlin-noise displacement map (amplitude 8–18px) - Applies a `stroke-dasharray` path-draw animation on page load (1.8s stagger per branch) - Leaves have a `fill` of `transparent` on load, morphing (via GSAP or raw CSS) to `#D8EFE6` with 40% opacity over 2.4s after the path draw completes The illustration lives in the top-right corner of each grid cell, confined to a 180×240px bounding box, deliberately overlapping the cell's top-right corner rule — one leaf always breaks the grid edge by 8–14px. **2. Cultural Motif System:** The cultural layer draws from **Korean minhwa** (민화, folk painting) and **Joseon-era botanical illustration** — but translated into geometry, not figuration. Specific motifs: - **Saengseon-mun (생선문, fish scale pattern):** A tight tessellation of arc-pairs forming overlapping scales, rendered as 0.5px gray lines (`#B8BEC5`) in the site background at 6% opacity. The pattern is subtle enough to read as texture on first glance and as intentional form on closer inspection. - **Danghwa (당화, peony motif) abstracted:** The circular grid cell corners use a 4-petal geometric bloom as the corner ornament — 12px, `#B8BEC5`, rendered as SVG `` — referencing the Joseon porcelain blue-and-white tradition without directly copying it. - **Hangeul stroke weight reference:** The slab-serif choices (Zilla Slab, Spectral) were selected partly because their serif anatomy echoes hangeul's horizontal stroke emphasis — the strong baseline and cap-height horizontals mirror the `ㅡ` (eu) and `ㅗ` (o) strokes that dominate Korean letterforms. This is not stated anywhere on the site; it is felt. **3. Generative Pattern — Morphing Vein Network:** Behind the entire portfolio grid, at `z-index: 0`, a canvas element renders a slow-growing vein network. The algorithm: - Seeds 8–12 points at random positions within the viewport - Grows paths between them using a space-colonization algorithm (simplified: each step moves 3px toward the nearest unconnected seed, with 15° random deviation) - Strokes are 0.6px, `#8B96A2` at 18% opacity - The network grows over 12 seconds on page load, then halts — static from that point on - On viewport resize, the network re-seeds and re-grows from scratch This is the "generative" layer: it never looks the same twice per session, but it always settles into stillness. It echoes both the root systems of botanical specimens and the visual grammar of thought-mapping (the site's thematic core: 생각 = thought). ## Prompts for Implementation **Build this as a silent natural history museum that happens to contain digital work.** The site's job is to make the visitor feel like a researcher who has been given private access to an active specimen collection. The portfolio grid is the collection. The generative vein network is the research in progress. The botanical illustrations are the classified, completed specimens. **Implementation architecture:** 1. **HTML structure:** A single `
` containing `
` elements. Each cell has: `
` (SVG, generated), `
` (category label, year — slab-serif, 11px caps), `

` (Zilla Slab 700), `

` (Spectral 300). No images, no `` tags. 2. **CSS grid:** Use `display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px;` with cell spans set per-cell in inline style or `data-` attributes read by JS. Mobile: single column, all cells 12-span, botanical illustrations scale to 100px tall. 3. **Vein network canvas:** Position `fixed`, behind everything, `pointer-events: none`. Use `requestAnimationFrame` loop during grow phase; cancel after 12s. Recalculate on `resize` with debounce 300ms. 4. **Botanical SVG generation:** Write a `generateSpecimen(seed)` function that takes a numeric seed (derived from the project index or a hash of the project title) and returns a complete SVG string. This ensures reproducibility — the same project always gets the same botanical illustration, but each is visually distinct. 5. **Morph pattern — nav rotation:** Use CSS `transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)` for the nav label rotate from 90° to 0°. The spring overshoot (1.56 tension) should be visible — the label bounces 3–4° past 0° before settling. This is the only "playful" motion on the site. 6. **Morph pattern — botanical leaf fill:** Use GSAP `gsap.to(leaf, { fill: '#D8EFE6', opacity: 0.4, duration: 2.4, delay: 1.8, ease: 'power2.out' })` per leaf element after the path-draw stroke completes. If GSAP is not available, use CSS animation with `animation-fill-mode: forwards`. 7. **Color system:** Define all colors as CSS custom properties on `:root`. Never hardcode hex values in component styles. This enables a future dark-mode swap (swap `--background` to `#0E1620`, `--primary-text` to `#E4E8ED`, etc.) without touching component CSS. 8. **Typography loading:** Load `Zilla+Slab:wght@400;700` and `Spectral:wght@300` and `Noto+Serif+KR:wght@300` from Google Fonts. Use `font-display: swap`. The Korean font is loaded lazily (only when the `생각` text is in the viewport) via Intersection Observer to avoid blocking the initial render with a large CJK font. 9. **Grid hairline hover:** On `

` hover, use a CSS outline trick: `outline: 2px solid #7EC8A4; outline-offset: -1px;` — this paints the botanical accent on the inner edge of the cell border without shifting layout. Transition: `outline-color 200ms ease`. 10. **No JavaScript frameworks.** Vanilla JS only. The generative and animation code should be under 8KB minified. The site's technical restraint matches its aesthetic restraint. **Narrative arc (the three things a visitor should experience in order):** 1. **First 3 seconds:** The vein network is growing in the background. The grid cells are visible but their botanical illustrations are still drawing (stroke-dasharray animation in progress). The visitor reads the specimen labels and titles while the organisms grow around them. This is the site asserting its nature without asking for attention. 2. **First 30 seconds:** The visitor has scanned the grid. The botanical illustrations are now fully drawn and the leaf fills are beginning to bloom (opacity shifting from 0 to 0.4). The visitor hovers a cell and the grid rule turns green, the outline blooms. They hover the nav and one label rotates to horizontal. The site responds, but quietly. 3. **First 3 minutes:** The visitor has clicked into a project. The detail view expands the botanical illustration to full width (the SVG scales up — still sharp, still vector). The specimen-note body text (Spectral 300) is long enough to reward reading. The vein network in the background has been still for minutes. The visitor notices it is static and feels, correctly, that the research into this specimen is complete. ## Uniqueness Notes 1. **Bilingual semantic pun as generative constraint.** No other site in this corpus is built around a domain name that is also a word in another language. The Korean `생각` (thought) is not decorative — it is the conceptual spine. The generative vein network is a *thought* growing. The botanical specimens are *classified thoughts*. The cool-gray palette is the stillness of concentrated thought. Every design decision traces back to this word. 2. **Portfolio-grid as specimen tray, not card wall.** Portfolio-grid appears at only 3% in the corpus. The 0% that use it as a specimen-tray metaphor is exactly 0. Every other portfolio grid is either a Masonry Pinterest clone or a flat card gallery. This site uses the grid as a physical object — a museum drawer — with the hairline rules, danghwa corner ornaments, and fish-scale background pattern making the structure tactile rather than digital. 3. **Slab-serif at 2% corpus frequency, deployed with scientific restraint.** Zilla Slab and Spectral are specifically chosen because they have been used in scientific publishing contexts (Zilla Slab was designed for Mozilla's scientific communications; Spectral was designed for Google Fonts with editorial reading as primary use case). Using slab-serif not for brutalist impact (the common deployment) but for taxonomic authority is a novel register in this corpus. 4. **Cool-gray palette with a single botanical accent that appears only on interaction.** Cool-grays at 2% corpus frequency. But more specifically: a palette where the *only* non-gray color is gated behind interaction (hover, active states) makes the botanical green feel like a biological response rather than a design choice. The site breathes only when touched. **Seed:** aesthetic: generative, layout: portfolio-grid, typography: slab-serif, palette: cool-grays, patterns: morph, imagery: botanical-illustration, motifs: cultural, tone: bold-confident