# Design Language for hangul.dev ## Aesthetics and Tone hangul.dev is built as **a 1446 royal proclamation re-rendered on a satellite ground-station console at golden hour** — the *Hunminjeongeum* (the 15th-century edict that introduced Hangul to the Korean people) reissued not as a museum scan but as a live mission-control telemetry feed. The conceit: King Sejong's scriptorium and a modern orbital tracking room have been welded into one room, and the walls are raw poured concrete with sun pouring through tall west-facing slot windows. Hangul was *engineered* — its consonant shapes diagram the position of tongue, teeth, lips, throat; its vowels are built from three primitives (a dot/sun ·, a horizontal line ㅡ /earth, a vertical line ㅣ/human). This site treats that 1446 design spec the way an aerospace bureau treats a launch manifest: with HUD reticles, bracket frames, scan-line readouts, coordinate tickers — but the whole apparatus is **warm**, lit by a low orange-amber sun, never the usual cold cyan of sci-fi UI. The tone is **playful, not solemn**: the proclamation voice is real ("이런 까닭으로 어린 백성이…") but the captions are cheeky — "syllable block: assembled in 0.003ms", "this vowel ships with 600 years of uptime". It is brutalist in the literal architectural sense — exposed structure, monumental slabs, honest materials, no decoration that isn't load-bearing — crossed with the diagrammatic optimism of a phonetics chart and the bracket-and-glyph chrome of a heads-up display, all warmed by sunset light. Mood words: monumental, sunlit, diagrammatic, dry-witty, structural, reverent-but-grinning. Anti-mood: precious, twee, neon-cyberpunk, watercolor-soft, corporate-SaaS. ## Layout Motifs and Structure The site is a **strict Z-pattern** — not the loose "eye travels diagonally" cliché, but a *literal enforced zig-zag*: every chapter is a full-viewport panel whose primary content sits at one of the Z's vertices, and the visitor's gaze is dragged corner-to-corner-to-corner by a drawn diagonal **tracer line** (an animated SVG stroke, amber, 2px, with a small HUD diamond riding its head). Chapter 1: heavy mass top-left. Chapter 2: heavy mass top-right. Chapter 3: the diagonal sweep down — content rides the line. Chapter 4: bottom-left. Chapter 5: bottom-right. Then the Z resets one floor down. The tracer is the spine of the whole experience. Structural inventory: - **Concrete slab frame.** The entire page sits inside a 4px solid `#2A211A` border with mitered corners; every panel is divided by raw board-formed-concrete dividers (CSS repeating-linear-gradient simulating plank seams + a faint noise texture). Panels never have rounded corners. Ever. - **HUD bracket corners.** Each content block wears four L-shaped corner brackets (12px × 12px, 2px stroke, amber) like a camera viewfinder or a targeting reticle — the sci-fi-hud signature. On hover/scroll-into-view the brackets snap inward 4px with a hard 90ms ease, a mechanical *click*. - **The Telemetry Rail.** A fixed 44px-wide vertical strip down the left edge: a live-updating monospace readout — scroll position as a fake "ALT", a fake "AZ/EL" coordinate pair, the current chapter index as "SEC 03/09", a slowly incrementing frame counter, a tiny ASCII-art sun that fills as you scroll. Pure ornament dressed as instrumentation. - **Syllable-block grid.** Hangul writes left-to-right but *stacks* phonemes into square syllable blocks (한 = ㅎ+ㅏ+ㄴ). One chapter's layout literally is this: a CSS Grid of square cells where headline text gets composed cell-by-cell, consonant-vowel-consonant, with the assembly animated. - **Slot-window light.** Three or four `position: fixed` angled gradient bars (warm white → transparent, ~6° tilt) sit behind everything, simulating sun through narrow brutalist windows; they shift very slightly with scroll (subtle parallax) so the "light" rakes across the concrete. - **No card grid. No bento. No hero-then-features.** The page is nine chapters of continuous narrative, ~560vh, one column of attention guided by the tracer. ## Typography and Palette **Typefaces — Google Fonts only, three families.** - **Archivo** (display + headings) — used at its `wght` and `width` extremes. Headlines: Archivo, 800 weight, *expanded* width if available else tracked +20, set 80–140px, `text-transform: uppercase`, line-height 0.95, color `#2A211A` on light or `#F2D9A8` on dark. This is the geometric-sans voice: blunt, mechanical, near-grotesque but with the slightly squared terminals that read "engineering drawing" not "fashion magazine". Every headline gets an **underline-draw**: a 4px amber rule that draws left-to-right on reveal, then a HUD tick mark drops at each end. - **Space Grotesk** (sub-display, captions, the cheeky annotations, the proclamation pull-quotes) — 400 and 500. Set 18–28px for body-adjacent text, tracked normally. Its quirky `g` and `a` carry the *playful* register. - **Space Mono** (the Telemetry Rail, coordinate tickers, all "instrument" readouts, code-ish fragments, the SEC 0X/09 labels) — 400 and 700, 12–14px, tracked +40, always uppercase for labels. This is the tech-mono / HUD layer. - (If a Hangul block is rendered as actual Korean glyphs for the *Hunminjeongeum* quotation, request **Noto Sans KR** 400/700 — Google Fonts — so the 15th-century text renders correctly. It pairs cleanly with Archivo's geometry.) **Palette — sunset-warm, eight stops, no cool accent.** The discipline: this is a HUD that has never seen blue. - `#FBF3E4` — **Paper Limewash.** Primary light background; the bright concrete face catching sun. - `#F2D9A8` — **Low Sun.** Secondary light / panel tint; the amber wash on the wall. - `#E8A24C` — **Amber Beacon.** The HUD stroke color — brackets, tracer line, underline-draw, reticles, ticking numerals. - `#D2622E` — **Burnt Clay.** Mid accent — emphasis fills, the "active chapter" marker, the sun-disk ·. - `#9C3B1B` — **Rust Oxide.** Deep accent — long shadows, the underside of slabs, hover-state fills. - `#5A2E12` — **Cocoa Shadow.** Dark UI text on light; the shaded concrete in the window's lee. - `#2A211A` — **Board Brown.** The 4px frame, the darkest divider, near-black text. - `#171210` — **Night Bunker.** Full-bleed dark-chapter background (chapters 5–6 flip to night: the ground station after dusk, instruments glowing amber against `#171210`). Type-on-color rules: on `#FBF3E4`/`#F2D9A8` use `#2A211A` for headlines, `#5A2E12` for body, `#D2622E`/`#9C3B1B` for emphasis. On `#171210` use `#F2D9A8` for headlines, `#FBF3E4` for body, `#E8A24C` for the glowing HUD layer. Never put `#E8A24C` text on `#FBF3E4` at body size — amber is reserved for lines, brackets, and large or tracked elements only. ## Imagery and Motifs **Three motif families, layered, all rendered in CSS/SVG — zero stock photography.** **1. Nature-elements (the 1446 source primitives).** Hangul's vowels descend from three cosmological marks — heaven (a sun dot ·), earth (ㅡ), human (ㅣ). The site renders these as recurring **glyph-objects**: a filled `#D2622E` sun-disk that appears at every chapter vertex (it's also the head of the tracer line); long horizontal "earth strata" rules (stacked thin lines, board-brown, suggesting sedimentary rock / poured-concrete lifts); slender vertical "human" pillars. Beyond the primitives: low rolling **hill silhouettes** at panel feet (single bézier, `#9C3B1B`), a stylized **persimmon branch** (a Korean autumn nature-element — bare branch + two heavy orange fruit, line-art, used once as a chapter-break ornament), reed/grass tufts in the Telemetry Rail's ASCII art, and a recurring **low sun on the horizon** that sits behind chapter titles like a logo. The "nature" here is dry, late-autumn, Joseon-landscape-painting nature — not lush botanical. **2. Sci-fi-hud (the ground-station chrome).** Targeting reticles (concentric circles + crosshair, amber 1.5px, 64px) that lock onto each Hangul glyph as it's introduced. Bracket frames on every block. A **scan-line sweep** — a single thin amber line that travels top-to-bottom of a panel once on reveal. Coordinate tickers (fake lat/long, fake "TONGUE POS / TEETH / LIPS / THROAT" readouts that genuinely map to each consonant's articulatory diagram — a real linguistic fact dressed as telemetry). Dashed bounding boxes around "data". A waveform strip (the sound each letter makes, drawn as a tiny amber oscillogram). All HUD elements pulse/tick on a 1s mono rhythm. **3. Brutalist structure (the room itself).** Board-formed concrete texture (CSS gradients + SVG fractal-noise filter at low opacity). Monolithic slab blocks with hard 12–24px offset shadows in `#9C3B1B`. Exposed "rebar" — thin vertical lines breaking the surface at panel seams. Tie-rod holes (small `#2A211A` circles in a grid on the concrete divider strips). Stamped-stencil labels ("SEC 01", "HUNMINJEONGEUM // 1446", "BUILD: 한글") set in Space Mono, uppercase, tracked wide, like spray-stencil on a wall. ## Prompts for Implementation Build hangul.dev as **a single HTML document, one CSS file, one small vanilla-JS ES module — no framework, no router, no build step beyond an esbuild/minify pass.** It is one continuous vertical scroll, ~560vh, **nine chapters**, narrating *one story*: how Hangul was designed in 1446, told as if a mission-control room were reading out the original engineering spec at golden hour. Storytelling is the organizing principle — there is no nav menu beyond a thin progress affordance, no second page, no outbound links, no signup, no pricing, no stat-grid, no "features" cards, no CTA buttons. The visitor lands, reads the proclamation-as-telemetry, watches the alphabet get assembled, and leaves. **Chapter arc (each a full-viewport Z-vertex panel):** 1. **THE ROOM** — establish: concrete frame, slot-window light rakes in, Telemetry Rail boots up (mono characters type in), title "한글.dev" composed glyph-by-glyph (syllable-block assembly animation), tracer-line diamond ignites top-left. 2. **THE EDICT, 1446** — the *Hunminjeongeum* opening lines in Noto Sans KR, large, with a HUD reticle locking onto the first character; cheeky Space Grotesk caption: "// original commit message, 600 years ago". Tracer sweeps to top-right. 3. **THREE PRIMITIVES** — heaven · / earth ㅡ / human ㅣ introduced as nature-glyph objects; each gets a targeting reticle + underline-draw label; the sun-disk · is the same object as the tracer head — call that out. Tracer plunges diagonally down the panel; content rides the line. 4. **VOWELS BUILD** — ·+ㅣ → ㅏ, ·+ㅡ → ㅗ, etc., animated combination; an amber waveform plays each one; "// composed from 3 imports, no dependencies". Bottom-left vertex. 5. **CONSONANTS = ANATOMY** *(night flip — background goes `#171210`, HUD glows)* — ㄱ ㄴ ㅁ ㅅ ㅇ shown beside the articulatory diagram each shape encodes (tongue back, tongue tip, lips, teeth, throat); telemetry readout "TONGUE POS: REAR / STATUS: NOMINAL". Bottom-right vertex. 6. **SYLLABLE BLOCKS** *(still night)* — CSS-Grid demonstration: ㅎ+ㅏ+ㄴ snap together into 한, then 글, then 날, each assembly clicking the bracket-corners inward. "// render time: 0.003ms / uptime: 600y". Z resets — content swings back top-left for the new floor. 7. **THE CLAIM** — pull-quote: "a wise man can learn it in a morning; a fool in ten days" — set huge in Archivo 800, underline-draws across the full panel width, slot-light flares warm. Top-right vertex. 8. **STILL SHIPPING** — Hangul today: keyboard layouts, Unicode blocks, the persimmon-branch ornament; dry caption "// no breaking changes since 1446". Diagonal sweep down. 9. **SIGN-OFF** — the concrete frame closes in, Telemetry Rail prints "SEC 09/09 — EOF", the sun-disk sets behind the hill silhouette, tracer diamond parks at bottom-right and the line fades. Last line, Space Mono, small, centered: "한글.dev // designed 1446 · still running". **Animation toolkit (all CSS + a thin IntersectionObserver/scroll-driver in JS):** - The **tracer line**: one SVG `` per "floor", `stroke-dasharray` reveal tied to scroll, an amber diamond + faint glow at `pathLength` head. This is the most important animation — get it crisp and mechanical, not floaty. - **underline-draw** on every headline: `scaleX(0)→1` from left, 320ms `cubic-bezier(.2,.7,.2,1)`, then two 8px HUD ticks drop at the ends. - **HUD bracket snap**: corners translate inward 4px on reveal, 90ms steps(2) — feels like a relay closing. - **scan-line sweep**: a 2px amber line `top: -2px → 100%` once per panel on first reveal, 600ms linear. - **syllable assembly**: phoneme glyphs fly from their grid edges into the square block, 240ms each, staggered 80ms. - **Telemetry Rail**: `requestAnimationFrame` ticking the fake coordinates, frame counter, and ASCII-sun fill; mono digits use `font-variant-numeric: tabular-nums` so nothing jitters. - **slot-window light**: the fixed gradient bars get a tiny `translateX` proportional to `scrollY` — slow rake, max ~24px travel, so the room subtly "turns toward evening". - **night flip** (ch 5–6): background + text colors transition over ~500ms when those panels cross center; HUD elements gain a soft `filter: drop-shadow(0 0 6px #E8A24C)` glow. - Respect `prefers-reduced-motion`: drop the tracer animation to an instant draw, kill the parallax, keep everything legible and static. **Hard constraints:** no rounded corners anywhere; no blur/glass; no blue/cyan/teal/green anywhere — the palette is the eight warm stops only; concrete texture must be subtle (≤8% opacity noise); the cheeky captions must stay genuinely funny and genuinely *short*; the *Hunminjeongeum* quotation must be real text, not lorem. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **Warm HUD.** Sci-fi-hud appears in ~5% of the cohort and *always* renders cold (cyan, electric blue, dark-neon). hangul.dev's HUD is amber-on-limewash, lit by a low sun — a heads-up display that has literally never used a cool color. The fusion of `sci-fi-hud` motifs with a `sunset-warm` palette is the load-bearing conceit and would be plagiarism if copied. 2. **Hangul-as-engineering-spec narrative.** No "Korean culture" wallpaper — instead the site treats the actual 1446 design rationale (consonants diagram the mouth; vowels = sun·/earth ㅡ/human ㅣ) as a telemetry manifest read aloud in a ground-station. The articulatory-anatomy-as-HUD-readout (ch 5) is a specific structural device unique to this site. 3. **Literal enforced Z-pattern.** Z-pattern layout sits at ~4% and is usually invoked loosely; here it's a hard rule — content lives only at the Z's vertices and a drawn amber tracer line physically drags the eye corner-to-corner, resetting one floor at a time across nine chapters. The tracer's head *is* the Hangul sun-primitive ·, tying layout and motif into one object. 4. **Brutalist concrete + golden-hour, no decoration.** Brutalist aesthetic is at ~8% and brutalist-warm-sunset is rarer still; this commits to board-formed concrete, miter-corner slab frames, tie-rod holes, exposed rebar lines, stencil-stamped section labels — and the only "ornament" (corner brackets, scan lines, the persimmon branch) is dressed as instrumentation or is a single nature-glyph. 5. **Anti-cohort discipline.** Deliberately avoids the cohort's saturated patterns: **no** `card-grid` (85%), **no** `centered` hero (82%), **no** `glassmorphism` (65%), **no** `photography` (99%) — replaced by a nine-chapter scroll narrative, a Z-vertex composition, raw concrete, and pure CSS/SVG glyph-art. Leans into underused vocabulary instead: `z-pattern` (4%), `geometric-sans` typography (4%), `sunset-warm` palette (3%), `underline-draw` patterns (18%), `nature-elements` imagery (≈0%), `sci-fi-hud` motifs (5%). Chosen seed: aesthetic: brutalist, layout: z-pattern, typography: geometric-sans, palette: sunset-warm, patterns: underline-draw, imagery: nature-elements, motifs: sci-fi-hud, tone: playful.