# Design Language for haru.quest ## Aesthetics and Tone Haru.quest is a cottagecore working-papers portfolio - a single-column vertical scroll that reads like a hand-stitched bullet journal kept by a freelance professional living in a cottage and serving cosmopolitan dopamine-neon clients. The aesthetic is paradoxical: cottagecore textures (grain overlay, hand-drawn flourishes, soft pastoral framing) paired with a screaming dopamine-neon palette that turns every accent into a candy-bright punch. Tone is rigorously professional: this is a CV-meets-portfolio that wants to be hired, presented in cottagecore drag. Inspiration: contemporary cottagecore Instagram aesthetics, William Morris wallpaper studies, the dopamine-decor color trend, vintage Penguin Book paperback covers, and Letraset transfer-lettering of the 1970s. ## Layout Motifs and Structure The page is a strict single column 680px wide, set against a cream paper backdrop with subtle grain texture. Each section is one resume-style block: project title, slab-serif heading, two-paragraph description, hand-drawn flourish divider. The single-column constraint never wavers - everything stacks. Each section has a small organic-blob shape positioned to the left of its title acting as a section anchor, with the blob filled in a different dopamine-neon color per section. The page opens with a 60vh hero containing only the wordmark, a tagline, and a horizontal flourish divider. Below: 6-9 project blocks in vertical sequence. Mobile preserves the column at 92vw. ## Typography and Palette Headlines use Alfa Slab One at clamp(2.6rem, 5.5vw, 4.6rem), a heavy industrial slab-serif with vintage poster energy, set at weight 400 (its only weight), tight tracking -1%. Subheads use Roboto Slab Medium at 1.4rem. Body copy is set in Roboto Slab Light at 1.05rem with 1.75 line-height. Section metadata uses Roboto Slab ExtraLight at 0.84rem uppercase letter-spacing 0.10em. Palette is dopamine-neon over cottage cream: cream-paper #F5EDDE (background), grain-warm-iron #4A3E2E (primary ink), and the dopamine accents - electric-magenta #FF2D6F, neon-lime #C7F84A, blaze-orange #FF6B1A, cyber-cyan #20D8E8, sunshine-yellow #FFD93D. Each section gets one dopamine accent. The grain overlay is 1.5% noise applied to background. No pure black or pure white. ## Imagery and Motifs Imagery is grain-overlay: every photograph and illustration in the portfolio is presented with a heavy film-grain SVG filter overlay (8-12% noise opacity, multiply blend) that lends a cottagecore vintage-print quality. Project screenshots and case-study photos are framed inside hand-drawn organic-blob clip-paths instead of rectangles. Motifs reference organic-blobs: each section's left-side anchor is a unique amoeboid blob with a wobbly hand-drawn edge, filled in that section's dopamine color. Smaller decorative blob-clusters appear as bullet markers. A recurring hand-drawn "ribbon" SVG flourish (with a small star at one end) divides sections. Tiny flower-cluster glyphs serve as paragraph terminals. ## Prompts for Implementation Build haru.quest as a cottagecore working-papers ledger. Each section enters with a tilt-3d pattern: the project block rotates from rotateX(8deg) translateZ(-40px) into rotateX(0) translateZ(0) over 720ms with cubic-bezier ease, simulating the page settling onto the table. Implement perspective: 1200px on the container so the tilt feels physical. Cards sit on a perspective floor; on hover, the block tilts subtly back -2deg with a 280ms ease. Organic-blob section anchors path-draw on entry (1.2s SVG stroke-dasharray reveal), then fill-in with their dopamine color over 400ms. Ribbon dividers between sections also path-draw left-to-right over 600ms. Grain overlay is a static SVG feTurbulence filter applied as a noise layer. Hover on project images causes the grain to subtly intensify (filter opacity 12% to 18%). Avoid CTA banks - the resume ends with a single hand-drawn signature flourish and contact line. The narrative is professional and matter-of-fact: "I do this. I have done it. Here are receipts." ## Uniqueness Notes - Combines cottagecore grain-overlay aesthetics with screaming dopamine-neon section accents - hand-stitched paper backdrop punched through by candy-bright color. - Implements tilt-3d card-entry where each section literally settles onto a perspective floor, with hover tilting it back -2deg for tactile feedback. - Frames all project imagery inside hand-drawn organic-blob clip-paths instead of rectangles, eliminating photo-rectangle vocabulary entirely. - Chosen seed/style: cottagecore aesthetic, single-column layout, slab-serif typography, dopamine-neon palette, tilt-3d pattern, grain-overlay imagery, organic-blobs motifs, professional 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 cottagecore (1%), single-column (11%), slab-serif (4%), dopamine-neon palette (2%), tilt-3d (3%), grain-overlay imagery (2%), organic-blobs motifs (6%), and professional tone variant (7%).