# Design Language for hangul.name ## Aesthetics and Tone A personal naming ceremony in digital form -- the site explores the art and significance of Korean names written in Hangeul, treating each name as a miniature work of calligraphic art. The aesthetic is elegant-minimal: generous whitespace, a single accent color of deep plum, and delicate typography create a sense of occasion and reverence. Think of a beautifully typeset name card (명함) expanded to fill a screen. The tone is graceful-ceremonial -- dignified, warm without being casual, honoring the cultural weight that Korean names carry. ## Layout Motifs and Structure The layout uses a **centered-single-column** architecture -- all content flows in a narrow, centered column with dramatic vertical spacing, creating a scroll experience that feels like reading a vertical scroll painting. **Column System:** - Single centered column, 560px max-width - Generous vertical padding: 120px between major sections - Content blocks are center-aligned with text-align: center for headers, left-aligned for body - No sidebar, no multi-column -- pure vertical flow **Section Flow:** 1. **Name Display Hero:** A single Korean name in large calligraphic serif (6rem), centered on the viewport with ample breathing room. Below: "hangul.name" in small caps plum text. 2. **Meaning Section:** Explanation of name components (syllables, hanja origins) in a vertical list with each syllable on its own line, large (3rem), with meaning annotations in smaller text below. 3. **Cultural Context:** Body text sections with pull-quotes in plum, explaining naming traditions, generational characters (돌림자), and hanja selection. 4. **Name Gallery:** A vertical sequence of Korean names, each displayed as a centered typographic specimen with subtle plum underline accents. 5. **Closing Seal:** A circular plum border (120px diameter) containing the site name, centered, evoking a traditional seal. ## Typography and Palette **Typography:** - **Display Names:** "Noto Serif KR" (Google Fonts) -- refined Korean serif for name display, honoring calligraphic tradition. Used at 3rem-6rem, weight 700, line-height 1.2, letter-spacing: 0.02em. - **Body:** "Noto Sans KR" (Google Fonts) -- clean sans-serif for explanatory text. Used at 1rem, weight 300, line-height 1.9 (extra generous for the airy layout). - **Annotations:** "Noto Sans KR" at 0.8rem, weight 400, for meanings, hanja references, metadata. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper White | Warm white | #faf8f5 | Primary background | | Plum | Deep plum | #5b2a5e | Primary accent, links, decorative elements | | Plum Light | Soft plum | #8a5a8d | Hover states, secondary accents | | Ink | Warm black | #2a2024 | Headlines, display names | | Text | Dark warm gray | #4a4044 | Body text | | Text Light | Medium warm gray | #8a7a80 | Annotations, metadata | | Blush | Pale pink | #f0e8ee | Pull-quote backgrounds, subtle highlights | ## Imagery and Motifs **Typographic Specimens:** Names displayed as centered typographic art -- each Korean name is a visual centerpiece with careful size, weight, and spacing, treated as calligraphy rather than text. **Plum Underline Accents:** Thin 1px lines in plum (#5b2a5e) appear below name displays and section headers, width: 80px, centered. These delicate rules create visual rhythm without heaviness. **Circular Seal Motif:** A CSS-drawn circle (border: 2px solid #5b2a5e, border-radius: 50%) appears as a decorative element at key transitions, referencing traditional Korean seals. **Generous Whitespace as Design Element:** The extreme vertical spacing (120px+ between sections) is itself a motif -- it creates the contemplative pace of a ceremonial experience. **Subtle Fade Transitions:** Content appears with opacity transitions (0 to 1 over 600ms) triggered on scroll, matching the graceful, unhurried pace. ## Prompts for Implementation Build the page as a ceremonial presentation of Korean names. Every element should feel deliberate and unhurried -- the generous whitespace is not empty but contemplative. Names displayed in large serif type are the visual centerpieces; treat them with the reverence of calligraphy specimens in a gallery. The plum accent color appears sparingly -- underlines, the closing seal, and occasional pull-quote backgrounds. The overall experience should feel like slowly unrolling a beautiful scroll. Body text in lightweight sans-serif (weight 300) creates an airy, delicate reading experience. Avoid bold colors, complex layouts, tech aesthetics, and busy animations. ## Uniqueness Notes 1. **Naming ceremony as digital experience:** Treating Korean name display as a ceremonial, gallery-like experience is a unique concept that elevates typography to cultural practice. 2. **Extreme whitespace as intentional motif:** The 120px+ section spacing creates a scroll-painting pace rarely seen in web design. 3. **Deep plum monochromatic accent:** Plum as the sole accent color against warm whites creates a distinctive, sophisticated color identity. 4. **Graceful-ceremonial tone:** The dignified, reverent communication style honors the cultural weight of naming without being stiff. Document chosen seed/style: aesthetic: elegant-minimal, layout: centered-column, typography: korean-serif-light, palette: plum-paper, patterns: fade-scroll, imagery: typographic-specimen, motifs: seal-circle, tone: graceful-ceremonial Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)