# Design Language for haroo.day ## Aesthetics and Tone haroo.day is **the unfolding of a single Korean day, drawn as a translucent botanical timeline lit by the breath of an aurora**. The Korean word *haroo* (하루) means "one day" — and the .day TLD reinforces it. Where ordinary "day" sites use clocks, calendars, or sunrise photography, haroo.day takes the literal reading further: the page *is* one day, and the visitor *lives* that day by scrolling from 오전 5시 (5 AM) at the top to 오후 11시 (11 PM) at the bottom. The day is not a number on a face; the day is a **growing plant**, a thin botanical stem that climbs the left margin in real-drawn SVG, sprouting one new leaf for every two-hour interval of light, opening one bud at noon, and dropping a single petal at dusk. The visual register is **botanical** (23% of corpus — moderate, but rendered here in a thin-line frosted-glass register rather than the corpus's typical watercolor or hand-drawn crayon register), bathed in a **translucent-frost** palette (4% — rare) that treats every surface as a thin sheet of dawn fog. The mood is **optimistic-bright** (7% — rare; 93% of the corpus chooses warmer, dimmer, or mistier emotional registers), but optimism here is not the over-saturated dopamine register of vibrant CTAs. It is the optimism of *first morning light through a kitchen window in early spring* — pale, steady, slightly cold at the edges, certain that the day will arrive. The page glows from behind, never from in front. The site rejects the corpus defaults: **no full-bleed hero photograph** (full-bleed at 94%, photography at 99% — both refused outright), **no card-grid** (85% — refused), **no warm gradient sweep** (warm 97%, gradient 97% — both refused), **no cursor-follow magnetic UI parlor tricks** (86% / 79% — refused), **no parallax acrobatics** (95% — refused). The only motion is the aurora overhead and the scroll-triggered awakening of the plant. The only imagery is the plant, the aurora, and the timestamps. No stock photo, no glassmorphic card, no neon glow. The result reads as a **frost-lit Joseon-era illustrated calendar that someone left out overnight in a clear cold sky**, where the northern lights happened to pass and softly stained the rice-paper. The voice of the page is gentle, observant, and slightly melancholic-bright — the way a person who likes mornings writes about mornings. Each timestamp is paired with one small Korean noun (*아침 — morning*, *낮 — afternoon*, *저녁 — evening*, *밤 — night*) and one short English sentence in present tense. There are no headings shouting "Welcome." There are no buttons saying "Get Started." A day does not need calls-to-action. ## Layout Motifs and Structure The page is a **timeline-vertical** layout (2% of the corpus — among the rarest layout choices on record), executed as a single continuous reading column **3,200 pixels tall on a 1440-wide viewport, 4,800 pixels tall on mobile**. The timeline runs as a single 1px column-rule from the top of the viewport to the bottom of the document, anchored at `left: 18vw` on desktop and `left: 22vw` on mobile, drawn in `#B9D4D9` (frost-mint) with `opacity: 0.42` so the rule reads as condensation on glass rather than a hard line. The timeline carries **nineteen marks**: one for each odd hour from 5 AM through 11 PM, plus a single dawn mark (0500) and a single dusk mark (1900) given extra prominence. Each mark is a small open circle, 6px diameter, hollow with a 0.5px stroke in `#7DA9B0` (frost-jade). When the mark enters the viewport during scroll, the circle fills from the bottom upward in `#E5F0F2` (frost-pearl) over 800ms with a soft cubic-bezier(0.4, 0.0, 0.2, 1) curve — this is the only "filling" animation on the page, and it is the heartbeat of the design. To the **right of the timeline** (the wide reading column, occupying `right: 0` to the column rule with `padding-right: 8vw`) sits the day's content: nineteen "moments." Each moment is **two short lines**: ``` 05:00 아침 — morning The light has not yet decided. ``` The Korean noun is set in **Gowun Dodum** at 14px small-caps-style spacing; the English sentence is set in **Inter** Italic at 17px/26px line-height. The hour is set in **Inter** Light at 13px in `#7DA9B0`. There is **no other body content** — no paragraphs, no descriptions, no "about" section, no footer with social links. Each moment occupies exactly one screen-third of vertical space, so the reader scrolls through the day at a meditative pace and never sees more than three moments at once. To the **left of the timeline** (the narrow margin, `left: 0` to `left: 18vw`) climbs **the botanical stem**: a single hand-drawn SVG vine in `#9BC4A8` (frost-sage), 1.5px stroke, that rises from the bottom of the document to the top in a gentle sinusoidal curve. The stem grows leaves as the reader scrolls past each odd-hour mark — the leaf SVG sprite ships hidden in the document, and `IntersectionObserver` triggers a `path-draw-svg` reveal (28% in registry, used here in a way the corpus has not: not as a logo flourish but as a slow, hour-by-hour botanical chronograph). At 1200 (noon) the stem produces a single open flower — five petals in `#F0E4F0` (frost-violet) — and at 1900 the flower drops one petal that falls slowly along the right edge of the timeline as the reader crosses dusk. Above all of this, occupying the entire viewport but anchored to the page (not fixed), is a **gradient-mesh aurora band** that drifts horizontally across the top 30% of every viewport view, gently shifting its hue from frost-pearl at 0500 to frost-violet at 1200 back to frost-jade at 2300. The aurora is the **only background**. Below the aurora the page is `#FAFCFD` (paper-frost) — almost-but-not-quite white, with a 1% noise overlay so the page reads as paper, not screen. There is **no header**. There is **no navigation**. There is **no logo lockup at the top**. The site's name appears **once**, in 11px Gowun Dodum, at the very bottom of the page, after the 2300 moment, set as a small colophon: `haroo.day — 하루의 빛` ("one day of light"). The visitor reaches the colophon only by living the entire day. The **mobile layout** preserves this structure but compresses: column-rule moves to `left: 14vw`, the botanical stem narrows to a 1px stroke, the leaves become smaller (12px instead of 18px), and each moment occupies one full mobile viewport-height instead of one third. The aurora band remains horizontal and full-width. ## Typography and Palette **Fonts (Google Fonts only — verified available).** - **Inter** (variants 300, 400, 400-italic, 500) — the **frutiger-clean** voice (5% in registry). Inter is Rasmus Andersson's neo-grotesque, optimized for screens and pulled from the Frutiger lineage of humanist sans-serifs. Used for English body sentences (`font-weight: 400 italic`, 17/26), hour timestamps (`font-weight: 300`, 13px in frost-jade), and the dawn/dusk emphasized markers (`font-weight: 500`, 15px in frost-pearl). Letter-spacing is set to `-0.005em` on body, `0.04em` on timestamps. No bold weight is used anywhere on the page — the design's emotional register is steady, not emphatic. - **Gowun Dodum** (regular 400) — the **Korean voice**. A Korean humanist sans by Daniel Choi (released through KoddiUD-OnGothic and re-published on Google Fonts). It carries every Korean noun on the page (아침, 낮, 저녁, 밤, plus the wordmark 하루) and the colophon. Set at 14px with `letter-spacing: 0.06em` for nouns and 11px with `letter-spacing: 0.08em` for the colophon. Gowun Dodum's slight roundness in the Hangul jamo gives the page its botanical-soft register — it is the typographic equivalent of a leaf-edge. - **Cormorant Garamond** (italic 400) — used **once only**, at the page's single moment of typographic emphasis: the dawn mark (0500), set as a single italic English noun ("dawn") at 22px in frost-pearl, with a faint underline-draw (18% in registry) that draws itself when the visitor first scrolls past 0500. This is the only italic Cormorant on the page, and it punctuates the entire design like a single white candle in a cold room. Type scale: 11, 13, 14, 15, 17, 22. Six sizes. No more, no less. **Palette (translucent-frost — 4% in registry).** The palette is built around the optical premise that every color on the page is *seen through* something — through a thin sheet of cold dawn fog, through a windowpane lightly fogged with breath, through a single layer of rice-paper. Colors never appear at full saturation. The eye reads the entire page as if dawn light is being filtered before reaching it. - `#FAFCFD` — **paper-frost** (the background, almost-white with a hint of cold blue) - `#E5F0F2` — **frost-pearl** (the timeline mark fill, a translucent cool pearl) - `#B9D4D9` — **frost-mint** (the timeline column-rule, a faint cold mint) - `#7DA9B0` — **frost-jade** (the hour timestamps and circle strokes, the page's most saturated color) - `#9BC4A8` — **frost-sage** (the botanical stem and leaves, a pale frosted sage) - `#F0E4F0` — **frost-violet** (the noon flower petals) - `#C8DCEB` — **frost-aurora-blue** (one of three aurora-band hues) - `#E2D8E8` — **frost-aurora-violet** (one of three aurora-band hues) - `#D5E8DC` — **frost-aurora-mint** (one of three aurora-band hues) - `#3A4A52` — **deep-frost** (the body text — never pure black; warm cold ink) Ten colors. Every value sits in the L\*60–L\*98 range — there is no value below L\*40 anywhere on the page (no pure black, no shadow). This is the visual proof of "translucent-frost": light passes through the page from behind it. ## Imagery and Motifs The page uses **minimal imagery** (14% in registry — rare relative to photography's 99% dominance) and the **aurora-lights** motif (3% — rare). There is **no photography. No 3D render. No raster image. No icon set. No Lottie. No watercolor. No grain stock texture. No mockup. No avatar.** The entire visual carry is hand-rolled SVG in three systems: **1. The Botanical Stem (motif: leaf-organic, 5% — rare; rendered as the structural visual armature).** A single 16-keyframe SVG path traces the stem from the bottom of the document to the top, drawn with `stroke: #9BC4A8`, `stroke-width: 1.5`, `stroke-linecap: round`, `fill: none`. The stem follows a sine wave with amplitude 60px and period 1100px, gently weaving past the column-rule on alternating sides. At each odd-hour scroll-trigger, a small leaf SVG (one of seven hand-drawn leaf shapes, each 18×24px, drawn in the same frost-sage with a single inner vein in 0.5px) is appended to the stem at the appropriate height. The leaves use `path-draw-svg` reveal: each leaf draws itself in 600ms with `stroke-dasharray` animation when its hour mark enters the viewport. At noon (1200), instead of a leaf, the stem produces **a single five-petal flower** — five overlapping `` ellipses in `#F0E4F0` (frost-violet) with a 0.5px stroke in `#9BC4A8`. The flower opens via a `morph` animation from a closed bud to an open bloom over 1200ms. A small yellow stamen dot (`#FFE9A8`, 3px diameter) appears at the flower's center 400ms after the petals open. At dusk (1900), one petal of the flower **detaches and falls** — the petal's CSS `transform-origin` is set to its base, and an `animation-name: petal-fall` translates it slowly downward over 14 seconds, easing into the rest of the page. The petal does not loop. It falls once, when the reader scrolls past 1900, and it stays where it lands at the bottom of the page. **2. The Aurora Band (motif: aurora-lights, 3% in registry — rendered here as the page's only atmospheric layer).** The aurora is a **24×8 SVG mesh-gradient** that occupies the top 30% of the viewport and follows the page on scroll (not fixed). The mesh is constructed from three overlapping linear gradients — frost-aurora-mint, frost-aurora-blue, frost-aurora-violet — composited with `mix-blend-mode: screen` and overall opacity 0.55. A single `requestAnimationFrame` loop slowly translates the gradient coordinates over an 80-second cycle, producing a barely-perceptible drift. As the reader scrolls deeper into the day, the dominant aurora hue shifts: frost-aurora-mint at 0500–0700 (cold dawn), frost-aurora-blue at 0900–1300 (clear midday), frost-aurora-violet at 1500–1900 (alpenglow), and back to frost-aurora-mint with reduced opacity at 2100–2300 (night frost). The shifts are scroll-tied, not time-tied — the aurora responds to the visitor's pace through the day. The aurora deliberately does not use neon-glow (10% in registry — refused) or lens-flare (7% — refused). It is a **dry**, **cold**, **paper-translucent** aurora. There is no bloom, no halation, no glow effect. The light reads as filtered, not emitted. **3. The Timeline Marks and Hour Circles (motif: minimal punctuation).** Nineteen open circles down the column-rule. Each circle is `` with `stroke: #7DA9B0`, `stroke-width: 0.5`, `fill: transparent`. On scroll-trigger via IntersectionObserver, the fill animates from `transparent` to `#E5F0F2` over 800ms, using a CSS `clip-path: inset(100% 0 0 0)` reveal that reads as the circle filling from the bottom upward — the optical metaphor is *frost forming inside a hollow glass bead*. The dawn (0500) and dusk (1900) marks are 1.5× the size of the others (9px diameter) and use a 1px stroke instead of 0.5px. They are the only typographically and visually emphasized hours on the page. **No icons. No logos. No favicons except a 32×32 SVG of a single closed leaf in frost-sage on paper-frost.** ## Prompts for Implementation Build haroo.day as **one HTML document, one CSS file, one ES module, one SVG sprite (the seven leaf shapes plus the five flower petals), and one favicon SVG**. No framework. No bundler. No raster images. No photography. No video. No WebGL. No canvas. No Lottie. No analytics. No service worker. No router. The whole page is **one continuous vertical timeline, drawn once, scrolled through once, lived as one day**. **Document skeleton:** ```
  1. 아침 dawn

    The light has not yet decided.

haroo.day — 하루의 빛
``` **CSS strategy.** Use CSS Grid for the page's two-column layout (botanical-margin | timeline+content). Use `position: sticky` only for nothing — there is no sticky element. Use CSS custom properties for the ten frost-palette colors, exposed at `:root`. All animations use CSS `@keyframes` triggered by class additions from JavaScript; no inline `style` mutations from JS, only class toggles. The stem path and the flower petals are static SVG paths whose `stroke-dashoffset` is animated via CSS — JavaScript only adds the `is-revealed` class. **JS strategy.** One ES module, ~140 lines. Three concerns: 1. **IntersectionObserver** wired to the nineteen `.moment` elements. When a moment enters the viewport, it adds `is-revealed` to itself (which triggers the corresponding leaf-draw, hour-circle-fill, and timestamp emphasis). At 1200 it adds `is-bloomed` to the stem (triggers the flower morph). At 1900 it adds `is-falling` to the flower (triggers petal-fall). 2. **requestAnimationFrame** loop for the aurora drift — ~80-second cycle, mutating only two CSS custom properties (`--aurora-x`, `--aurora-y`) on `.aurora`. No layout thrashing; the aurora is `transform`-only. 3. **Scroll-position-to-aurora-hue** mapping — a single `scroll` event listener (passive, throttled to `requestAnimationFrame`) that mutates `--aurora-hue-mix` on `.aurora` based on `window.scrollY / document.documentElement.scrollHeight`. **Storytelling priorities.** The visitor opens the page and the aurora is already drifting. As they scroll, the timeline column-rule extends (drawn from top), and as each odd-hour mark comes into view, the leaf next to it on the stem draws itself, the circle fills with frost, the timestamp turns from frost-jade to deep-frost. The visitor crosses noon and the flower opens. The visitor crosses dusk and a petal falls. The visitor reaches 2300 and finds the colophon — *하루의 빛*, "the light of one day." Then the page ends. There is no "next page." There is no "subscribe." There is no "back to top." A day, once lived, is over. **Performance.** Total uncompressed bundle target: under 30KB (HTML + CSS + JS). The two SVGs (aurora mesh and stem) together under 8KB. No webfont self-host: load Inter and Gowun Dodum and Cormorant Garamond from Google Fonts CDN with `display=swap` and `font-display: optional` for the body sans (Inter), `font-display: swap` for the Korean and italic. **AVOID, explicitly:** - No CTAs. No "Get Started." No "Sign Up." No buttons of any kind. The page has zero interactive elements except the natural scrollbar. - No pricing block. No feature grid. No stat-grid ("100M users"). No testimonials. No social proof. - No nav. No header. No menu. No "scroll to top" arrow. No "share" buttons. - No card-grid (85% — refused). No glassmorphic card. No bento-box (14% — refused). - No cursor-follow (86% — refused). No magnetic hover (79% — refused). No tilt-3d (26% — refused). No parallax beyond the aurora drift (95% parallax in registry — refused). - No warm color anywhere on the page. The single warm value is the noon stamen dot (`#FFE9A8`), which appears for ~half a second and is the size of a pinhead. - No photography. None. - No emoji. No icon set. No Lottie. No video. No audio. - No dark mode. The page is light. A day is light. The page is **a single full-screen narrative experience** that lasts as long as it takes to scroll from morning to night, slowly. Approximately ninety seconds of unhurried scrolling. ## Uniqueness Notes This design's deliberate departures from the 220 designs already in the registry, and from the seed's defaults: 1. **Timeline-vertical as a literal day, not a marketing about-page.** The corpus uses timeline-vertical at only 2% — the rarest layout choices on record — and the existing uses are about-page chronologies ("our company history") or product roadmaps. haroo.day uses timeline-vertical as the **literal hour-by-hour passage of a single day**, with the visitor's scroll position *being* the time of day. This metaphorical-equivalence between scroll position and clock position has no antecedent in the corpus. The timeline is not a layout; it is the page's ontology. 2. **Botanical aesthetic in a translucent-frost register.** Botanical sits at 23% of the corpus, and translucent-frost sits at 4%. Their **co-occurrence is unprecedented** — every other botanical design in the registry pairs with warm-earthy, terracotta, forest-green, watercolor, or pastoral-romantic palettes. The frost-cold botanical of haroo.day is the corpus's first cold-climate plant. Spring not as warmth but as the first pale light through a cold window. 3. **Aurora-lights motif rendered without neon-glow or lens-flare.** Aurora-lights sits at 3% in the corpus; in every existing use it is paired with neon-glow (10%) or lens-flare (7%) to push the celestial register. haroo.day uses aurora-lights as a **dry, paper-translucent, screen-blended drift** — no bloom, no halation, no light source, no emission. The aurora is filtered, not emitted. This optical register has no parallel in the corpus. 4. **Optimistic-bright tone in a cool-only palette.** Optimistic-bright (7%) almost universally co-occurs with warm or candy-bright palettes. haroo.day pairs optimistic-bright with a palette that has no warm hue except a single 3px stamen dot. Optimism is rendered here as *steadiness of cold dawn light*, not as *brightness of warm midday sun*. This is a defended philosophical position about what optimism feels like — quiet, certain, cold-air-clear — rather than what optimism looks like in marketing-page convention. 5. **Frutiger-clean typography paired with Korean Gowun Dodum.** Frutiger-clean (5%) appears in the corpus as Inter or Helvetica or Frutiger, almost always paired with English-only or English+Latin-script second languages. haroo.day pairs Inter with Korean Gowun Dodum at near-equal weight in the document; the Korean nouns carry the page's emotional register and the English carries the page's narrative voice. The typographic dialogue between Inter (cold neo-grotesque) and Gowun Dodum (warm-soft Hangul humanist) is the page's central typographic tension and has no precedent in the corpus's frutiger-clean designs. 6. **Scroll-triggered as physiological metaphor, not progressive disclosure.** Scroll-triggered (20%) appears in the corpus as a UI convenience — sections fade in, headlines slide up. haroo.day uses scroll-triggered as **the physiological act of living a day**: the leaves grow because the reader's eyes pass them, the flower blooms because the reader has reached noon, the petal falls because the reader has reached dusk. The trigger is not "the reader scrolled here" but "the reader is now *at* this time of day." This is scroll-triggered as embodiment, not as animation. 7. **Minimal imagery (14%) executed as zero-photo, zero-icon, zero-illustration, all-SVG-path.** Minimal imagery in the corpus typically means "few photographs" or "few icons" or "spare collage." haroo.day commits to minimal in its strictest possible form — every visual element is a stroke-only SVG path, the entire page is monochromatic-cold-with-three-aurora-tints, and the only "image" is a hand-drawn vine. This is minimal as **drawn, not photographed; pathed, not pixeled**. 8. **Single-day narrative arc with no second page, no CTA, no subscribe, no return.** The corpus's full-bleed narrative experiences (immersive-scroll, 7%; magazine-spread, 7%) almost universally end with a CTA, a subscription form, a "next chapter" button, or a footer. haroo.day ends with a **colophon and silence**. The page does not ask the visitor to come back. A day, once lived, does not loop. This narrative completeness — explicitly refusing the marketing-page-completion-state — is, to my reading of the corpus, unprecedented. **Chosen seed (from assignment):** *aesthetic: botanical, layout: timeline-vertical, typography: frutiger-clean, palette: translucent-frost, patterns: scroll-triggered, imagery: minimal, motifs: aurora-lights, tone: optimistic-bright.* Of the eight seed dimensions, six land in actively underused or rare corpus territory (timeline-vertical 2%, frutiger-clean 5%, translucent-frost 4%, minimal-imagery 14%, aurora-lights 3%, optimistic-bright 7%); botanical sits at moderate frequency (23%) but is rendered here in a translucent-frost cold-climate register that the corpus has not produced; scroll-triggered sits at 20% but is reframed away from UI animation into embodied chronology, which the corpus has not done. **Avoided patterns (from frequency analysis):** photography (99% — refused outright), warm palette (97% — refused), gradient (97% — refused except for the controlled aurora-mesh), parallax (95% — refused except for the aurora drift), full-bleed (94% — replaced with timeline-vertical), card-grid (85% — refused), centered (82% — replaced with two-column timeline), cursor-follow (86% — refused), spring (85% — refused), stagger (79% — refused), magnetic (79% — refused), hand-drawn aesthetic (96% — refused; the page is line-drawn but in a cold geometric register, not a hand-drawn warm register), mono typography (95% — refused; replaced with frutiger-clean Inter), pastoral-romantic tone (36% — refused).