# Design Language for hwaklyul.com ## Aesthetics and Tone hwaklyul.com (확률 — Korean for "probability") embraces a graffiti aesthetic — raw, urban, and unapologetically bold. The site treats probability theory and mathematical concepts as street art, spray-painting statistical ideas across concrete walls. Visual inspiration draws from Banksy's social commentary, Jean-Michel Basquiat's raw textual energy, and the typographic chaos of underground zine culture. The mood is scholarly-intellectual but delivered through an irreverent, anti-establishment visual language — mathematics as punk rock rather than ivory tower academia. Surfaces feel rough and textured, like concrete and brick walls. Typography is aggressive and oversized, demanding attention. The "확률" (probability) concept drives a thematic undercurrent: randomness, chance, and the beautiful patterns that emerge from chaos. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — the page extends primarily to the right rather than down, transforming the browsing experience into a lateral journey through a graffiti-covered alleyway. **Horizontal Scroll Architecture:** - Viewport is divided into full-width "panels" (100vw each) that the user scrolls through horizontally - Total width: 6-8 panels depending on content, using CSS scroll-snap-type: x mandatory - Each panel has a distinct concrete/brick wall texture as its background, with graffiti-style content layered on top - Vertical content within each panel is limited to viewport height (100vh) — no vertical scrolling - Navigation: Small horizontal progress bar at the bottom (12px height) showing position within the horizontal sequence **Panel Sequence:** 1. Title wall: Massive spray-painted site name with dripping paint effects 2. Concept wall: Probability basics expressed as graffiti tags and stencil art 3. Formula wall: Mathematical formulas rendered as spray-painted equations 4. Interactive wall: A dice/coin probability simulator with graffiti UI 5. Gallery wall: Collection of probability visualizations in street-art style 6. Credits wall: Attribution and links rendered as a wall of tags **Structural Details:** - Each panel uses absolute positioning for layered graffiti elements - Z-index layering creates depth: wall texture (0), base graffiti (1), content (2), drips/splatters (3) - Mobile fallback: horizontal scroll converts to vertical scroll with the same panel sequence ## Typography and Palette **Typography:** - **Headlines/Tags:** "Bungee" (Google Fonts) — a heavy, block-letter typeface designed for vertical and horizontal text, perfect for graffiti-scale headlines at 4rem-8rem, weight 400. Used with text-shadow for spray-paint depth. - **Body Graffiti:** "Permanent Marker" (Google Fonts) — a handwritten marker typeface at 1.1rem-1.5rem for longer text blocks, maintaining the hand-lettered graffiti feel. - **Mathematical Formulas:** "Fira Code" (Google Fonts) — monospace for mathematical notation at 1rem-2rem, providing legibility for formulas within the chaotic visual environment. - **Small Text/Labels:** "Barlow Condensed" (Google Fonts) — compressed sans-serif at 0.75rem-0.9rem, weight 500, for timestamps, credits, and small annotations. **Color Palette:** - **Concrete Gray:** #8a8a8a — mid-gray for wall surfaces and backgrounds - **Burnt Orange Spray:** #e8571f — primary graffiti color, high-energy orange - **Electric Blue Spray:** #1e90ff — secondary spray color for accents and highlights - **Neon Green Tag:** #39ff14 — fluorescent green for highlights and interactive elements - **Brick Red:** #8b3a3a — warm red for brick wall texture and secondary backgrounds - **Charcoal Black:** #1a1a1a — deep black for primary text and shadow/outline effects - **Cream Stencil:** #f5f0e8 — off-white for stencil-cut text and light elements - **Rust Brown:** #a0522d — oxidized brown for aging effects and decorative weathering ## Imagery and Motifs **Concrete and Brick Textures:** Background surfaces alternate between concrete (smooth gray with subtle aggregate speckle) and brick wall (CSS-drawn repeating pattern of rectangular blocks with mortar lines). Both use CSS-generated patterns avoiding image assets. **Spray Paint Effects:** - Text elements have spray-paint halos: a blurred, larger version of the text in the same color sitting behind (filter: blur(8px), opacity 0.4) creating overspray - Drip effects: Small SVG paths resembling paint drips hang from the bottom edges of large text, animated to elongate slowly on load - Splatter marks: Small random-position dots (4-12px, various palette colors) scattered around text blocks **Book/Scholarly Motifs:** - Mathematical formulas and probability trees rendered in chalk-on-blackboard style (white text on dark panels with slight blur for chalk dust effect) - Tally marks and hand-drawn bar charts as decorative statistical elements - Small notebook-style margin annotations in handwritten typeface **Stencil Art Elements:** - Key icons and symbols cut as stencils — clean geometric shapes with visible "bridges" (small gaps in letters/shapes that reference physical stencil construction) - The probability symbol (P) rendered as a large stencil with spray-paint bleeding around edges **Generative Art Background:** - Algorithmic spray-paint lines that generate unique patterns on each visit using simple JavaScript-driven random walks in canvas, rendered behind the main content ## Prompts for Implementation Build the page as a horizontal scrolling graffiti tunnel. Use CSS scroll-snap on a flex container with flex-direction: row and overflow-x: scroll. Each panel is a flex item of 100vw width and 100vh height. Ensure smooth scroll-behavior and snap-type: x mandatory for panel-to-panel snapping. The spray-paint text effect: each headline should have its visible text layer plus a pseudo-element (::before) containing the same text, scaled 1.05x, blurred 6-10px, and positioned behind with matching color at 0.35 opacity. For the drip effect, use SVG paths positioned absolutely below text elements, animated with CSS transform: scaleY(0) to scaleY(1) on entry with origin-top. The concrete wall texture should be a CSS background using multiple overlapping radial-gradients of slightly varying gray tones (3-4 layers) creating a speckled aggregate appearance. The brick wall panels use a repeating linear-gradient pattern creating rectangular block shapes with 2px mortar gaps in a darker gray. Implement the generative background by rendering random-walk curves on a canvas element sized to 100% of each panel, using Math.random() to determine curve direction at each step. Colors pulled from the spray paint palette at low opacity (0.15-0.25). The magnetic-feel interaction: when hovering near graffiti elements, they should subtly pull toward the cursor (transform: translate by 2-4px in the cursor's direction), creating an urban-energy magnetic effect. The mathematical notation should use Unicode math symbols styled in the chalk-on-blackboard treatment: color #f5f0e8 on a #1a1a1a background panel with text-shadow: 0 0 3px rgba(245,240,232,0.3) for chalk dust glow. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, corporate aesthetics. Let the raw graffiti energy and mathematical content merge into street-level intellectual expression. ## Uniqueness Notes 1. **Horizontal scroll as graffiti alleyway:** The lateral scrolling transforms the page into a walk through a tagged alleyway, fundamentally changing spatial navigation expectations. 2. **Mathematical formulas as street art:** Rendering probability theory in spray-paint and chalk-on-blackboard styles creates a provocative tension between academic rigor and urban rebellion. 3. **Generative spray-paint backgrounds:** Algorithmically generated random-walk patterns ensure each visit produces slightly different background art, embodying the probability theme. 4. **CSS-generated urban textures:** Concrete and brick wall effects built entirely with CSS gradients demonstrate technical craft while maintaining the raw aesthetic. 5. **Magnetic cursor interaction with graffiti elements:** Elements subtly pulling toward the mouse creates an energy-field effect that enhances the street-art dynamism. **Seed/Style:** aesthetic: graffiti, layout: horizontal-scroll, typography: futura-geometric, palette: burnt-orange, patterns: magnetic, imagery: generative-art, motifs: book-scholarly, tone: scholarly-intellectual **Avoided Overused Patterns:** corporate aesthetic (74%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (75%), minimal imagery (84%), tech motifs (81%). This design uses graffiti aesthetic, horizontal-scroll layout, burnt-orange palette, generative-art imagery, and scholarly-intellectual tone.