# Design Language for makiya.boo ## Aesthetics and Tone makiya.boo is a personal digital garden -- a cozy, ghost-themed scrapbook where someone named Makiya collects thoughts, doodles, book notes, and small creative experiments. The .boo TLD sets the mood: playful spookiness layered over cottagecore warmth, like a haunted cottage where the ghosts are friendly and leave wildflowers on the windowsill. The aesthetic is cottagecore-meets-fairycore with a gentle Halloween twist: dried flower pressings alongside tiny cartoon ghosts, handwritten marginalia beside moth-wing illustrations, all set against backgrounds that feel like well-loved linen. The tone is whimsical-creative and pastoral-romantic, evoking the experience of flipping through a beloved journal found in a secondhand bookshop -- intimate, imperfect, and full of surprising little treasures tucked between pages. ## Layout Motifs and Structure **Primary layout: masonry with organic-flow** The page is organized as a masonry grid of irregularly-sized content cards, each representing a journal entry, doodle, book note, or creative fragment. Cards range from 1x1 (small quote or doodle) to 2x2 (longer essay or illustration) within a responsive masonry column system (3 columns on desktop, 2 on tablet, 1 on mobile). The organic-flow comes from subtle random rotations applied to each card via CSS custom properties: each card rotates between -1.5deg and +1.5deg, creating the scattered-papers-on-a-table effect of a physical scrapbook. **Card Styles (5 variants, randomly assigned):** 1. **Torn Paper**: White card with irregular clip-path top/bottom edges simulating torn paper. 2. **Polaroid**: Image card with thick white bottom border containing a handwritten caption. 3. **Sticky Note**: Pale yellow (#fff8dc) square with a subtle fold shadow at top-right corner. 4. **Pressed Flower**: Transparent card with only a border-image using a watercolor floral frame. 5. **Ghost Note**: Translucent card (background: rgba(255,255,255,0.7) with backdrop-filter: blur(4px)) featuring a tiny ghost doodle in the corner. **Navigation:** A horizontal ribbon at the top styled as a cloth label sewn onto the page -- stitched border effect created with a dashed border (4px dash, 6px gap) in Dried Rose. Contains navigation items styled as handwritten tags. Active tag has a small hand-drawn circle around it (SVG, imperfect circle path). **Footer:** A field of tiny CSS-generated wildflowers (circles and triangles in muted greens and pinks) grows along the bottom edge of the viewport, swaying gently with a CSS keyframe animation (2-3 degree rotation, 3s cycle, staggered starts). ## Typography and Palette **Typography:** - **Display / Section Titles:** "Caveat" (Google Fonts) -- a handwritten script font with a natural, unforced quality that looks like real pen-on-paper lettering. Used at clamp(2rem, 5vw, 4rem), weight 700. Its irregular baseline and varying stroke width prevent it from feeling digitally uniform. - **Body / Journal Entries:** "Nunito" (Google Fonts) -- a warmly rounded sans-serif with excellent readability and a friendly, approachable personality. Weight 400 for body, 700 for emphasis. 16px base, line-height 1.75. Pairs well with the handwritten display font by providing structure without rigidity. - **Annotations / Marginalia:** "Kalam" (Google Fonts) -- a handwriting font with a more casual, scribbled quality than Caveat. Used at 13-14px for small annotations, photo captions, and aside notes within journal entries. Its slightly messy character adds personality layers. - **Dates / Tags:** "Karla" (Google Fonts) -- a clean grotesque sans-serif used at 11px, weight 500, uppercase, letter-spacing 0.1em, for dates, category tags, and metadata. Provides a grounding counterpoint to the handwritten fonts. **Palette:** | Role | Color | Hex | |------|-------|-----| | Linen Cream | Primary background | #f9f4ef | | Ghost White | Card backgrounds | #ffffff | | Dried Rose | Primary accent | #c9917a | | Moth Wing | Secondary warm | #a88b6e | | Pressed Sage | Botanical green | #8fa68a | | Bruised Plum | Deep accent / links | #6b4c6e | | Ink Scratch | Text color | #3d3535 | | Candle Glow | Highlight / hover | #f5deb3 | The palette lives in the creamy-pastel and warm-earthy intersection, avoiding the overused gradient schemes entirely. Every color references a physical material: linen, dried flowers, moth wings, pressed herbs, plum ink, candle wax. The warmth is achieved through yellow and red undertones in every swatch, with Bruised Plum providing just enough cool contrast for interactive elements. ## Imagery and Motifs **Core Visual Motifs:** 1. **Friendly Ghost Doodles**: Small hand-drawn ghost characters (CSS-created using border-radius: 50% 50% 45% 45% shapes with two dot eyes and an open mouth) appear as decorative elements throughout the site. Three ghost variations: shy (eyes looking down), waving (one arm extended via a pseudo-element), and reading (holding a tiny rectangle "book"). Ghosts are rendered in Ghost White with a 1px Moth Wing outline. They appear at random card corners, peeking from behind content blocks, and occasionally floating across the screen on a slow horizontal CSS animation (translateX -100vw to 100vw, 45 seconds, infinite, linear). 2. **Pressed Flower Fragments**: SVG botanical silhouettes (simplified leaf shapes, daisy outlines, fern fronds) rendered as single-color shapes in Pressed Sage at 0.15 opacity. Scattered across the Linen Cream background as a repeating pattern tile (300x300px, 6-8 botanical shapes per tile, rotated at varied angles). This creates the impression of flowers pressed between the pages of the journal. 3. **Washi Tape Strips**: Horizontal decorative strips (CSS rectangles, 24px tall, semi-transparent) in alternating Dried Rose, Candle Glow, and Pressed Sage at 0.4 opacity, with a subtle repeating diagonal stripe pattern (created via repeating-linear-gradient). Used to visually "tape" content cards to the page, appearing at the top edge of select cards with a slight rotation (-2deg to +2deg). 4. **Stitch Lines**: Dashed borders (2px dash, 4px gap) in Dried Rose simulate hand-sewn stitching around the navigation ribbon, around special highlighted cards, and as horizontal section dividers. The stitches are rendered with a slight imperfection: the dash-gap pattern varies between 2-3px dash and 4-5px gap using a background-image linear gradient approach rather than uniform border-style. 5. **Moon Phase Indicator**: A tiny moon phase display in the top-right corner shows the current lunar phase as a CSS-drawn circle with partial shadow overlay. Updates based on a simple JS date calculation. The moon shifts through Candle Glow, Ghost White, and Bruised Plum tones across its phases. This adds a living, temporal quality that connects the digital garden to natural rhythms. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens gently. The Linen Cream background is already present -- no dramatic black-to-reveal. Instead, content cards fade-reveal in a stagger pattern (100ms between cards, opacity 0 to 1 + translateY: 12px to 0, 400ms each, ease-out) creating the effect of journal pages settling onto a table. The first card to appear is always a "welcome" Ghost Note card featuring the largest ghost doodle (waving variant, 80px tall) and a handwritten greeting in Caveat: "welcome to my little corner." The navigation ribbon slides down from above (translateY: -20px to 0, 500ms) as if being unrolled. **Card Interaction:** Hovering over any card applies a gentle lift (translateY: -4px, box-shadow expansion from 2px to 8px blur, transition 200ms ease-out) and the card's rotation resets to 0deg, as if being picked up and straightened for reading. The washi tape strip on the card, if present, remains at its original rotation, creating a pleasing separation between the tape and the card beneath. Clicking a card opens it into an expanded view (scale from card size to 80vw centered overlay, 300ms spring animation) with a translucent Linen Cream backdrop blur overlay on the masonry behind it. **Seasonal Micro-Animations:** Based on the current month (JS Date), the footer wildflower field changes: spring shows colorful blooming flowers, summer has full green foliage, autumn drops tiny leaf particles (CSS keyframe, 15 leaves, random horizontal positions, falling at 0.8-1.2s), winter shows bare stems with occasional snowflake particles. This creates return-visit delight and temporal grounding. **Ghost Parade (Easter Egg):** If the user scrolls to the very bottom of the page and pauses for 5 seconds, a parade of 5 ghost doodles floats across the footer area from left to right (stagger: 800ms, float animation with gentle sine-wave vertical bobbing, 8 seconds per ghost). Each ghost carries a different object (book, flower, teacup, candle, letter). The parade happens only once per session. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate aesthetics, sharp geometric precision, dark mode, monospace typography dominance, photography-heavy sections. **EMPHASIZE:** Handcrafted imperfection, physical-material references, gentle hover responses, seasonal awareness, hidden delights, intimate journal voice, the feeling of holding something soft and well-loved. ## Uniqueness Notes **Differentiators:** 1. **Five card-style variants with physical-material metaphors**: No other design uses multiple card treatments within a single masonry grid, each referencing a different physical scrapbooking material (torn paper, polaroid, sticky note, pressed flower frame, ghost note). This variety prevents visual monotony and creates genuine scrapbook authenticity. 2. **Friendly ghost characters as decorative personality system**: The three ghost variants (shy, waving, reading) are not generic icons but character designs with distinct personalities. Their occasional floating animation and the Easter Egg ghost parade create a sense of inhabited space unique to this domain. 3. **Moon phase indicator as living temporal element**: A real-time lunar phase display connecting the digital space to natural cycles is not found in any other design. It transforms the site from a static portfolio into a living document aware of its relationship to time. 4. **Seasonal footer animations tied to real calendar date**: The dynamically changing wildflower field and particle effects based on the actual month create return-visit discovery and temporal specificity that no other design incorporates. 5. **Washi tape and stitch-line craft vocabulary**: The decorative language draws from physical Japanese stationery and textile crafts (washi tape, hand-stitching) creating a material-culture reference system entirely different from the digital-native motifs used in other designs. **Chosen seed/style:** cottagecore pastoral blog **Avoided overused patterns:** corporate aesthetic, centered-only layout, gradient palette, photography imagery, mysterious-moody tone, mono typography, counter-animate patterns **Preferred underused elements:** masonry layout, handwritten typography, creamy-pastel palette, bubble-playful motifs, whimsical-creative tone, botanical imagery, cottagecore aesthetic, fairycore elements