# Design Language for hwagryul.com ## Aesthetics and Tone hwagryul.com (화그률 — Korean phonetics suggesting fiery ratios/proportions) adopts a watercolor aesthetic where every surface feels hand-painted and organically rendered. The site communicates through soft washes of pigment, visible brushstroke textures, and the beautiful unpredictability of wet media on paper. Inspiration comes from Korean minhwa folk painting traditions, contemporary watercolor illustration, and the meditative quality of ink wash painting (sumukhwa). The overall mood is futuristic-cutting-edge paradoxically achieved through ancient media — suggesting that true innovation comes from understanding traditional craft. The site feels like an interactive scroll painting unrolling before the viewer, where each section bleeds into the next through watercolor transitions rather than hard breaks. ## Layout Motifs and Structure The layout uses a **portfolio-grid** structure that showcases content in a curated gallery format, treating each content block as an artwork displayed in an exhibition. **Portfolio Grid Architecture:** - Main grid: CSS Grid with auto-fill, minmax(300px, 1fr) creating a responsive masonry-like arrangement - Grid items vary in height based on content, with some spanning 2 rows for emphasis - Items are arranged with 32px gaps filled with a faint paper texture background - The grid sits within a centered 1400px container with 48px side padding **Section Flow:** - Header: Slim watercolor banner (120px) with brushstroke-painted navigation text - Portfolio hero: Large featured item spanning full width with watercolor background wash - Main grid: 8-12 content items in the portfolio arrangement - About section: Single-column, centered text over a large watercolor wash background - Footer: Watercolor brushstroke border along the top edge, clean content below **Responsive Behavior:** Grid collapses from 3 columns to 2 to 1 as viewport narrows, maintaining the gallery feel at each breakpoint. ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — a handwritten typeface with natural pen-stroke character at 2rem-3.5rem, weight 700. Creates the impression of hand-lettered titles accompanying watercolor paintings. - **Body Text:** "Lora" (Google Fonts) — an elegant serif with brushstroke-influenced curves at 1rem, weight 400. Line height 1.75 for a relaxed, contemplative reading pace. - **Korean Text:** "Nanum Myeongjo" (Google Fonts) — a Korean serif typeface that complements the traditional painting aesthetic at matching sizes. - **Labels/Meta:** "Karla" (Google Fonts) — a clean sans-serif for dates, categories, and small UI text at 0.8rem, weight 400-500. **Color Palette:** - **Ink Black:** #2d2d2d — soft black with warm undertone for primary text (never pure #000) - **Rice Paper:** #faf6f0 — warm ivory background mimicking traditional Korean paper (hanji) - **Indigo Wash:** #4a5899 — deep blue-purple watercolor pigment for primary accents and links - **Pine Green:** #5a8a6a — muted forest green for secondary accents and botanical elements - **Persimmon:** #d4724a — warm orange-red reminiscent of Korean persimmons (gam) for highlights - **Plum Ink:** #8a4a7a — purple-mauve for tertiary accents and gradient endpoints - **Sky Wash:** #c5d4e8 — pale blue for light washes and section backgrounds - **Mist Gray:** #e5e0d8 — warm gray for borders, dividers, and subtle backgrounds ## Imagery and Motifs **Custom Watercolor Illustrations:** Every visual element carries watercolor treatment — gradient washes created using CSS radial-gradients with soft, irregular edges (achieved via border-radius: 40% 60% 55% 45% / 50% 45% 55% 50% on colored divs). Background sections feature large-scale watercolor blooms that look like pigment dropped into wet paper. **Cultural Motifs:** - Korean minhwa-inspired elements: stylized cloud forms (구름), pine branch silhouettes (소나무), and moon shapes rendered as simple SVG paths with watercolor fill effects - Traditional seal stamp (도장) motif used as a decorative signature element — a red rectangle with stylized characters **Brushstroke Borders:** - Content cards bordered by hand-painted brushstroke edges (SVG paths with irregular, painterly outlines) instead of straight lines - Section dividers are horizontal watercolor washes — gradient bands that fade from pigment to transparent **Paper Texture Overlay:** - A very subtle paper grain texture overlays the entire page (CSS background using a tiny noise pattern at 0.03 opacity), giving screens the feel of textured art paper **Cursor-Follow Paint Drips:** - As the mouse moves, a faint watercolor trail follows briefly (small colored circles that fade out over 500ms), creating the sensation of painting on the page ## Prompts for Implementation Build the page as a scrolling art gallery experience. The watercolor wash backgrounds should be created using large CSS radial-gradients with multiple color stops at irregular positions, applied to pseudo-elements that extend slightly beyond their parent containers (overflow visible) for organic bleeding edges. The portfolio grid items should enter with a cursor-follow-inspired reveal: as items scroll into view, they appear with a watercolor bloom animation — a circular mask expanding from center outward (clip-path: circle() transitioning from 0% to 100% over 800ms), revealing the content as if wet paint is spreading across paper. Implement the hand-painted brushstroke borders using inline SVGs with irregular path data. Each card's border should be slightly different (3-4 border path variants randomly assigned) to maintain the hand-crafted feel. The paper texture overlay should be a pseudo-element on the body with a base64-encoded tiny noise image tiled at low opacity. This sits above the background but below all content (z-index layering). For the cursor-follow effect: use JavaScript to track mouse position and spawn small div elements (8-12px, border-radius: 50%) at the cursor location with a random palette color, then fade them out with CSS transitions (opacity 0, transform scale 2) over 600ms before removing them from the DOM. Hover effects on grid items should shift the watercolor wash background position slightly, as if the paint is still wet and responding to touch. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the watercolor aesthetic and gallery-style presentation create an immersive artistic experience. ## Uniqueness Notes 1. **Watercolor as complete design system:** Rather than using watercolor as a decorative accent, every visual element — backgrounds, borders, dividers, animations — employs watercolor techniques, creating total aesthetic commitment. 2. **Korean minhwa folk art integration:** Incorporating traditional Korean painting motifs (stylized clouds, pine branches, seal stamps) creates deep cultural specificity rare in web design. 3. **Cursor-follow paint interaction:** The mouse-trail watercolor drip effect turns passive browsing into active "painting," creating a unique participatory experience. 4. **Irregular CSS-generated watercolor blooms:** Using CSS gradients and irregular border-radius to create watercolor effects without image assets demonstrates creative technical craft. 5. **Portfolio grid with bloom-reveal animation:** Content items revealing through expanding circular masks mimic the physical behavior of wet watercolor spreading on paper. **Seed/Style:** aesthetic: watercolor, layout: portfolio-grid, typography: handwritten, palette: monochrome, patterns: cursor-follow, imagery: custom-illustration, motifs: cultural, tone: futuristic-cutting-edge **Avoided Overused Patterns:** corporate aesthetic (74%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (75%), minimal imagery (84%). This design uses watercolor aesthetic, portfolio-grid layout, handwritten typography, cursor-follow patterns, and futuristic-cutting-edge tone.