# Design Language for hibiki.moe ## Aesthetics and Tone Hibiki.moe is a grainy-textured editorial-flow magazine for the resonance of small things - a high-contrast monochrome publication with serif-revival typography, hand-drawn illustrations, and Lottie animations that emerge subtly from the grain. The aesthetic is intentionally tactile: every surface carries a heavy noise grain, every illustration looks hand-stitched, and the high-contrast black-and-white palette is punctuated only by a single warm accent. Tone is approachable-casual: the editorial voice is friendly, slightly self-deprecating, often pausing for asides. Inspiration: contemporary Are.na project pages, Berlin's Apartamento magazine, the grainy-print zines of NYC's Printed Matter, and the hand-stitched illustration style of Saul Steinberg. ## Layout Motifs and Structure Composition is editorial-flow: a magazine-style asymmetric layout where each spread is a unique composition - some full-bleed image, some 2-column with sidebar, some single tall column with floating illustration. Spread types cycle: (1) full-bleed lead image, (2) 60/40 type-image split, (3) single column with margin notes, (4) 3-column dense text, (5) full-bleed hand-drawn illustration. Each spread fills 100vh, with the next emerging through a soft grain transition. Hero is a 100vh tall serif headline with a small hand-drawn marginal note. There is no fixed nav bar; instead, a thin grainy page-number ribbon runs along the bottom edge with current spread number. ## Typography and Palette Headlines use Playfair Display Regular at clamp(2.8rem, 6.5vw, 5.6rem), a high-contrast serif revival with elegant moderns/didone bones, weight 400, with -1% tracking. Subheads use Playfair Display Italic at 1.5rem. Body copy is set in Source Serif 4 Regular at 1.05rem with 1.75 line-height for warm reading. Margin notes use Source Serif 4 Italic at 0.92rem. Drop-caps use Playfair Display Black at 4rem. Palette is high contrast: paper-white #F7F4ED (background), heavy-black #0A0A08 (primary type), faded-charcoal #3A3835 (subdued type), warm-accent #D86B2C (the single accent color used sparingly for pull-quote highlights and Lottie animation accent strokes). Backgrounds carry 3-5% noise grain via SVG feTurbulence overlay. No grays beyond the charcoal. ## Imagery and Motifs Imagery is hand-drawn: every illustration is a hand-drawn SVG line drawing rendered in 1.5px heavy-black strokes with intentional wobble and visible pen-pressure variation (some lines thicken to 2.5px in the middle, simulating brush-pen). Subjects include small everyday objects (cups, leaves, kitchen knives), portraits, and abstract gestural sketches. No photographs whatsoever - all hand-drawn. Motifs reference tech but ironic: tiny pixel-style "loading" dots and old-Mac cursor arrows hand-drawn as decorative dingbats, scattered through margin notes as if a person is sketching their interactions with software. A recurring "hand-stitched circuit-flower" motif (a flower whose petals are little hand-drawn circuit traces) anchors several spreads. ## Prompts for Implementation Build hibiki.moe as a grainy editorial magazine. Implement lottie-animation pattern across the page: 5-7 Lottie JSON animations (small hand-drawn loops - a kettle steaming, a leaf falling, a hand turning a page) play in the margins of various spreads, each looping every 4-8 seconds. The Lottie animations are styled to match the hand-drawn aesthetic (1.5px stroke, heavy-black with warm-accent secondary, no fill). On scroll, each spread enters with a 1.2s grain-dissolve - the next spread's grain noise pattern fades in while the previous fades out. Headlines reveal with a serif-revival drop-cap pop: the first letter scales from 0.8 to 1.2 over 600ms with a small rotation, then settles. Body text fades in 280ms after. Hover on hand-drawn illustrations causes their strokes to wobble (animated SVG filter feTurbulence) for 400ms. Avoid CTA banks - each spread ends with a single italic margin-note. The narrative is approachable-casual: "We were talking about the resonance of kettles. It's a thing, I promise." ## Uniqueness Notes - Combines high-contrast serif-revival editorial typography with 5-7 strategically placed Lottie animations in margins, each looping every 4-8 seconds. - Uses heavy 3-5% noise grain throughout via SVG feTurbulence, with grain-dissolve transitions between spreads instead of scroll-jumps. - Hand-drawn-only imagery policy: zero photographs, every visual is a 1.5px hand-drawn SVG with intentional pen-pressure wobble. - Chosen seed/style: grainy-textured aesthetic, editorial-flow layout, serif-revival typography, high-contrast palette, lottie-animation pattern, hand-drawn imagery, tech motifs, approachable-casual 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 grainy-textured (1%), editorial-flow (3%), serif-revival (5%), high-contrast (19% but recontextualized), lottie-animation (1%), hand-drawn (13% but with strict no-photo policy), and approachable-casual tone (3%).