# Design Language for hangeul.day ## Aesthetics and Tone A celebration of Korean script rendered through paper-craft minimalism -- the site treats Hangeul as both linguistic system and visual art form. Thin ink strokes on textured paper backgrounds evoke traditional calligraphy practice books (원고지), while a restrained color palette of ink-black, hanji-cream, and accent indigo channels the quiet discipline of a scholar's study. The aesthetic is wabi-sabi-digital: embracing the beautiful imperfection of handwritten characters within a precise digital grid. The tone is contemplative-educational -- patient, reverent toward the writing system, and structured like a well-organized lesson. ## Layout Motifs and Structure The layout uses a **manuscript-grid** architecture -- content is arranged within a visible grid that references the 원고지 (Korean manuscript paper) squares used for Hangeul practice. **Grid System:** - A visible background grid of thin lines (1px, #2a2a2a at 8% opacity) creating 40x40px squares across the viewport - Content sections are centered in a 720px max-width column - Each section header aligns to grid intersections - Cards use a single-column stack with generous vertical spacing (64px between sections) **Section Flow:** 1. **Title Frame:** A single large Hangeul character (한) centered in a 200x200px grid square, drawn with CSS border segments. Below: "HANGEUL.DAY" in light serif type. 2. **History Ribbon:** A horizontal scrolling timeline of key dates in Hangeul history, rendered as grid squares with dates and brief descriptions. 3. **Anatomy Section:** Content cards explaining Hangeul structure (consonants, vowels, syllable blocks), each card framed within the manuscript grid. 4. **Practice Area:** An interactive-styled section (visual only) showing character composition within grid squares. 5. **Footer:** A single grid square containing the domain name and a closing thought. ## Typography and Palette **Typography:** - **Headlines:** "Noto Serif KR" (Google Fonts) -- a refined Korean serif that honors the calligraphic heritage of Hangeul. Used at 2rem-4rem, weight 700, line-height 1.2. - **Body:** "Noto Sans KR" (Google Fonts) -- clean Korean sans-serif for comfortable reading. Used at 1rem, weight 400, line-height 1.8. - **Display/Characters:** "Noto Serif KR" at 6rem-12rem, weight 900, for individual Hangeul character display. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Hanji Cream | Warm paper | #f5f0e8 | Primary background | | Ink Black | Calligraphy ink | #1a1a1a | Headlines, primary text | | Grid Line | Light gray | #d0c8b8 | Manuscript grid lines | | Indigo | Traditional indigo | #2c3e6b | Primary accent, links | | Vermillion | Stamp red | #c23b22 | Seal/stamp accents, highlights | | Ink Gray | Diluted ink | #6b6560 | Body text, metadata | | Paper Shadow | Warm shadow | #e8e0d0 | Card backgrounds, depth | ## Imagery and Motifs **Manuscript Grid Background:** The entire page uses a CSS repeating-linear-gradient to create a visible grid of thin lines on the cream background, evoking 원고지 practice paper. Grid squares are 40x40px with 1px lines in #d0c8b8. **Ink Stroke Characters:** Large Hangeul characters displayed as hero elements use the heaviest weight of Noto Serif KR, creating bold brushstroke-like forms that reference calligraphic tradition. **Vermillion Seal Stamps:** Small circular badges (32x32px) with 2px #c23b22 borders appear as decorative accents at section transitions, evoking traditional Korean name seals (도장). **Paper Texture Overlay:** A subtle noise texture at 3% opacity over the cream background creates the tactile quality of hanji (Korean handmade paper). **Fade-In Sections:** Content sections fade in on scroll (opacity 0 to 1, translateY 16px to 0, 400ms ease) -- gentle and respectful, like turning pages. ## Prompts for Implementation Build the page as a digital manuscript celebrating Hangeul. The visible grid background is the foundation -- every element should feel aligned to this grid as if written on practice paper. Large display characters should dominate their sections, treated as visual art rather than mere text. The cream-and-ink palette creates warmth and readability. Vermillion seal accents appear sparingly -- at most 3-4 on the entire page -- as traditional punctuation marks between major sections. The overall feeling should be of a beautifully typeset educational scroll, unhurried and precise. Avoid neon colors, dark backgrounds, tech aesthetics, and busy animations. ## Uniqueness Notes 1. **Manuscript-grid (원고지) layout:** Using visible practice-paper grid lines as the foundational layout motif directly serves the domain's celebration of Korean writing. 2. **Wabi-sabi-digital aesthetic:** The embrace of calligraphic warmth within digital precision is rare in web design collections. 3. **Vermillion seal stamps as UI accents:** Traditional Korean seal imagery used as decorative section markers creates cultural authenticity. 4. **Contemplative-educational tone with display typography:** Large hero characters treated as visual art elevate the educational content to an aesthetic experience. Document chosen seed/style: aesthetic: wabi-sabi, layout: manuscript-grid, typography: korean-serif, palette: ink-paper, patterns: fade-in, imagery: grid-texture, motifs: seal-stamp, tone: contemplative-educational Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)