# Design Language for kkaji.com ## Aesthetics and Tone kkaji.com (까지 — Korean particle meaning "until/up to") channels a botanical aesthetic — lush organic forms, natural growth patterns, and the patient beauty of plants reaching toward light. The site uses the "까지" concept as a metaphor for journey and destination, where growth from seed to bloom mirrors the process of reaching one's goals. Inspiration draws from Victorian-era botanical illustrations, Korean medicinal herb gardens (약초원), and the contemplative quality of watching plants grow in time-lapse. The tone is pastoral-romantic — gentle, nurturing, and deeply connected to natural rhythms. The masonry layout mimics the organic arrangement of plants in a garden bed, where elements find their natural positions rather than being forced into rigid rows. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content blocks of varying heights stack vertically in columns, filling space naturally like plants growing in a garden bed. **Masonry Architecture:** - 3-column masonry grid at max-width 1200px, implemented with CSS columns or CSS Grid with masonry behavior - Column gap: 24px, creating garden-path spaces between content columns - Items vary in height from 200px to 500px based on content - Each item has soft rounded corners (12px) and a subtle border in palette colors **Section Flow:** 1. **Garden Gate:** Hero with large botanical illustration and site title in handwritten style 2. **Seed Bed:** Masonry grid begins with introductory concept cards 3. **Growth Path:** Dense masonry section with feature/content cards of varying heights 4. **Bloom:** Featured content in larger cards that break the normal masonry rhythm 5. **Root System:** Footer with interconnected link network styled as root diagrams ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — elegant serif with botanical-illustration companion quality at 2rem-3.5rem, weight 600. - **Body Text:** "Source Sans 3" (Google Fonts) — clean humanist sans at 1rem, weight 400, line height 1.75. - **Korean:** "Nanum Myeongjo" (Google Fonts) — Korean serif with natural elegance at matching sizes. - **Botanical Labels:** "Playfair Display" italic at 0.85rem for plant-name-style labels and annotations. **Color Palette:** - **Warm Earth:** #8b6f47 — rich soil brown for accents and card borders - **Leaf Deep:** #3a5a3a — dark forest green for primary text on light backgrounds - **Sage Light:** #a8c4a0 — soft sage green for card backgrounds and highlights - **Petal Cream:** #faf5ea — warm cream primary background - **Bark Brown:** #5a4030 — dark brown for secondary text - **Blossom Pink:** #e0b0b0 — soft pink for accent highlights and hover states - **Root Tan:** #d4c4a8 — warm tan for secondary card backgrounds - **Stem Green:** #6a9a5a — medium green for links and interactive elements ## Imagery and Motifs **Organic Blob Background Elements:** Soft, irregularly-shaped organic forms (CSS border-radius with varying values: 40% 60% 55% 45% / 50% 45% 55% 50%) in Sage Light at 0.1 opacity float behind the masonry grid, representing abstract leaf and petal shapes. **Mountain Landscape Dividers:** Between major sections, subtle mountain silhouette shapes (SVG paths) in muted green suggest the Korean mountain landscape where herbs grow. **Counter-Animate Growth Metrics:** Numbers representing growth metrics (percentage progress, distance covered, goals reached) count upward when scrolled into view, mimicking the measured progress of plant growth. **Botanical Border Illustrations:** Card borders occasionally feature a simple botanical line drawing (SVG) at one corner — a small leaf, stem, or root tendril that extends slightly beyond the card boundary. **Pastoral Color Shifts:** As the user scrolls down, the background gradually shifts from Petal Cream (morning light) to a slightly warmer tone (afternoon) to a cooler sage-tinted white (evening), suggesting the passage of a day in the garden. ## Prompts for Implementation Build the page as a botanical garden masonry layout. Use CSS columns: 3 with column-gap: 24px for the masonry effect. Each card uses break-inside: avoid to prevent splitting across columns. Cards have background colors alternating through the palette. The organic blob backgrounds: create 4-5 absolutely positioned divs (200-400px) with irregular border-radius values, palette colors at 0.08 opacity, positioned behind the masonry grid. Animate slowly (40s loops) with subtle scale and position shifts. Counter-animate: use Intersection Observer to trigger. On entry, count from 0 to target using requestAnimationFrame with easing (deceleration curve). Format as "까지 X%" or similar Korean-labeled metrics. Mountain silhouette dividers: SVG viewBox spanning full width, path data creating a mountain ridge line, filled with Leaf Deep at 0.08 opacity. Height: 60-80px. Background color shift: use CSS custom properties updated on scroll via JavaScript. Interpolate between three background color stops based on scroll progress. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the botanical garden atmosphere and organic masonry create a nurturing, growth-focused exploration. ## Uniqueness Notes 1. **Botanical garden as masonry layout metaphor:** The organic arrangement of cards mirrors natural plant growth patterns in a garden bed. 2. **Korean "까지" (until) as growth journey concept:** Using a grammatical particle as a thematic foundation creates a uniquely Korean conceptual design. 3. **Mountain landscape section dividers:** Korean mountain silhouettes as structural elements add geographic and cultural specificity. 4. **Counter-animate as growth metrics:** Numbers counting upward embody the "growing toward" concept of 까지. 5. **Diurnal background color shift:** The page changing color temperature with scroll mimics a day passing in the garden. **Seed/Style:** aesthetic: botanical, layout: masonry, typography: sans-grotesk, palette: warm-earthy, patterns: counter-animate, imagery: organic-blobs, motifs: mountain-landscape, tone: pastoral-romantic **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), friendly tone (76%), minimal imagery (84%), tech motifs (80%). This design uses botanical aesthetic, masonry layout, warm-earthy palette, organic-blobs imagery, and pastoral-romantic tone.