# Design Language for haroo.day ## Aesthetics and Tone A dawn-to-dusk ambient journal -- "haroo" (하루, one day / also 春, spring) becomes a chromatic passage through a single day's light. The page itself represents time: scrolling from top to bottom moves from dawn through noon to dusk to night, with the background color continuously shifting to match. The aesthetic is atmospheric-gradient: smooth color transitions, soft typography, and generous spacing create a meditative digital sundial. No hard edges, no harsh contrasts -- everything flows like the light of a long spring day. The tone is lyrical-contemplative -- poetic fragments about daily moments, written with the gentle rhythm of a haiku collection. ## Layout Motifs and Structure The layout uses a **timeline-center** architecture -- content is arranged along a central vertical axis with generous vertical spacing, creating a scroll that mirrors the passage of hours. **Timeline System:** - Single centered column, 640px max-width - Vertical spacing of 100px-160px between sections - A thin central line (1px, semi-transparent) runs the page height, with content centered on it - Time markers (06:00, 09:00, 12:00, 15:00, 18:00, 21:00) appear as small labels along the line **Section Flow:** 1. **Dawn (Hero):** Background: linear-gradient from #ffecd2 to #fcb69f. Title "haroo.day" in thin serif, centered. A CSS circle (60px, radial-gradient gold-to-orange) represents the rising sun, positioned low. 2. **Morning:** Background shifts to #c2e9fb (soft sky blue). Content cards about morning rituals with gentle left-to-right text reveal on scroll. 3. **Noon:** Background warms to #fff8e1 (bright cream). Content is at its fullest and widest section. 4. **Afternoon:** Background deepens to #ffe0b2 (amber). Quieter content, more whitespace. 5. **Evening:** Background transitions to #ce93d8 (twilight purple) then #37474f (deep gray-blue). 6. **Night (Closing):** Background reaches #0d1b2a (deep night). A moon CSS circle (50px, silver gradient) mirrors the opening sun. "또 하루" (another day) fades in. ## Typography and Palette **Typography:** - **Display:** "DM Serif Display" (Google Fonts) -- elegant with gentle stroke variation evoking handwritten warmth. Used at 2.5rem-4rem, weight 400, line-height 1.2. - **Body:** "Karla" (Google Fonts) -- humanist sans with friendly proportions. Used at 1rem, weight 400, line-height 1.85. - **Korean:** "Noto Serif KR" (Google Fonts) -- warm Korean serif for poetic passages. Used at 1.2rem-2rem, weight 400. - **Time Labels:** "Space Mono" (Google Fonts) at 0.7rem, weight 400, for hour markers along the timeline. **Palette (progressive through scroll):** - Dawn: #ffecd2 to #fcb69f (peach to soft salmon) - Morning: #c2e9fb to #a1c4fd (sky blue) - Noon: #fff8e1 to #ffeaa7 (warm cream to light gold) - Afternoon: #ffe0b2 to #ffcc80 (amber) - Evening: #ce93d8 to #7b1fa2 (twilight purple) - Night: #37474f to #0d1b2a (deep blue-gray to near-black) - Text: adapts from #2c2c2c (on light) to #e8e4e0 (on dark) - Timeline Line: #b0a090 at 30% opacity (warm neutral visible across all backgrounds) ## Imagery and Motifs **Scroll-Driven Color Shift:** The primary visual experience is the continuous background color transition as the user scrolls. Each section has its own background gradient, and the transitions between them are seamless, creating the sensation of daylight progressing. **Sun/Moon CSS Circles:** A radial-gradient circle represents the sun at dawn (warm gold #ffd700 to #fcb69f, 60px) and the moon at night (silver #e8e8e8 to #bdbdbd, 50px). Both are pure CSS, positioned to bookend the experience. **Central Timeline:** A 1px vertical line runs the page length, with small 8px circular markers at each time-of-day section. The line color matches the current section's text color. **Gentle Content Transitions:** Content blocks fade in (opacity 0 to 1, translateY 16px to 0, 500ms ease-out) as they enter the viewport. No abrupt appearances. **Floating Time Labels:** Hour markers (06:00, 12:00, etc.) in Space Mono appear in the margin, creating a clock-like progression down the page. ## Prompts for Implementation Build the page as a single day unfolding through scroll. The color transition is the core experience -- use CSS custom properties driven by a lightweight scroll-position calculation to interpolate between the six time-of-day color stops. The dawn section opens with warm peach, and the user's scroll physically moves time forward. Content is sparse and poetic -- short text blocks, generous whitespace, no dense paragraphs. The sun circle at dawn and moon circle at night are bookend motifs. Text color must smoothly adapt: dark text on light backgrounds, light text on dark backgrounds, transitioning through the evening section. The experience should feel like watching a time-lapse of a beautiful spring day -- peaceful, continuous, inevitable. AVOID: dark mode toggles, harsh contrasts, tech aesthetics, grid layouts, card systems, aggressive CTAs, complex animations. ## Uniqueness Notes 1. **Scroll-driven diurnal color narrative:** The dawn-to-night background transition tied to scroll position creates a unique temporal experience. 2. **Central timeline with floating hour markers:** The vertical timeline with clock-style labels creates a literal mapping of scroll distance to time passage. 3. **Sun-to-moon CSS bookends:** Opening with a sun circle and closing with a moon circle provides poetic structural symmetry. 4. **Adaptive text color across time-of-day:** Text smoothly shifting from dark to light as backgrounds change demonstrates technical sophistication in service of atmosphere. Document chosen seed/style: aesthetic: atmospheric-gradient, layout: timeline-center, typography: warm-serif, palette: dawn-to-dusk, patterns: scroll-color, imagery: celestial-circles, motifs: time-passage, tone: lyrical-contemplative Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)