# Design Language for haroo.day ## Aesthetics and Tone haroo.day channels the quiet enchantment of a single day inside a Victorian glasshouse -- morning dew still clinging to pressed fern specimens, afternoon light filtering through beveled panes onto hand-painted herbarium sheets, and the golden-hour glow that turns every petal translucent. The aesthetic is **botanical almanac**: the meticulous observational beauty of 18th-century naturalist field journals colliding with the fluid, living motion of an actual garden in bloom. This is not the sanitized "plant mom" aesthetic of lifestyle Instagram; it is the deeper, stranger beauty of Ernst Haeckel's *Kunstformen der Natur* -- organisms rendered with scientific precision that nonetheless feel hallucinatory in their symmetry and intricacy. The tone is **whimsical-creative** -- not childish whimsy, but the whimsy of discovering that a common dandelion has 172 individual florets, each a perfect five-petaled trumpet. There is wonder here, but it is the wonder of close attention. The site feels like turning the pages of a hand-bound botanical journal where every annotation is written in iron-gall ink that has aged to a warm sepia, where tissue-paper overlays protect watercolor plates, and where the margins are alive with tiny sketches of root systems and seed pods. Every interaction should feel like the careful act of turning a delicate page -- deliberate, reverent, slightly breathless. The Korean word "하루" (haroo) means "one day," and the site's narrative follows the arc of a single day in a garden: dawn (cool blues and dewy greens), morning (warm yellows and budding pinks), afternoon (deep saturated greens and confident purples), twilight (dusky lavenders and amber), and night (deep indigo with bioluminescent accents). This temporal progression structures the entire scroll experience. ## Layout Motifs and Structure The layout follows a **modular-blocks** system inspired by the arrangement of specimens on a herbarium sheet -- discrete, carefully positioned rectangular and square modules that float on the page with deliberate asymmetry, each one a self-contained vignette. Unlike rigid grid systems, these blocks have the organic placement of pressed flowers arranged by an attentive botanist: no two pages look identical, but there is an underlying order that the eye intuits rather than consciously parses. **Module Architecture:** - **Block Type A (Specimen Card):** 280px - 420px wide, variable height. Contains a single botanical illustration element (SVG or CSS-rendered plant form) with a caption set in small variable-weight text beneath. These cards have a 1px border in a muted sage (#8B9E7C) that thickens subtly to 2px on hover-lift. Interior padding is 24px. Background is a warm parchment tone (#FAF6EE) with a barely-visible paper grain texture applied via CSS `background-image` using a repeating SVG noise pattern. - **Block Type B (Field Note):** Full-width text block, max-width 680px. Contains paragraph text styled as handwritten field observations. Left margin features a thin vertical rule in faded rose (#D4A0A0) evoking the red margin line of a ruled notebook. These blocks sit with a leftward bias, offset 8-12% from center. - **Block Type C (Time Marker):** Full-viewport-width horizontal band, 120px tall, marking the transition between time-of-day sections (dawn, morning, afternoon, twilight, night). Contains the time label set in large variable-fluid typography that scales from 3rem to 7rem based on viewport. Background uses a CSS gradient that blends the palette of the preceding section into the next. - **Block Type D (Panorama):** Full-bleed illustration panel, 60-80vh tall. Displays a wide botanical scene -- a garden border, a meadow cross-section, or a root-system diagram -- that scrolls at a slightly different rate than surrounding blocks, creating a subtle depth parallax without relying on heavy JavaScript parallax libraries. Achieved via `background-attachment: fixed` on the panel background or a simple CSS `translate3d` offset tied to scroll position. **Spatial Rhythm:** Vertical spacing between modules alternates between 48px (tight, within a time-of-day section) and 120px (loose, between time-of-day sections). The loose gaps are not empty -- they contain faint, nearly-invisible SVG illustrations of connecting vines or root networks in a 4% opacity sage tone, suggesting that the modules are organically connected beneath the surface. The page has no traditional navigation bar. Instead, a small fixed cluster of five tiny circles in the top-right corner represents the five times of day, with the current section's circle filled and the others hollow. Clicking a circle scrolls smoothly to that section. The circles are arranged in a gentle arc, like seeds on a dandelion head. ## Typography and Palette **Typography:** - **Display / Section Headers:** "Fraunces" (Google Fonts) -- a soft-serif variable font with optical size, weight, and a distinctive "wonk" axis (WONK) that gives letterforms a slightly hand-drawn, calligraphic irregularity. Used at 3rem-7rem for time-of-day headings. The WONK axis is set to 1 for headers, creating gentle asymmetries in the bowls of letters like 'a', 'd', 'g' that echo organic botanical forms. Weight varies fluidly: `font-weight` set via `clamp(300, 20vw, 700)`. Color shifts with the time-of-day section. Line-height: 1.05. Letter-spacing: -0.015em. - **Body / Field Notes:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy that reads beautifully at text sizes while maintaining organic warmth. Used at 1.05rem-1.2rem for body text, weight 400 for regular text and 600 for emphasis. Line-height: 1.72 (generous, airy -- evoking the spaciousness of a garden). Color: #3A3226 (a warm dark brown, never pure black). Italic variant used for Latin botanical names, creating a natural hierarchy within field-note paragraphs. - **Captions / Labels:** "Karla" (Google Fonts) -- a clean, slightly geometric sans-serif with humanist proportions. Used at 0.75rem-0.85rem for specimen card captions, taxonomic labels, and navigation indicators. Weight 400-500. Letter-spacing: 0.06em (slightly tracked out for small sizes). Color: #7A7162 (warm gray-brown). All-caps for taxonomic classifications, sentence-case for descriptive captions. - **Variable-Fluid Implementation:** All type sizes use `clamp()` for fluid scaling: `font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.2rem)` for body, `font-size: clamp(3rem, 2rem + 3vw, 7rem)` for display. The Fraunces font's variable axes (weight, optical size, WONK) are animated subtly on hover-lift interactions -- when a specimen card lifts, the caption text's weight increases from 400 to 500 over 300ms, creating a satisfying micro-feedback. **Palette (Analogous -- Green-to-Purple arc):** The palette follows an analogous color scheme rooted in the green-blue-purple arc of the color wheel, shifting warmth across the five time-of-day sections: | Role | Hex | Usage | |------|-----|-------| | Parchment Base | #FAF6EE | Page background, card interiors | | Morning Sage | #8B9E7C | Borders, connecting vines, dawn/morning accents | | Leaf Green | #4A7C59 | Primary botanical elements, links, active states | | Deep Fern | #2D5A3D | Section headers (morning/afternoon), strong emphasis | | Twilight Lavender | #9B7FB8 | Twilight section accents, hover states | | Dusk Purple | #6B4E8B | Evening section headers, secondary emphasis | | Night Indigo | #2E2650 | Night section background, deep contrast | | Warm Brown Ink | #3A3226 | Body text color | | Faded Rose | #D4A0A0 | Decorative rules, margin lines, subtle accents | | Bioluminescent | #A8E6CF | Night-section glow accents, sparingly used | **Palette Logic:** The five time-of-day sections each emphasize a subset: Dawn leans toward #8B9E7C and #FAF6EE with hints of cool blue. Morning shifts to #4A7C59 and #FAF6EE. Afternoon deepens to #2D5A3D. Twilight introduces #9B7FB8 and #D4A0A0. Night resolves to #2E2650 with #A8E6CF bioluminescent pops. This creates a chromatic journey that the user experiences as they scroll -- a palette that literally changes with the day. ## Imagery and Motifs **Botanical Illustration as Primary Visual Language:** All imagery is in the style of **botanical-illustration** -- detailed, scientific, line-based renderings of plant anatomy. No photographs. No stock imagery. Every visual element is either a CSS-drawn botanical form, an inline SVG plant diagram, or a carefully crafted illustration rendered in the analogous palette. Specific elements include: 1. **Pressed Specimen SVGs:** Each specimen card features an SVG illustration of a specific plant, drawn with thin strokes (1-1.5px) in #2D5A3D on the #FAF6EE background. The stroke style mimics copperplate engraving: parallel hatching lines for shadow, stipple dots for texture on petals, and clean outline strokes for leaf edges. Plants are chosen to match the time-of-day narrative: morning glories for dawn, sunflowers for morning, ferns and hostas for afternoon shade, evening primroses for twilight, moonflowers (Ipomoea alba) for night. 2. **Root Network Connectors:** Between modular blocks, faint SVG illustrations of underground root systems spread horizontally, rendered at 4-6% opacity in #8B9E7C. These roots visually connect the specimen cards above, implying that the discrete modules are part of a single living system. On scroll, the root paths animate using `stroke-dasharray` and `stroke-dashoffset` to "grow" into view as the user progresses. 3. **Cross-Section Diagrams:** The panorama blocks (Block Type D) contain wide botanical cross-sections -- a meadow showing above-ground flowers connected to below-ground root systems, a tree trunk cross-section showing growth rings labeled with the time-of-day sections, or a flower bud in progressive stages of opening across the horizontal span. These are rendered as large SVGs with layered detail that rewards close inspection. 4. **Margin Doodles:** In the generous whitespace between blocks, tiny decorative elements appear: a curling tendril here, a single seed pod there, a small beetle crawling along a stem. These are pure CSS illustrations (built from `border-radius`, `box-shadow`, and pseudo-elements) or micro-SVGs. They appear at low opacity (15-25%) and gain full opacity when the user's scroll position brings them into the central viewport third. **Floral-Botanical Motifs:** The dominant motifs are **floral-botanical** -- recurring visual themes drawn from plant morphology: - **Phyllotaxis spirals:** The Fibonacci spiral pattern found in sunflower seed heads and pinecone scales. Used as a decorative background pattern in the morning section, rendered as a thin-line SVG spiral with dots at Fibonacci-interval intersections. - **Leaf venation patterns:** The branching vein networks of leaves, used as subtle background textures in field-note blocks. CSS-only, created via layered `linear-gradient` and `radial-gradient` at very low opacity. - **Seed dispersal arcs:** Parabolic curves representing the flight paths of wind-dispersed seeds (dandelion, maple samara). Used as transition paths for animated elements moving between sections. - **Growth rings:** Concentric circles with irregular spacing, used in the time-marker bands to suggest the passage of time within the day's cycle. ## Prompts for Implementation **Full-Screen Botanical Almanac Experience:** The site must feel like a living, breathing herbarium -- a single continuous scroll through the hours of a day, experienced through the lens of a botanist's field journal. There is no traditional homepage, no navigation menu, no footer links. The user enters at dawn and scrolls through to night. Each time-of-day section is a self-contained chapter, 150-300vh tall, filled with modular specimen cards, field notes, panoramic illustrations, and time-marker transitions. **Hover-Lift Interactions (Primary Pattern):** The core interaction pattern is **hover-lift** -- every interactive element (specimen cards, field note blocks, navigation circles) responds to hover with a gentle upward lift that mimics picking up a pressed specimen from a table: - On hover: `transform: translateY(-6px); box-shadow: 0 8px 24px rgba(45, 90, 61, 0.12);` - Transition: `all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)` -- a spring-like easing with slight overshoot that feels organic, like a leaf caught on a breeze. - The card border transitions from 1px #8B9E7C to 2px #4A7C59. - Caption text weight shifts from 400 to 500 (using Fraunces variable font axes). - On mouse-leave: the card settles back with a slightly slower ease (`0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)`) -- gravity pulling it back down. **Color Transition on Scroll:** As the user scrolls from dawn to night, the page background, text color, and accent colors transition smoothly. This is NOT achieved by having hard-cut sections with different backgrounds. Instead, CSS custom properties (`--bg-color`, `--text-color`, `--accent-primary`, `--accent-secondary`) are updated via a lightweight JavaScript scroll listener that interpolates between the five time-of-day palettes based on scroll position. The transitions happen in HSL space for natural chromatic flow: - Dawn: `--bg-color: #FAF6EE; --accent-primary: #8B9E7C;` - Morning: `--bg-color: #FAF6EE; --accent-primary: #4A7C59;` - Afternoon: `--bg-color: #F5F2EA; --accent-primary: #2D5A3D;` - Twilight: `--bg-color: #F0EBE3; --accent-primary: #9B7FB8;` - Night: `--bg-color: #2E2650; --accent-primary: #A8E6CF; --text-color: #E8E3D8;` **Root Growth Animation:** The SVG root networks between modules animate using `stroke-dasharray` and `stroke-dashoffset`. Each root path has a total length calculated on load. As the user scrolls, a `requestAnimationFrame` loop updates `stroke-dashoffset` proportionally, causing roots to "grow" from left to right (or from module to module) as they enter the viewport. The growth rate is leisurely -- roots take about 60% of their viewport passage to fully reveal, creating the impression of slow, steady organic growth. **Specimen Card Entrance:** Cards do not pop in or fade in abruptly. Instead, they use a combination of opacity (0 to 1) and a slight upward drift (`translateY(20px)` to `translateY(0)`) with staggered timing. Within a cluster of 3-4 specimen cards, each subsequent card begins its entrance 120ms after the previous one, creating a gentle cascade like petals falling. Easing: `cubic-bezier(0.22, 1, 0.36, 1)` for a smooth deceleration. **Night Section Bioluminescence:** In the night section, the background transitions to #2E2650 and the bioluminescent accent #A8E6CF appears. Small SVG dots (2-4px diameter) scattered across the night section glow softly using a `@keyframes` animation that oscillates opacity between 0.3 and 1.0 over 3-5 second periods (randomized per dot). This creates the effect of fireflies or bioluminescent fungi in a nighttime garden. The glow uses `filter: blur(1px)` and `box-shadow: 0 0 6px #A8E6CF` for a soft luminous quality. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero banners with stock photography, hamburger menus, sticky headers, footer link columns. This is a narrative, not a landing page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Temporal Palette Progression:** No other design in the portfolio uses a time-of-day narrative structure that drives a continuous, scroll-linked chromatic shift across the entire page. The palette is not static -- it is a journey from dawn sage to night indigo, experienced in real-time as the user scrolls. This creates an emotional arc (freshness to mystery) that is unique and deeply tied to the domain's meaning ("하루" = "one day"). 2. **Botanical Illustration as Sole Imagery Mode:** While botanical-illustration appears at only 3% frequency in the portfolio, haroo.day commits to it absolutely. There are no photographs, no abstract shapes, no icon sets. Every visual is a hand-rendered botanical form -- SVG line drawings, CSS-constructed plant elements, copperplate-engraving-style hatching. This singular commitment to one illustration style creates a cohesive visual world that no other design attempts. 3. **Living Root Network Connectors:** The underground root SVG illustrations that connect modular blocks are a motif found nowhere else. They transform the modular-blocks layout (8% frequency) from a collection of discrete cards into a living organism -- the modules are flowers, the roots are the hidden connections between them. The scroll-driven growth animation reinforces this metaphor of organic interconnection. 4. **Variable Font Micro-Feedback:** The use of Fraunces's variable axes (WONK, weight, optical size) as part of hover-lift interactions is technically distinctive. Font properties animate in response to user interaction, creating a subtle but perceptible aliveness in the typography that mirrors the botanical theme -- letters that "bloom" slightly when attended to. 5. **Analogous Palette in Green-Purple Arc:** The analogous palette (4% frequency) is specifically tuned to the green-blue-purple segment of the color wheel, which maps directly to botanical reality (chlorophyll greens, lavender flowers, twilight skies). This is not an arbitrary analogous scheme but one rooted in the observed chromaticity of a garden at different hours. **Documented Seed/Style:** ``` aesthetic: botanical, layout: modular-blocks, typography: variable-fluid, palette: analogous, patterns: hover-lift, imagery: botanical-illustration, motifs: floral-botanical, tone: whimsical-creative ``` **Avoided Patterns (from frequency analysis):** - Avoided `playful` aesthetic (97%) -- chose `botanical` (20%) instead - Avoided `centered` layout (99%) -- chose `modular-blocks` (8%) instead - Avoided `mono` typography (99%) -- chose `variable-fluid` (5%) instead - Avoided `warm` palette (100%) -- chose `analogous` (4%) instead - Avoided `scroll-triggered` patterns (96%) as primary -- chose `hover-lift` (4%) as primary - Avoided `minimal` imagery (95%) -- chose `botanical-illustration` (3%) instead - Avoided `vintage` motifs (80%) -- chose `floral-botanical` (2%) instead - Avoided `friendly` tone (97%) -- chose `whimsical-creative` (5%) instead