# Design Language for hwaklyul.com ## Aesthetics and Tone hwaklyul.com (확률, "probability" in Korean) lives in the visual world of an 18th-century botanical atlas that has been left open on a mahogany desk in a sun-flooded conservatory -- the kind of place where pressed flowers slip from between vellum pages, where handwritten probability calculations are scribbled in the margins of Linnaean taxonomy charts, and where the afternoon light renders every petal vein into a study of branching mathematics. The aesthetic is **botanical-probabilistic**: the meticulous observational beauty of natural history illustration fused with the conceptual elegance of stochastic theory. Every leaf is a branching diagram, every flower is a probability distribution in bloom. The mood is approachable and casually intellectual -- like a conversation with a brilliant amateur botanist who also happens to understand Bayesian statistics. There is no pretension here, no clinical detachment. The tone is warm, inviting, slightly playful -- the warmth of terracotta pots, the casual elegance of handwritten field notes, the quiet delight of discovering a pattern in nature that mirrors a mathematical truth. The site should feel like an invitation to sit down, pour tea from a ceramic pot, and discuss the fractal geometry of ferns. The primary inspiration comes from three sources: (1) the hand-colored copper engravings of Maria Sibylla Merian's "Metamorphosis Insectorum Surinamensium" (1705), with their astonishing botanical precision and living compositions; (2) the visual language of Korean traditional botanical painting (화조화, hwajohwa), with its emphasis on ink brushwork, deliberate negative space, and the suggestion of movement in stillness; (3) the elegant hand-drawn diagrams of early probability theory manuscripts -- Bernoulli's "Ars Conjectandi," Laplace's "Theorie Analytique" -- where mathematical beauty was rendered in calligraphic precision rather than LaTeX sterility. ## Layout Motifs and Structure The layout follows a **hero-dominant** architecture where each major section opens with a full-viewport botanical tableau -- a single, commanding visual composition that fills the screen edge to edge, establishing the section's thematic identity before yielding to supporting content. Unlike standard hero-section-then-content patterns, here the hero IS the content: the botanical illustrations themselves contain embedded information, hidden annotations, and interactive discovery zones. **Structural Framework:** - **Hero Canopy (Section Openers):** Each section begins with a full-viewport botanical illustration that bleeds to all four edges. The illustration is not decorative -- it is the primary content vessel. Text is woven into the illustration itself: titles follow the curve of stems, descriptions nestle in the negative space between leaves, data points are represented as flower buds along branches. The hero acts as a canopy that the user passes through, like walking beneath a greenhouse ceiling. - **Understory Panels:** Below each hero canopy, supporting content is arranged in a loose, organic grid system based on the golden ratio (1:1.618). Panels are not rigid rectangles but subtly rounded containers with soft cream backgrounds (#FDF6EC) that feel like pressed paper specimens. Each panel has a 2-4px border in muted sage (#9CAF88) and contains a single thought: a paragraph, a data visualization, a botanical detail. Panels are spaced with generous negative space (clamp(2rem, 5vw, 4rem)) to let each element breathe like specimens in a herbarium. - **Root Network Navigation:** There is no conventional navbar. Navigation is handled through a persistent root-system motif at the bottom of the viewport -- thin branching lines in terracotta (#C67B4B) that extend upward when hovered, revealing section labels in handwritten typography. The root system shifts and grows as the user scrolls deeper into the site, visually representing their journey through the content tree. On mobile, this collapses into a simple seed icon (a small circle with a sprout) that opens a radial menu of botanical-themed section icons. - **Margin Annotations:** Following the tradition of botanical atlas marginalia, secondary content (footnotes, asides, definitions) appears in the left or right margin on desktop viewports. These annotations are set in smaller type, slightly rotated (1-2 degrees), with a thin connecting line to the relevant main content -- mimicking a researcher's handwritten notes in the margin of a field guide. On narrow viewports, these fold inline as expandable accordion elements styled as pressed-flower bookmarks. - **Vertical Rhythm:** The vertical rhythm is governed by a 12px baseline grid, with section spacing set to multiples of the golden ratio. Hero canopies are exactly 100vh. Understory panels sit within a max-width of 1200px, but the overall page wrapper extends to full width to allow hero bleeds. Content alignment follows a gentle sinusoidal wave -- not rigidly centered but drifting left and right by 2-5% as the user scrolls, creating an organic, living feel to the page flow. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- the bold condensed uppercase face that anchors the design with architectural solidity. Used at 4rem-7rem for section hero titles. Despite its modernist origins, Bebas Neue paired with botanical imagery creates a compelling tension between industrial precision and organic form -- like seeing a steel-and-glass conservatory framing wild orchids. All headlines are rendered in uppercase with `letter-spacing: 0.08em` and `line-height: 0.92` for dramatic vertical compression. Text color alternates between deep earth brown (#3B2314) on light backgrounds and warm cream (#FDF6EC) on dark botanical heroes, always with a subtle `text-shadow: 1px 1px 0 rgba(59,35,20,0.1)` for a slight letterpress deboss effect. - **Body / Prose:** "Lora" (Google Fonts) -- an elegant, well-optimized serif with calligraphic roots that harmonizes with botanical illustration. Weight 400 for body text, 600 for emphasis. Set at clamp(1rem, 1.1vw, 1.15rem) with `line-height: 1.72` and `letter-spacing: 0.01em`. The generous line height creates breathing room between lines that mirrors the spacing between pressed specimens. Color: #4A3728 (warm umber) for maximum readability on cream backgrounds without the harshness of pure black. - **Annotations / Marginalia:** "Caveat" (Google Fonts) -- a handwritten face with natural variation that feels like actual field-notebook jottings. Used at 0.85rem-1rem for margin annotations, figure captions, interactive labels, and navigational hints. Weight 400-700. Always rendered in the terracotta accent color (#C67B4B) or sage (#6B8F5E) to distinguish from body prose. Slightly rotated via `transform: rotate(-1deg)` when used in margin positions. - **Data / Monospace:** "IBM Plex Mono" (Google Fonts) -- for any numerical data, probability expressions, or code-like content. Weight 400 at 0.9rem. Color: #5C7A5A (forest ink). Used sparingly, only when mathematical precision is needed, creating a deliberate contrast between the organic botanical world and the structured world of probability. **Palette:** The palette is drawn directly from a sun-warmed botanical watercolor -- the colors that appear when you press a dahlia between pages of a cream-paper journal and leave it for a season. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Vellum Cream | #FDF6EC | Main page background, panel interiors | | Background Secondary | Pressed Linen | #F5ECD7 | Alternate section backgrounds, card fills | | Text Primary | Warm Umber | #4A3728 | Body text, primary headings on light | | Text Secondary | Root Brown | #3B2314 | Display headlines, deep emphasis | | Accent Primary | Terracotta Stem | #C67B4B | Links, navigation roots, interactive elements | | Accent Secondary | Living Sage | #6B8F5E | Botanical accents, success states, annotations | | Accent Tertiary | Dried Rose | #C4727F | Hover states, floral highlights, alerts | | Accent Quaternary | Pollen Gold | #D4A843 | Highlights, active states, featured elements | | Deep Ground | Loam Dark | #2A1A0E | Dark hero backgrounds, footer, deep sections | | Botanical Mist | Sage Wash | #9CAF88 | Borders, dividers, subtle UI chrome | **Gradient:** A signature gradient runs through decorative elements: `linear-gradient(135deg, #C67B4B 0%, #D4A843 40%, #6B8F5E 70%, #9CAF88 100%)` -- a terracotta-to-sage progression that evokes the color shift from stem to leaf. Used on decorative rule lines, progress indicators, and the root-system navigation. ## Imagery and Motifs **Botanical Illustration as Primary Visual Language:** All imagery follows the tradition of scientific botanical illustration -- precise, detailed renderings of plant forms executed in a style that sits between the copper-engraving precision of 18th-century European atlases and the ink-wash fluidity of Korean hwajohwa painting. These are not photographs or generic stock florals. Each illustration is a composed specimen plate: a central plant form (dahlia, peony, chrysanthemum, fern, ginkgo) rendered with anatomical precision, surrounded by detail callouts (cross-sections, seed diagrams, root networks) that double as data visualizations. **Specific Illustration Motifs:** 1. **Branching Probability Trees:** The central recurring motif is a botanical branching structure where each fork represents a probabilistic decision point. Stems divide into branches at angles derived from the golden ratio. At each terminal point, a flower bud, leaf, or seed pod represents an outcome. The size and color intensity of each terminal element encodes probability weight -- larger, more vivid blooms for higher-probability outcomes, smaller, paler buds for unlikely ones. These are rendered as large SVG compositions with CSS custom properties controlling the probability values. 2. **Pressed Flower Specimens:** Content cards and panels are styled to evoke pressed herbarium specimens. Each card has a slightly yellowed background (#F5ECD7), a thin sage border, and a small identification label in Caveat handwriting at the bottom corner. When hovered, the "pressed" specimen subtly lifts -- a 2px upward translation with a soft shadow appearing beneath, as if the flower is slowly unflattening from the page. 3. **Root Network Diagrams:** Below-the-fold navigation and site architecture are represented as root systems. Thin branching lines (#C67B4B at 60% opacity) extend downward from content sections, connecting related pages and concepts. These lines are rendered as animated SVG paths that grow organically when scrolled into view, using CSS `stroke-dasharray` and `stroke-dashoffset` animations. 4. **Seed Scatter Patterns:** Decorative background patterns use scattered seed and spore shapes -- small circles, teardrops, and spirals in #9CAF88 at 8-12% opacity. These are generated via CSS `radial-gradient` patterns or SVG pattern tiles and provide subtle texture to otherwise plain backgrounds, evoking the scattered seeds on a botanist's work surface. 5. **Vein Maps:** Section dividers are not horizontal rules but abstracted leaf-vein patterns -- a central midrib line with alternating lateral veins branching at 30-45 degree angles. These are implemented as inline SVGs with the stem-to-sage gradient applied as stroke color. 6. **Pollen Dust Particles:** A subtle ambient particle effect using tiny circles (#D4A843 at 15-30% opacity) that drift slowly across hero sections, simulating airborne pollen in a sunlit conservatory. Implemented with CSS `@keyframes` animation on absolutely positioned pseudo-elements -- no JavaScript particle libraries needed. Maximum 15-20 particles per hero to maintain performance. **Korean Botanical Heritage:** To honor the "hwaklyul" (확률) name, select illustrations incorporate elements of Korean traditional painting: ink-wash gradient techniques (먹의 번짐) applied to leaf shading, the characteristic empty-space-as-meaning composition (여백의 미) of sagunja (사군자, the four noble plants -- plum blossom, orchid, chrysanthemum, bamboo), and the calligraphic quality of brush-drawn stems where pressure variation creates thick-to-thin line weight transitions. ## Prompts for Implementation **Full-Screen Botanical Narrative Experience:** The site opens to a full-viewport hero canopy: a dark loam background (#2A1A0E) with a single, large botanical illustration -- a dahlia in full bloom, rendered in the warm palette -- emerging from the center of the screen. The domain name "hwaklyul.com" appears in Bebas Neue at 5rem, cream colored (#FDF6EC), positioned at the upper third. Below it, a subtitle in Caveat at 1.2rem reads something contextual and inviting. The dahlia illustration has subtle parallax depth: the outer petals shift slightly on scroll (translateY at 0.3x scroll rate) while the inner petals remain fixed, creating a gentle breathing motion that makes the flower feel alive. **Parallax Botanical Layers:** The primary animation pattern is parallax layering of botanical elements. Each hero section contains 3-5 layered SVG botanical components at different depths: - **Layer 0 (Deepest):** Background texture -- seed scatter pattern, moves at 0.1x scroll rate - **Layer 1:** Large structural elements -- stems, trunks, major branches, moves at 0.3x scroll rate - **Layer 2:** Medium elements -- leaves, secondary branches, moves at 0.5x scroll rate - **Layer 3:** Foreground elements -- flowers, buds, seed pods, moves at 0.7x scroll rate - **Layer 4 (Nearest):** Pollen particles and floating spores, moves at 0.9x scroll rate This creates the sensation of moving through a three-dimensional botanical garden as you scroll. Each layer is a separate absolutely positioned container with `will-change: transform` and parallax translation driven by a lightweight `IntersectionObserver` + `requestAnimationFrame` scroll handler. No heavy parallax libraries. **Scroll-Driven Growth Animations:** As sections enter the viewport, botanical elements "grow" into view: - Stems extend upward using CSS `clip-path` animation from `inset(100% 0 0 0)` to `inset(0)` - Leaves unfurl using `transform: rotateY(90deg) scale(0.5)` to `rotateY(0) scale(1)` with a spring easing (`cubic-bezier(0.34, 1.56, 0.64, 1)`) - Flowers bloom using a radial `clip-path` animation from `circle(0%)` to `circle(100%)` - Root networks draw themselves using SVG `stroke-dashoffset` animation timed to 1.5-2.5 seconds - All growth animations trigger only once, when the element first enters the viewport at a 20% intersection threshold **Root Navigation System:** The bottom navigation root system is implemented as a fixed SVG element at `bottom: 0; left: 0; right: 0; height: 80px`. The root lines are drawn with `stroke: #C67B4B; stroke-width: 1.5; fill: none`. On hover over a root branch, it thickens to `stroke-width: 3` and a label in Caveat fades in above the branch endpoint. The current section's root branch is permanently highlighted with a small flower bud (#C4727F) at its terminus. The root SVG is procedurally generated based on the number of sections, with branch angles randomized within a 20-40 degree range to avoid mechanical regularity. **Pressed Specimen Card Interactions:** Content cards use this transition sequence on hover: 1. Card lifts: `transform: translateY(-3px)`; `box-shadow: 0 4px 12px rgba(42,26,14,0.12)` 2. Pressed flower "breathes": a subtle scale from `1.0` to `1.02` on the illustration within 3. Identification label slides into view from below the card's bottom edge 4. Border color shifts from sage (#9CAF88) to terracotta (#C67B4B) - All transitions use `transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)` **Margin Annotation Behavior:** On desktop (min-width: 1024px), margin annotations are positioned absolutely in the 200px margin space. They connect to their reference text via a thin dotted line (`border-left: 1px dotted #9CAF88`). When the referenced text scrolls to center viewport, the annotation gently pulses -- a single `opacity: 0.6` to `opacity: 1` transition over 0.6s -- drawing the eye to the marginal commentary. **Ambient Details:** - Page background has a subtle paper texture applied via `background-image: url()` using a CSS noise pattern (a tiny 200x200 semi-transparent PNG tile) at 3% opacity - All images of botanical illustrations have a very subtle vignette: `box-shadow: inset 0 0 80px rgba(42,26,14,0.15)` simulating the darkened edges of aged atlas pages - Scrollbar is custom styled: 6px wide, #C67B4B thumb on #F5ECD7 track, with `border-radius: 3px` - Selection color: `::selection { background: #D4A843; color: #2A1A0E; }` -- pollen gold highlight **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Generic stock photography -- every visual must feel hand-illustrated - Flat, lifeless color blocks -- always layer texture, gradient, or botanical pattern - Abrupt section transitions -- every section flows into the next through botanical connecting elements (a branch that extends from one section becomes the stem of the next) ## Uniqueness Notes **Differentiators from other designs:** 1. **Botanical-Probabilistic Fusion:** No other design in the portfolio merges scientific botanical illustration with mathematical/probabilistic concepts. The branching probability trees -- where botanical form literally encodes data relationships -- create a visual language entirely absent from the existing collection. This is not decoration with flowers; it is information architecture expressed through botanical morphology. 2. **Hero-Dominant Botanical Atlas Format:** At only 5% frequency, hero-dominant layouts are severely underrepresented. This design pushes the pattern further by making each hero not a static image-with-text-overlay but a fully composed, interactive botanical specimen plate where text, data, and illustration are integrated into a single coherent composition. The hero IS the content, not a gateway to it. 3. **Root-System Navigation Paradigm:** No other design uses a root-network metaphor for site navigation. The fixed-bottom branching root SVG that grows and highlights as users scroll creates a wayfinding mechanism that is simultaneously decorative, functional, and thematically coherent -- replacing the universal hamburger menu and horizontal nav bar with something genuinely novel. 4. **Korean-European Botanical Synthesis:** The deliberate fusion of European copper-engraving botanical atlas traditions (Maria Sibylla Merian, Pierre-Joseph Redoute) with Korean hwajohwa ink-wash painting creates a cross-cultural visual identity that is both specific and unique. The sagunja (four noble plants) motifs rendered in a European specimen-plate format, and vice versa, produce illustrations that belong to neither tradition exclusively. 5. **Margin Annotation System:** Drawing from the marginalia tradition of botanical field guides and probability manuscripts, the desktop margin annotation system provides a secondary content layer that no other design in the portfolio uses. This is not a sidebar; it is handwritten-style commentary that floats alongside the main narrative, creating a sense of active scholarship and living documentation. **Chosen Seed:** aesthetic: botanical, layout: hero-dominant, typography: bebas-bold, palette: warm, patterns: parallax, imagery: botanical-illustration, motifs: floral-botanical, tone: approachable-casual **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with botanical specificity - centered layout (99%) -- replaced with hero-dominant with organic drift - mono typography (99%) -- replaced with bebas-bold display paired with Lora serif - friendly tone (97%) -- replaced with approachable-casual, which is warmer and less generic - scroll-triggered patterns (96%) -- while parallax (assigned) is at 80%, the implementation avoids generic scroll-trigger-fade-in in favor of botanical-specific growth animations (stem extension, leaf unfurling, flower blooming) that are thematically integrated rather than applied generically - photography imagery (71%) -- replaced entirely with botanical-illustration, hand-rendered in SVG **Underused Patterns Embraced:** - hero-dominant layout (5%) - bebas-bold typography (2%) - botanical-illustration imagery (3%) - floral-botanical motifs (2%) - approachable-casual tone (3%)