# Design Language for hangeul.day ## Aesthetics and Tone **hangeul.day** is a calendar site devoted to the Korean alphabet — not as a grammar lesson, not as a study tool, but as a celebration of one of the most deliberately beautiful writing systems ever invented. King Sejong commissioned Hangeul in 1443 specifically to be learned in a single morning; each character is a geometric portrait of the mouth-shape that makes it. The site honors that intentionality: every design choice should feel **like a scholar's garden at first light** — calm, spacious, faintly luminous, as if the paper itself is lit from behind. The tone is **calm-serene**: unhurried, contemplative, quietly proud. This is not minimalism from austerity — it is spaciousness from confidence. The page breathes like a hanji (Korean mulberry paper) window through which afternoon light filters warm amber. The neon-glow elements are *botanical* neon — not cyberpunk electric-blue, but the soft phosphorescent edge-glow that bioluminescent moss emits in a dark forest, or the way a backlit leaf vein glows copper-gold against the sun. Think: faint honey-amber halation around each Hangeul letterform, barely there, like warmth rather than electricity. The aesthetic is **botanical** in the truest sense: organic, systematic, endlessly varied from a small grammar of forms, the way a garden is varied from root/stem/leaf/petal. Hangeul itself is botanical — each syllable-block is a little organism built from consonant-roots and vowel-stems. The site should make this legible as beauty, not linguistics. **Mood board phrases:** hanji morning light / bioluminescent leaf vein / Joseon court garden still life / amber resin pressing a dried fern / mist at the Changdeokgung Secret Garden at 6am. ## Layout Motifs and Structure The layout is **centered** — but not the 90%-of-corpus centered (hero + CTA stack). Instead: **the layout of a single calligraphy practice sheet**, where one large character occupies the center of the page, surrounded by breath-space, with annotations in the margins and fine rules marking the grid a brush must honor. On desktop this means a narrow central column (max-width 640px) flanked by generous negative space. The negative space is not empty — it holds faint, almost-invisible background motifs (leaf-vein grids at 3% opacity, rotated 15°). **Macro structure (top to bottom, seven panels, all full-viewport-height):** 1. **Arrival** — Full-viewport panel. The single syllable `한` (han) in display type, centered, very large (clamp(14rem, 28vw, 32rem)), with a soft amber neon halo (box-shadow / text-shadow composite). Below it, a single line: *"Every character is a portrait of a sound."* No logo, no nav. Just the character and the sentence. 2. **The Vowel Garden** — A centered column of the 10 basic Korean vowels, each rendered large enough to study. Each vowel has a paired SVG leaf-vein illustration beneath it: the vertical vowels (ㅣ, ㅏ, ㅓ) get tall narrow leaves; the horizontal vowels (ㅡ, ㅗ, ㅜ) get broad flat leaves. Scroll-triggered: each vowel-leaf pair fades and rises into position as it enters the viewport, sequentially, with 60ms staggered delay. 3. **The Consonant Roots** — The 14 basic consonants arranged in a 7×2 grid (desktop) or 4-column grid (mobile), each set in display type with its mouth-diagram (an anatomical ink-line SVG showing the tongue/lip position). Scroll-triggered: the grid cells bloom in from center outward, like petals opening. 4. **A Day in Characters** — Full-viewport panel showing a single Korean word that means something seasonal or temporal (e.g. `새벽` — dawn; `황혼` — dusk; `이슬` — dew). The word changes based on time of day via JavaScript (4 words, matched to morning/afternoon/evening/night). The word is set at maximum scale, centered, with the translation and pronunciation floating in small type beneath. A slow (8s) ambient animation pulses the amber neon halo in and out — breathing. 5. **The Writing System** — A centered longform text section (the one "essay" panel) explaining in one paragraph the origin story of Hangeul. Set in body type, tight leading, ample paragraph spacing. Accompanied by a timeline SVG running vertically down the left margin — a botanical vine with year-nodes as flower buds. 6. **Character Gallery** — A full-width horizontal scroll section (the one deviation from centered layout) that cycles through all 40 basic Jamo, each character in a soft amber-glowing tile with its romanization below. This panel is the site's only horizontal experience — it signals completion and invitation. 7. **Colophon** — A minimal centered footer: the date, the word `한글날` (Hangeul Day, October 9), and a single line in small type. No links, no copyright, no social icons. **Scroll behavior:** Sections snap on scroll (scroll-snap-type: y mandatory on the document). Each transition uses a 500ms ease-in-out vertical slide. Scroll-triggered animations use Intersection Observer with a 0.15 threshold and 60ms stagger between sibling elements. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Hangeul Characters**: [`Noto Serif KR`](https://fonts.google.com/npcedium/Noto+Serif+KR), weight 700 for large focal characters. Noto Serif KR has the classical brush-stroke proportions of traditional Korean printing while being optically balanced at display sizes. Set the focal `한` at clamp(14rem, 28vw, 32rem). - **Secondary Display / Latin headings**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic for English titles and annotation labels. The classical elegance of Cormorant mirrors the scholarly gravity of Hangeul's invention — both are deliberate, refined, historical. - **Body / Interface**: [`Noto Sans KR`](https://fonts.google.com/npcedium/Noto+Sans+KR), weight 300–400 for paragraph text and UI labels. Noto Sans KR harmonizes perfectly with Noto Serif KR and ensures mixed Korean/English text reads fluidly. - **Variable fluid sizing**: All type is set with `clamp()` — display characters at `clamp(14rem, 28vw, 32rem)`, section titles at `clamp(2rem, 5vw, 4.8rem)`, body at `clamp(1rem, 1.8vw, 1.25rem)`. No fixed px sizes anywhere in the type scale. **Palette — Honeyed Neutral (hex values):** - `--hanji` `#F5EDD8` — warm off-white, the color of aged hanji paper; used as the primary background - `--amber-glow` `#D4831A` — deep amber, the color of resin and autumn ginkgo; used for neon-glow effects and focal accents - `--honey-mid` `#E8A84C` — mid-tone honey gold; used for secondary accents, hover states, the botanical vine - `--ink` `#1C1410` — near-black with warm brown undertone, the color of iron-gall ink on hanji; used for all body text and large character display - `--sage-mist` `#B8C4A8` — desaturated sage green, the color of dried botanicals; used for SVG illustrations and background motifs - `--warm-shadow` `#8B6240` — medium warm brown; used for subtle shadows, the timeline vine nodes, depth layers - `--cream-edge` `#FAF4E8` — lightest tint, for section backgrounds that need gentle separation from `--hanji` **Neon-glow implementation**: The amber neon halo is achieved with layered `text-shadow` on Hangeul characters: ``` text-shadow: 0 0 20px rgba(212, 131, 26, 0.6), 0 0 60px rgba(212, 131, 26, 0.3), 0 0 120px rgba(232, 168, 76, 0.15); ``` This gives a soft botanical phosphorescence — warm, organic, never electric. ## Imagery and Motifs **All illustrative assets are custom inline SVG.** No photography, no stock icons, no external image requests. **The botanical leaf-vein system:** Each Hangeul vowel is paired with a unique leaf-vein SVG. The leaves are drawn using single-weight strokes (1.2px, `--sage-mist` color), no fills. The vein patterns are structurally homologous to the vowel shapes: ㅣ (vertical stroke) → a lance-leaf with a single central vein; ㅡ (horizontal stroke) → a broad grass-blade leaf; ㅏ (vertical + right branch) → an oak-leaf with one dominant lateral vein; ㅓ (vertical + left branch) → mirrored oak-leaf. This makes the pairing feel discovered, not arbitrary. **The consonant mouth-diagrams:** Each consonant is paired with a minimal anatomical cross-section SVG showing the tongue/lip/palate position. These are rendered in `--ink` at 30% opacity as background underlays beneath the consonant character itself — visible but subordinate, like pencil notes under an ink drawing. **The background motif system:** At 3% opacity, the entire site background carries a repeating pattern of interlocking leaf-vein cells — hexagonal-ish cells bounded by vein lines, rotated 15° from grid. This is implemented as a CSS `background-image: url("data:image/svg+xml,...")` so it adds no HTTP requests. On scroll the pattern shifts at 0.3x parallax speed (CSS custom property animated via scroll event), giving the page a subtle depth field. **The botanical vine timeline (Panel 5):** A vertical SVG vine runs down the left margin of the essay panel. Key dates in Hangeul's history are nodes on the vine, rendered as flower buds: closed bud = event before current date, open bloom = the event itself, seed pod = aftermath. The vine is drawn in `--honey-mid` with `--warm-shadow` shadows. **Motif grammar:** - Leaf-organic curves appear in all decorative SVG (no sharp angles, no right angles in illustrations) - The only geometric elements are the Hangeul characters themselves (which are already inherently geometric) - Dividers between sections are rendered as a single SVG line that wavers like a grass blade in wind (animated via CSS sinusoidal path) - Hover states on Jamo tiles in Panel 6 reveal the leaf paired with that phoneme as a soft overlay ## Prompts for Implementation **The story to tell.** A visitor opens the site and sees a single large Korean character glowing gently on aged paper — not a lesson, but an invitation. As they scroll through seven full-viewport panels, each panel teaches one facet of Hangeul not through instruction but through presence: the vowels arranged like a garden, the consonants displayed like botanical specimens, the word for this moment of day glowing in amber light. The visitor leaves knowing something without being taught — the way one leaves a garden knowing something about growth. **Implementation priorities:** 1. **Full-viewport scroll-snap panels.** Use `scroll-snap-type: y mandatory` on `` or a wrapper div. Each section is `height: 100svh` (safe viewport height). Transitions use `scroll-snap-align: start`. 2. **Intersection Observer for scroll-triggered animations.** All panel animations fire once when the section enters the viewport at 15% threshold. Use a `data-reveal` attribute system: elements with `data-reveal="fade-up"` get opacity 0 + translateY(24px) initially, then transition to opacity 1 + translateY(0) over 600ms ease-out when the IO callback fires. Stagger siblings with a `--stagger-index` CSS custom property multiplied by 60ms delay. 3. **Time-aware word in Panel 4.** Use `new Date().getHours()` to select from: `새벽` (dawn, 4–9am), `한낮` (midday, 9am–3pm), `황혼` (dusk, 3–8pm), `밤` (night, 8pm–4am). The character renders at display scale; the romanization and English translation float below in Cormorant italic at 1.4rem. 4. **Ambient breathing animation on focal character.** The `han` character in Panel 1 has a continuous `@keyframes` animation that pulses the `text-shadow` intensity from 60% to 100% opacity over 4s ease-in-out, `animation-direction: alternate, infinite`. This is the only looping animation on the page — everything else is scroll-triggered and fires once. 5. **Horizontal scroll in Panel 6.** The Jamo gallery uses `overflow-x: auto; display: flex; scroll-snap-type: x mandatory` with each tile at `width: clamp(140px, 20vw, 220px)`. On desktop the tiles extend beyond the viewport width, inviting scroll. A subtle fade-to-hanji gradient on the right edge signals more content. Each tile has a hover state: the leaf-organic SVG for that phoneme overlays the tile at 40% opacity, and the amber neon glow activates. 6. **Background vein pattern parallax.** Attach a `scroll` event listener (passive: true, 16ms throttle) that updates `--scroll-offset` CSS custom property on `:root`. The background-pattern's `background-position` shifts by `calc(var(--scroll-offset) * 0.3)` — subtle but tactile. 7. **Font loading strategy.** Use `` and load Noto Serif KR (weight 700 only), Noto Sans KR (weights 300, 400), and Cormorant Garamond (weight 300 italic, weight 500) in a single `@import`. Noto fonts are large — restrict to the KR subset and only the weights needed. Add `font-display: swap` for all. 8. **Color system via CSS custom properties.** Define all palette values on `:root`. Every color reference in the stylesheet uses `var(--hanji)`, `var(--amber-glow)`, etc. — never hardcoded hex except in the CSS variable definitions themselves. **AVOID:** pricing tables, testimonial carousels, CTA buttons, social share icons, cookie banners, navigation menus with dropdowns, hero images, stock photography, grid-of-cards layouts, stat counters, newsletter signup forms. **The page should feel like spending ten minutes in a scholar's study on a quiet morning** — not like visiting a language-learning app. ## Uniqueness Notes 1. **Honeyed-neutral palette at 1% corpus frequency.** Only one other design in the registry uses honeyed-neutral; this site uses it to redefine "botanical neon" — not electric/cyberpunk neon, but amber bioluminescence, the glow of a backlit hanji window or resin-preserved fern. No other design in the registry combines neon-glow with a warm amber-paper ground. 2. **Typographic-botanical homology as structural principle.** The vowel-to-leaf mapping is not decorative — it is structural. The visual forms of the leaf illustrations are geometrically derived from the stroke structures of the Hangeul vowels themselves. This makes the botanical motif feel discovered and inevitable rather than applied. No other design in the corpus treats botanical imagery as a direct visual echo of the subject matter's own formal grammar. 3. **Time-aware content without JavaScript frameworks.** Panel 4 changes its displayed word based on the hour of day using three lines of vanilla JS. The page is otherwise purely static HTML/CSS with a minimal scroll listener. No React, no build step, no SPA routing. The time-awareness makes every visit feel seasonally present — a site called hangeul.*day* that knows what part of the day it is. 4. **Centered layout made distinctive by calligraphy-sheet proportions.** While 90% of the corpus uses centered layouts, this design uses centered in the specific proportional sense of a single-character practice sheet: narrow central column (max 640px), vast flanking negative space, fine hair-rule grid at low opacity. The negative space is structured (vein-pattern grid) not empty. 5. **Avoided patterns from frequency analysis:** heavy hand-drawn aesthetic (67% — not used), editorial layout (47% — not used), terminal aesthetic (30% — not used), glassmorphism (24% — not used). Chosen seed: `aesthetic: botanical, layout: centered, typography: variable-fluid, palette: honeyed-neutral, patterns: scroll-triggered, imagery: neon-glow, motifs: leaf-organic, tone: calm-serene`.