# Design Language for haru.day
## Aesthetics and Tone
haru.day is **a Bauhaus foundation-course primer on the arrival of spring — a cool-gray almanac in which the three Bauhaus primary forms (circle, square, triangle) are taught to a reader the way Itten and Klee taught colour and form to first-year students at Weimar, except the subject is not "form" in the abstract but *haru* itself.** The word *haru* reads two ways and the page holds both at once: Japanese 春 ("spring") and Korean 하루 ("one day"). The site treats the two readings as the same lesson — spring is the day the year wakes up, and a single day in spring is the whole season in miniature. Where sibling sites under the haru.* family chase pastoral watercolour, aurora gradients, or photographic sunrises, haru.day refuses all of it: this is **the season rendered as a workshop bench, not a landscape**. The mood is the smell of a print room — cold morning light through high windows, the squeak of a brayer, ruled paper, set squares, a half-finished colour wheel pinned to corkboard. It is precise but never cold-hearted; the *voice* on the page is **conversational** (7% in the corpus — uncommon), the warm aside of a studio tutor leaning over your shoulder ("notice how the circle wants to roll downhill — that's gravity, and gravity is the first thing spring forgets"). Bauhaus is only 7% of the corpus and almost always deployed as loud primary-colour Memphis cousins; haru.day takes the **opposite** Bauhaus — the muted, instructional, Hannes-Meyer-functionalist Bauhaus, all cool grays and a single restrained accent, the Bauhaus of the *Vorkurs* exercise sheet rather than the poster. Nothing on this page is for sale. Nothing here is a pitch. It is a lesson, generously given, about one day in spring.
## Layout Motifs and Structure
The page is an **editorial-flow** layout (3% of the corpus — among the rarest layout choices on record), built as **a printed primer you read top to bottom in a single continuous column of justified text-blocks, plates, and marginalia** — never a card grid, never a hero-and-sections marketing skeleton, never a dashboard. Think *Bauhausbücher* (the 1925–1930 book series) crossed with a botanist's field manual.
**The bench grid.** The whole document sits on an asymmetric 12-column grid where columns are **not equal width**: a wide "text measure" column of 7 units (max 62 characters per line, hard cap), a 1-unit gutter, and a 4-unit "margin column" reserved exclusively for marginalia — running heads, plate numbers, the tutor's handwritten-feeling asides set in a smaller size, and the recurring trio of primary forms drawn at thumbnail scale. On viewports below 860px the margin column collapses *beneath* its paragraph rather than beside it, indented one form-width, the way footnotes fall to the foot of a page.
**Plates, not sections.** The page is divided into numbered **PLATES** (PLATE I — THE CIRCLE / 円 / 원 ; PLATE II — THE SQUARE ; PLATE III — THE TRIANGLE ; PLATE IV — THE WHEEL ; PLATE V — THE THAW ; COLOPHON). Each plate opens with a full-measure rule (1px, `#3A3F47`), the plate number in the margin column, and a single oversized geometric figure that occupies roughly 70vh — a perfect `#5B6470` circle, or a `#5B6470` square rotated 0°, or an equilateral triangle pointing up. Below the figure, a column of conversational instructional prose explains what that form has to do with spring. Plates are stacked, never side by side; the reading is strictly linear, primer-fashion.
**The colour-wheel armature.** Pinned to the right margin from PLATE I onward is a partial **colour wheel** — but instead of hues it carries the *grays of the day*, twelve swatches from pre-dawn slate to noon paper-white, and the wheel fills clockwise as you scroll, like a sundial. By the COLOPHON the wheel is complete and tips into one warm note. It is decorative scaffolding, not navigation.
**No bento. No card-grid. No centred hero. No diagonal sections.** The composition's only "interactive widgets" are the three primary forms in the margin, each of which the reader may nudge (see Implementation). Everything else is type, rule, and figure on a bench.
## Typography and Palette
**Fonts — Google Fonts only, verified available.**
- **Archivo** (weights 400, 500, 600, 700; plus *Archivo Expanded* and *Archivo Condensed* widths) — the **grotesque-neo** voice (3% in the corpus — uncommon). Archivo is Omnibus-Type's grotesque sans built explicitly for "high-performance typography": low contrast, large x-height, a slightly squared skeleton that reads as machined rather than humanist — exactly the engineered-grotesque feeling the Bauhaus type teachers reached for and never quite had a typeface for. **Archivo Expanded 700** sets plate titles ("PLATE I — THE CIRCLE") in all caps, letter-spacing `0.18em`, ~clamp(2.4rem, 6vw, 5rem). **Archivo 600** sets running heads and the colophon. **Archivo 400** at 18.5/30 sets all body prose — the tutor's voice. **Archivo Condensed 500** sets the margin-column marginalia at 13.5/19, letter-spacing `0.02em`, in slate gray so it reads as a quieter register beside the main measure.
- **Spline Sans Mono** (weights 400, 500) — the engineering annotation voice. Used *only* for things that want a drafting-table register: the plate numbers (`№ I`, `№ II`), the gray-swatch hex labels on the colour wheel, the figure captions ("fig. 1 — the circle at rest, ⌀ 62vmin"), and a thin scrolling baseline of dates along the foot of each plate (the calendar of the thaw: 立春 → 雨水 → 啓蟄, the old solar terms). Mono is 95% of the corpus, so it is used **sparingly and only as instrument labelling**, never for prose.
**Palette — cool-grays (2% in the corpus — among the rarest palette choices on record).** A graded scale of *temperature-true* cool grays, blue-leaning, the colour of north light on cartridge paper, with exactly **one** warm accent that appears only at the very end (the thaw):
- `#1B1F26` — **Print Black** (deep blue-graphite; rules at full weight, plate titles, the triangle figure)
- `#3A3F47` — **Slate** (body text, half-weight rules, the square figure)
- `#5B6470` — **Steel** (the circle figure, marginalia, secondary type, mid-wheel swatches)
- `#8E97A3` — **Ash** (hairlines, disabled states, figure outlines, the pre-dawn swatch)
- `#C3C9D1` — **Mist** (block backgrounds for inset exercises, the colour-wheel track)
- `#E6E9ED` — **Chalk** (page background — paper that has been outdoors in cold air)
- `#F6F7F9` — **Paper-White** (the noon swatch; the lightest inset panels)
- `#D9A441` — **Brass** (the single warm accent — ochre-gold, the colour of the first crocus and of the brass thumbtack holding the wheel to the corkboard; used *only* in PLATE V and the COLOPHON, never above the fold)
Contrast and "accessibility" are deliberately ignored per brief; the gray-on-gray gradations are part of the lesson about light.
## Imagery and Motifs
**No photography. No 3D render. No stock texture. No icon set. No Lottie.** Photography is 99% of the corpus; haru.day carries **water-bubbles imagery** (6% — uncommon) and the **book-scholarly motif** (3% — uncommon), and every visual is hand-rolled SVG or CSS. Three systems carry the whole page:
**1. The three primary forms (Bauhaus Vorkurs).** A flawless circle, a square, and an equilateral triangle — drawn as crisp 2px-stroke SVG outlines in `#8E97A3` with optional `#5B6470` fills. They appear at three scales: oversized (one per plate, ~70vh), thumbnail (a recurring trio in the margin column), and micro (inline, baseline-aligned, the size of a capital letter, used like punctuation in the prose — "the day begins ○, swells □, and breaks △"). The forms are the *protagonists*; spring is explained through them.
**2. Water-bubbles as spring condensation.** Spring is the season of *dew, melt-water, breath on cold glass, the bead of water hanging from a thawing branch*. Across the Chalk background, very faint SVG **bubble clusters** drift: rings of thin-stroke circles (`#C3C9D1`, stroke-width 1, no fill) with one or two carrying a tiny crescent specular highlight in `#F6F7F9`, so they read as droplets on the inside of a window. They cluster densest at the top of PLATE I (dawn condensation), thin out by PLATE IV, and in PLATE V a few of them *fill* with `#D9A441` — the first water that catches sunlight. They never bounce or "play"; they bead, hang, and very slowly slide. This is the bubble-playful motif (4% — uncommon) drained of all playfulness and re-cast as scientific observation.
**3. Book-scholarly furniture.** Plate numbers in Roman numerals; a running head on every screen ("HARU.DAY · A PRIMER ON SPRING · PLATE III"); fine catchwords at the foot of each plate (the first word of the next plate, printed small, the way old books did); a corkboard-pinned colour wheel; ruled "exercise" insets with a `#C3C9D1` ground and a `#8E97A3` keyline, each headed "EXERCISE —" in mono, asking the reader to *do* something ("hold your breath against the screen; that fog is March"); and a true COLOPHON at the end ("Set in Archivo and Spline Sans Mono. Composed in cool gray. Pressed on the day spring arrived."). Decorative elements are limited to: thin rules, plate figures, the bubble field, the colour wheel, and the small solar-term calendar strip — no flourishes, no ornament, no gradients except the colour wheel's grayscale step-ramp.
## Prompts for Implementation
Build haru.day as **one HTML document, one CSS file, one ES module, one inline SVG sprite (the three primary forms plus one bubble-cluster symbol plus the twelve wheel-swatch arcs), and one favicon SVG (a single Steel circle on Chalk)**. No framework. No bundler. No raster images. No canvas. No WebGL. No video. No analytics. No service worker. No router. The page is **a primer: rendered once, read straight down, like a book about one spring day.**
**Document skeleton:**
```
HARU.DAY · A PRIMER ON SPRING · PLATE I ... haru / 春 / 하루, the dual reading, set as the title page ... figure + prose + marginalia + exercise ... ... the colour wheel of grays, completed Brass enters; bubbles fill ...
```
**Layout & grid.** CSS Grid: `grid-template-columns: minmax(0,7fr) 1fr 4fr;` for the primer + margin. Hard-cap the prose `max-width: 62ch`. The `.margin` aside is `position: sticky; top: 12vh;` on wide viewports; below 860px it un-sticks and each plate's marginalia drops to the foot of its plate, indented `4ch`. The `.runner` header is sticky, full width, 1px bottom border `#8E97A3`, Archivo Condensed 13px, letter-spacing `0.22em`.
**Storytelling, scene by scene (this is the heart of the page — bias hard toward narrative, away from anything resembling a marketing layout):**
- **Frontispiece** — a near-empty Chalk screen. The word `haru` in Archivo Expanded 700, then beneath it `春` and `하루` set in mono at a third the size, then one conversational line: *"Two readings, one lesson. Spring is the day the year wakes up — so let's draw it. Three shapes; that's all we need."* A single Steel circle sits low on the screen, already wanting to roll. Scroll-cue: a thin downward rule that draws itself (`path-draw-svg`, ~1.2s).
- **PLATE I — THE CIRCLE / 円 / 원.** The oversized circle figure fades up (`fade-reveal`, no parallax-zoom). Prose: the circle is the sun finally clearing the ridge; it is also the dew-bead; it is also *one day*, which has no corners. Bubble field is densest here — dawn condensation. The reader can grab the margin's micro-circle and drag it: it rolls along a baseline with `spring` physics and settles. Exercise inset: "EXERCISE — breathe on your screen."
- **PLATE II — THE SQUARE.** The square figure. Prose: the square is the field, the seedbed, the windowpane the dew sits on, the page you're reading — spring needs *ground* before it needs growth. The margin square, when hovered, performs a restrained `scale-hover` (scales to 1.06, no rotation, no flip) — "the square doesn't roll; it just stands a little prouder." Marginalia in Archivo Condensed explains the right angle as "the one shape that holds still long enough to plant something in."
- **PLATE III — THE TRIANGLE.** The triangle figure, pointing up. Prose: the triangle is the new shoot, the bud-tip, the goose returning, the *direction* spring chooses (always up, always forward). On hover the margin triangle does a `scale-hover` to 1.06 and its stroke deepens from Ash to Slate. Catchword at the foot: "WHEEL".
- **PLATE IV — THE WHEEL.** The plate figure *is* the colour wheel, now centred and full-measure: twelve gray arcs from `#1B1F26` to `#F6F7F9`, each with its mono hex label, the whole thing reading as a sundial of the day's light. Prose: "We've been filling this all along — every shape you nudged moved the light a little. A day in spring is just the wheel turning once." The wheel that's been sticky in the margin visually 'docks' into this figure (a shared-element feel via matched stroke + size; no library).
- **PLATE V — THE THAW.** First appearance of `#D9A441` Brass. A handful of bubble droplets *fill* with Brass; the colour wheel's final arc warms; the prose softens to its most conversational: "There — that gold? That's the first water that caught the sun. The lesson's nearly over. Spring isn't a colour or a shape; it's the day all three start moving at once." The three primary forms in the margin briefly drift together into an overlap (circle + square + triangle, transparent strokes) and then settle apart again.
- **COLOPHON.** Mono, small, left-aligned in the prose column: "Set in Archivo & Spline Sans Mono. Composed entirely in cool gray, with one ration of brass. A Bauhaus primer for haru.day — spring, and the one day that contains it." Below it, the solar-term strip (立春 · 雨水 · 啓蟄 · 春分) scrolls once, slowly, and stops.
**Animation & interaction inventory (restraint is the brief):**
- `scale-hover` (3% — uncommon; this design's signature interaction): the margin square and triangle scale to 1.04–1.06 on hover, ease-out 220ms, *no* rotation/flip/skew — "Bauhaus furniture doesn't wobble." The colour-wheel swatches also lift to 1.04 on hover and reveal their hex label.
- `spring` physics for the draggable micro-circle in PLATE I (it actually rolls and settles).
- `fade-reveal` + `path-draw-svg` for plate figures and rules entering — slow, ≥900ms, ease-out, never bouncy.
- The bubble field drifts with a single ultra-slow CSS `@keyframes` translate (60–120s loops), distinct per cluster; honour `prefers-reduced-motion` by freezing all of it.
- Scroll progress quietly fills the colour wheel clockwise and updates the `.runner` plate name. No counters, no stat tickers, no typewriter, no parallax-heavy hero.
- Cursor: a 1px crosshair reticle (drafting-table cursor) over the plate figures only; default elsewhere.
**AVOID, explicitly:** CTA buttons, "Get started" / "Sign up", pricing tables, plan cards, feature-comparison grids, stat-grids ("10k users / 99.9% uptime"), testimonial carousels, logo walls, card-grid layouts, centred hero with two buttons, glassmorphism cards, neon glows, gradients (other than the wheel's grayscale step-ramp), drop shadows beyond a single hairline, parallax-zoom on a hero image, photography of any kind. If a section starts looking like a SaaS landing page, it has failed — it should look like a page torn from a 1926 workshop primer.
## Uniqueness Notes
This design's deliberate departures from the 230 designs already in the registry, and from the seed's defaults:
1. **The "quiet" Bauhaus, in cool gray, as a teaching primer — not a poster.** Bauhaus appears in only 7% of the corpus and almost always as loud primary-red/yellow/blue Memphis-adjacent graphics. haru.day inverts it: the muted, instructional, Hannes-Meyer-functionalist Bauhaus rendered entirely in temperature-true cool grays (`#1B1F26 → #F6F7F9`) — the rarest palette in the corpus at 2% — with exactly one ration of brass (`#D9A441`) released only in the final plate. The three primary forms aren't decoration; they're the *protagonists* of a lesson.
2. **editorial-flow as a literal printed primer, with PLATES instead of sections.** editorial-flow is 3% of the corpus and the rare uses are blog-magazine spreads. haru.day uses it as a *Bauhausbücher*-style instructional book: an asymmetric 7/1/4 column grid with a dedicated marginalia column, numbered PLATES, running heads, catchwords, an EXERCISE inset on every plate, and a true COLOPHON — strictly linear, no card grid, no hero, no dashboard, no diagonal sections.
3. **The dual reading of *haru* (春 / 하루) made into the thesis, not a tagline.** Sibling haru.* sites treat "haru" as either Japanese spring or Korean "one day"; haru.day fuses them — "spring is the day the year wakes up; one spring day is the whole season in miniature" — and structures the entire primer around that equivalence, with the gray colour-wheel doubling as a sundial of a single day's light.
4. **water-bubbles re-cast as scientific spring condensation, drained of play.** water-bubbles imagery (6%) and bubble-playful motif (4%) are uncommon and usually bright/bouncy; here they're faint thin-stroke SVG droplets — dawn condensation on cold glass — that bead and slowly slide, densest at PLATE I and selectively filling with brass at the thaw. No bounce, no pop, no glassmorphism.
5. **`scale-hover` (3%) as the entire interaction language — deliberately anti-flashy.** No tilt-3d, no card-flip, no cursor-follow blob, no magnetic buttons, no typewriter, no parallax-heavy hero (all corpus-dominant patterns, all rejected). The margin square and triangle only *scale a hair* on hover ("Bauhaus furniture doesn't wobble"); one draggable circle has `spring` physics because a circle is the one form that *should* roll. Everything else is rules, type, and figures on a workshop bench.
6. **book-scholarly furniture without a single book photo, and zero photography overall** — Roman-numeral plate numbers, running heads, catchwords, a corkboard-pinned grayscale colour wheel, mono-set figure captions and solar-term calendar (立春 · 雨水 · 啓蟄 · 春分), and grotesque-neo type (Archivo, 3%) treated as the "engineered sans the Bauhaus never had." Photography is 99% of the corpus; this page has none.
Chosen seed (from assignment): **aesthetic: bauhaus, layout: editorial-flow, typography: grotesque-neo, palette: cool-grays, patterns: scale-hover, imagery: water-bubbles, motifs: book-scholarly, tone: conversational.** Avoided per frequency analysis: hand-drawn (96%), glassmorphism (64%), photography (99%), full-bleed/card-grid/centred (94/86/83%), gradient & warm palettes (97/97%), parallax/cursor-follow/spring-as-default/stagger/magnetic patterns (96/86/85/80/79%), mono-for-prose (95%).