# Design Language for hangul.dev

## Aesthetics and Tone

hangul.dev is an opulent celebration of the Korean writing system as high typography — not a language-learning tool, not a travel-adjacent cultural brand, but a **typographic monograph** that treats Hangul glyphs with the same reverential grandeur a Milanese atelier gives to couture stitch diagrams. The aesthetic is **grainy-textured luxury**: every surface carries a fine-grain paper noise overlay (SVG feTurbulence, baseFrequency 0.65, numOctaves 4, opacity 8–12%) that transforms flat digital surfaces into something that reads like premium embossed card stock. The tone is **opulent-grand** — the site behaves as if it is the digital catalogue of a privately funded institute dedicated to the geometry of Hangul letterforms. There are no tutorials, no Duolingo gamification loops, no flag emojis. Instead there is a sense that the reader has been handed white gloves and invited into a climate-controlled archive.

The site carries a persistent undercurrent of **bubble-playful** mischief: the solemn grid occasionally lets a Hangul vowel float upward like a soap bubble drifting through a library, its frosted-glass surface catching light before it settles back into the grid. This contrast — institutional gravity punctured by a single translucent glyph drifting across the screen — is the site's personality.

Inspiration sources: the thick cotton-paper catalogues produced by the National Hangeul Museum in Seoul, the typographic specimen books of Sandoll Type, the glazed-ceramic finishes of moon jars (백자달항아리), and the layout language of a Hermès artisanal object booklet — but every one of those stripped of warmth and re-skinned in **translucent frost**.

## Layout Motifs and Structure

The governing structure is a **broken grid** — not anarchic, but deliberately fractured in the manner of a typographic specimen set by someone who understands exactly which rules they are breaking. The underlying grid is a 12-column, 96px-gutter system, but individual typographic panels deliberately bleed across column boundaries, overlap neighboring panels by 40–60px on desktop, and rotate by ±1.5° — all constrained to a shared invisible axis so the overall composition reads as controlled asymmetry, not chaos.

**Three structural zones:**

1. **Aperture** (100vh, full-bleed). A single enormous Hangul syllable — 한 — rendered at `clamp(240px, 35vw, 520px)` in weight 800, centered in the viewport but offset 18px down and 24px right from mathematical center. Behind it, a frosted-glass plane (backdrop-filter: blur(18px); background: rgba(245,242,238,0.22)) sits at a 1.5° tilt, bleeding off the right edge. The syllable itself is set in the display typeface and carries a faint leather-emboss drop shadow. Grain overlay covers everything.

2. **Specimen Hall** (4–6 typographic panels, each 60–80vh). Each panel showcases a different Hangul structural component: initial consonants (초성), vowel clusters (중성), final consonants (종성), syllable blocks, and full words. Panels are placed on the broken grid — some spanning 8 of 12 columns, some only 4, some bleeding to the edge while their neighbor is inset 120px from the opposite edge. Panels overlap each other vertically by 24–36px, creating a layered depth that feels like oversize prints stacked on a light table. A thin frosted-glass divider (1px, rgba(255,255,255,0.28)) separates overlap zones. No horizontal scroll. All layout shifts occur on the vertical axis.

3. **Archive Footer** (single panel, 50vh). A dense typographic block — every Hangul consonant and vowel displayed as a grid of 40×40px frosted-glass tiles, each tile containing a single glyph at 22px. The tiles are arranged in the traditional stroke-order sequence. On hover, a tile expands to 80×80px with a slow spring (stiffness 60, damping 18) and displays the IPA romanization below the glyph in `caption` size. Background here shifts from frost to a deeper translucent amber — the only warm note in the palette.

**Spatial rhythm:** whitespace is architectural. No element crowds another. The broken grid is broken only once per viewport height — the rest of the composition breathes.

## Typography and Palette

**Typefaces (Google Fonts only):**

- **Display / Specimen glyphs:** [Noto Serif KR](https://fonts.google.com/specimen/Noto+Serif+KR) — weight 700–900. Used exclusively for the hero syllable and the large specimen glyphs in each panel. Noto Serif KR's strokes carry the right weight and classical tension for opulent treatment.
- **Headers / Section labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — variable, weights 300–700, the grotesque-neo workhorse. Used for all Latin headings, navigation labels, and UI chrome. Tracking set to `0.04em` for display sizes, `0.12em` for captions to push the grotesque character into clarity.
- **Body / Annotation:** [Noto Sans KR](https://fonts.google.com/specimen/Noto+Sans+KR) — weight 300–400. Used for any explanatory prose, panel captions, and the footer glyph grid romanizations. Pairs with Space Grotesk through shared structural geometry.
- **Monospaced accents:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400, used only for Unicode codepoints displayed alongside specimen glyphs (e.g., `U+D55C`).

**Palette — translucent frost:**

- `--frost-white`: `#F5F2EE` — the base ground, slightly warm white, carries grain overlay
- `--frost-glass`: `rgba(245, 242, 238, 0.22)` — the primary translucent surface, used for all frosted panels
- `--frost-border`: `rgba(255, 255, 255, 0.28)` — hairline dividers and tile outlines
- `--ink-deep`: `#1A1714` — primary text color, almost-black with a trace of warm brown
- `--ink-mid`: `#3D3832` — secondary text, annotation text
- `--ink-light`: `#8C8680` — captions, romanization labels, codepoints
- `--amber-archive`: `rgba(212, 178, 120, 0.18)` — the sole warm note, used only in the Archive Footer background; translucent so grain shows through
- `--bubble-sheen`: `rgba(255, 255, 255, 0.55)` — the highlight surface of floating glyph bubbles
- `--leather-shadow`: `rgba(26, 15, 8, 0.35)` — the drop shadow color that creates the leather-emboss effect on display glyphs

No gradients in the traditional sense. All color transitions are achieved through overlapping translucent layers — the "gradient" is the overlap of two frosted planes at different opacities.

## Imagery and Motifs

**No photographs.** No stock imagery. Visual richness comes from three sources:

1. **Leather-texture SVG filter.** The hero syllable and panel display glyphs carry a compound SVG filter: `feTurbulence` (type="fractalNoise", baseFrequency="0.04 0.08", numOctaves="6") → `feDisplacementMap` (scale="3.5") → `feComposite` (with the glyph shape) → `feDropShadow` (dx=0, dy=3, stdDeviation=6, flood-color="#1A0F08", flood-opacity=0.35). The result is a glyph that reads as if it were pressed into leather or stamped onto heavy cotton rag. The displacement is subtle — 3.5px maximum — so it reads as texture rather than distortion.

2. **Frosted-glass bubble motifs.** Three to five Hangul vowel glyphs (ㅏ, ㅡ, ㅣ, ㅗ, ㅜ) are rendered as absolutely-positioned SVG circles (diameter 80–160px) with:
   - `fill: rgba(255, 255, 255, 0.12)`
   - `stroke: rgba(255, 255, 255, 0.45)`, stroke-width 1px
   - A crescent specular highlight (small white arc at 20%/25% position, opacity 0.7)
   - The glyph set inside at 40–60% of the circle diameter, in weight 300, `--ink-light` color
   - These bubbles animate: on page load they drift upward at `translateY(-60px)` over 8–12 seconds with `ease-in-out` and a random `animation-delay` (0–4s), then loop. The motion is so slow it reads as atmospheric rather than animated.

3. **Grain overlay.** A full-viewport `<canvas>` element (or SVG feTurbulence filter applied to a pseudo-element) sits at `position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; opacity: 0.07`. This is the unified grain system — it applies to the entire page surface regardless of scroll position.

4. **Typewriter-effect text.** The site's Latin subtitle — "The geometry of Korean letterforms" — is rendered with a typewriter animation: each character appears at 60ms intervals with a blinking block cursor (2px × 1em, `--ink-deep` color, blinking at 530ms intervals). The animation triggers once on page load, no replay button. Once complete, the cursor disappears with a 200ms fade. This is the **only** animation that commands full attention — all other animations (bubbles, spring hovers) are peripheral.

5. **Tile grid (Archive Footer).** Each 40×40px glyph tile is a `<button>` element with `border: 1px solid var(--frost-border)`, `background: rgba(245, 242, 238, 0.12)`, `backdrop-filter: blur(4px)`. On hover: expand with spring animation, background shifts to `rgba(212, 178, 120, 0.22)`.

## Prompts for Implementation

Build hangul.dev as a **single-page typographic monograph** — one vertical scroll, no routing, no navigation hamburger menu. The page has exactly three sections (Aperture → Specimen Hall → Archive Footer), separated only by spatial breathing room (120–160px vertical gap between sections). There is no sticky header; the sole navigation affordance is a fixed top-right label in Space Grotesk weight 300 at 11px that reads "hangul.dev" in `--ink-light` — present but invisible unless you look for it.

**Aperture implementation:**
- Full-viewport section, `overflow: hidden`
- The frosted-glass tilted plane behind the hero glyph: a `<div>` with `transform: rotate(1.5deg)`, `width: 110vw`, `height: 80vh`, positioned to bleed off the right edge, with `backdrop-filter: blur(18px)`, `background: var(--frost-glass)`, and a `border: 1px solid var(--frost-border)` on all sides except the right bleed
- The hero 한 glyph: `font-size: clamp(240px, 35vw, 520px)`, `font-weight: 800`, set in Noto Serif KR, with the leather SVG filter applied via `filter: url(#leather-emboss)`
- Below the hero glyph, the typewriter subtitle begins immediately after the glyph settles (no delay on first load, 400ms delay on soft reload)
- Bubble glyphs are absolutely positioned within this section: one near top-left at 30% opacity, one near bottom-right at 18% opacity, one partially clipped by the right edge

**Specimen Hall implementation:**
- Each panel is a CSS Grid child that explicitly sets `grid-column` and `grid-row` to create overlaps
- Use `position: relative; z-index` to control stacking when panels overlap
- Panel background: `background: var(--frost-glass); backdrop-filter: blur(8px); border: 1px solid var(--frost-border)`
- Panel rotation: `transform: rotate(±1.5deg)` — alternate direction panel by panel
- Specimen glyph inside each panel: sized at `clamp(80px, 12vw, 160px)`, leather filter applied
- Latin label (Space Grotesk, 11px, weight 400, `--ink-light`, `letter-spacing: 0.14em`, ALL CAPS) floats above the panel at `-16px` vertical offset — it appears to sit between two overlapping panels
- Unicode codepoint displayed in JetBrains Mono at 10px below each glyph

**Archive Footer implementation:**
- Background: `background: var(--amber-archive)`; grain overlay shows through because amber is translucent
- Tile grid: CSS Grid, `grid-template-columns: repeat(auto-fill, 40px)`, `gap: 4px`
- Spring expansion on hover: use Web Animations API with `{ transform: 'scale(2)', zIndex: 10 }` at `{ easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', duration: 320 }` — the cubic-bezier produces the spring overshoot without a JS spring library
- Romanization text appears below the glyph during the expanded state only, fading in at 160ms

**Animation principles:**
- Typewriter effect: JS-driven character-by-character reveal, 60ms per character, cursor blinks at 530ms, disappears 200ms after completion
- Bubble drift: CSS `@keyframes bubbleDrift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-60px) rotate(2deg); } }`, duration 8–14s, staggered delays
- Tile spring: Web Animations API only, no GSAP, no Framer Motion
- Grain: static, no animation — grain canvas is rendered once, painted to a fixed-position element
- **AVOID**: scroll-triggered reveals, parallax depth effects, stagger cascades, magnetic cursor effects — these are all corpus-overused (parallax 91%, stagger 62%)

**AVOID in implementation:**
- CTA buttons
- Pricing or feature comparison blocks
- Stats counters or number grids
- Navigation menu with multiple pages
- Any use of warm-dominant palette (no orange, no red, no amber except the Archive Footer single-panel use)
- Gradient backgrounds (use layered translucency instead)

## Uniqueness Notes

**Seed:** aesthetic: grainy-textured, layout: broken-grid, typography: grotesque-neo, palette: translucent-frost, patterns: typewriter-effect, imagery: leather-texture, motifs: bubble-playful, tone: opulent-grand

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

1. **Translucent-frost palette with no warm ground.** The corpus is 93% warm-palette and 84% gradient. hangul.dev is the inverse: a cool, slightly-warm-white ground that reads as cold paper, with color depth achieved entirely through overlapping translucent layers — no gradient, no warmth except a single confined amber note in the footer. The frost effect is structural (backdrop-filter layers), not cosmetic. The grain-over-translucency combination — textured frost — has not appeared in this form in the corpus.

2. **Leather-texture SVG filter on typographic glyphs.** The imagery category shows leather-texture at 0% in the corpus. Every other design using texture applies it to backgrounds or decorative elements. hangul.dev applies a leather displacement and noise filter directly to the letterforms themselves — the Hangul glyphs read as if embossed into rag paper or stamped into hide. This is the inverse of the usual approach and it is new to the corpus.

3. **Broken-grid used as a typographic specimen display system.** Broken-grid at <5% in the corpus, and in every existing instance it is used for photo collages or card layouts. hangul.dev uses the broken grid as a *specimen rack* — the overlapping, rotated panels are literal typographic specimen sheets placed on a light table, stacked and offset. The grid-breaking is motivated by the content (showcasing letterform components) rather than aesthetic novelty.

4. **Bubble-playful motifs deployed as atmospheric counterweight to institutional gravity.** The corpus uses bubble-playful (3%) always as the primary personality register. hangul.dev uses it as a counterpoint: the base tone is opulent-grand and serious, and the floating frosted bubbles are the only element of lightness — making them feel like a crack in a museum vitrine rather than a design theme. The contrast creates personality.

5. **Typewriter effect as singular narrative gesture.** Typewriter-effect appears in the corpus but always as a repeated scroll-triggered reveal. hangul.dev uses it exactly once, for a single sentence, on load — and never repeats it. This restraint makes the typewriter effect feel like a statement rather than a trick.
<!-- DESIGN STAMP
  timestamp: 2026-05-08T01:08:30
  domain: hangul.dev
  seed: unspecified
  aesthetic: hangul.dev is an opulent celebration of the Korean writing system as high typogr...
  content_hash: de5356373360
-->