# Design Language for hwaglyul.com ## Aesthetics and Tone hwaglyul.com embodies the visual language of a **command-center data observatory** -- a single-operator mission control where complex, interconnected data streams converge on one display. The domain name "hwaglyul" (화결, loosely "resolution through transformation") becomes the conceptual anchor: every visual element on the site represents a process of raw data being refined, filtered, and crystallized into meaning. The aesthetic is **data-driven** in the truest sense -- not the polished, marketing-friendly "data visualization" of executive dashboards, but the raw, honest density of a systems engineer's terminal crossed with a scientific instrument panel. Think of the spectral analysis displays in a radio telescope facility, the lattice diagrams on a materials scientist's secondary monitor, or the packet-inspection waterfalls in a network operations center. There is no pretense of consumer friendliness here. The site respects the viewer's intelligence by presenting information at high density without dumbing it down. The tone is **professional** -- measured, precise, and confident without being cold. It communicates authority through competence rather than through visual weight or aggressive typography. Every element earns its place through informational utility. Decorative elements exist, but they double as data representations: a border is also a timeline, a background gradient encodes a value range, a pulsing element indicates live system status. The overall mood is the quiet focus of a 2AM monitoring session where everything is running within tolerance but demands sustained attention. ## Layout Motifs and Structure The layout is a **dashboard** architecture -- not a generic analytics dashboard with card widgets, but a bespoke control surface designed for a single domain of knowledge. The page is structured as a fixed-viewport instrument panel where content regions function as discrete monitoring zones. **Grid System:** - Base grid: CSS Grid with `grid-template-columns: 220px 1fr 1fr 320px` creating a 4-zone layout - Zone A (left rail, 220px): Navigation and system-status indicators -- a vertical stack of labeled data points that double as nav links, each showing a live-pulsing status dot and a compact sparkline - Zone B (center-left, 1fr): Primary content viewport -- the main reading area where the core narrative unfolds as scrollable data panels - Zone C (center-right, 1fr): Secondary visualization viewport -- supporting data-viz elements, charts, and relational diagrams that contextualize Zone B content - Zone D (right rail, 320px): Metadata and detail panel -- expanded information, annotations, cross-references that appear on hover or selection from other zones **Spatial Rules:** - Gap between zones: `2px` solid lines in `#2A2D35` (hairline channel separators, not gutters) - No border-radius anywhere -- every element is sharp-cornered, reflecting the precision of technical instruments - Zones B and C share a horizontal header row (`48px` tall) that displays contextual breadcrumbs and a miniature system-clock readout - The entire layout is viewport-locked on desktop (no page-level scroll); each zone scrolls independently with custom thin scrollbars styled in `#3D4150` - On viewports below 1024px, the layout collapses to a single-column stack where Zone A becomes a horizontal toolbar, Zone D becomes an expandable bottom drawer, and Zones B and C stack vertically **Anti-patterns (deliberately avoided):** - No hero section -- the dashboard loads fully populated - No centered content -- all text is left-aligned within its zone - No full-bleed imagery -- every visual is contained within its instrument panel zone - No card-grid patterns -- zones are fixed, not repeated card instances ## Typography and Palette **Typography:** - **Primary / Body / Data Labels:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface designed specifically for technical contexts. Its letterforms are engineered for screen legibility at small sizes, with open counters and generous spacing that prevents character confusion in dense data displays. Used at `13px` / `line-height: 1.65` for body text and data labels. Weight 400 only -- the single weight enforces typographic discipline and eliminates the visual noise of weight variation within data-dense layouts. - **Headings / Zone Titles:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif that bridges the gap between the monospaced body text and the need for compact, scannable headlines. Weight 500 for zone titles at `14px` uppercase with `letter-spacing: 0.12em`, creating the look of engraved panel labels on physical instrument housings. Weight 700 at `clamp(1.4rem, 2.2vw, 2rem)` for the single page-level title. - **Accent / Annotations:** "IBM Plex Mono" (Google Fonts) -- used exclusively for inline annotations, footnotes, and secondary data callouts. Weight 400 italic at `11px`. The subtle shift from Share Tech Mono to IBM Plex Mono in annotation contexts creates a two-voice system where the reader can instantly distinguish primary data from commentary without color coding. - **Numeric Data / Counters:** All numeric values use `font-variant-numeric: tabular-nums` regardless of typeface, ensuring columns of numbers align vertically. The CSS custom property `--data-font: 'Share Tech Mono', monospace` is applied globally so that data elements inherit consistent numeric rendering. **Palette:** The palette is **cool-grays** -- a carefully tuned grayscale spectrum with blue undertones, punctuated by exactly two signal colors that carry semantic meaning. | Role | Hex | Usage | |------|-----|-------| | Void (deepest background) | `#12141A` | Page background, Zone A/D background | | Panel (zone background) | `#1A1D25` | Zone B/C background | | Channel (separators) | `#2A2D35` | All dividing lines, borders, thin rules | | Surface (elevated elements) | `#2E323C` | Hover states, active zone headers, tooltips | | Muted text | `#5A6070` | Disabled labels, tertiary information | | Secondary text | `#8890A0` | Annotations, timestamps, metadata | | Primary text | `#C8CDD8` | Body text, data labels | | Bright text | `#E8ECF2` | Headlines, active nav items, emphasized data | | Signal: Pulse Green | `#00D4AA` | Live-status indicators, active connections, positive values, system-healthy states | | Signal: Alert Amber | `#F0A030` | Warnings, attention-needed states, notable data spikes, in-progress indicators | **Color Rules:** - No gradients in the background -- pure flat fills only - Signal colors appear at maximum 15% of visual area -- they gain power through scarcity - All interactive hover states shift the element's background one step up the gray ladder (e.g., `#1A1D25` to `#2E323C`) - Text never appears on backgrounds with less than 7:1 contrast ratio against the text color ## Imagery and Motifs **Data-Viz as Primary Imagery:** All visual elements on the site are **data-viz** constructions -- SVG and CSS-rendered visualizations that present real or procedurally generated datasets. No photographs, no illustrations, no stock imagery. Every pixel that is not text is a data representation. **Circuit Motifs:** The **circuit** motif permeates the design at multiple scales: - **Macro-circuit:** The zone separator lines (`#2A2D35`) are not simple straight rules. They are rendered as SVG paths that follow circuit-board trace routing conventions -- right-angle bends with small `2px` chamfers at corners, occasional T-junctions where zones meet, and small circular "via" nodes (4px diameter circles in `#2E323C` with a 1px `#3D4150` stroke) at intersection points. This transforms the structural grid itself into a circuit diagram. - **Micro-circuit:** Within Zone C (the visualization viewport), data relationships are depicted as node-and-trace diagrams. Each data entity is a small rectangle (`40px x 20px`, `#2E323C` fill, `1px #3D4150` stroke) connected to related entities by right-angle polyline traces in `#00D4AA` at `0.5px` stroke width. The traces animate with a slow directional dash pattern (`stroke-dashoffset` animation over 8 seconds) that conveys data flow direction. - **Background circuit texture:** The page background (`#12141A`) carries an extremely subtle repeating SVG pattern of faint circuit traces in `#181B22` (barely 3% brighter than the background). This texture is visible only on large, high-quality displays and rewards close observation without creating visual noise. **Sparkline System:** Every navigable section in Zone A is accompanied by a 120px-wide, 24px-tall sparkline rendered as an SVG ``. These sparklines use `#5A6070` for the line and a subtle fill gradient from `rgba(0, 212, 170, 0.08)` at the line to transparent at the baseline. On hover, the sparkline transitions to `#00D4AA` line color over 300ms. The sparklines are not decorative -- they represent the "density" or "activity level" of each section, giving the user a preview of content weight before navigating. **Pulse Ring Indicator:** The site's signature visual element is a **pulse ring** -- a 64px diameter circle rendered in Zone A's header area. It consists of three concentric rings: - Outer ring: `1px` stroke in `#2A2D35`, radius 32px - Middle ring: `1px` stroke in `#00D4AA` at `opacity: 0.6`, radius 24px, continuously rotating at 30s per revolution - Inner ring: `2px` stroke in `#00D4AA`, radius 12px, with a `pulse` animation (scale 1 to 1.15 to 1 over 2s, infinite, ease-in-out) - Center dot: `4px` solid circle, `#00D4AA`, with a subtle `box-shadow: 0 0 8px rgba(0, 212, 170, 0.4)` This element functions as the site's "heartbeat" -- a persistent indicator that the system is live and the data streams are active. It replaces a conventional logo. **Data Waterfall:** Zone C features a continuously animating "data waterfall" as its default state when no specific visualization is selected. This is a vertical cascade of small horizontal bars (`var(--bar-width)` x `3px`) that spawn at the top of the zone and drift downward at varying speeds. Each bar's width encodes a data value (wider = larger), and its color maps to the cool-gray spectrum from `#2A2D35` to `#5A6070`, with occasional bars in `#00D4AA` representing outlier values. The animation is implemented with CSS `@keyframes` and `animation-delay` staggering across 40-60 bar elements, creating a matrix-rain effect that is subdued and informational rather than theatrical. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport data-loading sequence. On initial load, the four-zone grid structure fades in first as empty panels with their circuit-trace separator lines drawing themselves from top-to-bottom and left-to-right over 1.2 seconds (SVG `stroke-dasharray` animation). As each zone's boundary completes, the zone's content begins populating: 1. Zone A (0.8s delay): Status indicators appear one by one from top to bottom, each with a subtle `translateX(-8px) to translateX(0)` slide and `opacity 0 to 1` over 200ms, staggered 80ms apart. Each status dot blinks once in `#F0A030` (amber) before settling to `#00D4AA` (green), simulating a boot-check sequence. 2. Zone D (1.0s delay): Metadata fields appear as monospaced text that "types" into place using a typewriter animation at 40 characters per second -- but only for the first 3 fields. Remaining fields fade in normally to avoid the effect outstaying its welcome. 3. Zone C (1.4s delay): The data waterfall begins spawning bars, starting sparse and building to full density over 3 seconds. 4. Zone B (1.8s delay): The primary content fades in as a single block with a 400ms `opacity` transition. This is the only zone that appears "all at once" -- the instantaneity contrasts with the sequential loading of other zones and signals that this is the main content, already prepared and ready. **Interaction Patterns:** - **Pulse-attention pattern:** Key interactive elements use a `pulse-attention` animation -- a subtle scale oscillation (1.0 to 1.02 to 1.0) combined with a `box-shadow` bloom (`0 0 0px` to `0 0 6px rgba(0, 212, 170, 0.2)` to `0 0 0px`) over a 3-second cycle. This pattern applies to exactly 1-2 elements on screen at any time, directing attention without overwhelming. - **Zone cross-referencing:** Hovering a data point in Zone B highlights its corresponding visualization in Zone C and its metadata in Zone D. This is achieved by adding a `data-ref` attribute to linked elements and using JavaScript `mouseenter`/`mouseleave` to toggle a `.highlighted` class that applies a `border-left: 2px solid #00D4AA` and a background shift to `#2E323C`. - **Scrolling within zones:** Zone B uses `scroll-snap-type: y proximity` to gently guide users to content section boundaries without hard-locking. The scrollbar track is styled as a thin (`4px`) rail in `#1A1D25` with a thumb in `#3D4150` that expands to `6px` on hover. - **No parallax, no page-level scroll, no spring physics** -- all motion is linear or ease-in-out, reflecting the precision and predictability of instrumentation. **Storytelling Approach:** The narrative is structured as a **data briefing** -- the user is cast as an operator arriving at their station. Zone B presents content as a series of "reports" or "readouts," each one a discrete block of text with a header formatted as a record identifier (e.g., `[REC-001] Domain Analysis` in `#5A6070` above the heading). The reading experience is sequential within Zone B but enriched by peripheral awareness of Zones A, C, and D updating in response. **AVOID:** - CTA-heavy layouts -- no "Sign Up" buttons, no "Get Started" prompts - Pricing blocks -- no tiered pricing grids or comparison tables - Stat-grids -- no "3.2M users, 99.9% uptime" vanity metrics - Rounded corners -- no `border-radius` anywhere - Gradients -- no background gradients, gradient text, or gradient borders - Card shadows -- no `box-shadow` depth simulation on content cards - Centered hero text -- no large centered display text above the fold ## Uniqueness Notes **Differentiators from other designs:** 1. **Viewport-Locked Dashboard Layout:** Unlike 99% of designs in the portfolio that use page-level scrolling (scroll-triggered at 96%), hwaglyul.com locks the viewport and confines all scrolling to individual zones. This is architecturally distinct -- the page never scrolls as a unit. The dashboard layout (15% frequency) is used here not as a widget grid but as a genuine multi-pane instrument panel with independent scroll contexts. 2. **Zero Rounded Corners, Zero Gradients, Zero Shadows:** The design takes a hardline stance against the three most common visual softening techniques. Where other designs use `border-radius` for friendliness, gradients for depth, and shadows for elevation, hwaglyul.com achieves visual hierarchy purely through background color stepping across its 8-shade cool-gray ladder. This creates a distinctive flat-panel aesthetic that references physical instrumentation rather than consumer software. 3. **Circuit-Trace Structural Grid:** The zone separator lines are not inert visual dividers -- they are SVG-rendered circuit traces with proper PCB routing conventions (right-angle bends, via nodes, chamfered corners). This transforms the layout skeleton itself into a decorative motif, so structure and ornament are unified. No other design in the portfolio uses the grid infrastructure as the primary decorative element. 4. **Boot-Sequence Loading Narrative:** The page load is not a simple fade-in or a scroll-triggered reveal. It is a dramatized system initialization where each zone powers on in sequence with amber-to-green status checks, typed-out metadata, and a building data waterfall. This temporal narrative -- the system coming alive -- replaces the conventional hero section with a procedural experience that cannot be reproduced in a screenshot. 5. **Dual-Monospace Type System:** Using two monospaced families (Share Tech Mono for primary, IBM Plex Mono for annotations) creates a typographic hierarchy within the monospace genre that most designs do not attempt. The two fonts are close enough to maintain visual coherence but distinct enough that readers can parse the information hierarchy without relying on color or weight. **Documented Seed/Style:** ``` aesthetic: data-driven layout: dashboard typography: tech-mono palette: cool-grays patterns: pulse-attention imagery: data-viz motifs: circuit tone: professional ``` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with data-driven precision - centered layout (99%) -- replaced with left-aligned multi-zone dashboard - warm palette (100%) -- replaced with cool-grays - scroll-triggered patterns (96%) -- replaced with viewport-locked independent zone scrolling - parallax patterns (80%) -- eliminated entirely; all motion is UI-functional - friendly tone (97%) -- replaced with professional detachment - minimal imagery (95%) -- replaced with data-viz density - photography imagery (71%) -- replaced with pure SVG/CSS data constructions - gradient palette (90%) -- replaced with flat cool-gray fills