# Design Language for hangeul.day ## Aesthetics and Tone hangeul.day channels the atmosphere of a **light-academia** study devoted to the Korean writing system -- a space that feels like the private reading room of a comparative linguistics professor at a European university in autumn, where shelves of leather-bound volumes on East Asian philology sit alongside open manuscripts of Hunminjeongeum (the 1446 treatise that introduced Hangeul to the world). The light is warm and directional, falling through tall, narrow windows onto cream-colored pages. There is an intellectual warmth here -- not the dusty gloom of dark-academia, but the bright clarity of late-morning sunlight on an oak desk, illuminating the calligraphic brushstrokes of Sejong's scholars. The tone is **scholarly-intellectual** without being austere: it conveys reverence for one of the most scientifically designed writing systems in human history while remaining inviting to the curious visitor. Hangeul is a system of stunning phonological logic -- consonant shapes that map to tongue position, vowels built from three cosmic elements (heaven, earth, human) -- and the design language must honor that rational beauty. Think of the intersection between Korean calligraphic tradition and Enlightenment-era typographic obsession: the precision of a type specimen sheet married to the flowing grace of seoye (Korean calligraphy). The prevailing mood is contemplative discovery. Every scroll position reveals a new facet of Hangeul's design -- not as a museum exhibit behind glass, but as a living system inviting the visitor to trace its logic. The site breathes with the quiet confidence of a well-annotated edition of a classic text: authoritative, generous with knowledge, and visually sumptuous without ostentation. ## Layout Motifs and Structure The layout follows an **editorial-flow** paradigm inspired by the structure of a scholarly illustrated monograph -- the kind published by a university press with generous margins, pull quotes in the gutters, and full-bleed plates between chapters. Content does not scroll in a single monotonous column; it unfolds as a curated reading experience with deliberate rhythm and pacing. **Structural Principles:** - **The Jeongeum Grid:** The foundational grid references Hangeul's own syllable-block structure. Korean syllables are composed by stacking jamo (letters) into square blocks -- a unique characteristic among writing systems. The page grid echoes this: a 12-column system where content modules occupy 2x2, 3x2, or 4x3 column-spans, forming visual "syllable blocks" of information. The grid gutters are generous (24px minimum) and serve as the visual equivalent of the white space between Hangeul characters. - **Chapter Breaks as Full-Bleed Moments:** Between editorial sections, the layout expands to full-viewport "plates" -- immersive moments that display a single large Hangeul character or jamo diagram against a deep jewel-toned background. These function as chapter dividers in a printed monograph, giving the eye a rest and signaling a shift in topic. - **Marginalia Gutters:** On viewports wider than 1200px, a left margin (approximately 20% of viewport width) is reserved for secondary annotations -- etymological notes, pronunciation guides, historical dates -- typeset in a smaller size. This margin evokes the scholarly apparatus of a critical edition, where the main text flows in the center column and supplementary material occupies the margins. - **Progressive Vertical Rhythm:** Sections alternate between narrow-column text passages (max-width: 640px, centered) and wide compositional spreads (full 12-column). The narrow passages have generous line-height (1.85) and paragraph spacing (1.5em), evoking the generous leading of a well-set book page. The wide spreads use the Jeongeum Grid for multi-element compositions. - **Sticky Annotation Rail:** A thin vertical rail (4px wide, in muted gold) runs along the right edge of the viewport on scroll, functioning as a progress indicator styled to resemble the thread binding of a traditional Korean book (seocheopage). Small tick marks along this rail correspond to section boundaries. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- the **garamond-classic** typographic identity. This typeface's refined high-contrast serifs and generous proportions evoke the humanist printing tradition. For hangeul.day, its elegance provides a Western typographic frame that complements rather than competes with Korean letterforms. Used at `clamp(2.8rem, 5vw + 0.8rem, 6rem)` for primary headings, weight 600 (SemiBold). Letter-spacing: -0.015em at display sizes. The italic cuts are used for etymological terms and transliterations, lending them the distinction of foreign-language passages in a scholarly text. - **Body Text:** "EB Garamond" (Google Fonts) -- the body companion to Cormorant Garamond, with a warmer, more readable texture at paragraph sizes. Set at `clamp(1.05rem, 1.1vw + 0.6rem, 1.25rem)`, weight 400 (Regular), line-height 1.85. Its old-style figures and true small caps (via OpenType features `font-feature-settings: 'onum' 1, 'smcp' 1`) give running text the quality of a fine letterpress edition. - **Annotations / Marginalia:** "Source Sans 3" (Google Fonts) -- a humanist sans-serif for the secondary annotation layer. Its clean, neutral forms provide clear distinction from the serif body text without introducing visual noise. Set at 0.82rem, weight 400, line-height 1.55. Used in the marginalia gutters, footnotes, and UI navigation elements. - **Korean Specimens:** For displaying Hangeul characters as visual specimens (not running text), use large-scale presentation with generous letter-spacing (0.15em) and weight variation to emphasize structural anatomy. The display of Korean text as typographic art uses scale shifts from 4rem to 12rem to reveal the geometric precision of jamo construction. **Palette (Jewel-Tones):** The palette draws from the five cardinal colors of Korean tradition (obangsaek: blue, white, red, black, yellow) reinterpreted through the refined lens of jewel-tones -- deepened, saturated, and set against warm academic neutrals. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Primary Background | Aged Parchment | `#F6F0E4` | Main page background, reading surface | | Secondary Background | Warm Ivory | `#EDE5D5` | Marginalia gutters, annotation panels | | Text Primary | Scholar's Ink | `#2A2420` | Body text, headings | | Text Secondary | Warm Umber | `#6B5B4E` | Annotations, secondary copy | | Accent Primary | Royal Sapphire | `#1B3A6B` | Links, interactive elements, section highlights | | Accent Secondary | Imperial Ruby | `#8B2342` | Pull quotes, emphasis marks, chapter numbers | | Accent Tertiary | Celadon Jade | `#3A7D6A` | Success states, botanical accents, Korean vowel diagrams | | Accent Quaternary | Antiqued Gold | `#B8923F` | Progress rail, decorative borders, drop caps | | Plate Background | Deep Obsidian | `#1A1A24` | Full-bleed chapter plates, Korean character showcases | | Plate Text | Moonlight Cream | `#F0EBE0` | Text on dark plates | The jewel-tones are never used as flat fills for large areas; they appear as concentrated accents -- a sapphire rule beneath a heading, a ruby-tinted drop cap, a jade highlight on a vowel diagram -- set against the dominant parchment warmth. This restraint gives each jewel color the visual weight of a precious stone set in pale gold. ## Imagery and Motifs **Book-Scholarly Motifs as Primary Visual Language:** The visual identity of hangeul.day is built on **book-scholarly** motifs -- the material culture of manuscript production, typographic craft, and linguistic analysis. These are not generic "book" clip-art images; they are specific, historically grounded visual elements drawn from the tradition of Korean bookmaking and Western comparative philology. **Core Visual Elements:** 1. **Jamo Anatomy Diagrams:** Technical drawings that deconstruct individual Hangeul jamo (letters) into their constituent strokes, annotated with lines, angle measurements, and proportion ratios. These are rendered as SVG illustrations in the style of 18th-century type-design specimen sheets -- thin ink lines on parchment, with italic labels in Cormorant Garamond. Each diagram shows how the consonant shape maps to the position of the tongue, lips, or throat during articulation -- the revolutionary phonological insight of Sejong's design. 2. **Syllable Block Construction Sequences:** Animated diagrams (CSS-driven, no JavaScript dependency for the static version) showing how individual jamo stack into syllable blocks. For the syllable "한" (han), the three jamo ㅎ, ㅏ, ㄴ slide into position within a square frame, demonstrating the compositional logic. These sequences are the visual heartbeat of the site. 3. **Historical Manuscript Fragments:** Photography of pages from the Hunminjeongeum manuscript and other early Hangeul texts, presented as full-bleed plates with deep obsidian (#1A1A24) backgrounds. These photographs are treated with a subtle warm tone shift (+8% warmth in CSS filter) to harmonize with the parchment palette. Edges of manuscript images are feathered with a radial gradient to black, evoking the effect of a spotlight on an archival document. 4. **Obangsaek Thread Motifs:** Thin decorative lines in the five cardinal Korean colors (rendered as jewel-toned variants: sapphire, ruby, jade, gold, and obsidian) that appear as section dividers, border accents, and the progress rail. These threads reference the colored silk bindings of traditional Korean books (seocheopage binding). 5. **Brush-Stroke Watermarks:** Very faint (opacity 0.04-0.06) oversized calligraphic brush strokes in warm gray, positioned behind text columns as background watermarks. These strokes are taken from Korean calligraphic forms and scaled to 300-500% of viewport height, creating a subliminal textural layer that recalls ink on rice paper without competing with the readable content. 6. **Phonological Mapping Illustrations:** Diagrams showing the cross-section of the human vocal tract, annotated with Hangeul consonants positioned at their points of articulation. Rendered in a two-color palette (scholar's ink and royal sapphire) on parchment, in the style of anatomical illustrations from Enlightenment-era scientific texts. **Photography Treatment:** All photography on the site follows a strict treatment protocol to maintain visual unity: - Color temperature shifted warm (+12 on a 0-100 scale) - Contrast slightly reduced (-5%) for a softer, more printed appearance - A fine grain overlay (CSS `background-image` with a noise SVG at 3% opacity) applied via a pseudo-element to evoke the texture of printed photographs in a high-quality monograph - Vignette effect via radial gradient (transparent center to 15% black at edges) ## Prompts for Implementation **Full-Screen Narrative Experience:** hangeul.day opens to a full-viewport title plate: the background is Deep Obsidian (#1A1A24). After a 0.4-second hold, the character "한" (han, meaning "Korean") begins to draw itself in the center of the viewport. This is not a simple fade-in; each stroke of the character is rendered as an SVG path with `stroke-dasharray` and `stroke-dashoffset` animation, so the character appears to be written by an invisible brush in Moonlight Cream (#F0EBE0). The three jamo compose in sequence: first ㅎ (0.8s), then ㅏ (0.6s), then ㄴ (0.5s), stacking into the syllable block. Total animation: approximately 2.3 seconds. Once "한" is fully drawn, two more syllables animate in sequence to its right: "글" (geul) and then a period. The complete word "한글." sits centered in the viewport in a size of approximately `clamp(6rem, 12vw, 14rem)`. Below it, "The most rational writing system ever devised" fades in (0.6s, eased) in Cormorant Garamond SemiBold at `clamp(1.2rem, 2vw, 2rem)`, color Antiqued Gold (#B8923F). A thin Antiqued Gold line (1px) extends downward from below the subtitle, growing from 0 to 80px over 0.4s, serving as the invitation to scroll. **Scroll Narrative Sequence:** The site is structured as a single continuous scroll divided into seven narrative chapters, each introduced by a full-bleed plate: 1. **"The King's Gift"** - Historical narrative of Sejong the Great and the creation of Hunminjeongeum (1443-1446). Editorial text flow with marginalia annotations giving historical context. Background shifts subtly from obsidian to parchment as the user scrolls from the title plate into this first chapter. 2. **"The Shapes of Sound"** - Interactive phonological exploration. Jamo anatomy diagrams animate on scroll: as each consonant enters the viewport, its SVG strokes draw in sequence while an annotation panel slides in from the marginalia gutter explaining the tongue/lip position it represents. Scroll-triggered animations fire at 30% viewport intersection. 3. **"Building Blocks"** - The syllable composition system. Large-scale animated diagrams show jamo stacking into syllable blocks. Each example syllable assembles as the user scrolls past it, with spring-eased motion (CSS `transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)`) that gives the jamo a slight overshoot before settling into position. 4. **"Five Sounds, Five Colors"** - Exploration of the obangsaek color system and its relationship to Korean phonology. Full-bleed plates shift between the five jewel-toned backgrounds (sapphire, ruby, jade, gold, obsidian) as the user scrolls, with text in contrasting Moonlight Cream. Each plate occupies exactly one viewport height. The transitions use `scroll-snap-type: y mandatory` for decisive color shifts. 5. **"The Suppression and Revival"** - Historical narrative of Hangeul's suppression by Confucian scholars and its 20th-century revival. Photography of historical documents in the manuscript treatment style (warm-toned, grain-overlaid, vignetted). Editorial flow with pull quotes in Imperial Ruby (#8B2342), set in Cormorant Garamond Italic at 1.6rem. 6. **"A Living System"** - Modern Hangeul in contemporary Korean life. Photography transitions from archival warm-tone to brighter, crisper treatment. Layout shifts from single-column editorial to the Jeongeum Grid, reflecting the modernization of the writing system itself. 7. **"Write Your Name"** - A concluding interactive moment where the visitor sees a simple demonstration of romanization-to-Hangeul correspondence. A set of common syllables is presented in the Jeongeum Grid, each block showing the Latin transcription above and the Hangeul form below, with the jamo anatomy visible on hover (scale-hover animation with 1.08x transform). **Scroll-Triggered Animation Details:** All scroll-triggered animations use the Intersection Observer API with the following thresholds: - SVG path drawings: trigger at 0.3 intersection ratio, duration 0.8-1.2s - Text fade-reveals: trigger at 0.2 intersection ratio, duration 0.5s, `ease-out` - Plate background color transitions: CSS `scroll-snap` with `scroll-behavior: smooth` - Marginalia slide-ins: trigger at 0.4 intersection ratio, translate from -20px to 0, duration 0.4s - Spring-eased jamo assembly: trigger at 0.35 intersection ratio, custom cubic-bezier **Progressive Disclosure Pattern:** Within the phonological sections, detailed annotations are initially collapsed (opacity 0, max-height 0) and expand when the parent jamo diagram has been in view for 1.2 seconds, creating a layered reading experience where the diagram is absorbed first, then the explanation unfolds. **Anti-Patterns (AVOID):** - NO call-to-action buttons, pricing tables, or conversion-oriented layouts - NO stat-grid blocks with large numbers and labels - NO testimonial carousels or social proof sections - NO hamburger menus; navigation is the scroll itself, with the progress rail as the only persistent UI - NO parallax effects on photography (reserved for the SVG path-draw animations only to maintain performance) ## Uniqueness Notes **Differentiators from other designs:** 1. **SVG Stroke-Drawing as Core Narrative Device:** No other design in the portfolio uses animated SVG path drawing as the primary storytelling mechanism. The stroke-by-stroke assembly of Hangeul characters is not a decorative flourish; it IS the content -- each animation teaches the viewer how the writing system works. The `stroke-dasharray`/`stroke-dashoffset` technique applied to calligraphic letterforms is unique in the collection and provides a visual experience that cannot be replicated with fade-ins or slide transitions. 2. **Syllable-Block Grid System (Jeongeum Grid):** The 12-column grid that mirrors Hangeul's own compositional logic -- where content modules stack into rectangular "blocks" the way jamo stack into syllable squares -- is a structural metaphor unique to this design. No other site derives its grid system from the internal logic of its subject matter. This is not a standard editorial grid with a Korean veneer; the grid IS Hangeul. 3. **Obangsaek Jewel-Tone Scroll Snap Plates:** The five full-bleed color plates tied to Korean cardinal colors, using `scroll-snap-type: y mandatory` for decisive viewport-height transitions, create a physical rhythm unlike any other design. The combination of jewel-toned backgrounds with traditional Korean color theory produces a palette system that is culturally grounded rather than decoratively applied. 4. **Dual-Register Typography (Western Serif + Korean Specimen):** The interplay between Cormorant Garamond / EB Garamond (for explanatory Western text) and large-scale Korean character specimens (displayed as visual objects rather than readable text) creates a typographic bilingualism unique in the portfolio. The Korean forms are treated as art objects to be examined, while the Latin forms carry the narrative -- a deliberate inversion of the usual hierarchy. 5. **Marginalia Scholarly Apparatus:** The persistent left-margin annotation system, inspired by critical editions and scholarly commentaries, provides a secondary reading layer that no other design in the collection employs. This transforms the single-page scroll into something closer to a hypertext commentary tradition, where the main column and the margin engage in dialogue. **Seed/Style Documentation:** - aesthetic: light-academia (3% frequency -- underused, distinctive) - layout: editorial-flow (9% frequency -- moderately used, appropriate for scholarly content) - typography: garamond-classic (3% frequency -- underused, distinctive) - palette: jewel-tones (6% frequency -- underused, distinctive) - patterns: scroll-triggered (96% frequency -- overused, but combined with progressive-disclosure at 5% and path-draw-svg at 3% for differentiation) - imagery: photography (69% frequency -- common, but treated with unique manuscript/archival protocol) - motifs: book-scholarly (7% frequency -- underused, distinctive) - tone: scholarly-intellectual (3% frequency -- underused, distinctive) **Avoided Overused Patterns:** - Avoided `playful` aesthetic (97%) in favor of `light-academia` (3%) - Avoided `centered` layout as sole structure (99%) in favor of `editorial-flow` (9%) with marginalia - Avoided `mono` typography (99%) in favor of `garamond-classic` (3%) - Avoided `warm` palette as primary descriptor (100%) -- jewel-tones (6%) with warm neutrals as background only - Avoided `parallax` scrolling (80%) -- scroll-triggered animations use SVG path drawing and spring-eased transforms instead - Avoided `friendly` tone (97%) in favor of `scholarly-intellectual` (3%) - Avoided `vintage` motifs (78%) in favor of `book-scholarly` (7%) with Korean specificity