# Design Language for hangul.day ## Aesthetics and Tone A kinetic typography playground where Hangeul characters decompose, recombine, and dance across the screen -- this site treats the Korean alphabet not as static text but as living, animated building blocks. The aesthetic is motion-graphic: bold flat colors, geometric shapes derived from Hangeul's consonant and vowel forms (ㅁ ㅂ ㅅ ㅇ), and constant subtle animation create a sense of language in motion. Bright primary colors against a clean white background channel the playful modernism of Bauhaus meets Korean design. The tone is enthusiastic-educational -- energetic, inviting, and celebratory of Hangeul's unique scientific design. ## Layout Motifs and Structure The layout uses a **card-cascade** architecture -- content cards are stacked vertically with slight horizontal offsets, creating a cascading waterfall effect as the user scrolls. **Card System:** - Cards are 600px max-width, centered but with alternating 24px left/right offsets - Each card has a colored left border (4px) cycling through the palette - Cards overlap slightly (negative margin-top: -8px) creating a layered stack - Background: clean white (#ffffff) **Section Flow:** 1. **Animated Hero:** The characters ㅎ ㅏ ㄴ ㄱ ㅡ ㄹ appear one by one, assembling into 한글 with a snap animation (scale 1.5 to 1.0, opacity 0 to 1, 150ms stagger per character). 2. **Origin Story:** Cards explaining King Sejong's creation, each card featuring a large decorative Hangeul jamo (basic letter) as a background element. 3. **Structure Section:** Visual breakdown of consonants, vowels, and syllable-block assembly using geometric diagrams built from CSS shapes. 4. **Interactive Feel:** Cards with hover effects that slightly rotate (1-2deg) and lift (translateY -4px, box-shadow increase), suggesting physical cards being picked up. 5. **Closing:** A full-width band in primary blue with white text: the date and a celebratory message. ## Typography and Palette **Typography:** - **Headlines:** "Black Han Sans" (Google Fonts) -- a bold, high-impact Korean display font with strong geometric character that matches the kinetic aesthetic. Used at 2.5rem-5rem, weight 400 (single weight), line-height 1.1. - **Body:** "Noto Sans KR" (Google Fonts) -- clean and readable Korean text. Used at 1rem, weight 400, line-height 1.75. - **Decorative Jamo:** "Black Han Sans" at 8rem-16rem for background character decorations at 8% opacity. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | White | Clean white | #ffffff | Primary background | | Primary Blue | Vivid blue | #2962ff | Primary accent, hero background, links | | Warm Red | Korean red | #e53935 | Secondary accent, card borders | | Sunflower | Bright yellow | #ffd600 | Tertiary accent, highlights | | Forest | Deep green | #2e7d32 | Quaternary accent, success | | Text Dark | Near-black | #212121 | Body text, headlines | | Text Mid | Medium gray | #616161 | Metadata, captions | | Light Gray | Background gray | #f5f5f5 | Card backgrounds | ## Imagery and Motifs **Geometric Jamo Shapes:** Individual Hangeul jamo (ㅁ ㅅ ㅇ ㄱ) are used as decorative geometric elements throughout -- rendered as large background characters in 8% opacity, or as small colored icons (CSS-drawn circles, triangles, squares matching jamo shapes) in the palette colors. **Character Assembly Animation:** The hero animation shows syllable-block construction: individual jamo slide into position to form complete syllables, demonstrating Hangeul's unique compositional nature. CSS keyframe animations with transform and opacity. **Card Cascade with Color Cycling:** Each card's left border cycles through the four accent colors (blue, red, yellow, green) in order, creating a rhythmic color pattern down the page. **Hover Lift Effect:** Cards respond to hover with a gentle lift and rotation: transform: translateY(-4px) rotate(0.5deg); box-shadow: 0 8px 24px rgba(0,0,0,0.12). Transition: 250ms cubic-bezier(0.25, 0.8, 0.25, 1). ## Prompts for Implementation Build the page as a kinetic celebration of Hangeul. The hero animation is the centerpiece -- individual jamo characters should appear to fly in and assemble into syllable blocks, demonstrating the alphabet's building-block nature. The card cascade creates a natural reading rhythm with its alternating offsets and color-cycling borders. Large decorative jamo in the background of each section reinforce the theme without cluttering the reading experience. The primary color palette (blue, red, yellow, green against white) should feel bold and confident, like a well-designed educational poster. Avoid dark themes, gradients, tech motifs, and complex imagery. ## Uniqueness Notes 1. **Kinetic typography with Hangeul decomposition:** Animating the assembly of Korean syllable blocks from individual jamo is a unique interaction that teaches while it entertains. 2. **Card-cascade layout with color cycling:** The alternating-offset stacked cards with cycling border colors create a distinctive visual rhythm. 3. **Bauhaus-meets-Korean-design aesthetic:** Primary colors and geometric forms derived from Hangeul's shapes bridge European modernism with Korean typographic tradition. 4. **Enthusiastic-educational tone:** The celebratory energy distinguishes this from the more reverent hangeul.day sibling. Document chosen seed/style: aesthetic: motion-graphic, layout: card-cascade, typography: korean-bold, palette: primary-bright, patterns: hover-lift, imagery: geometric-jamo, motifs: character-assembly, tone: enthusiastic-educational Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), minimal imagery (96%)