# Design Language for hwakryul.com ## Aesthetics and Tone hwakryul.com (확률의 다른 표기 — another romanization of the Korean word for "probability") embraces a terminal aesthetic — the monochrome precision of command-line interfaces, blinking cursors, and the cryptographic beauty of raw data streams. The site presents probability concepts through the lens of computational science: algorithms rendered as terminal output, probability distributions drawn in ASCII art, and mathematical relationships expressed as function calls. Visual inspiration draws from early Unix terminals, the Matrix's cascading code, and the elegant minimalism of well-written shell scripts. The tone is conversational rather than cold — as if a knowledgeable friend is walking you through probability concepts at a terminal session. The layered-depth layout creates the feeling of multiple terminal windows stacked in z-space, with content emerging from behind overlapping consoles. ## Layout Motifs and Structure The layout uses a **layered-depth** architecture where content panels overlap and stack in z-space, creating the impression of multiple terminal windows arranged on a desktop. **Layered Depth Architecture:** - Base layer: Full-viewport dark background with faint scan-line overlay - Layer 1: Primary terminal window — centered, 80% viewport width, containing main content with a window chrome header (three colored dots, title bar) - Layer 2: Secondary terminal windows — smaller panels (40-50% width) positioned at offsets, partially overlapping Layer 1 - Layer 3: Floating mini-terminals — small code snippet panels (300px wide) positioned at corners with higher z-index **Window Chrome Design:** - Each terminal panel has a header bar (32px) with three circles (12px: #ff5f57, #febc2e, #28c840) mimicking macOS window controls - Title bar shows a file path or command name in monospace - Panel bodies have slight rounded corners (8px) and a subtle drop shadow (0 4px 24px rgba(0,0,0,0.5)) **Section Sequence:** - Opening: Primary terminal boots up with a typing animation showing initialization sequence - Content sections: Secondary terminals slide in from edges as the user scrolls, containing probability explanations - Interactive section: A mini-terminal accepts simulated user input for probability calculations - Closing: All terminals minimize/close in reverse order ## Typography and Palette **Typography:** - **Primary/Code:** "JetBrains Mono" (Google Fonts) — a developer-focused monospace with excellent legibility and code ligatures at 0.9rem-1rem, weight 400. This is the dominant typeface, reinforcing the terminal environment. - **Headlines/Commands:** "JetBrains Mono" at 1.5rem-2.5rem, weight 700, styled as terminal prompts (prefixed with $ or > characters) for section headers. - **Body Explanations:** "JetBrains Mono" at 0.9rem, weight 400, line height 1.65. All body text maintains the monospace terminal feel. - **Accent/System Messages:** "JetBrains Mono" at 0.8rem, weight 400, styled in a different color for system output versus user input distinction. **Color Palette:** - **Terminal Black:** #1a1b26 — deep blue-black background for all terminal windows - **Phosphor Green:** #9ece6a — primary text color echoing green phosphor CRT monitors - **Amber Warning:** #e0af68 — warm amber for warnings, variables, and secondary highlights - **Error Red:** #f7768e — soft red for error states, important markers, and probability thresholds - **Comment Gray:** #565f89 — muted blue-gray for comments, annotations, and de-emphasized text - **Bright White:** #c0caf5 — high-contrast white-blue for primary content text and commands - **String Cyan:** #7dcfff — bright cyan for strings, links, and interactive elements - **Background Layer:** #16161e — slightly darker than terminal black for the base viewport background ## Imagery and Motifs **Duotone Photo Processing:** Any photographic element is processed through a duotone filter — converted to two-tone using terminal palette colors (typically phosphor green and terminal black). Images appear as though rendered on a monochrome CRT display. **Wave Form Visualizations:** - Probability distribution curves rendered as ASCII art or thin SVG lines in phosphor green - Normal distribution bell curves drawn with character blocks (█ ▓ ░) creating density-mapped visualizations - Animated wave forms that oscillate gently, representing probability waves **Terminal UI Elements:** - Progress bars using [████████░░] block characters - Tables drawn with ┌─┬─┐ box-drawing characters - Blinking cursor (█) at the end of active text sections - Command prompt prefixes ($ user@hwakryul:~$ ) before interactive sections **Counter-Animate Patterns:** - Numbers and probability values that count up/down to their final value when scrolled into view - Animated ASCII spinners (/ - \ |) appearing during "loading" transition moments between sections - Matrix-style falling character columns in the deep background at very low opacity (0.05) ## Prompts for Implementation Build the page as a terminal desktop environment. The base viewport has the darkest background (#16161e) with a full-screen CSS scan-line overlay (repeating linear-gradient with 1px transparent, 1px rgba(0,0,0,0.1) creating horizontal lines). Terminal windows are absolutely positioned divs with the window chrome header. The boot sequence animation: on page load, the primary terminal types out an initialization sequence using a JavaScript typewriter effect (30-50ms per character), displaying system messages like "Loading probability engine..." and "Initializing distribution modules..." before the main content appears. Implement the layered-depth scroll behavior: as the user scrolls, secondary terminal windows slide in from off-screen positions using transform: translateX/Y triggered by Intersection Observer. Each window should have a slight rotation (1-2deg) that straightens on full entry, suggesting physical papers being organized on a desk. The counter-animate effect for probability values: when a number scrolls into view, it rapidly counts from 0 to its target value using requestAnimationFrame, with easing so it slows as it approaches the final number. Duration: 1.5s per counter. The blinking cursor effect: a simple CSS animation (opacity: 1 to 0, step-end, 1s infinite) on a span element (█ character) placed at strategic content endpoints. For the interactive mini-terminal: build a simple input field styled as a terminal prompt. When the user types a number and presses Enter, display a pre-calculated probability result with the typing animation effect, simulating a computation. AVOID: CTA-heavy layouts, pricing blocks, stat-grids as marketing elements. The terminal interface itself serves as both the design language and the content delivery mechanism. ## Uniqueness Notes 1. **Terminal windows as layout containers:** Using overlapping terminal window panels as the primary content containers transforms the traditional section-based layout into a desktop computing metaphor. 2. **ASCII art probability distributions:** Rendering mathematical visualizations using character-block density mapping (█ ▓ ░) is a distinctive data visualization approach native to the terminal aesthetic. 3. **Boot sequence as page load animation:** The initialization text typing sequence creates a narrative opening that establishes the terminal world before content delivery. 4. **Counter-animate on probability values:** Numbers counting up to their final value creates a dynamic data-reveal effect that reinforces the computational theme. 5. **Layered z-depth window stacking:** The physical desktop metaphor of overlapping windows creates spatial depth uncommon in scrolling websites. **Seed/Style:** aesthetic: terminal, layout: layered-depth, typography: serif-revival, palette: earth-tones, patterns: counter-animate, imagery: duotone-photo, motifs: wave-forms, tone: conversational **Avoided Overused Patterns:** corporate aesthetic (74%), parallax patterns (85%), asymmetric layout (85%), warm palette (89%), friendly tone (75%), minimal imagery (84%), tech motifs at surface level (81%). This design uses terminal aesthetic, layered-depth layout, counter-animate patterns, duotone-photo imagery, and conversational tone.