# Design Language for hwagryul.com ## Aesthetics and Tone hwagryul.com channels the atmosphere of a decommissioned Korean military command center -- circa 2087 -- where obsolete surveillance terminals still flicker with ghost data, their CRT phosphor burn-in layered over cracked acrylic dashboards. The aesthetic is **datarot cyberpunk**: not the polished neon-soaked cityscapes of mainstream cyberpunk, but the grime underneath -- corroded data streams, half-parsed Hangul glyphs dissolving into static, telemetry readouts for systems that no longer exist. The Korean word "hwagryul" (probability) becomes a design driver: every visual element exists in a state of probabilistic uncertainty, flickering between presence and absence, signal and noise. The mood draws from three specific sources: (1) the green-phosphor terminal screens of 1980s Korean military monitoring stations during the Park Chung-hee era, repurposed with hypersaturated neon data overlays; (2) the visual language of Korean internet cafe (PC bang) culture -- dense information overload, overlapping UI windows, aggressive notification systems, all rendered with a patina of digital decay; (3) the raw documentary photography aesthetic of Korean street protest culture -- handheld, urgent, unflinching, with text overlaid directly on image like agitprop posters. The tone is **raw-authentic** -- unapologetically direct, stripped of corporate polish. No smooth gradients fading into comfortable whitespace. Instead: hard-edged data panels slamming against each other, type that demands to be read, UI chrome that looks like it was welded together from salvaged interface components. The site should feel like intercepting a classified transmission -- you are not supposed to be seeing this, but now that you are, you cannot look away. ## Layout Motifs and Structure The layout follows a **HUD-overlay** paradigm -- the entire viewport is treated as a heads-up display from an advanced reconnaissance system. Content is not arranged in traditional sections; instead, it is distributed across the screen as overlapping data panels, each with its own z-index, opacity, and positional logic, creating a layered cockpit-instrument feel. **HUD Architecture:** - **Layer 0 (Background Field):** A full-viewport dark field (#0A0A12) with a subtle animated scanline effect -- thin horizontal lines (1px, rgba(0, 255, 136, 0.03)) scrolling vertically at 0.5px/frame. This creates the base CRT texture without overwhelming content. A faint radial vignette (box-shadow inset) darkens the viewport corners, simulating a curved monitor housing. - **Layer 1 (Grid Overlay):** A CSS grid of hairline rules rendered using repeating-linear-gradient -- vertical and horizontal lines at 80px intervals, colored #1A1A2E at 0.15 opacity. This grid is purely decorative, creating the coordinate-system feel of a tactical display. The grid lines pulse faintly (opacity oscillating between 0.08 and 0.18 over 4-second CSS animation cycles). - **Layer 2 (Data Panels):** The primary content containers. These are absolutely-positioned rectangular panels with sharp corners (border-radius: 0), 1px borders in #00FF88 (the primary HUD green), and semi-transparent backgrounds (rgba(10, 10, 18, 0.85)). Each panel has a small "designation tag" in its top-left corner -- a monospaced label like "PANEL::01//PROB" or "SYS::OVERVIEW" rendered in 9px Inconsolata at 40% opacity. Panels are arranged in an asymmetric cluster: a large primary panel (60vw x 70vh) anchored slightly left of center, with 3-5 smaller satellite panels (15-25vw) orbiting it at varying offsets. Panels overlap deliberately -- a small panel's corner tucking behind the primary panel's edge, creating depth without explicit z-fighting. - **Layer 3 (Floating Telemetry):** Small, orphaned data fragments that drift slowly across the viewport -- single numbers, probability percentages ("P=0.73"), abbreviated Hangul text fragments, coordinate pairs. These are absolutely-positioned spans with CSS animation (translateX/Y keyframes over 30-60 second cycles), rendered in 11px monospace at 20-35% opacity. They create the feeling of ambient data exhaust leaking from the system. - **Layer 4 (Alert Overlays):** Occasionally, a full-viewport semi-transparent overlay flashes briefly (200ms) in #FF0066 at 3% opacity when the user triggers certain interactions, simulating a system alert or probability threshold breach. This is the only layer that breaks the persistent calm of the HUD, introducing controlled bursts of urgency. **Navigation:** There is no traditional navigation bar. Instead, a vertical strip of 4-6 hexagonal icons is fixed to the left edge of the viewport (left: 12px, centered vertically), each icon a minimal SVG glyph (circuit node, waveform, data cluster, probability curve). On hover, each icon expands to reveal a text label sliding out to the right. The active section's icon glows with a pulsing #00FF88 border. **Scroll Behavior:** The page does NOT scroll traditionally. Instead, clicking a nav icon transitions the HUD state -- panels slide, resize, and reconfigure using CSS transforms (translate3d, scale) with 600ms cubic-bezier(0.16, 1, 0.3, 1) easing. The viewport is always full-screen; content is revealed by reconfiguring the panel arrangement, not by scrolling down. ## Typography and Palette **Typography:** - **Display / Headlines:** "Orbitron" (Google Fonts) -- a geometric, futuristic sans-serif with squared letterforms and wide tracking that reads like instrumentation labels on a spacecraft dashboard. Used at 2.4rem-5.6rem for panel titles and primary data readouts. Set with `font-weight: 700`, `letter-spacing: 0.18em`, `text-transform: uppercase`, and `line-height: 1.0`. All headlines are rendered with a `text-shadow: 0 0 8px rgba(0, 255, 136, 0.4), 0 0 24px rgba(0, 255, 136, 0.15)` to create a phosphor-glow effect. For critical data points, a secondary shadow layer in #FF0066 is added at 0.1 opacity to suggest thermal imaging bleed. - **Body / Data Text:** "Inconsolata" (Google Fonts) -- a humanist monospace typeface with clear distinction between similar glyphs (0/O, 1/l/I), making it ideal for the data-heavy aesthetic. Used at 0.875rem-1.125rem for panel body text, readouts, and labels. Set with `font-weight: 400`, `letter-spacing: 0.04em`, `line-height: 1.65`. The monospace rhythm reinforces the terminal/data-stream feel while remaining legible at small sizes. All body text uses `font-variant-numeric: tabular-nums` to ensure numerical data aligns in columns. - **Expressive Variable (Accent):** "Recursive" (Google Fonts) -- a variable font spanning sans to mono to casual axes, used for transitional elements where the typography itself morphs between states. Headings that animate on panel transitions interpolate Recursive's `MONO` axis from 0 (proportional) to 1 (monospace) over 400ms, creating a visual effect of text "locking into" data-display mode. Used at 1.2rem-2rem for secondary headings and callout text. The `CASL` (casual) axis is set to 0.5 for a slightly humanized, hand-tuned feel that contrasts with Orbitron's rigidity. - **Korean Text:** "Noto Sans KR" (Google Fonts) -- specifically weight 300 (light) for ambient Hangul fragments and weight 700 (bold) for Korean headlines. Korean text is always rendered at 90% of the equivalent Latin size to account for the denser visual weight of Hangul blocks. Korean characters used as decorative elements are rendered at 6-10rem with `opacity: 0.06` and `color: #00FF88`, floating behind data panels as cultural ghost-text. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void Black | Deep space black | #0A0A12 | Primary background, panel interiors | | HUD Green | Phosphor neon green | #00FF88 | Primary accent, borders, active states, glow effects | | Alert Magenta | Hot signal magenta | #FF0066 | Alerts, critical data, hover states, error indicators | | Data Cyan | Cool telemetry cyan | #00D4FF | Secondary data readouts, links, secondary accent | | Ghost Indigo | Muted panel chrome | #1A1A2E | Grid lines, inactive borders, subtle separators | | Probability Yellow | Warning amber | #FFD600 | Tertiary accent, probability values, highlighted data | | Static White | High-signal white | #E8E8F0 | Primary body text, high-contrast readouts | | Burn Purple | Phosphor afterimage | #7B2DFF | Decorative glow, hover trail effects, subtle tertiary | The palette is strictly **dopamine-neon** -- no warm earth tones, no pastels, no comfortable gradients. Colors exist at two extremes: near-black backgrounds and hypersaturated neon accents, with almost nothing in between. This high-contrast gap creates visual tension -- the eye is constantly pulled between the void and the signal, mirroring the probabilistic theme of the domain name. ## Imagery and Motifs **Glitch Art as Primary Visual Language:** All imagery is generated through CSS-based glitch effects -- no raster photographs, no stock images. The entire visual system is constructed from code-rendered artifacts that simulate data corruption, signal degradation, and digital entropy. **Primary Glitch Techniques:** 1. **RGB Channel Split:** Key visual elements (headlines, panel borders, decorative Hangul) are rendered with three overlapping layers -- one for each RGB channel. The red channel is offset 2-4px left, the blue channel 2-4px right, using `text-shadow` for type and pseudo-element offsets for boxes. On hover, these offsets animate to 6-8px with a 150ms jitter (randomized via CSS custom properties updated by a lightweight JS interval), creating a "signal destabilization" effect. 2. **Scanline Corruption Bands:** Horizontal bands (4-8px tall) of visual noise appear at random vertical positions across panels. These are pseudo-elements with `background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,255,136,0.08) 2px, rgba(0,255,136,0.08) 4px)` and a `clip-path: inset()` that shifts position every 3 seconds via CSS animation, simulating a corrupted video signal. 3. **Data Moshing Blocks:** Rectangular regions (20-60px squares) within panels occasionally "freeze" -- their content replaced by a solid color block (#00FF88 or #FF0066 at 15% opacity) with a 1-frame visual stutter. Achieved via small absolutely-positioned divs with `animation: glitch-block 8s step-end infinite` that toggle visibility. 4. **Probability Scatter Particles:** A canvas element (or CSS-only alternative using multiple box-shadows on a single pseudo-element) renders 40-80 tiny dots (2-3px) scattered across the viewport in the neon palette colors, each with a slow random drift animation. These represent "probability particles" -- the visual noise of uncertainty. Density increases near interactive elements. **Circuit Motifs:** The circuit-board motif is rendered entirely in SVG and CSS: - **Panel Connectors:** Thin lines (#1A1A2E, 1px) connect related data panels, routed at 90-degree angles like PCB traces. These lines terminate in small circles (4px diameter, #00FF88 fill) at each panel's edge, resembling solder points. On state transitions, a small pulse of light (#00FF88 glow, 6px blur) travels along the trace from source panel to destination panel over 800ms. - **Node Clusters:** At intersection points of the background grid, small circuit-node SVGs appear -- circles with 2-4 radiating lines, rendered in #1A1A2E at 0.2 opacity. These are purely decorative, seeding the background with subliminal circuit-board texture. - **Decorative PCB Borders:** Certain data panels have borders that are not simple 1px lines but SVG patterns mimicking PCB edge traces -- the line occasionally branches, forms a small loop or via-hole circle, then returns. This is achieved with an SVG `stroke-dasharray` pattern applied as a `border-image`. **Hangul Ghost Typography:** Large Korean characters from the word "hwagryul" (확률) and related probabilistic vocabulary (가능성/possibility, 불확실/uncertainty, 예측/prediction) are rendered at massive scale (8-15rem) in Noto Sans KR weight 300, positioned behind data panels at 4-7% opacity in #00FF88 or #7B2DFF. They drift slowly (CSS translateY animation, 60s cycle, 20px range), creating a palimpsest of cultural identity bleeding through the technical interface. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a single, full-viewport HUD system that reconfigures itself rather than scrolling. The user is an operator at a terminal, cycling through data views. There is no "above the fold" or "below the fold" -- every state is THE fold. **State-Based Panel Transitions:** When the user activates a new section (via the hexagonal nav icons), the current panel arrangement dissolves and reforms: 1. Current panels scale down slightly (transform: scale(0.96)) and reduce opacity to 0.3 over 300ms. 2. A brief "interference" flash occurs -- the full viewport flickers with a 2-frame scanline burst (the alert overlay at 5% opacity, toggling on/off over 100ms). 3. New panels slide in from off-screen edges (translateX from +/- 110vw, translateY from +/- 110vh) and settle into their target positions over 500ms with cubic-bezier(0.16, 1, 0.3, 1) easing. 4. Panel borders draw themselves on -- starting from the top-left corner, the 1px #00FF88 border "traces" around the panel perimeter using a CSS border-image animation (or four pseudo-elements expanding from the corner). **Hover-Lift Interaction Pattern:** All interactive elements use the hover-lift pattern as their primary feedback mechanism: - On hover, elements translate upward 4-6px (translateY(-4px)) and gain an intensified glow shadow (box-shadow: 0 8px 32px rgba(0, 255, 136, 0.2), 0 0 12px rgba(0, 255, 136, 0.3)). - Simultaneously, the RGB channel split on the hovered element intensifies (offsets double from 2px to 4px). - A subtle "data whisper" appears -- a tiny label (8px Inconsolata, 50% opacity) materializes 4px above the element with a micro-animation (translateY from +8px, opacity from 0), showing contextual metadata like "PROB::0.87" or "NODE::ACTIVE". - The lift easing is spring-physics inspired: cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot on enter, ease-out on leave. **Glitch Microinteractions:** - **Click feedback:** On click, the clicked element undergoes a 120ms "corruption burst" -- it skews (transform: skewX(2deg)), the RGB split maxes out (8px offset), and the background briefly flashes the alert magenta at 10% opacity, then snaps back. - **Focus states:** Focused elements get a double-border effect -- the standard #00FF88 1px border plus a second border 3px outside it in #00D4FF at 30% opacity, creating a "target lock" appearance. - **Loading states:** Data panels that are loading content display a "decryption" animation -- random characters from a mixed Latin/Hangul set rapidly cycle in the panel body area (typewriter effect at 40ms intervals) before resolving into actual content. **Probability Visualization:** One panel in each state displays a real-time probability visualization -- a CSS-rendered bar graph or waveform that animates continuously. The bars are thin (3px wide, 2px gap) vertical lines whose heights oscillate independently using CSS animations with prime-number durations (3s, 5s, 7s, 11s) to avoid synchronization, creating an organic, never-repeating waveform pattern in #00FF88. On hover, the waveform responds by increasing amplitude and shifting color toward #FFD600. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids (this is a narrative experience, not a SaaS landing page) - Traditional navigation bars or hamburger menus - Smooth gradient backgrounds or comfortable whitespace - Stock photography or raster images - Rounded corners on any element (everything is sharp, angular, machined) - Scroll-based layouts (the HUD reconfigures, it does not scroll) - The "playful" or "friendly" tone (this is raw, technical, urgent) ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-Scroll HUD Architecture:** While 99% of designs in the portfolio use centered layouts and 96% rely on scroll-triggered animations, hwagryul.com eliminates scrolling entirely. The viewport is a fixed cockpit instrument panel that reconfigures via panel transitions. No other design in the collection uses this interaction paradigm as its sole navigation method. 2. **Probabilistic Visual Theme:** The domain name "hwagryul" (확률, probability) is not treated as mere branding but as the generative principle for the entire visual system. Probability scatter particles, oscillating waveform visualizations, "P=0.XX" data labels, and the fundamental uncertainty of glitch-art elements (which pixel will corrupt next?) all emerge from this single conceptual nucleus. No other design derives its entire visual language from a mathematical/philosophical concept. 3. **Korean Cultural Ghost Layer:** The massive, near-invisible Hangul characters floating behind the HUD panels create a palimpsest effect unique to this design -- a cultural identity assertion that is simultaneously prominent (physically large) and suppressed (nearly transparent). This is distinct from designs that use Korean text as readable content or ignore it entirely. The ghost-text approach makes cultural identity feel like embedded firmware rather than surface decoration. 4. **Datarot Cyberpunk (Not Clean Cyberpunk):** The cyberpunk aesthetic at 4% frequency in the portfolio tends toward clean, polished neon-on-black. hwagryul.com deliberately corrupts this: scanline artifacts, RGB channel splits, data moshing blocks, phosphor burn-in. The interface looks like it has been running for decades without maintenance -- a living ruin of a once-pristine system. This "datarot" variant has no precedent in the existing designs. 5. **Spring-Physics Hover-Lift with Glitch Fusion:** The hover-lift interaction (5% frequency) is combined with intensifying glitch effects on hover -- a pairing no other design uses. Lifting an element literally destabilizes its visual coherence, as if the act of attention introduces noise into the signal. This creates a unique cause-effect relationship between user interaction and visual entropy. **Chosen seed/style:** aesthetic: cyberpunk, layout: hud-overlay, typography: expressive-variable, palette: dopamine-neon, patterns: hover-lift, imagery: glitch-art, motifs: circuit, tone: raw-authentic **Avoided patterns from frequency analysis:** - Avoided "playful" aesthetic (95% frequency -- massively overused) - Avoided "centered" layout (99% -- near universal) - Avoided "mono" typography as primary (99% -- saturated) - Avoided "warm" palette (100% -- completely saturated) - Avoided "scroll-triggered" as primary pattern (96% -- ubiquitous) - Avoided "minimal" imagery (95% -- default fallback) - Avoided "friendly" tone (97% -- portfolio default) - Avoided "vintage" motifs (79% -- heavily overused) - Avoided "photography" imagery (71% -- dominant approach) - Avoided "parallax" pattern (80% -- common fallback) - Preferred all seed categories at low frequency: cyberpunk (4%), hud-overlay (3%), expressive-variable (3%), dopamine-neon (6%), hover-lift (5%), glitch-art (3%), raw-authentic (5%)