# Design Language for haru.works ## Aesthetics and Tone Haru.works is an editorial bento-box studio index - a gridded portfolio of works presented as a vintage cigar-box of typed cards, with retro display typography, deep burgundy-cream coloration, and a deliberate typewriter-effect cadence revealing each card's content. The aesthetic combines magazine-spread editorial composition with bento-box modular tiles, creating a grid of intimate works arranged like postcards in a velvet-lined box. Tone is raw-authentic: unpolished voice, first-person notes, occasional handwritten margins, no marketing language. Inspiration draws from David Carson's RayGun, vintage Smith-Corona typewriter manuals, library card-catalogs, Penguin Modern Classics covers (burgundy-and-cream era), and the noise-textured backgrounds of risograph-printed zines. ## Layout Motifs and Structure The page is a bento-box grid: 12 asymmetric tiles arranged in a Mondrian-like irregular layout that fills the viewport without rectangular monotony. Tile sizes vary - some span 2x2, some 1x3, some single-cell - creating intentional visual rhythm. Each tile is a self-contained "work card" with retro-display title, typewriter-effect body, project metadata, and one image. The grid is 8 columns wide on desktop with 24px gutters; tiles snap to multi-column spans on a 4-row vertical lattice per viewport. Hero is the top-left 4x2 tile carrying a giant retro-display wordmark. Subsequent screens repeat the bento structure with new tile arrangements. Mobile collapses tiles into a single vertical column preserving their typewriter content rhythm. ## Typography and Palette Headlines use Abril Fatface at clamp(2.4rem, 5.5vw, 4.4rem), a retro-display didone with high contrast and decorative flair, paired with -1% tracking and weight 400 (its only cut). Subheads use Source Serif 4 SemiBold at 1.3rem. Body copy is set in Courier Prime Regular at 0.98rem with 1.7 line-height, evoking typewriter output (Courier Prime is a Courier variant widely available on Google Fonts). Project metadata uses Courier Prime Bold at 0.78rem uppercase letter-spacing 0.10em. Palette is burgundy cream: cream-paper #F2E8D5 (background), deep-burgundy #6B1F2B (primary accent), oxblood #4A1419 (panels), warm-iron #2F2520 (primary type), faded-burgundy #A14852 (subdued type), and one bone-cream #FAF4E4 (text on burgundy). Borders are 1.5px solid #6B1F2B with subtle noise-texture overlay. ## Imagery and Motifs Imagery is noise-texture: every photograph and image carries a heavy noise-texture SVG overlay (10-15% noise opacity, multiply blend) simulating risograph or aged-print roughness. Project shots are deliberately framed with crooked 2px borders as if hastily clipped from magazines. Motifs reference tech: small typewriter-key glyphs (square outlined with rounded corners) as bullet markers, dot-matrix patterns at 25% opacity behind tile backgrounds, and tiny terminal-cursor blinking marks at the end of each typewritten paragraph. A recurring "haru.works" wordmark stamp appears in three of the bento tiles as a decorative anchor. ## Prompts for Implementation Build haru.works as a typewritten bento studio index. Implement typewriter-effect pattern across all card body text: when a tile enters viewport, its body characters appear left-to-right at 25-35ms per character with a small 2px right-shift overshoot per char, accompanied by a soft mechanical "tick" audio (optional, muted by default). The terminal-cursor remains blinking at the end of each typewritten line until typing completes. Tile headlines fade in instantly (no animation) to contrast with the slow-typed body. Implement stagger across the bento grid: tiles begin their typewriter sequences 220ms apart, top-left to bottom-right. Hover on any tile causes its noise-texture overlay to subtly intensify (opacity 12% to 18%) and its borders to scribble-redraw via SVG stroke-dasharray jitter. Avoid CTA banks - each tile ends with a single Courier Prime line: "logged 2024.03.12 04:18 -- next." The narrative is a craftsperson's working diary: short bursts of notes, dated, signed, raw. ## Uniqueness Notes - Builds a Mondrian-irregular bento-box grid where 12 asymmetric tiles vary in span (2x2, 1x3, etc.) rather than uniform card-grids, creating intentional visual rhythm. - Implements typewriter-effect pattern across all body content with character-by-character reveal at 25-35ms per char, plus a persistent blinking terminal-cursor at line ends. - Pairs retro-display Abril Fatface with Courier Prime typewriter body in deep burgundy-cream palette - editorial high-contrast didone meets working-typewriter pragmatism. - Chosen seed/style: editorial aesthetic, bento-box layout, retro-display typography, burgundy-cream palette, typewriter-effect pattern, noise-texture imagery, tech motifs, raw-authentic tone. - Frequency analysis avoidance: sidesteps overused mono-as-default (82% but recontextualized as Courier-typewriter), centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient palettes (95%/78%), photography-default imagery (90%), parallax pattern (96%). Leans into underused editorial (16% but rare in raw-authentic mode), bento-box (4%), retro-display (1%), burgundy-cream palette (3%), typewriter-effect (5%), noise-texture (3%), and raw-authentic tone (3%).