# Design Language for hangul.day

## Aesthetics and Tone

hangul.day celebrates the Korean alphabet -- Hangul -- as one of the most deliberately designed writing systems in human history. King Sejong the Great didn't stumble into Hangul; he engineered it in 1443 with geometric precision, mapping consonant shapes to the physical positions of the tongue, teeth, and throat. This site channels that same spirit of intentional, rational beauty through a **neomorphism** aesthetic: soft-extruded UI elements that appear to rise from or press into a single continuous surface, like letterforms embossed into clay.

The visual mood is **professional** but not cold. Think of a Korean design studio's showroom -- everything is quiet, considered, and immaculately surfaced. The neomorphic treatment gives every element a tactile, almost ceramic quality, as if each card and button were a porcelain tile glazed in pale gray. The site feels like holding a beautifully bound typography specimen book: weighty, smooth, and satisfying to touch.

The tonal register sits between a museum exhibition catalog and a modern language-learning app. There is scholarly rigor in how Hangul's structure is presented, but the **bubble-playful** motifs -- soft rounded shapes that echo the circular vowel marks (ㅇ, ㅎ) in Hangul -- keep the experience from becoming austere. The bubbles float and drift subtly, a nod to the playful phonetic building blocks that make Hangul uniquely learnable among writing systems.

Inspirations: the soft-shadow interfaces of early neumorphic explorations by Alexander Plyuto; the ceramic sculptures of Korean artist Yeesookyung (her "Translated Vase" series where broken ceramics are reassembled with gold); the muted palette of a Seoul winter morning -- concrete, frost, and the faintest warmth of ondol underfloor heating.

## Layout Motifs and Structure

The layout follows a **card-grid** system that directly mirrors Hangul's own structural logic. In Hangul, each syllable block is a miniature grid: consonants and vowels slot into fixed positions within a square cell (초성/중성/종성 -- initial, medial, final). hangul.day replicates this at the macro level. The page is organized as a grid of neomorphic cards, each card a self-contained unit of content, and the cards themselves can be visually "assembled" like Hangul syllable blocks.

**Grid Specifications:**
- Desktop: 3-column grid with 24px gutters, maximum width 1200px, centered with generous side margins (minimum 80px)
- Each card uses a 1:1 or 4:3 aspect ratio, maintaining the square-ish proportions of Hangul syllable blocks
- Cards are arranged in groups of 2-6 that form visual "syllable clusters" -- a large card (the initial consonant position) accompanied by smaller satellite cards (vowel and final consonant positions)
- Tablet (768px-1024px): 2-column grid, 20px gutters, cards stack into vertical syllable columns
- Mobile (<768px): single column, cards become full-width tiles with 16px vertical spacing

**Depth System:**
Every card sits on the same background plane and is defined purely by neomorphic shadows -- no borders, no outlines. Cards in their default state show a gentle convex extrusion (outer shadow: `4px 4px 8px rgba(0,0,0,0.08), -4px -4px 8px rgba(255,255,255,0.9)`). On hover, cards transition to a concave (pressed-in) state over 300ms with an ease-out curve, as if the user's finger is pressing the tile into soft clay. This inversion of shadow creates a satisfying tactile feedback loop.

**Vertical Flow:**
The page scrolls vertically through three narrative zones:
1. **Hero Zone** -- a single oversized card containing an animated Hangul syllable that assembles itself from component jamo (individual letters). The background is a flat expanse of the primary cool-gray surface.
2. **Exploration Zone** -- the main card grid, where each card presents a facet of Hangul (history, structure, phonetics, cultural significance, comparison with other scripts). Cards appear with staggered fade-in as the user scrolls.
3. **Immersion Zone** -- a full-width section where the grid dissolves and individual Hangul characters float as large, semi-transparent neomorphic bubbles against the gray field, slowly drifting and rotating. This is a meditative, interactive space where hovering over a bubble plays its phonetic sound (conceptually -- the design supports this interaction model).

No navigation bar. No footer links. No hamburger menu. The scroll is the only navigation. A subtle, thin progress indicator -- a horizontal line at the very top of the viewport -- shows scroll position using a slightly darker gray (#9BA4B0) that fills left-to-right.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Lexend" (Google Fonts) -- a geometric sans-serif specifically designed for reading proficiency, with open, round letterforms that echo the circular elements in Hangul vowels. Used at 2.5rem-5rem, weight 600 (SemiBold), `letter-spacing: -0.02em`, `line-height: 1.1`. Headlines in sentence case. The roundness of Lexend's counters harmonizes with the bubble-playful motif.
- **Korean Display Text:** "Noto Sans KR" (Google Fonts) -- Google and Adobe's pan-CJK typeface, chosen for its geometric clarity and excellent weight range. Used at weights 300-700. When Hangul characters are displayed as specimens (large, decorative), use weight 100 (Thin) at 8rem+ to emphasize the elegant stroke geometry. When used as readable Korean body text, weight 400 at 1.125rem.
- **Body / Descriptive Text:** "Inter" (Google Fonts) -- a humanist sans-serif with superb legibility at small sizes, weight 400 (Regular) for body and 500 (Medium) for emphasis. Size: 1rem (16px base), `line-height: 1.7`, `letter-spacing: 0.01em`. Inter's tall x-height and open apertures make it ideal for the explanatory, educational content that hangul.day presents.
- **Monospace Accents:** "JetBrains Mono" (Google Fonts) -- used sparingly for phonetic transcriptions, romanization guides, and IPA notation. Weight 400, size 0.875rem, with a slightly tinted background (#E8ECF1) to distinguish technical notation from prose.

**Palette (Cool-Grays):**

The entire palette is built from cool grays with blue undertones, creating the porcelain/ceramic surface quality that neomorphism demands. Color is used with extreme restraint -- the site is nearly monochromatic, with a single accent color providing the only warmth.

| Role | Color | Hex |
|------|-------|-----|
| Background Surface | Pale cool gray | #E4E8ED |
| Card Surface (default) | Slightly lighter | #EDF0F5 |
| Shadow Dark | Blue-tinted dark | #C8CDD5 |
| Shadow Light | Near-white | #FAFCFF |
| Text Primary | Deep charcoal-blue | #2B303A |
| Text Secondary | Mid-gray | #6B7280 |
| Accent (Sejong Blue) | Muted Korean blue | #4A7FB5 |
| Accent Hover | Deeper blue | #3A6A9E |
| Bubble Tint | Translucent blue | rgba(74, 127, 181, 0.08) |
| Phonetic Highlight | Soft lavender | #D4DAEB |

The accent color -- "Sejong Blue" (#4A7FB5) -- references the blue used in Korean national symbols and the traditional cheongsam blue of Joseon-era scholarly ceramics. It appears only in interactive states (hovered links, active cards, the scroll progress bar, and the floating bubble outlines in the Immersion Zone). Everything else is gray-on-gray, letting the neomorphic depth do the visual work.

## Imagery and Motifs

**Hangul Jamo as Visual Architecture:**
The primary imagery is Hangul itself. Individual jamo (ㄱ, ㄴ, ㄷ, ㅁ, ㅂ, ㅅ, ㅇ, etc.) are rendered as large SVG elements -- not as text glyphs but as geometric illustrations that emphasize the stroke construction. Each consonant is drawn with visible stroke order indicators (numbered arrows in Sejong Blue at 30% opacity), revealing the engineering logic behind each shape. The SVG strokes use `stroke-linecap: round` and `stroke-linejoin: round` to maintain the soft, bubble-like aesthetic.

**Neomorphic Bubbles:**
The bubble-playful motif manifests as circular neomorphic elements scattered across the background surface. These are CSS-only circles (no images) with the same shadow treatment as the cards: convex by default, concave on hover. Sizes range from 40px to 120px diameter. They are positioned using CSS grid or absolute positioning to create a gentle, organic scatter pattern. Each bubble contains a single Hangul vowel character (ㅏ, ㅓ, ㅗ, ㅜ, ㅡ, ㅣ) rendered in Noto Sans KR Thin at a size proportional to the bubble. The bubbles drift vertically at 0.5px/second using a CSS `@keyframes` animation with `translateY` oscillation (amplitude: 10px, duration: 8-14s randomized per bubble), creating a gentle floating effect.

**Syllable Assembly Animation:**
The hero section features an animated sequence where three jamo -- an initial consonant, a medial vowel, and a final consonant -- slide from separate positions into their correct slots within a Hangul syllable block. The animation uses CSS transforms: each jamo starts 60px from its target position (consonant from left, vowel from right, final from below) and eases into place over 1.2 seconds with a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring curve. The assembled syllable then receives the neomorphic convex shadow treatment, as if it has solidified into the surface.

**Mouth-Position Diagrams:**
For sections explaining Hangul's phonetic logic, minimalist SVG diagrams show cross-sections of the human mouth, tongue, and throat in the same cool-gray palette. The active articulation point is highlighted with a subtle Sejong Blue fill. These diagrams use only strokes (no filled regions except the highlight), maintaining the line-drawn, technical quality of the overall design.

**Texture:**
The background surface has an extremely subtle noise texture -- a repeating 200x200px SVG pattern of 1px dots at 2% opacity (#2B303A with alpha 0.02) -- to prevent the flat gray from appearing dead on screen. This gives the surface a faint ceramic grain, as if the entire page were a sheet of unglazed porcelain.

## Prompts for Implementation

**Full-Screen Narrative Experience:**
hangul.day is a single-page vertical scroll that tells the story of Hangul from invention to global recognition. There are no separate pages, no routing, no traditional navigation. The entire experience is one continuous descent through content zones. The scroll itself is the interface. Implement with `scroll-behavior: smooth` on the `html` element but avoid scroll-jacking or hijacking -- let the user scroll naturally.

**Neomorphic Shadow System (CSS Custom Properties):**
Define the entire shadow system as CSS custom properties on `:root` so it can be tuned globally:
```
--neo-bg: #E4E8ED;
--neo-shadow-dark: #C8CDD5;
--neo-shadow-light: #FAFCFF;
--neo-distance: 6px;
--neo-blur: 12px;
--neo-convex: var(--neo-distance) var(--neo-distance) var(--neo-blur) var(--neo-shadow-dark),
              calc(-1 * var(--neo-distance)) calc(-1 * var(--neo-distance)) var(--neo-blur) var(--neo-shadow-light);
--neo-concave: inset var(--neo-distance) var(--neo-distance) var(--neo-blur) var(--neo-shadow-dark),
               inset calc(-1 * var(--neo-distance)) calc(-1 * var(--neo-distance)) var(--neo-blur) var(--neo-shadow-light);
```
All interactive elements toggle between `box-shadow: var(--neo-convex)` and `box-shadow: var(--neo-concave)` with a `transition: box-shadow 0.3s ease`.

**Scale-Hover Interaction Pattern:**
Cards use **scale-hover** as their primary interaction pattern. On hover, a card scales to `transform: scale(1.03)` while simultaneously transitioning from convex to concave shadow. The scale-up creates a "lifting toward the viewer" sensation before the shadow inversion creates the "press-in" sensation -- a two-phase tactile illusion. The transition timing is staggered: scale happens over 200ms, shadow over 300ms, creating an organic, not-quite-simultaneous response.

**Staggered Card Reveal on Scroll:**
Cards in the Exploration Zone use `IntersectionObserver` to detect when they enter the viewport. Each card starts with `opacity: 0; transform: translateY(20px)` and transitions to `opacity: 1; transform: translateY(0)` over 500ms. Cards within the same visual "syllable cluster" stagger their reveal by 80ms per card (first card at 0ms, second at 80ms, third at 160ms), mimicking the left-to-right, top-to-bottom reading order of Hangul within a syllable block.

**Floating Bubble Layer:**
The Immersion Zone at the bottom uses a `<canvas>` element or CSS-only approach with 20-30 circular elements positioned absolutely within a `position: relative` container. Each circle has:
- Neomorphic shadow (convex)
- A Hangul vowel character centered within
- A slow vertical drift animation (`@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }`)
- On hover: scale to 1.15, shadow inverts to concave, the character color shifts from #6B7280 to #4A7FB5, and a subtle `box-shadow` ring in rgba(74, 127, 181, 0.15) appears at 2px offset

**Storytelling Structure:**
The narrative flows:
1. "A king's gift to his people" -- Hero with assembling syllable animation
2. "Letters shaped by the body" -- Mouth-position diagrams showing how consonant shapes map to tongue/lip positions
3. "The geometry of speech" -- Card grid showing all 14 basic consonants and 10 basic vowels as neomorphic tiles
4. "Building blocks of meaning" -- Interactive demonstration of how jamo combine into syllable blocks
5. "A writing system for the world" -- Cultural impact, UNESCO recognition, global adoption

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, newsletter signup forms, testimonial carousels, hamburger menus, sticky headers, gradient backgrounds, drop shadows with warm tones, any color outside the cool-gray palette except Sejong Blue.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Neomorphism as Cultural Metaphor:** While neomorphism at 2% frequency in the portfolio is used generically as a UI trend, hangul.day repurposes it as a metaphor for Hangul's own design philosophy -- letterforms that were consciously engineered to "emboss" the shapes of speech organs. The pressed-in/raised-out shadow metaphor directly parallels how Hangul consonants were designed to represent the physical impression of tongue against palate. No other design in the portfolio uses neomorphism with this level of cultural-semantic alignment.

2. **Card-Grid as Writing System Mirror:** The card-grid layout (13% frequency) is typically used for product displays or portfolio showcases. hangul.day subverts this by making the grid itself a representation of Hangul's syllable-block structure -- cards cluster into consonant-vowel groups that visually echo how jamo compose into syllables. The layout IS the content, not just a container for it.

3. **Monochromatic Cool-Gray Discipline:** At only 6% frequency, the cool-grays palette is rare in the portfolio, and hangul.day pushes it further by using cool grays as the ONLY color family, with a single muted blue accent. Most designs use 5+ colors; hangul.day uses effectively two (gray and blue), relying entirely on shadow depth for visual hierarchy. This extreme restraint is unprecedented in the collection and directly serves the neomorphic aesthetic, which requires a near-monochrome surface to make its shadow illusions work.

4. **Bubble-Playful Motif as Linguistic Element:** The bubble motif (3% frequency) is typically decorative. Here, each bubble contains an actual Hangul vowel, transforming the playful floating circles into functional phonetic specimens. The bubbles are not ornament -- they are content.

5. **Typography as Primary Imagery:** Unlike 94% of designs that list "minimal" imagery, hangul.day makes the writing system itself the visual centerpiece. There are no photographs, no illustrations of people or objects -- only letterforms, stroke diagrams, and mouth-position schematics. The typography IS the imagery, collapsing two categories into one.

**Chosen Seed/Style:** aesthetic: neomorphism, layout: card-grid, typography: geometric-sans, palette: cool-grays, patterns: scale-hover, imagery: minimal, motifs: bubble-playful, tone: professional

**Avoided Patterns from Frequency Analysis:**
- Avoided "playful" aesthetic (97% saturated) -- used "neomorphism" (2%) instead
- Avoided "centered" layout (99% saturated) -- used "card-grid" (13%) instead
- Avoided "warm" palette (100% saturated) -- used "cool-grays" (6%) instead
- Avoided "scroll-triggered" as primary pattern (96% saturated) -- used "scale-hover" (8%) as primary, with scroll-triggered only for initial card reveal
- Avoided "friendly" tone (97% saturated) -- used "professional" (11%) instead
- Avoided "mono" typography (99% saturated) -- used "geometric-sans" (8%) instead
- Avoided "vintage" motifs (79% saturated) -- used "bubble-playful" (3%) instead
<!-- DESIGN STAMP
  timestamp: 2026-03-09T12:10:14
  domain: hangul.day
  seed: seed
  aesthetic: hangul.day celebrates the Korean alphabet -- Hangul -- as one of the most delibe...
  content_hash: 9a564d2092c7
-->