# Design Language for haru.news ## Aesthetics and Tone Haru.news is a mid-century editorial broadsheet for a contemporary cultural-affairs publication - the visual language of a 1962 Pacific magazine cover reimagined with modern variable-font typography and warm earthy spring palette. The aesthetic borrows from Lustig, Tomoko Miho, Saul Bass title sequences, Push Pin Studios, and Japanese postwar mingei design pamphlets: bold geometric typography, hand-drawn vector illustrations, ample white space, and warm earthen color blocking. Tone is authoritative: this is a serious editorial voice presenting cultural affairs with the gravity of a foreign correspondent's dispatch. Mid-century rigor meets a warmer, more handmade contemporary edge. ## Layout Motifs and Structure Composition is editorial-flow: a magazine-spread inspired layout where each story occupies its own asymmetric editorial spread with bold lead headline, subhead, illustration, and body columns. The page opens with a 100vh broadsheet hero - oversized title, vector lead illustration filling the right half, lead-paragraph below. Subsequent spreads alternate column orientations: 2/3 + 1/3, then 1/3 + 2/3, then full-width, with hand-positioned breaker images. Section divisions are bold horizontal earth-tone bars (8px tall) with the section name in negative-knockout type. Each spread breathes with editorial generosity - body text in a max-width 56ch column, illustrations spilling slightly into margins for tactile asymmetry. ## Typography and Palette Headlines use Commissioner Bold variable at clamp(3rem, 7vw, 6rem) - a versatile contemporary serif/sans hybrid with strong personality, set with -1.5% tracking and weight 800. Subheads use Commissioner Medium Italic at 1.5rem. Body copy is set in Lora Regular at 1.05rem with 1.7 line-height for warm classical reading. Pull-quotes use Commissioner Black at 2.2rem. Section labels use Commissioner ExtraLight at 0.82rem uppercase with letter-spacing 0.16em. Palette is warm earthy: linen-paper #F2E8D5 (background), terracotta #BA5A31, mustard-ochre #C6963C, deep-bottle-green #2C4032 (accent for verticals), warm-iron #322820 (primary ink), and a single ember-orange #E07A2F (reserved for pull-quote highlights and dingbats). Borders are 1.5px solid #322820. No grays. ## Imagery and Motifs Imagery is vector-art: bold mid-century-inspired flat-color vector illustrations - stylized figures, architectural cutaways, cultural artifacts rendered in 4-6 color flat fills with thick 2px warm-iron outlines, no gradients, treated as editorial spot-illustrations. Each spread includes one or two such illustrations. Motifs are cultural: traditional Japanese furoshiki cloth-knot glyphs, small temple-eave silhouettes, ceramic-vessel outlines, and woven-pattern decorative bars - a curated lexicon of cross-cultural artisan motifs. Decorative dingbats include filled circles, hollow squares, and one recurring sun-and-mountain glyph used as story-end terminals. ## Prompts for Implementation Build haru.news as a magazine-spread editorial experience. Use underline-draw pattern aggressively across all linked headlines: a thick 2px terracotta underline draws left-to-right over 420ms on hover, terminating in a tiny sun-glyph dingbat. Each spread enters with stagger reveals: headline word-by-word fade-up (60ms per word, 18px translateY), then illustration fades in with a 600ms ease (no scale, just opacity), then body paragraphs fade as a single 500ms block. Pull-quotes have a custom typewriter-effect reveal where the ember-orange characters appear left-to-right at 30ms per character with a subtle 1.05x scale overshoot per character. Implement Commissioner variable-font weight modulation: as headlines enter, their weight axis interpolates from 400 to 800 over 800ms - the type literally bolds itself into existence. Avoid CTA banks - each spread ends with a single hand-drawn illustration and a small footnote. The narrative voice is authoritative-correspondent: "Spring in Kyoto, reported." ## Uniqueness Notes - Uses Commissioner variable-font weight axis interpolation on headline entry, with text physically bolding itself from 400 to 800 weight over 800ms. - Combines mid-century editorial composition with hand-positioned vector illustrations that intentionally spill into margins, breaking the column grid for tactile asymmetry. - Embeds cross-cultural cultural motifs (furoshiki knots, temple eaves, ceramic vessels) as decorative bars and story-end glyphs rather than purely Western mid-century iconography. - Chosen seed/style: mid-century aesthetic, editorial-flow layout, commissioner-versatile typography, warm-earthy palette, underline-draw pattern, vector-art imagery, cultural motifs, authoritative tone. - Frequency analysis avoidance: sidesteps overused mono typography (82%), 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 mid-century (2%), editorial-flow (3%), commissioner-versatile (4%), warm-earthy palette (2%), underline-draw (6%), vector-art (3%), cultural motifs (8%), and authoritative tone (12% - kept in distinct mid-century treatment).