# Design Language for hangul.dev ## Aesthetics and Tone A developer-focused technical reference for Hangeul processing -- the site presents Korean text encoding, Unicode blocks, and character algorithms through the lens of a well-crafted IDE theme. The aesthetic is terminal-elegant: dark editor backgrounds with syntax-highlighted code examples, monospaced data tables showing Unicode codepoints, and precise typographic hierarchy that mirrors API documentation. Green-on-dark terminal colors meet structured documentation layout. The tone is technical-precise -- authoritative, concise, and developer-oriented, like the best language-processing library documentation. ## Layout Motifs and Structure The layout uses a **docs-sidebar** architecture -- a fixed left navigation panel with a scrollable main content area, the standard pattern for technical documentation sites. **Documentation System:** - Left sidebar: 280px fixed width, dark background (#111b1a), containing hierarchical navigation - Main content: fluid width, max-width 800px within the remaining space, with 48px left padding - A 1px vertical border (#1a3a2a) separates sidebar from content - Top bar: 56px height with domain name and a search-style input (decorative) **Section Flow:** 1. **Header:** Dark top bar with "hangul.dev" in monospace green (#4ade80) on near-black. 2. **Introduction:** Overview of Hangeul in computing -- Unicode ranges, encoding history, algorithmic decomposition. 3. **Code Reference:** Sections with syntax-highlighted code blocks (dark background, colored tokens) showing Hangeul processing algorithms. 4. **Unicode Tables:** Data tables with monospaced columns showing Unicode codepoints, character names, and decomposition mappings. 5. **API-Style Reference:** Function signatures and parameter descriptions in a structured format with type annotations. ## Typography and Palette **Typography:** - **Headlines:** "JetBrains Mono" (Google Fonts) -- a developer-focused monospace with excellent readability and distinctive character. Used at 1.5rem-2.5rem, weight 700, letter-spacing: 0, line-height 1.3. - **Body:** "Inter" (Google Fonts) -- crisp sans-serif for documentation prose. Used at 0.95rem, weight 400, line-height 1.7. - **Code:** "JetBrains Mono" at 0.875rem, weight 400, for all code blocks, tables, and technical content. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Editor Dark | Near-black green | #0d1117 | Primary background | | Sidebar Dark | Darker panel | #111b1a | Sidebar background | | Border | Dark green | #1a3a2a | Borders, dividers | | Green Primary | Terminal green | #4ade80 | Primary accent, links, keywords | | Green Dim | Muted green | #2d6a4f | Hover backgrounds, secondary accent | | Cyan | Syntax cyan | #67e8f9 | String highlighting, types | | Orange | Syntax orange | #fb923c | Function names, warnings | | Purple | Syntax purple | #c084fc | Keywords, special tokens | | Text Primary | Light gray | #e6edf3 | Body text | | Text Muted | Medium gray | #7d8590 | Comments, metadata | | Code BG | Slightly lighter | #161b22 | Code block backgrounds | ## Imagery and Motifs **Syntax-Highlighted Code Blocks:** The primary visual element is styled code blocks with colored tokens: green for strings, cyan for types, orange for functions, purple for keywords. Code blocks have a slightly lighter background (#161b22) with a 1px left border in green (#4ade80). **Unicode Data Tables:** Monospaced tables with alternating row backgrounds (#0d1117 / #161b22) displaying Hangeul Unicode data. Header rows use green text on the dark background. **Terminal Prompt Styling:** Section headers are prefixed with a green ">" character, evoking command-line interfaces. Breadcrumb navigation uses "/" separators in monospace. **Minimal Hover Effects:** Links underline on hover. Sidebar items gain a left border (2px #4ade80) and a subtle background (#1a3a2a) on hover. Code blocks gain a slightly brighter border on hover. ## Prompts for Implementation Build the page as a premium developer documentation site for Hangeul processing. The sidebar navigation should feel immediately familiar to developers who use documentation sites daily. Code blocks are first-class citizens -- they should be prominently styled with syntax highlighting implemented through CSS classes (no JS dependency). Unicode tables should be scannable and precise, with monospaced alignment. The green-on-dark color scheme creates a terminal-native feel while the Inter body font ensures comfortable reading for longer prose sections. Every element should prioritize clarity and scannability. Avoid decorative illustrations, gradients, animations, and marketing-style layouts. ## Uniqueness Notes 1. **IDE-themed documentation for a writing system:** Presenting a human writing system through developer tooling aesthetics creates a unique bridge between linguistics and engineering. 2. **Docs-sidebar layout with terminal green palette:** The documentation site pattern is common in dev tools but rare in the collection, and the terminal-green palette gives it a distinctive character. 3. **Unicode tables as visual elements:** Data tables showing codepoints become both functional reference and visual motif. 4. **Technical-precise tone for cultural content:** Treating Hangeul with the same rigor as API documentation is an unexpected tonal choice that serves the .dev audience. Document chosen seed/style: aesthetic: terminal-elegant, layout: docs-sidebar, typography: monospace-dev, palette: terminal-green, patterns: hover-border, imagery: syntax-highlight, motifs: code-block, tone: technical-precise Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)