# Design Language for hangul.name

## Aesthetics and Tone

**hangul.name** is imagined as a **watercolor field journal** left open on a coastal table in a late-autumn afternoon — the kind kept by a Korean botanist in the 1930s who pressed leaves between pages of hand-drawn Hangul script. The page has aged to the color of dried chrysanthemum petals and beach-weathered driftwood. Ink has run in places, the letters bloom at their edges where the brush held a breath of moisture too long. Hangul characters are not alphabet — they are *shapes*, syllable-blocks assembled like small architectural drawings, and this site treats each character as a leaf pressed flat into the paper: structurally deliberate, biologically beautiful.

The **aesthetic is watercolor**: pigments bleed across paper grain, colors refuse to respect drawn borders, and the whole surface feels perpetually half-wet. This is not digital polish — it is the soft technical failure of pigment meeting fiber. Every panel edge frays into the next. The darkest tones are the deepest sea-ink, not black.

The **tone is nostalgic-retro**: not the neon nostalgia of 1980s arcade games, but the slower nostalgia of something that happened before photography, recalled only through handwriting in a language you are still learning to read. There is warmth without sentimentality, familiarity without recognition. The site feels remembered rather than discovered.

Contrasting the watercolor softness, a **glitch layer** runs beneath the surface — the technology-era intruding on the botanical-era. Scan lines appear briefly on hover. Corrupted syllable-blocks momentarily resolve into their correct forms. The site seems to be loading something older than the internet. `tech-mono` type in the secondary layer, JetBrains Mono at small scale, reads like metadata annotations from a digitization archive — timestamp codes, Unicode codepoints (U+AC00 through U+D7A3), character block identifiers.

The collision of **Joseon-era botanical illustration and post-modern digital artifact** is the central tension. Both are systems for encoding nature. Both fragment and reconstruct meaning from component parts. The Hangul syllable-block (초성+중성+종성) and the CSS pixel are equally arbitrary and equally precise.

---

## Layout Motifs and Structure

The layout is built on the **magazine-spread** metaphor — specifically the double-page spreads of a scholarly natural-history journal from 1930s Seoul, where one page is dense pressed-plant illustration and the opposite page is columnar Korean script with marginal annotations in a second typeface. This is the rarest layout in the registry (3%) and no prior design has built it around East Asian typographic conventions.

The HTML page is a single scrollable surface divided into **five spreads**, each occupying two full-viewport columns rendered side by side on wide screens and stacking top-bottom on narrow screens:

**Spread 0 — The Archive Cover.** Full bleed. Left half: a large Hangul syllable (한 — *han*, meaning both "Korean" and "vast") painted as a watercolor wash at 80vw scale, its ink bleeding through to the opposite page. Right half: the domain name `hangul.name` set in the primary display face with a scan-line glitch on load. A running head in `JetBrains Mono` reads `U+AC00..U+D7A3 — HANGUL SYLLABLES — 11172 characters`.

**Spread 1 — Phoneme Field Notes.** Left: a magazine-column body of text explaining how Hangul syllable-blocks compose (초성 consonant + 중성 vowel + optional 종성 final consonant). Right: an illustrated botanical plate where each leaf is replaced by a syllable-block silhouette — the initial consonant forms the stem, the vowel forms the lamina (leaf blade), the final consonant the petiole. Leaf-organic motifs fully merged with script anatomy.

**Spread 2 — The Coastal Glossary.** A two-column dictionary-style layout. Each entry is a single syllable, its romanization, its meaning when it occurs in names of Korean coastal geography. The entries are typeset in alternating Cormorant Garamond (Korean romanization) and JetBrains Mono (Unicode codepoint), watercolor washes behind each definition in tidal blues and sandbar tans.

**Spread 3 — The Glitch Manuscript.** Left: a degraded scan of a handwritten journal page — generated as CSS/SVG noise filtered through `feTurbulence` — showing Hangul characters in various states of corruption. Right: a real-time "restoration" panel where characters resolve from corrupted pixels to clean glyphs using a CSS clip animation. Interactivity: hovering over a corrupted glyph triggers the restoration sequence for that syllable only.

**Spread 4 — The Pressed-Leaf Coda.** Full bleed, both pages merged. A botanical plate of watercolor leaf shapes, each leaf labeled with a Hangul syllable at its tip. The domain name appears letter by letter (not syllable by syllable) across the bottom margin as the user scrolls into the panel, drawn as if by a wet brush.

**Grid system:** 12-column CSS grid on wide viewports. Spreads use columns 1–5 (left page) and 7–12 (right page), with column 6 as the gutter (the "spine"). On viewports below 900px, each spread-half is a full-width block, scroll-ordered left-to-right. No floating elements. No sticky headers. No card boundaries — pages bleed into gutter and back.

---

## Typography and Palette

### Typography

**Primary Display — Korean + Latin Heading Face:**
[`Noto Serif KR`](https://fonts.google.com/nptf/specimen/Noto+Serif+KR) — weight 600, used at `clamp(3.5rem, 10vw, 9rem)` for large Hangul characters and at 1.2rem for body Korean text. Noto Serif KR is available on Google Fonts and renders the entire Hangul syllable block range. Its serif stroke contrast mimics the pressed-wood-block prints of the Joseon era.

**Secondary Display — Latin Headings and Domain Name:**
[`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300 italic for labels, weight 600 for the domain name logotype. Cormorant's razor-thin hairline strokes echo the pressure variation of a calligraphy brush loaded with diluted ink. Used at `clamp(1.8rem, 5vw, 4.5rem)` for spread headings and `clamp(0.9rem, 2vw, 1.1rem)` for body Latin.

**Tertiary — Code / Archive Annotations:**
[`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400, letter-spacing 0.08em, used at `0.75rem–0.9rem` exclusively for Unicode codepoints, timestamps, character-class annotations, and the "corrupted" glitch text in Spread 3. This is the `tech-mono` axis of the seed — the digital archivist's handwriting in a journal about analog scripts.

**Korean body text note:** All Hangul prose is set in Noto Serif KR at 1rem/1.8 line-height with `word-break: keep-all` and `overflow-wrap: break-word`. No proprietary Korean webfonts — only Google Fonts.

### Palette — Coastal Blend

The palette derives from the tidal flats of the West Sea (Yellow Sea) at dawn: grey-blue water, bleached sand, coastal pine shadow, dried chrysanthemum, and the inky blue-black of a fully loaded ink brush.

| Role | Name | Hex |
|------|------|-----|
| Background paper | Aged washi | `#F2EDE4` |
| Primary ink | Sea-pine deep | `#2C3E3B` |
| Watercolor 1 | West Sea tide | `#7BAFC4` |
| Watercolor 2 | Coastal sand | `#C9A97A` |
| Watercolor 3 | Dried chrysanthemum | `#D4956A` |
| Accent — glitch | Signal teal | `#3DBFAA` |
| Muted shadow | Dusk ink | `#5C6B6A` |
| Highlight | Salt-bleach white | `#FAFAF5` |

Palette rationale: `coastal-blend` sits at 2% frequency in the registry — present in only three prior designs and never combined with a watercolor aesthetic or Korean script context. The combination of the aged washi background with teal and sand is deliberately **not warm** (93% of designs run warm) — this palette runs **cool-neutral with warm sand accents**, reversing the corpus default.

---

## Imagery and Motifs

### Nature-Elements Imagery

All imagery is generated — no photography, no stock art. The visual world has two families:

**1. Watercolor washes (CSS + SVG filter chains).**
Each spread's background uses a layered SVG filter: `<feTurbulence type="fractalNoise" baseFrequency="0.008 0.015" numOctaves="4" seed="[spread-index]">` → `<feDisplacementMap scale="60">` → `<feComposite operator="in">` to mask the wash to a hand-cut paper shape. The result is an organic, non-repeating watercolor stain on aged paper. Each spread has a unique `seed` value so no two washes look alike. The wash colors use the coastal-blend palette with opacity `0.18–0.45` to let the washi background read through.

**2. Botanical leaf silhouettes as syllable-block maps (SVG inline).**
The core motif of the site: Hangul syllable anatomy mapped onto leaf anatomy. Each syllable-block is drawn as a botanical illustration where:
- 초성 (initial consonant) = stem + petiole
- 중성 (medial vowel) = leaf lamina (blade shape)
- 종성 (final consonant, if present) = leaf tip or serration pattern

These illustrations are pure CSS/SVG paths — approximately 6–8 leaf-syllables per spread. Stroke weight is `0.5px–1.5px` in `#2C3E3B`, with an inner watercolor fill at 25% opacity in the spread's palette color. On hover, the stroke `stroke-dashoffset` animates from full length to zero (path-draw effect) over 1.2s ease-in-out, as if the illustration is being drawn in real time.

### Motifs — Leaf-Organic

The leaf motif operates at three scales simultaneously:
1. **Macro:** full-spread botanical plate (Spread 1, Spread 4) where leaf-syllable illustrations occupy 40–60% of the panel.
2. **Meso:** individual leaf icons used as list bullets, section dividers, and margin ornaments throughout. Each is a unique SVG path — no repeats.
3. **Micro:** the brush-stroke "tail" added to each Noto Serif KR character at large display sizes via SVG clipPath, creating the illusion that each Hangul stroke ends in a leaf-shaped terminal.

### Glitch Layer — Pattern

The glitch pattern runs as a secondary texture over Spread 3 and as a brief intrusion effect on every spread transition:

**Glitch CSS implementation:**
- A `glitch-scan` pseudo-element overlays each spread during scroll entry, using a `repeating-linear-gradient` of `rgba(61,191,170,0.04)` horizontal lines at 3px intervals (scan-line effect).
- A `@keyframes glitch-shift` moves the entire spread-panel `translateX(±2px) skewX(±0.3deg)` at randomized intervals (CSS custom property `--glitch-seed` set from JS `Math.random()` on load).
- Spread 3's left page has its text content duplicated in a `::before` and `::after` pseudo-element, offset by `2px` and `–2px` horizontally, colored `rgba(125,180,200,0.6)` and `rgba(212,149,106,0.6)` — the classic RGB-split glitch in the coastal-blend palette rather than the usual red-blue.
- On hover over any corrupted syllable in Spread 3, a `clip-path: inset(0 100% 0 0)` animates to `clip-path: inset(0 0% 0 0)` over 0.4s, "restoring" the character from the corrupted version to the clean Noto Serif KR form.

---

## Prompts for Implementation

Build `hangul.name` as a **single scrollable field journal** — a scholarly artifact from a time when the study of writing systems and the study of botany were both considered natural history. The visitor is a researcher leafing through a damp-paged journal, pausing at each spread.

**Narrative arc — five spreads, one continuous scroll:**

**Spread 0 (Archive Cover — 100svh):**
Open with the aged washi background (`#F2EDE4`) full bleed. After 400ms, a large watercolor wash in `#7BAFC4` bleeds in from the left edge using a `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)` animation over 1.8s. The Hangul character `한` (U+D55C) appears at 80vw inside the wash, set in Noto Serif KR weight 600, in `#2C3E3B`. The domain `hangul.name` appears right-aligned in Cormorant Garamond weight 600 at `clamp(2rem, 6vw, 5rem)`. Below the domain name, a line of JetBrains Mono reads: `U+AC00..U+D7A3 · 11,172 syllables · coastal archive v1`. The scan-line glitch activates once, 200ms after all type is rendered.

**Spread 1 (Phoneme Field Notes — 100svh):**
Left column (cols 1–5): a dense body of text in Noto Serif KR 1rem/1.8 explaining the syllable-block system, with inline JetBrains Mono codepoints for each component. Right column (cols 7–12): the botanical plate. Six leaf-syllable SVGs arranged in two rows of three. On scroll-enter (Intersection Observer threshold 0.3), each leaf draws itself via `stroke-dashoffset` animation, staggered 200ms apart. No images — only SVG paths. Watercolor wash behind the right column uses spread seed 1, tinted `#C9A97A`.

**Spread 2 (Coastal Glossary — 100svh):**
Full two-column layout rendered as a typeset dictionary. Each entry: syllable in Noto Serif KR (large), romanization in Cormorant Garamond italic, meaning in Cormorant Garamond regular, codepoint in JetBrains Mono small. Entry backgrounds alternate between `rgba(242,237,228,0)` and `rgba(123,175,196,0.08)`. The "gutter column" (col 6) shows a vertical hairline in `#5C6B6A` — the spine. On hover over any entry, a watercolor wash `rgba(201,169,122,0.2)` bleeds in using the same SVG filter as the background washes. No JS required for hover — pure CSS.

**Spread 3 (Glitch Manuscript — 100svh):**
Left column: the "corrupted scan" page. Rendered as a `<canvas>` element with the JS animation loop drawing corrupted glyphs (Unicode characters with random pixel-displacement using `getImageData/putImageData`). Scan-line overlay active. Right column: the restoration panel. Each syllable is in two layers: a `.corrupted` layer (JetBrains Mono with `filter: blur(0.4px) contrast(3)` and glitch-shift keyframe) and a `.restored` layer (Noto Serif KR, `clip-path: inset(0 100% 0 0)`). On hover/click over any syllable, the `.corrupted` layer fades (opacity 1→0 over 0.3s) and the `.restored` layer reveals (clip-path 100%→0% over 0.4s, delayed 0.1s). This interaction works on touch devices using `touchstart`.

**Spread 4 (Pressed-Leaf Coda — 100svh):**
Both page columns merge into a single full-bleed canvas. A botanical plate of 12–16 leaf-syllable illustrations arranged in a loose scatter, not a grid. Each leaf is oriented at a different rotation (`-15deg` to `+20deg`) as if pressed and dried. The domain name `hangul.name` is drawn letter-by-letter along the bottom margin using a `stroke-dashoffset` animation triggered when the spread reaches 80% viewport visibility. Each letter appears as if brushed — the stroke color starts at `#7BAFC4`, transitions through `#C9A97A`, and ends at `#2C3E3B`. Animation duration: 3.2s total, 0.2s per character, staggered.

**General implementation rules:**
- Zero photography, zero stock icons, zero CDN images. All visuals are CSS + SVG.
- No sticky headers, no hamburger menus, no modals, no cookie banners, no CTA buttons, no pricing, no stat grids.
- The only interactive elements are: scroll-driven animations (Intersection Observer), hover reveals (CSS), and the Spread 3 glitch-restoration (lightweight JS).
- All Korean text (`lang="ko"`) with `font-feature-settings: "kern" 1` and `word-break: keep-all`.
- The page `<title>` is `한 · hangul.name · 漢字의 한글 아카이브`.
- Use CSS custom properties for all palette values. Use `clamp()` for all font sizes.
- Prefer `scroll-driven animations` (CSS `animation-timeline: scroll()`) for parallax effects over JS scroll listeners where browser support exists.
- The spine gutter (column 6) is sacred — nothing may overflow into it except watercolor wash bleeds.

**AVOID:** hero sections with marketing copy, feature cards, testimonials, social proof, email signup forms, navigation bars with dropdown menus, any animation that loops more than 3 times without user interaction.

---

## Uniqueness Notes

**Differentiators from the existing 152-design corpus:**

1. **Hangul syllable-block anatomy mapped onto botanical leaf anatomy.** No other design in the corpus uses the structural morphology of a writing system as its primary motif generator. The 초성/중성/종성 (onset/nucleus/coda) tripartite structure of Korean syllable blocks is algorithmically mapped to the stem/lamina/petiole of botanical leaves. The SVG paths for the "leaf-syllable" illustrations are generated from the actual Unicode compositing rules for Hangul — not decorative approximations. This is a genuinely new visual system.

2. **Magazine-spread layout built on East Asian typographic conventions.** The `magazine-spread` layout appears in only 3% of the corpus and no prior instance has applied it to a two-column Korean/Latin bilingual structure using the vertical-spine metaphor of a bound journal. The gutter (column 6 as the spine) is an explicit structural element — not just whitespace — and it governs the bleed behavior of watercolor washes across spreads.

3. **Glitch as digital-archive intrusion into a historical-analog aesthetic.** The `glitch` pattern (2% corpus frequency) is deployed here not as a cyberpunk or vaporwave reference but as the **literal artifact of OCR failure and scan corruption** — the technology of the present struggling to read the script of the past. The Spread 3 restoration interaction (corrupted glyph → clean Hangul form) is not decorative; it enacts the meaning of the domain. Every other glitch implementation in the corpus uses it for visual excitement. This one uses it for epistemological commentary.

4. **Coastal-blend palette applied cold.** The `coastal-blend` palette (2% corpus) has previously been used in warmer, brighter implementations. Here it runs cool-neutral: the West Sea's grey-blue water at dawn, aged washi paper, driftwood sand, and chrysanthemum bronze — a desaturated, historically grounded palette that refuses the gradient-warm defaults (93% corpus frequency). The JetBrains Mono signal-teal accent (`#3DBFAA`) is the only saturated element, reserved exclusively for the glitch layer.

**Chosen seed:** `aesthetic: watercolor, layout: magazine-spread, typography: tech-mono, palette: coastal-blend, patterns: glitch, imagery: nature-elements, motifs: leaf-organic, tone: nostalgic-retro`

**Avoided patterns (overused in corpus):** hand-drawn aesthetic (67%), editorial layout (47%), centered layout (90%), photography imagery (92%), parallax pattern (91%), warm palette (93%), gradient palette (84%).

**Prioritized patterns (underused in corpus):** magazine-spread layout (3%), coastal-blend palette (2%), glitch pattern (2%), nature-elements imagery, leaf-organic motifs (3%), nostalgic-retro tone (5%), tech-mono typography (rare as primary system).
<!-- DESIGN STAMP
  timestamp: 2026-05-08T01:07:23
  seed: seed:
  aesthetic: hangul.name** is imagined as a **watercolor field journal** left open on a coast...
  content_hash: b364698eb579
-->