# Design Language for haru.plus ## Aesthetics and Tone Haru.plus is a McBling-era memory book - the rhinestone-encrusted, glossy, sticker-strewn personal blog aesthetic of mid-2000s pre-iPhone web culture, but rebuilt as a frosted-glass particle-effect curiosity cabinet on warm earthy soil tones. The "plus" framing positions the page as a luxury-tier personal scrapbook with extra glitter. Tone is grounded-earthy: despite the bling, the voice is plainspoken, anchored, and slightly self-deprecating - like someone who loves their kitsch but doesn't take it too seriously. Inspiration draws from MySpace 2006 profile pages, Paris Hilton's "House of Wax" era graphic design, scrapbook-zines, the Tumblr glitter-pixel-PNG era, and translucent acrylic photo cubes of the early 2000s. ## Layout Motifs and Structure The page is built as a single luxurious vertical column - centered, max-width 760px, set against a textured warm-soil paper backdrop. Each section is a glossy frost-translucent panel with rounded corners, slightly tilted (-1 to +1.5 degrees), and stacked vertically with 80-120px breathing room. Stickers, hearts, sparkles, and butterflies are positioned over the panels at intentional angles, breaking the column edge. The hero is a single oversized "haru.plus" wordmark in geometric sans, encrusted with particle stars; below it cascade 8-12 scrapbook entries, each a translucent frosted card holding a single memory, photo, or quote. Mobile keeps the single column intact; tilts are reduced. ## Typography and Palette Headlines use Quicksand SemiBold at clamp(2.8rem, 6vw, 5.2rem), warm geometric sans with rounded terminals, weight 600, -2% tracking. Subheads use Quicksand Medium at 1.3rem. Body copy is set in Quicksand Regular at 1.05rem with 1.7 line-height for casual readability. Decorative phrase-stickers use Quicksand Bold at 1.6rem in italic-skew. Palette uses translucent-frost panels over a warm-earthy backdrop: paper-soil #D6BC95 (background), warm-clay #B89066, frost-pearl #F8F2EA (panels at 65% opacity with backdrop-filter blur(20px)), sparkle-pink #F4A8C3 (accent), butter-yellow #F5D77A (sticker color), warm-iron #3D2F22 (ink). Frosted panels carry 1px inner-stroke at 40% opacity in frost-pearl. ## Imagery and Motifs Imagery is custom-illustration: hand-drawn SVG scrapbook ephemera - butterflies, glitter stars, hearts, ribbons, washi-tape strips, polaroid frame outlines - rendered in 1.8px warm-iron strokes with selective pink/yellow fills. Each scrapbook card carries 2-3 of these decorations affixed at off-angles. Motifs are particle-effects: tiny SVG sparkle particles continuously drifting and twinkling across the page, gathering more densely around the hero wordmark and around hovered elements. Stars, hearts, and 4-point sparkles range from 4-12px and twinkle on independent infinite loops. A recurring "haru-plus heart-with-sparkle" sigil anchors each section. ## Prompts for Implementation Build haru.plus as a frosted scrapbook with continuous twinkle. Implement particle-effect motifs via JavaScript: 60-80 small SVG particles (sparkles, hearts, stars) drift slowly across the page on continuous translateX + translateY paths, each particle on its own 12-24s loop with random offsets. Particles twinkle (scale 0.7 to 1.2 with opacity 30% to 100%) on 1.4-2.2s independent cycles. Implement micro-interactions across every interactive element: hover on any sticker, button, or link spawns a burst of 5-8 new particles emanating from the cursor point with 800ms decay, and the hovered element scales 1.06x with a 220ms cubic-bezier spring. Scrapbook cards enter on scroll with a tilt-shift: each card starts at 0 tilt and rotates to its resting -1 to +1.5 degree as it enters viewport over 600ms. Avoid CTA banks - the page ends with a hand-drawn polaroid stack and a phrase-sticker "thanks for stopping by, friend." in italic Quicksand. The narrative is grounded-earthy: "I keep things. I tilt them. I add glitter. It is okay." ## Uniqueness Notes - Combines McBling sticker-and-sparkle scrapbook aesthetics with backdrop-filter frosted glassmorphic panels on warm earthy soil tones - bling meets grounded earth. - Implements 60-80 continuously twinkling SVG particle-effect motifs that respond to cursor hover by spawning 5-8 additional particles per interaction. - Voice is grounded-earthy plainspoken despite maximal visual kitsch, producing intentional tonal dissonance with the McBling aesthetic. - Chosen seed/style: mcbling aesthetic, single-column layout, geometric-sans typography, translucent-frost palette, micro-interactions pattern, custom-illustration imagery, particle-effects motifs, grounded-earthy 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 mcbling aesthetic (1%), single-column (11%), geometric-sans (5%), translucent-frost (2%), micro-interactions (4%), custom-illustration (2%), particle-effects motifs (1%), and grounded-earthy tone (3%).