# Design Language for hangul.name ## Aesthetics and Tone hangul.name channels the raw kinetic energy of Seoul's Hongdae district at midnight -- neon-drenched alleyways where independent fashion labels paste oversized lookbooks onto construction barriers, where the angular geometry of Hangul letterforms becomes architectural graffiti, where typography IS the street. The aesthetic is **street-style** not as casual fashion blogging but as a design philosophy: the belief that the most vital visual culture emerges from concrete, from walls, from the collision of commercial signage and personal expression stacked in chaotic vertical columns the way Korean text itself stacks consonants and vowels into syllable blocks. The mood draws from the specific tension between Korea's hyper-precise digital culture and its visceral street-level creative scene. Think of a Dongdaemun night market display table -- products arranged with mathematical precision on a surface scarred by years of use, lit by a single fluorescent tube that casts everything in merciless white. That juxtaposition of meticulous intent and raw environment is the emotional center. The tone is **bold-confident** -- it does not explain itself, does not soften its edges, does not ask permission. It presents with the authority of a stenciled character on a subway pillar: blunt, graphic, unapologetic. The domain name itself is the design thesis. Hangul is a writing system designed with geometric rigor -- King Sejong's scholars literally mapped mouth shapes to letterforms. This site treats that intersection of systematic logic and organic human expression as its governing metaphor. Every visual decision echoes the structure of a Hangul syllable block: discrete elements (jamo) composed into unified, compact, powerful units within a fixed square frame. ## Layout Motifs and Structure The layout employs a **broken-grid** architecture that deliberately fractures a strict underlying column system. The base grid is a 12-column structure with 16px gutters, but content elements are placed to violate this grid at specific, intentional points -- shifted 40-80px off their expected positions, overlapping adjacent columns by 15-30%, rotated 1-3 degrees. The effect is controlled disruption: you sense the grid's presence precisely because of how elements break from it. **Structural Approach -- The Syllable Block Model:** Content is organized into what I call "syllable blocks" -- rectangular containers of varying proportions (roughly 1:1, 2:3, and 3:4 ratios) that compose together the way Hangul jamo stack within a character cell. Each block is self-contained with its own internal hierarchy, but blocks are positioned to form larger compositional units of 2-4 elements. Blocks overlap at their edges by 20-60px, creating depth without relying on z-axis parallax. **Zone Architecture:** - **Zone 1 -- The Wall (viewport 1):** A full-bleed opening that functions as a construction barrier surface. The domain name "hangul.name" is rendered as oversized display type fractured across the viewport, with individual characters placed at different vertical offsets and slight rotations (0.5-2.5 degrees). Background: a flat matte black (#0A0A0A) surface. No imagery, no gradients -- just typography as architecture. A single horizontal rule in signal yellow (#FFD600) bisects the viewport at approximately 35% from the top, establishing the primary accent. - **Zone 2 -- The Stack (viewports 2-3):** Three to four content blocks arranged in a broken-grid cluster. The largest block (spanning ~60% viewport width) anchors upper-left, while smaller blocks (30-40% width) cluster lower-right, overlapping the anchor by 40px. Content within blocks uses mixed-media collage -- text fragments, geometric shapes, and high-contrast photographic elements layered together. Blocks have no border-radius; edges are razor-sharp. A 2px solid border in white (#FFFFFF) on select blocks creates the paste-up poster effect. - **Zone 3 -- The Corridor (viewports 4-5):** A narrow vertical column (max-width 480px) centered with generous negative space on both sides. This compressed zone forces the eye into a focused, almost claustrophobic reading experience -- mimicking the narrow alleyways between Korean buildings where signage competes for vertical attention. Text runs large (2rem body) with tight line-height (1.25). Interspersed: full-width breakout elements that suddenly span 100vw, shattering the corridor containment. - **Zone 4 -- The Grid Collapse (viewport 6):** The broken grid reaches maximum entropy. Elements scatter across the viewport at seemingly random positions (actually placed on a phi-ratio spiral). Text rotates up to 8 degrees. Overlaps become aggressive (80-120px). The visual chaos resolves into a final compositional beat: the domain name reconstructed from the scattered fragments, now reassembled at viewport bottom in a clean, aligned, centered lockup -- order restored from disorder. **Navigation:** None visible. The site is a single continuous scroll with no menu, no hamburger, no anchors. The only interactive navigation is a small fixed indicator in the bottom-right corner showing a vertical progress bar (2px wide, signal yellow) that fills as the user scrolls. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Bebas Neue" (Google Fonts) -- a condensed all-caps display face with relentless vertical energy and zero decorative indulgence. Its tall, narrow letterforms echo the vertical stacking of Korean signage columns and the compressed proportions of Hangul syllable blocks. Used at sizes 5rem to 12rem with `letter-spacing: 0.08em` (wider than typical to let each character breathe as an individual glyph within the broken grid). `line-height: 0.88` to create tight vertical rhythm. The condensed proportions allow headline text to be rendered at massive scale without consuming excessive horizontal space, enabling the poster-paste aesthetic where words tower rather than sprawl. Weight: 400 (the only weight available, but its inherent boldness needs no augmentation). - **Secondary / Subheadings:** "Space Grotesk" (Google Fonts) at weight 500-700. A geometric sans with enough personality in its single-story 'a' and squared terminals to avoid clinical neutrality. Used at 1.25rem to 2.5rem for secondary callouts, pull quotes, and zone labels. `letter-spacing: 0.02em`. This face bridges the architectural rigidity of Bebas Neue and the readability needs of longer text -- it has the mechanical precision of a CNC-cut stencil but enough warmth in its proportions to sustain extended reading. - **Body / Reading Text:** "Work Sans" (Google Fonts) at weight 400-500. A humanist sans-serif with open apertures and generous x-height, optimized for screen reading at small-to-medium sizes. Used at 1rem to 1.5rem with `line-height: 1.55`. Work Sans provides the legibility backbone that the display faces deliberately sacrifice -- its friendly geometry prevents the overall typographic system from becoming oppressively industrial. `letter-spacing: 0.005em` for subtle openness at body sizes. - **Accent / Code / Labels:** "JetBrains Mono" (Google Fonts) at weight 400. A monospace face used sparingly for metadata labels, technical annotations, small caps navigation indicators, and the scroll progress counter. Its programming-font DNA reinforces the systematic, engineered quality of the Hangul-as-design-system metaphor. Used at 0.75rem to 0.875rem, always in uppercase with `letter-spacing: 0.12em`. **Color Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Primary Background | Void Black | #0A0A0A | Dominant surface -- 70% of total area. Deep, matte, absorbs light | | Secondary Background | Wet Asphalt | #1C1C1E | Card/block interiors, Zone 3 corridor background | | Primary Accent | Signal Yellow | #FFD600 | Headlines, horizontal rules, progress indicator, hover states. The neon sign in the alley | | Secondary Accent | Hot Coral | #FF3B30 | Sparse punctuation -- used for a single decorative element per zone, never for text. The spray-painted tag | | Primary Text | Pure White | #FFFFFF | All body text, subheadings on dark backgrounds | | Secondary Text | Concrete Gray | #8E8E93 | Metadata, timestamps, labels, captions | | Tertiary Accent | Electric Blue | #007AFF | Links, interactive hover underlines, the digital counterpoint to analog yellow | | Border / Rule | Chalk White | #E5E5EA | 2px borders on select content blocks, creating the wheat-paste poster edge | The palette is **high-contrast** by design. The yellow-on-black combination references Korean construction signage and subway wayfinding, while the coral accent provides the street-art warmth that prevents the scheme from feeling purely industrial. The electric blue appears only on interactive elements, creating a clear affordance layer distinct from the decorative palette. ## Imagery and Motifs **Mixed-Media Collage System:** The imagery approach is **mixed-media** -- the deliberate layering of heterogeneous visual elements within a single composition, as though different media have been physically pasted onto the same surface. This is not digital collage with clean edges and blend modes; it is wheat-paste aesthetics -- torn edges, overlap shadows, registration misalignment. Specific visual elements: 1. **Hangul Letterform Fragments:** Individual jamo (Korean alphabet components -- consonants like ㄱ, ㅎ, ㅂ and vowels like ㅏ, ㅗ, ㅡ) rendered as oversized graphic elements using Bebas Neue or raw SVG geometric constructions. These are not decorative illustrations but structural motifs: a massive ㅎ (hieut) might anchor a content block's background at 40% opacity in Wet Asphalt (#1C1C1E), its circular element becoming a compositional focal point. The jamo are always fragmentary -- cropped at the viewport edge, partially obscured by overlapping content blocks -- suggesting a larger typographic system that extends beyond the visible frame. 2. **Geometric Block Patterns:** Rectangular and square shapes in flat colors (Signal Yellow, Hot Coral, or 15% opacity white) positioned as abstract compositional anchors. These reference both the rectangular grid structure of Hangul syllable blocks and the modular signage panels of Korean commercial districts. Blocks are always axis-aligned (no rotated rectangles) to contrast with the rotated text elements, creating tension between orthogonal geometry and angled typography. 3. **Noise-Grain Texture Overlay:** A subtle film grain overlay (CSS `background-image` using SVG noise filter or a small tiling PNG at 3-5% opacity) applied globally to prevent the flat digital surfaces from feeling sterile. The grain should be fine (high-frequency noise) and warm-toned, suggesting cheap photocopy paper or a worn construction barrier surface. This texture is the connective tissue that unifies all visual elements under a single material metaphor. 4. **High-Contrast Photographic Fragments:** If any photographic elements are used, they are treated with extreme contrast processing -- pushed to near-duotone in black and white, then selectively tinted with Signal Yellow or Electric Blue using CSS `mix-blend-mode: multiply` over a colored overlay div. Photos are always cropped aggressively (showing only a fragment -- a corner of a building, a section of a hand, a strip of pavement) and never presented as complete, contextual images. They function as texture, not narrative. 5. **Horizontal Rules as Motif:** Thin (1-2px) horizontal lines in Signal Yellow or Chalk White serve as both structural dividers and decorative rhythm. They appear at irregular vertical intervals, sometimes spanning the full viewport width, sometimes truncated to 30-60% width and left-aligned. These lines reference both the horizontal strokes within Hangul characters and the tape-line marks of a construction site. **Abstract-Tech Motif Layer:** Beneath the street-level collage, a secondary motif system evokes the **abstract-tech** dimension -- the engineered, systematic nature of the Hangul writing system and Korean digital culture: - **Grid Dot Pattern:** A sparse matrix of small circles (3px diameter, 8% opacity white) at 48px intervals, visible in negative space areas. This references both the digital grid of a Korean text input system and the benday dots of screen-printed posters. - **Coordinate Labels:** Small JetBrains Mono text strings positioned at content block corners showing grid coordinates like "B2:R4" or "SYL.03" -- fictional metadata that reinforces the engineered-system metaphor without conveying actual information. - **SVG Corner Brackets:** L-shaped bracket marks ([ ]) rendered as thin SVG strokes at the corners of key content blocks, suggesting a technical diagram or typesetting registration mark. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be built as a single, continuous, full-screen vertical narrative -- NO multi-page structure, NO traditional header/footer/nav chrome, NO above-the-fold conversion optimization. The experience is a scroll-driven journey through a typographic environment, where the user descends through zones the way one walks deeper into a Korean alley district, each turn revealing a different density and energy. **Card-Flip Interaction Pattern:** The primary interactive pattern is **card-flip**. Select content blocks (2-3 per zone, 6-8 total across the site) are implemented as double-sided cards that flip on hover (desktop) or tap (mobile) to reveal a secondary face. The flip animation uses `transform: rotateY(180deg)` with a 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) transition and `perspective: 1200px` on the parent. - **Front face:** The primary visual composition (text + geometric elements + optional photo fragment) - **Back face:** A contrasting treatment -- if the front is dark, the back is Signal Yellow (#FFD600) with black text; if the front features large type, the back shows a dense paragraph of body text in Work Sans. The flip reveals hidden context, a second layer of meaning, the reverse side of a pasted poster. - **3D Edge Effect:** During the flip, a 4px side-edge is visible in Wet Asphalt (#1C1C1E), suggesting physical card thickness. - Cards that are NOT flippable should have NO hover transform to prevent false affordance. Flippable cards are marked with a small corner icon (a circular arrow, 16px, in Concrete Gray). **Scroll Behavior:** - NO parallax. NO scroll-jacking. Native smooth scroll only. - Content blocks use a **stagger** entrance animation: as each block enters the viewport (detected via Intersection Observer at threshold 0.15), it translates from `translateY(30px); opacity: 0` to `translateY(0); opacity: 1` with a 0.5s ease-out transition. Blocks within the same zone stagger by 100ms delay. - The Zone 4 "Grid Collapse" uses a more dramatic entrance: elements translate from random off-screen positions and rotate from their final rotation values +/- 5 degrees, settling into place with a spring-eased 0.8s animation. **CSS Architecture Notes:** - Use CSS Grid for the broken-grid layout: `grid-template-columns: repeat(12, 1fr)` with elements placed using explicit `grid-column` and `grid-row` values, then offset with `transform: translate()` for the grid-breaking shifts. - `mix-blend-mode: difference` on the Signal Yellow horizontal rules where they cross dark content blocks, creating visual interest at intersections. - `backdrop-filter: none` -- no blur effects. The aesthetic is sharp, flat, and graphic. - All color transitions on hover: 0.2s ease. - The noise-grain overlay is implemented as a fixed-position full-viewport pseudo-element (`::after` on `body`) with `pointer-events: none` and `z-index: 9999`. **Mobile Adaptation:** On viewports below 768px, the broken-grid simplifies to a single-column stack, but retains the grid-breaking ethos through: offset margins (alternating 16px left / 32px left padding), occasional full-bleed breakouts, and maintained element rotation. The card-flip interaction converts to tap-triggered with a visual pulse animation (a brief 1.05 scale bounce on the flip icon) to indicate interactivity. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signup forms, cookie banners, chatbot widgets, stock photography, rounded corners (all elements are sharp-cornered), drop shadows (depth is created through overlap and color contrast, never shadow), gradient backgrounds, parallax scrolling. ## Uniqueness Notes **Differentiators from other designs:** 1. **Hangul Jamo as Structural Design Element:** No other design in the portfolio uses Korean letterform components as architectural motifs. The individual jamo (ㄱ, ㅎ, ㅏ, ㅗ) function as oversized compositional anchors, creating a visual language rooted in a specific non-Latin writing system's geometric DNA. This is not "Korean-themed decoration" -- it is using the structural logic of syllable-block composition as a layout philosophy. 2. **Card-Flip as Primary Interaction (Not Supplement):** While card-flip appears at only 4% frequency in the portfolio, other designs use it as a minor embellishment. Here, card-flip IS the interaction model -- every meaningful content engagement involves revealing a hidden reverse face, echoing the theme of surfaces, layers, and the hidden depth behind pasted-over walls. The flip becomes narrative: what is behind the poster? 3. **Syllable Block Compositional Model:** The layout system is derived from an actual typographic structure (Hangul syllable blocks) rather than from generic grid frameworks or trend-driven patterns. Content blocks compose together in 2-4 element clusters that mirror how jamo stack within a single character, creating a layout logic unique to this site that cannot be replicated by simply applying a CSS grid template. 4. **Zero Rounded Corners / Zero Shadows / Zero Gradients:** In a portfolio where glassmorphism (8%), soft UI (neomorphism 2%), and gradient palettes (91%) are prevalent, this design achieves all depth and visual hierarchy through overlap, color contrast, and rotation alone. The visual vocabulary is entirely flat and sharp -- every surface is a hard-edged plane, every depth cue comes from physical overlap. 5. **Dual Register: Street Chaos + Systematic Precision:** The design operates simultaneously in two visual registers that typically oppose each other -- the raw, chaotic energy of street-style pasting and the meticulous, engineered precision of abstract-tech coordinate systems. The grid-dot patterns, corner brackets, and coordinate labels exist as a systematic underlay beneath the apparently chaotic broken-grid surface, revealing that the disorder is architecturally controlled. **Chosen seed/style:** aesthetic: street-style, layout: broken-grid, typography: display-bold, palette: high-contrast, patterns: card-flip, imagery: mixed-media, motifs: abstract-tech, tone: bold-confident **Avoided overused patterns:** playful aesthetic (97%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered animation as primary pattern (96%), parallax (81%), friendly tone (97%), minimal imagery (94%), vintage motifs (79%), gradient palette (91%). The design deliberately selects from the low-frequency end of every category to maximize portfolio-level diversity.