# Design Language for hangeul.day
## Aesthetics and Tone
hangeul.day is **The Aquarium Terminal of King Sejong** — a single-column, full-screen terminal interface that boots up as if a 1988-era Korean computer scientist had wired a dot-matrix CRT directly into a coral-reef tank, and the Hangul glyphs themselves had become the fish. The visitor lands inside a black-glass console where a soft monospaced cursor blinks in a saltwater glow, and as they scroll, ASCII jamo (ㄱ, ㄴ, ㄷ, ㅁ, ㅇ, ㅎ) drift across the screen in slow shoals — angelfish made of consonants, neon tetras made of vowels, an eel formed from the line `ㅏㅓㅗㅜ`. The mood is **nostalgic-retro** (3% in the corpus) crossed with the loneliness of late-night SSH sessions: green phosphor warmed by aquarium-pink and electric-cyan, cassette-tape humidity, the muffled gurgle of a bubbler heard through a CRT's faint 15kHz whine.
Sejong's 1446 *Hunmin Jeongeum* preface — *"나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄"* — is reframed as a `MOTD` (message of the day) banner that types itself out on first paint, jamo by jamo. Hangul is celebrated not as a national emblem but as **a piece of working software shipped in the 15th century**: a featural alphabet whose glyph shapes literally diagram the position of the speaker's tongue. The site's emotional register is the quiet awe of a developer who has just realized the standard library they've been using all their life was written by a king. There is wonder, there is humor (the aquarium fish are unironic), there is a faint melancholy of dial-up modems and BBS goodbyes — but there is no hard-sell, no CTA, no pricing table, no logo wall.
The tonal palette is **dopamine-neon** (10% in the corpus) refracted through aquarium glass: the saturated colors do not shout, they shimmer underwater. Reading the page should feel like opening a `vim` buffer that someone has secretly filled with bioluminescent plankton.
## Layout Motifs and Structure
The structure is **single-column** (18% in the corpus, deliberately underused) at exactly **`72ch`** wide — the canonical width of a UNIX terminal — centered in the viewport with no sidebar, no card grid, no bento boxes. Everything happens in one vertical river of monospaced text, scrolled top-to-bottom like a long terminal session that began at boot and never ended. The layout's only structural rule: **every section is framed as a numbered shell prompt block**, and the content of each block is the "stdout" of an imaginary command Sejong typed.
```
chloe@hangeul:~$ history | head
1 date # Hangeul Day, October 9
2 cat hunmin.txt # the original 28-letter manifesto
3 ls -la jamo/ # 14 consonants + 10 vowels, listed
4 ./compose.sh # how syllable blocks assemble
5 fish_school.sh # the aquarium screensaver
6 whoami # Sejong, sort of
7 exit
```
The single column is 72 characters wide; the gutter on either side is filled with a slow-drifting **scrolling jamo aquarium** — IntersectionObserver-triggered ASCII fish that swim leftward on the left margin and rightward on the right margin, never crossing into the reading column. Vertical rhythm is locked to a **24px monospace baseline grid**; every section begins with a fresh `$` prompt and ends with a blinking cursor that resumes only when the section enters the viewport. There is exactly **one fold of mid-page interactivity**: a live syllable-composer where the visitor types Korean romanization and watches jamo assemble into a syllable block in real time, rendered in 96px display-mono with a CRT-scanline overlay. No nav bar, no footer in the conventional sense — the site simply ends with `[Process completed — press any key]` and a final blinking block cursor.
Spatial composition obeys the **scroll-triggered** pattern (20% in the corpus, our chosen pattern): each `$ command` block fades in only when the visitor's scroll position reaches it, and the "output" types itself line by line at 32 chars/sec, with a ±4ms jitter to feel human. A single thin vertical line (1px, `#1cff9e`, 18% opacity) runs down the exact center of the column as a "carrier wave" — a holdover from old serial-terminal CRTs — and ASCII fish occasionally cross this line as if leaping the reading channel.
## Typography and Palette
**Typography — tech-mono** (9% in the corpus, the chosen seed): every character on the page is monospaced, no exceptions, no humanist fallback, no condensed display face. The face stack is a small drawer of Google Fonts tuned for Korean + Latin coexistence:
- **`JetBrains Mono`** (Google Fonts, variable wght 100–800) — the lead voice for Latin text, prompts, and UI chrome. Used at 16px / 24px line-height for body, 13px for status-line metadata, and 14px italic for inline code-comments. Ligatures are explicitly **disabled** (`font-feature-settings: "liga" 0`) because terminal-honest typography never silently merges `==` into `=`.
- **`Noto Sans Mono`** (Google Fonts, weights 400/700) — the Hangul-capable workhorse. Whenever a jamo (ㄱ ㄴ ㄷ) or syllable block (한, 글, 날) appears, it renders in Noto Sans Mono at 1em flush with the surrounding JetBrains Mono x-height. This is the *only* font allowed to render Korean.
- **`VT323`** (Google Fonts, 400) — reserved exclusively for the **MOTD banner**, the boot sequence, and the giant 96px syllable-composer display. VT323 is a pixel-bitmap CRT face; here it makes Hangul look like it was rasterized on a Hercules monochrome card and is therefore the most affectionately retro choice possible.
- **`Major Mono Display`** (Google Fonts, 400) — used at exactly two places: the page's H1 (the word `hangeul.day` set in 56px lowercase) and the `[Process completed]` end-card. Major Mono's geometric mono-caps lend an architectural weight that contrasts with VT323's pixelation.
Type scale is rigorously stepped in the modular ratio of 1.25 (major third), starting at 13px → 16px → 20px → 25px → 32px → 56px → 96px. All headings are lowercase, all prefixed with a literal `$` or `#` (root vs. user prompt) followed by a single space.
**Palette — dopamine-neon** (10% in the corpus, our chosen palette), specifically tuned for a **wet aquarium-CRT** crossover:
- `#0a0d0c` — base background, "saltwater black": almost-black with a 1% green tint, mimicking the inside of a switched-off CRT through algae-stained glass.
- `#1cff9e` — primary phosphor, "kelp-green prompt": the canonical terminal green, but pulled cyan-ward to feel underwater rather than military.
- `#ff3ec8` — accent one, "neon-tetra magenta": used for jamo that represent **vowels** (ㅏ ㅑ ㅓ ㅕ ㅗ ㅛ ㅜ ㅠ ㅡ ㅣ).
- `#00d9ff` — accent two, "angelfish cyan": used for jamo that represent **consonants** (ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ ㅈ ㅎ etc.) and for hyperlinks.
- `#ffe14d` — accent three, "betta-fin amber": used only for warnings, the blinking cursor, and the literal date `2026.10.09`.
- `#7a8d8a` — muted text, "dim-room grey-green": dimmed body text, comments after `#`, and metadata (timestamps, line numbers).
- `#e8f5ef` — high-emphasis foreground, "phosphor white": reserved for the syllable-composer's live output and the H1.
- `#1a4a3e` — aquarium-water deep green, used at 35% opacity as a **radial gradient** glowing behind the H1, simulating the soft halo of a CRT seen through a fishtank.
A faint **scanline overlay** (1px horizontal stripe, `#1cff9e` at 4% opacity, every 3px) is fixed-position over the entire viewport; a **vignette** (radial-gradient from transparent at center to `#000000` at 80% opacity at the corners) suggests the curvature of a Trinitron tube. Finally, the entire page has a 3% grain overlay (Perlin noise SVG filter) pinned to the screen, so even when nothing is animated, the pixels feel slightly damp.
## Imagery and Motifs
**Imagery — geometric-abstract** (5% in the corpus, our chosen imagery): there are no photographs, no 3D renders, no botanical illustrations, no stock vectors. Every visual element is one of three things:
1. **ASCII fish** built from jamo. Catalogued in a small bestiary at the bottom of the page:
- The **Angelfish** (`ㅇ===ㅈ>`) — a vowel-headed body with a triangular tail.
- The **Eel** (`〜ㄱㄴㄷㄹㅁㅂㅅ〜`) — a horizontal serpent of all 14 base consonants, swimming the entire width of the reading column once per minute.
- The **Tetra** (`<ㅗ>`) — tiny, shoaled in groups of 7-12, pure magenta.
- The **Pufferfish** (`(ㅎㅎㅎ)`) — inflates on cursor-hover, doubling its `ㅎ` count.
- The **Coral** (`┴┬┴┬ㅁㅂㅁ┬┴`) — stationary, anchored to the bottom of certain command-output blocks, made of mungchang block-elements + jamo.
2. **Hangul glyph diagrams** — large 192px composition diagrams of how a single syllable like `한` is built from ㅎ + ㅏ + ㄴ. Rendered as inline SVG with hand-drawn-feeling 2px strokes in `#00d9ff`, animated to assemble themselves on scroll-triggered reveal.
3. **CRT artifacts** — a scanline overlay, a 0.5% RGB-channel split that activates only on `:hover` over interactive elements (the chromatic aberration is subtle enough that some visitors won't notice it consciously), and a once-per-minute "vertical sync judder" where the entire page jumps 2px down for one frame and snaps back, as if someone bumped the desk.
Decorative motifs (**tropical-fish**, 5% in the corpus, our chosen motif) appear *only* as ASCII drift in the gutters. The fish are deliberately slow — average swim speed is 18px/second, slow enough to read the jamo composing each fish as it passes. Bubbles (•) rise from the bottom edge of the viewport at random intervals, fading from 60% opacity to 0% over 4 seconds.
A **single boot-sequence preloader** runs once, on first paint: a 1.4-second sequence of typewritten lines like `[ OK ] mounted /jamo on /dev/sejong` and `[ OK ] reached target Multi-User Hangul`, ending in `[ OK ] starting hangeul.day...` before the H1 fades in. After the boot, there is no other "loading" state.
## Prompts for Implementation
**Storytelling spine (HTML structure):**
The site is a single 72ch-wide vertical document, structured as a transcript of one continuous shell session. The visitor never leaves this terminal. There is no router, no menu, no second page.
```html
[ OK ] mounted /jamo on /dev/sejong …
hangeul.day
나랏말싸미 듕귁에 달아 …
[Process completed — press any key]
```
**Animation choreography (scroll-triggered, the chosen pattern):**
- On first paint, run the 1.4s boot sequence (8 lines of `[ OK ]` text, typed at 60ms/line, jitter ±10ms).
- After boot, fade in H1 over 600ms with a 3px upward translate-out finishing.
- The MOTD types itself out at 32 chars/sec, with cursor blinking at 600ms cadence between keystrokes (every 9th char delays an extra 80ms, simulating someone thinking).
- Each `` listens via IntersectionObserver. When 30% in viewport: (a) the `$ command` line types itself in `#1cff9e`, (b) a 200ms pause, (c) the stdout types itself in white-green. Once typed, the block stays static until reload.
- The aquarium gutters animate continuously (requestAnimationFrame, transform: translateX). Fish are spawned on a Poisson-distributed interval (mean 4s); each fish has a randomized swim depth (Y position 0-100% of viewport, biased toward the upper 70%).
- The interactive `compose.sh` block accepts roman-key input (e.g. `h` `a` `n` → `한`). Use a small jamo lookup table; render the assembling syllable in 96px VT323 with each newly-added jamo appearing in `#ffe14d` for 200ms before settling to `#e8f5ef`.
- Cursor: a single `█` element, blinking via 1.06s `step-end` keyframes, color `#ffe14d`.
**Avoid (per project guidance):** no hero CTAs, no pricing tiers, no testimonials grid, no logo wall, no team carousel, no stat counters, no email-capture modal, no cookie banner styled as a card, no parallax (it is NOT scroll-triggered), no glassmorphism (the aesthetic is hard-edged terminal), no soft drop-shadows. The site has zero buttons except the implicit one of "scroll."
**Embrace:** typewriter cadence over swoosh transitions; ASCII over PNG; terminal monochrome-plus-three-accents over rainbow gradients; the simple awe of one good idea (Hangul as software, fish as letters) carried for the entire scroll.
**Performance & feel notes:**
- The fish gutters are pure DOM nodes with `will-change: transform`. Cap at 24 active fish total at any time.
- The grain SVG is a single 200×200 tile stamped via `background-repeat`; no per-frame redraw.
- Respect `prefers-reduced-motion`: skip boot sequence, render all blocks already-typed, freeze fish to a still tableau, kill the scanline shimmer.
- Use `font-display: swap` for all four Google Fonts; preload JetBrains Mono Latin subset and Noto Sans Mono Korean subset.
## Uniqueness Notes
This design's deliberate departures from the 220 designs already in the corpus, and from the visual canon expected of a "Hangul Day" site:
1. **Terminal aesthetic at 28% but executed as a wet aquarium-CRT crossover, which is unique in the corpus.** The 28% of "terminal" sites in the corpus are uniformly dry, military-green, dev-tool-flavored. None of them are wet. None of them have ASCII fish made of jamo swimming in their gutters. None of them frame Hangul as a featural alphabet whose glyphs are literal phonetic diagrams. The fusion of `terminal + tropical-fish + dopamine-neon` (palette only at 10%) is, by combinatorial inspection, novel.
2. **Single-column at 72ch, only 18% of the corpus.** The dominant layouts in our corpus are full-bleed (94%), card-grid (85%), and centered (82%). Choosing a strict 72-character monospace river deliberately rejects all three. There is no card. There is no grid. There is one column. The constraint is the aesthetic.
3. **tech-mono typography (9% in corpus) executed without humanist/handwritten fallback.** 95% of the corpus mixes mono with humanist (53%) or handwritten (35%). hangeul.day commits to monospace-only — every glyph in every font has the same advance width. This is a structural choice mirroring the visual discipline of Hangul's own square syllable blocks (each syllable occupies the same em width regardless of jamo count).
4. **scroll-triggered pattern (20% in corpus, used here as the *only* animation pattern).** No parallax (95% of corpus — explicitly rejected here), no cursor-follow (86% — rejected), no spring/magnetic (79%/79% — rejected), no stagger (79% — rejected). Just one consistent scroll-typing rhythm, top to bottom.
5. **geometric-abstract imagery (5% of corpus) executed as 100% ASCII + SVG glyph diagrams.** The 99%-photography norm of the corpus is fully discarded. There is not a single raster image on the site. The "imagery" is type itself, recursive: jamo become fish, fish become sentences, sentences become a story about jamo.
6. **tropical-fish motif (5% of corpus) reinterpreted as letterforms.** In the few tropical-fish sites in the corpus, fish are decorative photo or illustration. Here they are the *type system* — fish are made of jamo, and their composition rules mirror Hangul's own compositional grammar (consonant-vowel-(consonant) — initial-medial-final).
7. **nostalgic-retro tone (3% of corpus) — explicitly the 1988 Korean PC-BBS / dial-up era**, not the more common 80s/90s American synthwave nostalgia. The retro reference is *Hangul-IME-on-Hercules-monochrome*, not Miami Vice.
8. **Documented chosen seed: `aesthetic: terminal, layout: single-column, typography: tech-mono, palette: dopamine-neon, patterns: scroll-triggered, imagery: geometric-abstract, motifs: tropical-fish, tone: nostalgic-retro`.** Every dimension of this seed is at or below 30% corpus frequency; the combination is not approximated by any other site reviewed.
**Avoided overused patterns from the frequency analysis:** hand-drawn aesthetic (96%, the dominant baseline — rejected), photography imagery (99% — rejected), warm/gradient palettes (97%/97% — rejected in favor of dopamine-neon at 10%), parallax (95%), cursor-follow (86%), magnetic (79%), spring (79%), stagger (79%), full-bleed layout (94% — rejected for narrow 72ch column), card-grid (85% — rejected, no cards exist), pastoral-romantic tone (36% — rejected for a sharper retro-tech voice). The site is built almost entirely from underused vocabulary, by deliberate combinatorial design.