# Design Language for hanun.ai ## Aesthetics and Tone hanun.ai manifests as a **visual assault of dense information overload** -- the digital equivalent of staring into the output buffer of a superintelligence mid-computation. The aesthetic is maximalist in the most literal sense: every pixel earns its existence through layered meaning, overlapping data streams, and visual artifacts that suggest a system operating far beyond its intended capacity. Imagine the control room of a particle accelerator crossed with a Ryoji Ikeda installation, where data cascades are not decorative but *structural* -- they are the walls, the floor, the sky. The tone is **bold-confident** without apology. This is not a site that introduces itself politely. It announces. It asserts. The visual language speaks with the certainty of compiled code: either it runs or it doesn't, and this runs. There is a sense of controlled aggression -- the typography hits hard, the colors collide rather than complement, and the negative space that does exist feels like a held breath before the next data burst. The mood draws from the intersection of Korean Hangul's structural beauty (han + un = "Korean luck/fortune" or "Korean rhyme") and the cutting edge of AI systems -- a cultural computational hybrid. The glitch artifacts are not errors but *translations* -- moments where the machine's attempt to process human meaning produces beautiful failures. Think of Jodi.org meets Bloomberg Terminal meets a Seoul neon alleyway at 3AM during a thunderstorm. ## Layout Motifs and Structure The layout rejects centered symmetry entirely. Instead, it follows a **full-bleed, edge-anchored grid system** where content presses outward toward the viewport boundaries, creating a claustrophobic density that is intentionally overwhelming. The grid is a 16-column system with 4px gutters -- deliberately tight, rejecting the airy spacing conventions of standard web design. **Structural Architecture:** - **Edge Cling:** Primary content blocks anchor to the viewport edges (left-flush, right-flush, top-flush) rather than floating in centered containers. Text columns run from the left edge with only a 16px safe margin. Data panels stack from the right edge. The center of the viewport is the *collision zone* where left-anchored and right-anchored elements overlap, creating interference patterns. - **Layered Density System:** The page operates on four explicit z-index planes: - **Plane 0 (Background):** A full-bleed, slowly morphing gradient field in deep blacks and near-blacks (#0a0a0e to #12121a), with subtle noise texture at 3% opacity - **Plane 1 (Data Substrate):** Continuously scrolling vertical columns of compressed Korean text fragments and hexadecimal values in #1a1a2e at 12% opacity, creating a Matrix-like rain effect but using Hangul syllable blocks instead of katakana - **Plane 2 (Content):** The actual readable content -- headline blocks, body text, media elements -- positioned with absolute precision on the 16-column grid, often overlapping Plane 1 elements with hard clip boundaries - **Plane 3 (Glitch Overlay):** Intermittent full-viewport glitch artifacts -- horizontal scan tears, RGB displacement flashes, data corruption bars -- triggered by scroll velocity and mouse movement - **Section Transitions:** Sections do not fade or slide into each other. They **hard-cut** -- a complete visual reset where the entire viewport content is replaced in a single frame, like switching channels on a corrupted broadcast. Between sections, a 50ms flash of pure white (#ffffff) at 8% opacity simulates a CRT channel-change artifact. - **No Navigation Bar:** Traditional navigation is replaced by a persistent edge-mounted index strip -- a 32px-wide vertical bar on the far left containing section numbers (01, 02, 03...) in compressed monospace, rotating to indicate the active section. Clicking a number triggers the hard-cut transition. ## Typography and Palette **Typography:** - **Display / Hero Text:** "Bebas Neue" (Google Fonts) -- the definitive bold condensed display face, used at extreme scale (8rem-14rem for hero elements, 4rem-6rem for section titles). Weight: 400 (the only available weight -- its inherent boldness is the point). All-caps always. Letter-spacing: -0.02em (tighter than default to maximize density). Line-height: 0.88 -- intentionally compressed so ascenders and descenders of adjacent lines nearly collide. The brutality of Bebas Neue at massive scale, with lines crushing into each other, creates a typographic wall effect. - **Subheadings / Labels:** "Anybody" (Google Fonts) -- a variable-width sans-serif with an extremely wide weight range. Used at weight 900 for maximum visual mass, size 1.4rem-2.2rem. All-caps with letter-spacing +0.15em to create a stencil-like openness that contrasts sharply with the compressed Bebas headlines above. This push-pull between extreme compression and extreme spacing creates typographic tension. - **Body Text / Data:** "IBM Plex Mono" (Google Fonts) -- the canonical data-display typeface. Weight: 400 for body text, 300 for secondary data streams. Size: 0.85rem-1rem. Line-height: 1.55. The monospaced grid of IBM Plex Mono makes body text look like terminal output or log files, reinforcing the data-substrate aesthetic. Tabular figures enabled for all numerical content. - **Accent / Korean Text:** "Noto Sans KR" (Google Fonts) -- weight 900 for Korean display text, weight 300 for the background Hangul rain. The density of Korean syllable blocks at heavy weight creates a visual texture unlike any Latin typography -- each character is a self-contained geometric composition within its em-square. **Palette:** The palette is high-contrast and confrontational. No gentle gradients, no muted middle-tones. Colors either scream or recede. | Role | Name | Hex | Usage | |------|------|-----|-------| | Core Black | Void Substrate | #08080c | Primary background, deepest layer | | Near-Black | Data Fog | #12121a | Background gradient endpoint, plane boundaries | | Signal White | Overload White | #f0f0f0 | Primary text, maximum contrast elements | | Primary Accent | Interference Magenta | #e5006d | Hero text highlights, active state indicators, glitch artifact primary color | | Secondary Accent | Voltage Cyan | #00e5ff | Data overlays, secondary highlights, link states, Hangul rain tint | | Tertiary Accent | Rupture Yellow | #ffcc00 | Warning states, section numbers, critical annotations | | Depth Marker | Bruise Purple | #2a0845 | Background depth shading, hover states on dark elements | | Error Signal | Bleed Red | #ff1744 | Glitch artifact secondary, error states, RGB displacement channel | All accent colors are used at full saturation. No opacity reduction on accent elements -- they exist at 100% or not at all. The only opacity variation occurs in the background planes (Planes 0-1). ## Imagery and Motifs **Mixed-Media Collage System:** The imagery strategy rejects photographic purity. Every visual element is a **composite** -- a collision of source materials that are deliberately incompatible in origin, resolution, and era. Implementation specifics: 1. **Resolution Conflict:** High-resolution vector graphics (clean SVG shapes, precise geometric forms) are overlaid on deliberately low-resolution raster textures (pixelated, JPEG-artifact-heavy, as if sourced from a 2004 webcam). The contrast between sharp and degraded within a single image creates a visual friction that keeps the eye unsettled. CSS `image-rendering: pixelated` is applied selectively to background layers while foreground elements remain crisp. 2. **Hangul Typographic Textures:** Large-scale Korean characters are used as visual texture, not readable text. A single Hangul syllable block (e.g., "한" or "운") rendered at 40rem in Noto Sans KR 900, clipped to 15% opacity, serves as a section background element. The geometric internal structure of Hangul -- its combination of vertical strokes, horizontal bars, and circles -- creates an abstract-tech motif that is simultaneously cultural and computational. 3. **Scan-Line Data Artifacts:** Horizontal bands of compressed data visualization run across image elements -- thin (2-4px tall) strips of densely packed bar-chart fragments, waveform snippets, or binary sequences rendered in Voltage Cyan (#00e5ff) at 40% opacity. These bands slice through images as if the visual content is being intercepted and partially decoded mid-transmission. 4. **Glitch Compositing:** Key images undergo a three-layer RGB channel separation where each color channel is offset by 2-6px in opposing directions, with the displacement amount oscillating on a 4-second CSS animation cycle. The effect is subtle at rest (1px offset) and pronounced on hover or during scroll momentum (6px offset). Additional horizontal slice displacement -- where 8-16px tall horizontal strips of the image shift left or right by random amounts -- fires on a randomized interval (every 3-8 seconds, lasting 120ms each). 5. **Abstract-Tech Diagrams:** Decorative elements are sourced from the visual language of neural network architecture diagrams, circuit board traces, and signal flow charts -- but abstracted beyond recognition. These are rendered as thin-line SVG compositions (#f0f0f0 at 8% opacity) that float in the background, suggesting the presence of invisible computational infrastructure. Node-and-edge patterns connect across sections, implying that the entire page is one continuous system diagram. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site loads to an entirely black viewport (#08080c). After 400ms, the Hangul rain (Plane 1) begins -- columns of Korean syllable fragments descending at varying speeds (CSS animation, transform: translateY, 8-20 second durations per column). The rain uses "Noto Sans KR" at weight 300, size 0.7rem, color #00e5ff at 6% opacity. After 1.2 seconds, the rain reaches approximately 40% viewport coverage, and the hero text slams in -- no fade, no slide, pure `opacity: 0 -> 1` in a single frame, accompanied by a 60ms screen-wide horizontal glitch bar (a 100vw x 8px strip of #e5006d at 80% opacity that flashes and disappears). The hero text is the domain name "HANUN.AI" in Bebas Neue at 12rem, positioned left-flush at 16px margin, vertically centered, with each letter staggered by 30ms (stagger animation, but each letter appears with its own micro-glitch -- a 2px vertical shift that settles to baseline in 80ms via a sharp ease-out). **Scroll Behavior:** Scrolling is intentionally abrupt. The site uses CSS `scroll-snap-type: y mandatory` with `scroll-snap-align: start` on each section, creating a paginated experience. But the snap is modified: when a snap-point is reached, the hard-cut transition fires -- the entire viewport content opacities to 0 in 30ms, a white flash (8% opacity, 50ms), then the new section opacities to 1 in 30ms. Total transition: 110ms. This eliminates the smooth-scroll convention entirely and creates a broadcast-switching rhythm. **Glitch Interaction Layer:** Mouse movement across the viewport drives real-time glitch intensity. A JavaScript tracker maps cursor position to two variables: `glitchX` (horizontal position, 0-1) and `glitchV` (velocity magnitude). `glitchX` controls the horizontal offset of the RGB channel split on Plane 3 overlay elements. `glitchV` controls the frequency of random horizontal slice displacements across all content planes. At rest (cursor stationary), glitch activity is minimal -- a gentle 1px RGB offset oscillation. At high velocity (fast cursor movement), the viewport erupts: 4-6px RGB splits, rapid horizontal slice jumps, momentary full-section color inversions lasting 60ms, and burst appearances of random Korean characters at 30% opacity. **Content Sections:** Each section is a full-viewport panel with its own internal composition: - **Section 01 (GENESIS):** The hero/landing. Domain name at max scale. A single sentence tagline in IBM Plex Mono at 1rem, positioned bottom-right, reads like a system boot message. Background: Hangul rain + abstract-tech SVG diagram at extreme low opacity. - **Section 02 (SIGNAL):** The thesis/mission. Three short paragraphs of dense text in a left-flush column (8 of 16 grid columns), with the right 8 columns occupied by a massive, glitch-composited mixed-media image (a neural network diagram collaged with Korean calligraphy fragments and pixelated noise textures). - **Section 03 (SUBSTRATE):** Technical depth. A simulated terminal interface -- full-width IBM Plex Mono text on the Void Substrate background, with Voltage Cyan text color. Content scrolls horizontally within the section (overflow-x: auto) as a single long line, referencing the concept of infinite data streams. Key terms highlighted in Interference Magenta. - **Section 04 (RESONANCE):** Visual showcase. A full-bleed image/video area with no text overlay except a section number (04) in Bebas Neue at 2rem in the top-left corner. The media content is maximally glitched -- heavy RGB separation, scan-line overlays, horizontal slice displacement at aggressive intervals. - **Section 05 (TERMINUS):** Contact/close. Minimal text: an email address in IBM Plex Mono, the domain repeated in Noto Sans KR 900 at 6rem (Korean rendering: "하는 AI"), and nothing else. The Hangul rain from Section 01 returns but inverted -- characters rise upward, and the color shifts from Voltage Cyan to Interference Magenta. **Animation Principles:** - AVOID: easing curves, smooth fades, parallax depth, spring physics, bounce effects - PREFER: hard cuts (0ms transitions), single-frame appearances, linear motion (no easing), abrupt stops, stagger with micro-glitch, screen-flash punctuation - All animations should feel like system events, not design flourishes -- things appear because they are *rendered*, not because they are *presented* **Storytelling Approach:** The narrative arc is computational: boot sequence (Section 01) -> signal acquisition (02) -> data processing (03) -> output rendering (04) -> system close (05). The user does not "browse" the site; they witness a process executing from initialization to termination. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signup forms, cookie banners styled as UI elements. ## Uniqueness Notes **Differentiators from other designs:** 1. **Hangul Rain as Structural Texture:** No other design in the portfolio uses Korean typography as a continuously animated background substrate. While some designs feature cultural motifs, the use of live-rendered Hangul syllable blocks as a persistent visual rain layer -- functioning simultaneously as cultural signifier, data-stream metaphor, and abstract texture -- is unique. The Hangul rain is not decoration; it is the environmental medium through which all other content exists. This directly reflects the domain's Korean identity (han + un) while avoiding cliched cultural representation. 2. **Hard-Cut Section Transitions:** The entire portfolio defaults to scroll-triggered animations, parallax effects, and smooth transitions (scroll-triggered at 96%, parallax at 81%). This design deliberately eliminates all smooth motion in favor of instantaneous hard-cuts with CRT-flash punctuation. The 110ms total transition (30ms out, 50ms flash, 30ms in) creates a visual rhythm closer to video editing or broadcast switching than web design. This is a fundamental structural departure that makes the site feel like a live transmission rather than a scrollable document. 3. **Four-Plane Depth Architecture Without Parallax:** While layered-depth appears in 8% of designs, it is always implemented via parallax scrolling. This design achieves explicit z-plane separation (Background, Data Substrate, Content, Glitch Overlay) through opacity layering and z-index stacking with no parallax motion whatsoever. The layers do not move relative to each other on scroll -- they exist in fixed spatial relationships, and depth is communicated through opacity and color temperature rather than motion. This creates a sense of looking into a volumetric display rather than scrolling past stacked cards. 4. **Cursor-Velocity-Driven Glitch Intensity:** The glitch system is not decorative or random -- it is directly mapped to user behavior. The mathematical relationship between cursor velocity and visual corruption intensity means the site literally responds to the user's agitation level. Fast, frantic mouse movement produces visual chaos; stillness produces near-calm. This biofeedback loop between user and interface is not present in any other design in the portfolio. 5. **Computational Narrative Arc (Boot-to-Termination):** The five-section structure explicitly models a computational process lifecycle, from system boot to termination. This is not a marketing funnel or a story with emotional beats -- it is a *process execution*. The site has a beginning and an end in the procedural sense, and the user's scroll progress is progress through that execution. This structural metaphor is entirely absent from the portfolio's existing designs. **Chosen seed/style:** aesthetic: maximalist, layout: full-bleed, typography: display-bold, palette: high-contrast, patterns: glitch, imagery: mixed-media, motifs: abstract-tech, tone: bold-confident **Avoided overused patterns:** playful aesthetic (97%), friendly tone (97%), centered layout (99%), mono typography as primary (99%), warm palette (100%), scroll-triggered patterns (96%), parallax patterns (81%), minimal imagery (94%), vintage motifs (79%). This design uses none of these as primary attributes, instead anchoring in underused categories: maximalist (8%), display-bold (8%), bold-confident (5%), mixed-media (13%), abstract-tech (7%), and glitch patterns (11%).