# Design Language for hangul.day ## Aesthetics and Tone **hangul.day** is a daily celebration of Hangul — the alphabet King Sejong the Great invented in 1443 and announced to the world as *Hunminjeongeum* (訓民正音), "The Correct Sounds for the Instruction of the People." The domain name is a declaration: every day is Hangul Day. Every scroll is a ceremony. The aesthetic is **neubrutalism rendered in amber lacquer**. Raw structural borders — 3 px solid black outlines — sit against warm honeyed grounds (#F5E0A0, #E8C96E, #3A2A0A), but they are not confrontational. They are *frames*. Like the red-lacquered columns of Gyeongbokgung palace, the thick borders contain something precious and elevate it. The confrontation of neubrutalism is softened into ceremony: hard edges holding soft gold. Tone: **opulent-grand** — the register of a royal court announcing an invention that would change the lives of every Korean speaker forever. The page does not sell anything. It is a monument that breathes. Every section is a **leaf of the original Hunminjeongeum woodblock**, rendered in amber and black. The handwritten Korean glyphs — jamo components floating in gilded space — are the visual heroes. The thick-bordered sections part like folios of an imperial proclamation as the visitor scrolls. Inspiration: Joseon Dynasty court documents, the Hunminjeongeum Haeryebon manuscript (1446, UNESCO Memory of the World), Korean pojagi textile geometry, amber and lacquer craft, neubrutalist typography fanzines. ## Layout Motifs and Structure The page is built as a **vertical stack of seven full-viewport leaves**, each one a section that occupies 100vh and is framed by a 3 px solid #1A0F00 border — a neubrutalist folio. No diagonal cuts. No broken grid. The leaves stack cleanly, one atop the next, like woodblock-printed pages of a bound manuscript. Scrolling is the act of turning pages. **Macro structure (top to bottom, seven leaves):** 1. **Proclamation Leaf** — full-viewport hero. The Hangul character 가 (ga) rendered at 60vw in a handwritten brush style, offset to the right third of the viewport. Left column: the wordmark "hangul.day" stacked vertically in a condensed handwritten display font. No navigation. A single amber-on-black folio number "01" in the bottom-left corner. The glyph strokes are path-draw-svg animated, drawing themselves over 2.4 s on load. 2. **Invention Leaf** — the story of 1443. A single paragraph of prose set in the handwritten body font at 1.6rem, centered in a 52ch column, surrounded by floating jamo glyphs (ㄱ, ㄴ, ㄷ, ㄹ, ㅁ, ㅂ) that orbit the text block at slow speed (12–18 s CSS animation). Background: #F5E0A0. The paragraph draws in via stagger-reveal on scroll. 3. **Jamo Atlas Leaf** — a full-viewport grid of the 40 jamo (consonants + vowels), each drawn as a large handwritten SVG glyph in #1A0F00 on #E8C96E. The glyphs path-draw-svg in sequence (0.3 s stagger) when the leaf enters the viewport. No labels — only the raw shapes. 4. **Haeryebon Leaf** — a facsimile-style reproduction of a manuscript page: aged #F2DCAA parchment texture via CSS noise, handwritten text blocks in a small Korean serif, thick black folio border. The leaf has a subtle paper-curl CSS drop-shadow on its right edge. A floating amber seal (원형 stamp shape) drifts across the upper-right at 0.08% opacity — visible only on inspection. 5. **Syllable Builder Leaf** — the combinatorial magic of Hangul. Three floating panels (initial consonant, vowel, final consonant) stack and shift as the user hovers, assembling a syllable block. The assembly is animated with spring physics. Background: #3A2A0A (dark lacquer). Glyphs: #F5E0A0. 6. **Daily Practice Leaf** — today's featured character. A single jamo at 50vw, path-draw-svg animated on a #E8C96E ground with its phonetic value in a small handwritten sans. Folio border in black. Floating small jamo fragments drift at various opacities (0.06 – 0.18). 7. **Colophon Leaf** — the closing proclamation. "한글날" (Hangul Day) at 18vw, handwritten. Below: the full Unicode codepoint range for Hangul syllables (U+AC00–U+D7A3), rendered in a 1 px monospaced grid that fills the viewport like a star chart. The codepoints fade in with a stagger at 2 ms per character. Amber on black lacquer. **Spatial rules:** - Each leaf has 3 px solid #1A0F00 border as a box — full viewport minus 24 px inset on all sides. - Folio numbers (01–07) appear in the bottom-left of each leaf at 0.7rem, tracking +0.22em. - No sticky header. No footer. Navigation via keyboard (ArrowDown/ArrowUp) or touch swipe only. - The scroll is *snapping*: CSS `scroll-snap-type: y mandatory` on the container, `scroll-snap-align: start` on each leaf. ## Typography and Palette **Typography is handwritten-expressive**, two families only, both on Google Fonts: - **Display / Glyphs: [Nanum Brush Script](https://fonts.google.com/specimen/Nanum+Brush+Script)** — the primary display face for Korean characters and section headings. Used at 8vw–60vw depending on leaf. This is the handwritten voice of the page: brush-ink strokes that recall the Hunminjeongeum calligraphy. Weight 400 only. - **Body / Labels: [Gowun Dodum](https://fonts.google.com/specimen/Gowun+Dodum)** — a clean, slightly handwritten Korean sans with European character coverage. Used for prose (1.4rem, 1.9 line-height), folio numbers, phonetic labels, and the codepoint grid. Weight 400. - **Latin accent: [Caveat](https://fonts.google.com/specimen/Caveat)** — for the wordmark "hangul.day", folio numbers, and any Latin prose that appears. Used sparingly. Weight 500–700. Tracked at +0.04em. **Palette — honeyed-neutral (amber lacquer):** | Role | Name | Hex | |------|------|-----| | Ground | Warm Parchment | `#F5E0A0` | | Mid Ground | Amber Gold | `#E8C96E` | | Accent | Burnt Honey | `#C9A24A` | | Dark | Lacquer Black | `#1A0F00` | | Deep | Dark Resin | `#3A2A0A` | | Warm White | Cream | `#FAF0D7` | | Highlight | Pale Amber | `#FDF0C2` | - Background alternates: leaves 1, 3, 5, 7 use `#1A0F00` (dark lacquer); leaves 2, 4, 6 use `#F5E0A0` (warm parchment). - All borders: `#1A0F00` on light leaves; `#C9A24A` on dark leaves. - Glyph color inverts: `#1A0F00` on light; `#F5E0A0` or `#E8C96E` on dark. - No gradients. No drop-shadows except the Haeryebon paper-curl effect. ## Imagery and Motifs Imagery is **abstract-shapes** — the shapes ARE the letters. Hangul jamo are themselves geometric: ㄱ is a right angle, ㄴ is a floor plan, ㅇ is a circle, ㅡ is a horizon, ㅣ is a vertical. The visual language of the site is built entirely from these shapes, scaled, rotated, layered, and animated. **Motif system — floating-elements:** - **Jamo Fragments.** Detached strokes of Korean consonants and vowels float as SVG path elements at various opacities (0.04–0.22) and scales (0.3vw–8vw) throughout every leaf. They drift on gentle CSS keyframe animations (translateX/Y, 14–28 s cycles, alternate direction). They are not decorative noise — they are the atmosphere of a writing system in the air. - **Ink Halos.** Behind each large display glyph on dark leaves, a circular amber radial gradient (radial-gradient(#C9A24A22 0%, transparent 72%)) creates a halo that breathes via CSS opacity keyframe (0.6 → 1.0 → 0.6, 4 s). - **Amber Seals.** Round stamp shapes (SVG circles with a hand-drawn inner ring) appear at random positions on Haeryebon Leaf and Colophon Leaf, at 6–10% opacity. - **Path-draw-svg animation.** Every large jamo glyph on the page is drawn via SVG `stroke-dasharray` / `stroke-dashoffset` animation — the stroke traces itself as if the king's brush is writing it in real time. Duration: 1.8–3.2 s depending on stroke count. Easing: `cubic-bezier(0.4, 0, 0.2, 1)`. No fill until stroke completes, then fill fades in over 0.6 s. - **The Codepoint Veil.** On the Colophon Leaf, 11,172 Hangul syllable codepoints (the full Unicode block AC00–D7A3) fill the viewport in a 1 px Gowun Dodum grid at 0.4rem, amber on black lacquer, stagger-revealed at 2 ms per character. At full opacity the grid is a star field of letters — dense, total, overwhelming in the best possible sense. ## Prompts for Implementation Build hangul.day as a **seven-leaf imperial woodblock scroll** — a monumental site about one of the most elegantly engineered writing systems ever invented, rendered in its own visual vocabulary. **Structural guidance:** - The outermost container is `height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory`. Each `.leaf` is `height: 100vh; scroll-snap-align: start; position: relative`. - Each leaf has an inner `.folio` div with `border: 3px solid var(--border); margin: 24px; height: calc(100vh - 48px); position: relative; overflow: hidden`. - Floating jamo fragments use `position: absolute` with randomized `top`, `left`, `opacity`, `font-size`, and CSS animation `name duration easing infinite alternate`. Generate at least 18 fragments per leaf, seeded from the leaf number. **Path-draw-svg implementation:** - All major glyphs (가, the 40 jamo in the Atlas, 한글날 in the Colophon) are SVG `` or `` elements converted to paths. - Set `stroke-dasharray: [total-length]; stroke-dashoffset: [total-length]` on load. - Animate `stroke-dashoffset` to `0` via `@keyframes draw` with the specified duration and easing. - Use `IntersectionObserver` (threshold: 0.3) to trigger the animation only when the leaf enters the viewport. **Syllable Builder interactions:** - Three absolute-positioned panels in the fifth leaf. On desktop, hovering each panel lifts it 8 px (spring, tension 200, friction 20) and highlights the combined syllable in the center of the leaf. - On mobile, panels are tappable toggle buttons. **Codepoint Veil implementation:** - Generate the full AC00–D7A3 range in JavaScript at runtime. - Insert into a CSS `columns` container (auto, 0.38rem gap) or a CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(1.2rem, 1fr))`. - Use `IntersectionObserver` to trigger a CSS class `.revealed` that starts the stagger animation on the container. - The stagger is a single CSS custom-property counter incremented per character with `animation-delay: calc(var(--i) * 2ms)`. **Scroll experience:** - Keyboard navigation: `ArrowDown` snaps to next leaf, `ArrowUp` to previous. - Current leaf index shown as a vertical progress bar on the right edge: 7 amber dots, active dot filled solid #C9A24A, inactive dots outlined. - No horizontal scroll. No modals. No sticky elements. No CTAs. No forms. - No hover effects on mobile — only touch events. **Do not implement:** navigation menus, hero CTAs, pricing blocks, testimonials, social proof, stat counters, newsletter sign-ups, carousels, accordions, tooltips, or anything that implies a commercial purpose. This is a monument, not a product. ## Uniqueness Notes Three or more deliberate differentiators from every other site in the registry, with frequency-analysis context. 1. **Neubrutalism at 1% crossed with honeyed-neutral at 1% and stacked-sections at 1%.** The frequency report shows neubrutalism at 1%, honeyed-neutral at 1%, and stacked-sections at 1% — each individually rare. The triple crossing appears in zero other designs. Neubrutalism is almost always paired with high-contrast electric palettes (neon, black-white). Executing it in amber-lacquer warmth — a palette associated with antique manuscripts and East Asian craft — is a reversal that exists nowhere else in the registry. The raw structural borders become ceremonial frames rather than confrontational weapons. 2. **The visual vocabulary is the subject matter itself.** Hangul jamo are intrinsically geometric: every shape on the page (the floating fragments, the atlas grid, the path-drawn glyphs) is simultaneously decoration and content — the alphabet decorating a site about the alphabet. No other design in the registry uses the subject's native symbol system as its primary visual motif at this scale. The result is a site that could only be about Hangul: remove the subject, and the entire visual language collapses. 3. **Path-draw-svg at 21% frequency, but applied to an East Asian brush-script typeface on a scroll-snapped folio structure.** Path-draw-svg is common in the registry but always applied to icons, logos, or geometric decorations. Here it is applied to full-display-scale Korean brush-script glyphs — the animation simulates the order and direction of Hangul stroke sequences (top-to-bottom, left-to-right), making the drawing technically and culturally accurate. The Codepoint Veil (11,172 characters stagger-revealed at 2 ms per character) is a further differentiation: a data-scale typographic animation that transforms the Unicode block into a star-field ceremony, present in no other design. **Chosen seed/style:** aesthetic: neubrutalism, layout: stacked-sections, typography: handwritten, palette: honeyed-neutral, patterns: path-draw-svg, imagery: abstract-shapes, motifs: floating-elements, tone: opulent-grand **Avoided patterns (from frequency analysis):** hand-drawn (65% — overused), editorial (46% — overused), centered layout (90% — overused), full-bleed (75% — overused). Instead chose neubrutalism (8%), stacked-sections (underused), handwritten typography (underused), honeyed-neutral palette (underused).