# Design Language for hanun.ai ## Aesthetics and Tone A neural-calligraphy interface where AI meets human action -- "hanun" (하는, Korean for "doing/making") merged with ".ai" creates a space about machines that learn to act. The design visualizes the intersection of human intent and machine intelligence: flowing gestural strokes morph into clean geometric node diagrams, organic forms dissolve into computational precision. The aesthetic is void-luminous: a deep dark background serves as infinite space from which glowing neural pathways and calligraphic traces emerge. Indigo and violet light pulses along connection paths like synaptic firing. The tone is philosophical-futuristic -- contemplating what it means for AI to "do" while maintaining technical credibility. ## Layout Motifs and Structure The layout uses a **flowing-narrative** architecture -- a single continuous scroll with no rigid section breaks, content areas blending through gradient transitions and overlapping visual layers. **Flow System:** - Single-column centered content, max-width 760px - Sections transition through background gradient shifts rather than hard dividers - Content blocks float on the dark background with subtle glow halos - Parallax-like depth: background elements (neural lines) scroll at 0.5x speed relative to content **Section Flow:** 1. **Emergence (Hero):** Dark void (#0a0a14). A luminous SVG path draws the Korean character 하 in a calligraphic stroke, then the strokes fragment into floating particles that reassemble as geometric nodes connected by thin lines. 2. **The Bridge (Concept):** Content about AI and human action, with text blocks positioned as nodes in a loose network graph. Thin SVG lines (#6366f1 at 40% opacity) connect related paragraphs. 3. **The Process (Technical):** A more structured section with code-like formatting showing how AI systems learn from human patterns. Background transitions from pure void to faintly visible grid lines. 4. **The Horizon (Vision):** Content fades to large, sparse text with maximum whitespace. A single pulsing gradient sphere (indigo-to-violet) centers in the viewport as a meditative closing element. ## Typography and Palette **Typography:** - **Display:** "Syne" (Google Fonts) -- a variable-axis display face with futuristic geometry and distinctive letterforms. Used at 3rem-7rem, weight 700-800, letter-spacing: -0.02em. - **Body:** "Plus Jakarta Sans" (Google Fonts) -- warm geometric sans-serif bridging human and computational. Used at 1rem, weight 400, line-height 1.75. - **Korean:** "Noto Sans KR" (Google Fonts) -- clean Korean sans for Korean text. Used at 1.2rem-4rem, weight 400-700. - **Code:** "Fira Code" (Google Fonts) at 0.85rem for technical passages. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void | Deep blue-black | #0a0a14 | Primary background | | Neural Indigo | Electric indigo | #6366f1 | Primary accent, neural paths, links | | Synapse Violet | Light purple | #a78bfa | Glow effects, secondary accent | | Activation Cyan | Bright cyan | #22d3ee | Active states, highlights | | Human Amber | Warm amber | #fbbf24 | The human element, sparingly | | Text Light | Soft white | #e2e8f0 | Primary text | | Text Muted | Blue-gray | #64748b | Secondary text, metadata | | Deep Indigo | Dark accent | #1e1b4b | Section transitions, surface tints | ## Imagery and Motifs **Neural Network Paths:** Thin SVG lines (#6366f1, 1px) connect content blocks in a loose graph topology, suggesting the neural connections between ideas. Lines have animated stroke-dashoffset creating a flowing-data effect. **Luminous Glow Effects:** Key elements emit a soft glow: box-shadow: 0 0 30px rgba(99,102,241,0.2); text-shadow: 0 0 20px rgba(167,139,250,0.3). This creates bioluminescent quality against the void. **Gradient Sphere:** A CSS radial-gradient sphere (160px) using indigo-to-violet colors, with a slow pulsing opacity animation (0.6 to 1.0 over 4s), serves as a meditative focal point in the closing section. **Calligraphic-to-Geometric Transition:** The visual narrative starts organic (brush strokes, flowing paths) and gradually shifts to geometric (straight lines, circular nodes, grid alignments) as the page progresses, reflecting the AI learning from human input. ## Prompts for Implementation Build the page as a journey from human gesture to machine intelligence. The void background establishes infinite depth. The hero animation should draw a Korean calligraphic stroke via SVG path animation (2s duration), then dissolve it into particles (CSS-animated small spans) that reform as geometric network nodes. As the user scrolls, content emerges from the darkness with gentle opacity transitions (0 to 1 over 500ms). Neural connection lines animate continuously: stroke-dashoffset cycling over 3s creates flowing-data motion. The amber accent color appears only when referencing human elements -- sparingly, maybe 2-3 instances on the entire page. The closing gradient sphere should feel meditative, a resting point after the conceptual journey. Keep animations smooth and unhurried. AVOID: light backgrounds, corporate layouts, chatbot/assistant metaphors, stock AI imagery, pricing tables, card grids, busy animations. ## Uniqueness Notes 1. **Calligraphy-to-network metamorphosis:** The visual transformation from Korean brush strokes to geometric neural networks is a unique narrative device. 2. **Void-luminous palette with neural bioluminescence:** Glowing indigo elements against deep void creates an atmospheric quality distinct from standard dark themes. 3. **Content as network graph:** Positioning text blocks as nodes connected by SVG paths turns the layout itself into a visual representation of neural architecture. 4. **Philosophical-futuristic tone for AI content:** Contemplative rather than promotional, exploring what machine "doing" means rather than selling AI capabilities. Document chosen seed/style: aesthetic: void-luminous, layout: flowing-narrative, typography: futuristic-geometric, palette: neural-dark, patterns: glow-animation, imagery: calligraphy-to-network, motifs: neural-path, tone: philosophical-futuristic Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)