# Design Language for haru.systems ## Aesthetics and Tone Haru.systems is a Japanese-minimal systems atelier rendered in chrome-metallic finishes with marble-classical decorative accents - a deliberately unusual fusion where wabi-sabi restraint meets industrial chrome and Roman marble. The aesthetic strips the page to its essentials (heavy negative space, single focused content per zone, near-zero ornamentation) but uses a polished chrome-and-marble palette to give that minimalism unexpected weight. Tone is conversational: despite the polish, the voice is plainspoken and approachable, walking the visitor through the system's offerings like a thoughtful friend explaining infrastructure. Inspiration: Naoto Fukasawa's product silhouettes, Kenya Hara's MUJI book, Maison Margiela's collection presentation Lookbook, the chrome interiors of Apple Park, and the Pantheon's marble floor. ## Layout Motifs and Structure The page is built on F-pattern reading flow: heavy left column carries the heading and one custom illustration; mid-band carries the body paragraph; the right rail carries a small marble-classical glyph and metadata. Each F-pattern zone occupies 100vh with 30vh of breathing room above and below. The composition is uncomfortably spacious - sections are deliberately wider apart than necessary, forcing slow reading. No nav bar; instead, a thin vertical chrome-stroke runs down the left edge with section markers etched into it. Hero is a single 100vh tableau: chrome-toned wordmark left, single Naoto-style illustration right, mid-band body sentence below. Followed by 5-7 more F-pattern zones. ## Typography and Palette Headlines use Frutiger-clean cuts via Lato Light at clamp(2.4rem, 5.5vw, 4.6rem), weight 300, with -1% tracking and uppercase; Lato's humanist clean sans replaces classic Frutiger respectfully. Subheads use Lato Light at 1.2rem uppercase letter-spacing 0.10em. Body copy is set in Lato Regular at 1.05rem with 1.65 line-height. Metadata in Lato ExtraLight at 0.78rem uppercase letter-spacing 0.16em. Palette is chrome-metallic: chrome-mirror #D9DCE0 (background), polished-silver #B8BCC1, deep-chrome #6B7178 (panels), graphite-ink #1F2226 (primary type), cool-white-highlight #F4F5F7 (text on dark), and one warm marble-cream #EAE2D0 (used on accent decorative bars and dingbats). Borders are 0.75px hairlines in graphite. Subtle linear gradients (top-light to bottom-dark over 2-4%) simulate chrome polish. ## Imagery and Motifs Imagery is custom-illustration: hand-drawn line illustrations of simple objects rendered in single 1px graphite strokes - a folded paper, a single chrome wrench, a rice-grain, a marble column section - each illustration occupying a single F-pattern zone, deliberately scaled small (240-320px wide) inside abundant space. Motifs are marble-classical: thin marble-veining lines drawn in 0.5px cool-white at 40% opacity behind certain panels; tiny Corinthian capital glyphs as paragraph terminals; and a recurring "atomic motif" - a single circle with three perpendicular line-segments - as the page's signature sigil. Decorative half-arch SVG bars rest at the right edge of each F-pattern zone. ## Prompts for Implementation Build haru.systems as a chromed atelier with marble-classical accents. Each F-pattern zone enters with a shake-error pattern reinterpreted as polished-chrome jitter: when scrolled into view, the custom-illustration shimmers with a brief 5px horizontal shake (180ms, cubic-bezier 0.36, 0.07, 0.19, 0.97) before settling - as if the chrome surface was tapped. This shake fires only once per visit per zone. Headlines fade-up with 800ms ease and 18px translateY. Marble-veining patterns behind panels animate via slow SVG path morphing over 22s loops. Hover on custom-illustrations causes them to invert their stroke color from graphite to cool-white-highlight over 280ms, simulating the line "catching the light." Avoid CTA banks - each zone ends with a single sentence in conversational voice. The narrative is a friend explaining systems: "This part you don't have to worry about. This part you do." ## Uniqueness Notes - Hybridizes Japanese-minimal restraint with chrome-metallic finishes and marble-classical decorative accents - an unusual three-cultural fusion (Japanese austerity + industrial chrome + Roman marble). - Implements shake-error as a once-per-visit polished-chrome jitter on each custom illustration when scrolled into view - turning a failure-state pattern into a tactile delight. - Maintains a conversational voice in an aggressively minimal F-pattern layout, producing intentional tonal warmth against severe visual restraint. - Chosen seed/style: japanese-minimal aesthetic, f-pattern layout, frutiger-clean typography, chrome-metallic palette, shake-error pattern, custom-illustration imagery, marble-classical motifs, conversational 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 japanese-minimal (1%), f-pattern (3%), frutiger-clean (2%), chrome-metallic palette (2%), shake-error (2%), custom-illustration (2%), marble-classical motifs (3%), and conversational tone (4%).