# Design Language for haru.day ## Aesthetics and Tone Haru.day is a brutalist single-column manifesto rendered in deep forest greens - a luxurious, slow-reading vertical scroll that feels like flipping through a hand-bound limited-edition ecology monograph kept on the high shelf of a private library. The aesthetic combines raw brutalist concrete typography with the saturated emerald, moss, and bottle-green palette of an old-growth fern grove. Tone is luxurious: every section breathes, every paragraph commands the full column width, every transition is deliberate and unhurried. Inspiration: the Brion Cemetery concrete-and-water architecture by Scarpa, the deep-green leatherbound monographs of the Folio Society, Le Corbusier's béton brut, and the cool-quiet rooms of the Glenstone Museum. ## Layout Motifs and Structure The page is a strict single column 720px wide, centered on a deep-forest-green canvas with generous vertical air between sections (160-220px). Each section is a single self-contained essay or specimen: a giant section-number in tech-mono, a futuristic title, a paragraph of body text, and (occasionally) a single futuristic illustration anchored above. There are no horizontal sub-elements - only stacked blocks of typography. The single-column constraint is enforced even on widescreens; the column becomes the entire focal device. Section transitions feature thin 1px concrete-cream rules running across the full viewport width. Navigation is a vertical mini-list pinned to the right edge, listing section numbers in tech-mono. ## Typography and Palette Headlines use Major Mono Display at clamp(2.4rem, 6vw, 5rem), an angular tech-mono weighted heavy, paired with -1% tracking and uppercase. Subheads use Space Mono Bold at 1.3rem uppercase, letter-spacing 0.10em. Body copy is set in Space Mono Regular at 1.05rem with 1.85 line-height for slow luxurious reading - mono typeface used at body size, an unusual choice that lends an engineered-document feel. Section numbers use Major Mono Display at 4rem weight 700, treated as architectural carvings. Palette is forest green: deep-fern #0F1F18 (background), forest-shadow #1A3025 (panels), emerald #2D6A4F (accent), moss-light #74C69D (highlights), sage-cream #D8E2D0 (primary ink), and one bone-cream #F2EAD9 (titles only). No black, no gray. Borders are 1px solid #D8E2D0 at 25% opacity. ## Imagery and Motifs Imagery is custom-illustration: hand-drawn SVG line illustrations of futuristic objects - lunar landers, holographic interfaces, ferns growing on satellite struts, biomechanical seedpods - rendered in 1.5px sage-cream strokes, treated as botanical-plate-style technical illustrations. Each section may include one such illustration centered above its title. Motifs reference futuristic: thin grid-line crosshairs as decorative dingbats, small isometric polygon-mesh shapes as paragraph terminals, and a recurring "biomech fern" silhouette as the page's signature glyph. The illustrations are deliberately stark - never colored, never shaded with raster fills, only line work. ## Prompts for Implementation Build haru.day as a slow vertical manifesto in deep green. Each section enters the viewport with a morph pattern: the section-number digit characters morph in via SVG path-interpolation over 900ms (one digit at a time, 280ms stagger), transitioning from a circle outline into the actual numeric glyph. The page title characters then fade in 60ms apart from below by 18px with cubic-bezier ease. Body text reveals as a single 400ms fade. Illustrations path-draw on entry over 2.4s. Implement morph on section dividers too: the 1px concrete-cream rule starts as a line of 9 dashes and morphs into a continuous stroke over 600ms via SVG stroke-dasharray interpolation. Cursor remains the default - this is a serious reading experience. Hover on right-rail section numbers causes them to swell slightly and shift bone-cream. Avoid CTA banks, pricing, stat-grids. The narrative reads like a private ecology monograph: numbered theses, deep paragraphs, slow turns. ## Uniqueness Notes - Uses Space Mono at body-text size (1.05rem) for an entire long-form essay - an unusual choice that lends an engineered-document gravity to luxurious prose. - Combines deep forest green palette with hand-drawn futuristic line illustrations of biomechanical-organic objects (ferns on satellites), creating a deliberate biology-meets-engineering tension. - Implements morph pattern on both section numbers (circle to numeral) and section dividers (dashes to continuous stroke) via SVG path interpolation. - Chosen seed/style: brutalist aesthetic, single-column layout, tech-mono typography, forest-green palette, morph pattern, custom-illustration imagery, futuristic motifs, luxurious tone. - Frequency analysis avoidance: sidesteps overused centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient default palettes (95%/78%), photography imagery (90%), parallax pattern (96%). Leans into underused single-column layout (11%), tech-mono typography (4%), forest-green palette (2%), morph pattern (7%), custom-illustration imagery (2%), futuristic motifs (9%), and luxurious tone (4%).