# Design Language for hangul.dev

## Aesthetics and Tone

hangul.dev inhabits the visual world of a high-end Korean typography journal -- the kind of publication printed on heavy uncoated stock with deep burgundy ink, where each spread is a meditation on the geometric perfection of Hangul letterforms. The aesthetic is **editorial** in the tradition of luxury cultural magazines like *Kinfolk* meets *Typography Seoul*, where white space is not emptiness but reverence, and every element on the page exists because it earned its place.

The tone is **elegant-sophisticated** -- not the cold sophistication of finance or luxury goods, but the warm sophistication of a calligrapher who has spent forty years perfecting the balance of a single jamo (자모). There is scholarly depth here without academic dryness, cultural pride without nationalism, and technical precision without clinical detachment. The site should feel like opening a beautifully bound book about the history and structure of King Sejong's writing system -- one that makes you want to trace letterforms with your finger.

The overall mood draws from the intersection of Korean jeongja (正字) -- the formal, squared style of Hangul -- and Western editorial design. Think of the way a well-designed atlas uses grids and margins to create a sense of authority and timelessness. The burgundy-and-cream palette evokes the feeling of aged hanji (한지, traditional Korean paper) with ink that has oxidized to a deep wine-red over centuries.

## Layout Motifs and Structure

The layout follows a **magazine-spread** architecture that borrows directly from the compositional logic of Korean calligraphy copybooks (서예 교본). Each viewport-height section is treated as a "spread" -- a two-page opening where left and right halves serve different but complementary purposes.

**Primary Grid System:**
The page uses an asymmetric 12-column grid with a 2:3 ratio split. The left 5 columns form the "text field" (본문영역) and the right 7 columns form the "display field" (전시영역). This mirrors the traditional Korean book layout where annotation and body text occupy different spatial zones. Column gaps are set at `clamp(16px, 2vw, 32px)`. The grid has a persistent vertical rhythm based on a 24px baseline.

**Spread Compositions:**
- **Spread 1 (Hero):** The domain name "hangul.dev" occupies the right display field in massive Playfair Display, while the left text field holds a vertical sequence of Hangul jamo (ㄱ ㄴ ㄷ ㄹ...) stacked in a thin column, each character fading in through progressive disclosure as the user scrolls into the spread. A single horizontal rule in burgundy (#6B1D2A) separates the hero from the body, spanning the full viewport width.

- **Spread 2 (The System):** A diagrammatic layout showing the geometric construction of Hangul characters. The left text field contains explanatory prose in Cormorant Garamond, while the right display field shows animated SVG constructions of consonants and vowels being built from their component strokes -- circles, vertical lines, horizontal lines -- drawn with thin burgundy strokes on cream.

- **Spread 3 (The History):** An editorial photography spread. A full-bleed desaturated photograph (with a burgundy duotone overlay at 30% opacity) of historical Hangul manuscripts occupies the right 8 columns, bleeding off the right edge. The left 4 columns contain a pull quote in Playfair Display Italic at 2.5rem, with a thin grid-line border on the right edge only.

- **Spread 4 (The Grid):** This spread breaks the two-column convention to reveal the underlying grid itself as content. Thin 1px lines in faded burgundy (#6B1D2A at 15% opacity) draw the full 12-column grid across the viewport, and Hangul characters are placed at grid intersections like specimens on a pin board. This is where the **grid-lines** motif becomes literal and thematic.

- **Spread 5 (The Code):** For the developer audience (this is a .dev domain), a spread showing Hangul encoding, Unicode blocks, and character composition algorithms. The left text field uses IBM Plex Mono for code snippets, while the right display field shows a visual Unicode chart with characters organized by their jamo components.

**Navigation:**
No traditional navigation bar. Instead, a thin burgundy vertical line on the far left (column 0.5 of the grid) acts as a scroll progress indicator, with small circular nodes marking each spread. Clicking a node smoothly scrolls to that spread. The line is 2px wide, colored #6B1D2A, and the active node fills solid while inactive nodes are hollow rings.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Playfair Display" (Google Fonts) -- the serif with pronounced stroke contrast that echoes the thick-thin dynamics of Korean brush calligraphy. Used at `clamp(3rem, 8vw, 7rem)` for the hero headline and `clamp(2rem, 4vw, 3.5rem)` for spread headlines. Weight 700 for primary headlines, 400 italic for pull quotes and secondary display text. Letter-spacing: `-0.02em` for headlines (tighter than default to create density). Line-height: 1.05 for display sizes.

- **Body Text:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif that pairs with Playfair Display through shared DNA (both are high-contrast transitional/didone-adjacent designs) but is more readable at body sizes. Weight 400 for body, 600 for emphasis. Size: `clamp(1rem, 1.2vw, 1.15rem)`. Line-height: 1.7 (generous for readability in an editorial context). Letter-spacing: `0.01em`. Color: Deep Burgundy Text (#3A0E16) on cream backgrounds.

- **Monospace / Code:** "IBM Plex Mono" (Google Fonts) -- chosen for its Korean language support and technical clarity. Used for code blocks, Unicode values, and technical annotations. Weight 400, size 0.9rem, with a background of `#F2E8DC` (slightly darker cream) and a left border of 3px solid #6B1D2A.

- **Korean Display (for Hangul specimens):** "Noto Serif KR" (Google Fonts) -- the most authoritative Korean serif available on Google Fonts, used exclusively for displaying Hangul characters as specimens. Weight 900 (Black) for large display, weight 300 (Light) for body-sized Korean text. When Korean characters appear as design elements rather than readable text, they are set at `clamp(4rem, 12vw, 10rem)` in Noto Serif KR Black.

**Palette:**

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Primary | Deep Burgundy | `#6B1D2A` | Headlines, rules, navigation line, interactive accents |
| Background | Aged Cream | `#F5EDE0` | Page background, all spread backgrounds |
| Text | Burgundy Ink | `#3A0E16` | Body text, captions, annotations |
| Accent Light | Faded Rose | `#C9A2A0` | Hover states, secondary borders, grid-line overlays |
| Accent Dark | Oxblood | `#4A0E1A` | Active states, deep shadows, code block borders |
| Grid Ghost | Cream Shadow | `#E8D9C8` | The 12-column grid lines when revealed, subtle dividers |
| Highlight | Warm Gold | `#B8860B` | Sparingly used for the single most important element per spread -- a highlighted jamo, a key date, a focal character |
| White | Hanji White | `#FEFCF8` | Card backgrounds, modal overlays, text on dark sections |

The palette is deliberately restrained -- burgundy and cream dominate 90% of the visual field, with gold appearing as a rare accent that draws the eye to the single most important element in each spread. This restraint mirrors the discipline of Korean calligraphy, where a single brushstroke carries the weight of meaning.

## Imagery and Motifs

**Photography (Editorial Style):**
The imagery mode is **photography**, but treated with an editorial sensibility that transforms photographs into design elements rather than illustrations. All photographs receive the following treatment:
- Desaturation to 30% (converting most color information to tonal values)
- A burgundy duotone overlay using `mix-blend-mode: multiply` with `#6B1D2A` at 25-40% opacity
- High contrast adjustment (+15%) to push shadows deeper and highlights brighter
- Grain overlay at 5% opacity using a CSS `background-image` noise pattern

Subject matter for photographs: close-up details of Hangul letterforms carved in stone, wooden printing blocks (목활자), brush calligraphy in progress, the ruled grids of calligraphy practice paper, aged manuscripts with oxidized ink. No faces, no people, no modern technology -- only the artifacts of writing.

**Grid-Lines Motif:**
The defining visual motif is the **grid-line** -- thin, precise, architectural lines that reference both the geometric construction system of Hangul and the ruled grids of calligraphy copybooks. These lines serve multiple purposes:
1. **Structural:** The 12-column grid is faintly visible at all times (`#E8D9C8` at 60% opacity), turning the underlying page architecture into a decorative element
2. **Illustrative:** When showing Hangul character construction, grid lines become the scaffold on which characters are built -- horizontal center line, vertical center line, outer boundary, and proportional division lines
3. **Transitional:** Between spreads, grid lines animate -- they extend, contract, and reposition to mark the shift from one compositional mode to another
4. **Interactive:** On hover over grid intersections in Spread 4, a Hangul character blooms at the intersection point, its construction lines briefly visible before the character solidifies

**Hangul Construction Diagrams:**
SVG-based diagrams showing how Hangul characters are assembled from jamo components within a square grid. Each diagram uses:
- Thin burgundy strokes (1.5px) for construction lines
- Thicker strokes (3px) for the actual character strokes
- Animated `stroke-dasharray` / `stroke-dashoffset` for the drawing-on effect
- A faint gold (#B8860B at 20% opacity) fill for completed characters

**Decorative Elements:**
- Thin horizontal rules (1px, #6B1D2A) used as section dividers, always spanning a specific number of grid columns (never the full width -- asymmetry is key)
- Small circular "period" marks (6px diameter, filled #6B1D2A) used as list markers and spread-end indicators
- A repeating pattern of small Hangul jamo (ㅇ) used as a watermark in the background at 3% opacity, creating a subtle texture that rewards close inspection

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site must function as a single continuous editorial narrative -- a story about the Hangul writing system told through the language of magazine design. There is no "app" here, no dashboard, no product. There is only the story, unfolding spread by spread.

**Hero Sequence (Spread 1):**
The page opens to a full-viewport cream (#F5EDE0) field. The word "hangul" appears in Playfair Display at maximum size (`clamp(5rem, 12vw, 9rem)`) in the right display field, colored Deep Burgundy (#6B1D2A). Below it, smaller, "한글" in Noto Serif KR Black at 60% of the Latin size. The left text field is initially empty. After a 1.2-second pause, Hangul jamo characters begin appearing in the left column one by one, each fading in over 400ms with a 200ms stagger delay. They stack vertically: ㄱ, ㄴ, ㄷ, ㄹ, ㅁ, ㅂ, ㅅ, ㅇ, ㅈ, ㅊ, ㅋ, ㅌ, ㅍ, ㅎ -- the 14 basic consonants in traditional order. Each jamo is set in Noto Serif KR at 2rem, colored Faded Rose (#C9A2A0), except the currently-appearing one which flashes Deep Burgundy before settling to rose.

**Progressive Disclosure Pattern:**
Content within each spread is revealed through **progressive disclosure** rather than appearing all at once. As the user scrolls into a spread, elements appear in a choreographed sequence:
1. First: the structural grid lines for that spread (opacity 0 to 0.6, duration 600ms)
2. Second: the primary headline or display element (translateY(20px) to 0, opacity 0 to 1, duration 500ms, 200ms delay)
3. Third: the photographic or diagrammatic content (scale(0.98) to scale(1), opacity 0 to 1, duration 700ms, 400ms delay)
4. Fourth: body text (opacity 0 to 1, duration 400ms, 600ms delay)
5. Last: decorative accents and secondary elements (opacity 0 to 1, duration 300ms, 800ms delay)

This five-stage reveal creates a reading rhythm that feels like turning pages in a physical magazine -- each element has its moment.

**Scroll Behavior:**
Use CSS `scroll-snap-type: y mandatory` on the main container to create discrete spread-to-spread navigation. Each spread is exactly `100vh`. The snap creates the feeling of flipping between pages in a magazine. Between spreads, a brief moment of the cream background is visible (a 20vh gap styled as empty cream), mimicking the gutter between physical pages.

**Interactive Hangul Builder (Spread 4):**
In the grid-intersection spread, implement a lightweight interaction: when the user hovers over (or taps on mobile) a grid intersection point, a random Hangul syllable appears at that point. The syllable is constructed visually -- first the initial consonant draws on (stroke animation, 300ms), then the vowel (300ms), then the final consonant if present (300ms). The construction uses the actual geometric rules of Hangul composition (left-right for vertical vowels, top-bottom for horizontal vowels). After 2 seconds, the character fades to 30% opacity and remains as a ghost, building up a constellation of characters as the user explores. This is implemented with SVG and lightweight JavaScript -- no heavy libraries.

**Code Section (Spread 5):**
For the developer-facing content, use styled `<pre>` blocks with IBM Plex Mono, showing:
- Unicode code points for Hangul Jamo (U+1100-U+11FF)
- The Hangul Syllables block (U+AC00-U+D7AF)
- A JavaScript function demonstrating Hangul decomposition: `function decompose(char) { ... }`
Code blocks sit on a slightly darkened cream (#F2E8DC) with a left border in Deep Burgundy (3px solid #6B1D2A). Syntax highlighting uses only the palette colors: keywords in Deep Burgundy, strings in Warm Gold, comments in Faded Rose, values in Oxblood.

**Typography Animation:**
On the hero spread, the headline "hangul" has a subtle CSS animation: each letter's `font-variation-settings` (if using a variable font fallback) or `letter-spacing` oscillates by 0.5px over a 6-second cycle, creating a barely perceptible breathing effect. This is almost subliminal -- the user should feel the text is alive without being able to immediately identify why.

**Responsive Approach:**
On viewports below 768px, the magazine-spread layout collapses from the 2:3 split to a single-column editorial flow. The grid-lines motif shifts from a 12-column to a 4-column grid. Photography that was right-aligned in desktop becomes full-width with increased duotone overlay (50% opacity) to ensure text readability when content overlaps. The scroll-snap behavior is relaxed (changed to `proximity`) on mobile to prevent disorienting jumps on small screens.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, centered-everything compositions, neon colors, playful/bouncy animations, generic hero-with-button patterns, stock photography of people at computers, cookie-cutter SaaS landing page structures.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Hangul Construction as Design System:** No other design in the portfolio uses a writing system's geometric construction rules as the foundation for its visual grid and motif system. The grid-lines here are not decorative afterthoughts -- they are the actual proportional scaffolding used to construct Korean characters, repurposed as page architecture. This creates a deep thematic resonance between content (Hangul) and container (layout grid) that is structurally impossible to replicate for a non-writing-system domain.

2. **Burgundy-Cream as Sole Palette:** At only 1% frequency in the portfolio, the burgundy-cream palette is virtually unused. While other designs layer 6-8 colors, this design restricts itself to essentially two colors (burgundy and cream) with a single gold accent used sparingly. This chromatic austerity is the design equivalent of a haiku -- maximum impact through maximum restraint.

3. **Magazine-Spread with Scroll-Snap:** The combination of magazine-spread layout (8% frequency) with CSS scroll-snap to create discrete "page turns" is not used in any other design. Most layouts treat the web page as a continuous scroll. This design treats it as a bound codex with discrete openings, which is particularly apt for a domain about a writing system -- writing systems live in books, and books have pages.

4. **Progressive Disclosure as Editorial Rhythm:** While progressive-disclosure appears at only 5% frequency, here it is elevated from a UI pattern to an editorial storytelling device. The five-stage reveal sequence mimics the experience of a reader's eye moving across a magazine spread -- from the structural frame, to the headline, to the image, to the body, to the details. This is progressive disclosure not as information architecture but as narrative pacing.

5. **Bilingual Typography as Design Element:** The pairing of Playfair Display (Latin) with Noto Serif KR (Korean) creates a visual dialogue between two typographic traditions. Korean characters are treated not as foreign text requiring translation but as visual specimens worthy of display -- giant, beautiful, and central. This bilingual approach at the typographic level is unique in the portfolio.

**Chosen seed/style:** aesthetic: editorial, layout: magazine-spread, typography: playfair-elegant, palette: burgundy-cream, patterns: progressive-disclosure, imagery: photography, motifs: grid-lines, tone: elegant-sophisticated

**Avoided patterns from frequency analysis:**
- Avoided `playful` aesthetic (97% frequency) in favor of `editorial` (27%)
- Avoided `centered` layout (99% frequency) in favor of `magazine-spread` (8%)
- Avoided `mono` typography dominance (99% frequency) -- mono is used only for code blocks via IBM Plex Mono, never as a primary voice
- Avoided `warm` as palette descriptor (100% frequency) in favor of the specific `burgundy-cream` (1%)
- Avoided `scroll-triggered` as primary pattern (96% frequency) in favor of `progressive-disclosure` (5%)
- Avoided `minimal` imagery (94% frequency) by using photography with strong editorial treatment
- Avoided `friendly` tone (97% frequency) in favor of `elegant-sophisticated` (7%)
- Avoided `vintage` motifs (79% frequency) in favor of `grid-lines` (7%)
<!-- DESIGN STAMP
  timestamp: 2026-03-09T12:10:13
  domain: hangul.dev
  seed: seed
  aesthetic: hangul.dev inhabits the visual world of a high-end Korean typography journal -- ...
  content_hash: 053d00e568b5
-->