# Design Language for maneki.moe ## Aesthetics and Tone maneki.moe celebrates the maneki-neko (招き猫), the iconic Japanese beckoning cat figurine believed to bring good fortune. The .moe domain signals otaku subculture affection, so the design embraces a Y2K-futurism aesthetic -- chrome surfaces, candy-bright colors, holographic sheen, and the playful maximalism of early-2000s Japanese web culture. Imagine a virtual lucky cat shrine rendered as a Harajuku-meets-Akihabara digital boutique, where every element gleams with the optimistic, over-the-top exuberance of Y2K pop design. The tone is optimistic-bright and whimsical-creative -- a celebration of luck, cuteness, and the delightful absurdity of a ceramic cat beckoning prosperity into your life. The site treats the maneki-neko not as a mere souvenir but as a cultural icon deserving of a shrine that is itself a work of maximalist pop art. ## Layout Motifs and Structure **Primary layout: bento-box** grid with **diagonal-sections** creating dynamic visual energy. The page uses a bento-box CSS grid system where content panels of varying sizes are arranged in an asymmetric but balanced composition. Grid cells range from 1x1 to 2x3 units, with gaps of 4px filled with holographic gradient borders. The overall grid tilts subtly (transform: rotate(-1.5deg) on the grid container) to break the rigidity and inject playful energy. **Spatial relationships**: The page is divided into three major zones. Zone 1 (hero) features a large central maneki-neko illustration with animated beckoning paw. Zone 2 (middle) presents cat lore, regional variations, and color meanings in bento-box panels. Zone 3 (bottom) is a "fortune generator" interactive section. **Navigation**: A horizontal tab strip at the top, styled as a row of small maneki-neko paw icons. Each paw represents a section. On hover, the paw beckons (CSS animation rotateZ oscillation). The active paw glows with the chrome-metallic sheen. Background is semi-transparent frosted glass (backdrop-filter: blur(8px)) with candy-bright border-bottom. ## Typography and Palette **Typography** - **Display / Headlines:** "Bungee" (Google Fonts) -- a heavy, blocky display font designed for eye-catching signage. Used at 3rem-6rem, weight 400. Its chunky, architectural letterforms evoke the bold signage of Akihabara storefronts and pachinko parlors. - **Body / Cat Lore:** "M PLUS Rounded 1c" (Google Fonts) -- a rounded Japanese-compatible sans-serif with inherent kawaii (cute) energy. Weight 400 for body, 700 for emphasis. Line-height 1.7. 16px size. - **Accent / Fortune Text:** "Kosugi Maru" (Google Fonts) -- a rounded Gothic Japanese font used for fortune messages and cultural annotations. Weight 400. Its softness enhances the playful, friendly character. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Lucky Red | Bright vermilion red | #e63946 | | Gold Coin | Rich metallic gold | #ffd700 | | Sakura Cream | Soft pink-cream | #ffe4e9 | | Chrome Silver | Reflective metallic gray | #c0c0c8 | | Candy Cyan | Bright aqua | #00d4ff | | Deep Lacquer | Dark lacquered black | #1a0a0a | | Holographic Iris | Iridescent purple-pink | #c471ed | The palette channels the chromatic excess of Y2K design -- metallic golds, holographic purples, candy brights -- unified by the traditional lucky red and gold of the maneki-neko itself. ## Imagery and Motifs **Core Visual Motifs** 1. **Beckoning Paw Animation**: The hero section features a large maneki-neko silhouette (CSS/SVG) with an animated right paw that perpetually beckons. The animation uses a spring-physics keyframe: quick upward rotation (0.3s), hold (0.5s), slow return (0.8s), pause (1.2s), repeat. The paw motion is the site's signature interaction. 2. **Holographic Card Panels**: Each bento-box grid cell has a border that cycles through a holographic gradient (linear-gradient with hue-rotate animation, 6s infinite). The gradient moves diagonally across the border, creating the rainbow-shimmer effect of holographic trading cards. On hover, the card tilts slightly (perspective + rotateX/Y based on cursor position via JS) creating a 3D tilt effect. 3. **Floating Coin Particles**: Small gold coin shapes (CSS circles with Gold Coin fill and a subtle radial-gradient highlight) drift upward across the viewport in a lazy, randomized pattern. 15-20 coins visible at any time, each with unique animation-duration (8-15s) and horizontal drift. They reference the wealth-attraction power of the maneki-neko. 4. **Chrome Text Gradient**: Major headlines use a chrome-metallic text effect -- background-clip: text with a linear-gradient from Chrome Silver through white to Chrome Silver, with a subtle animation that slides the gradient highlight across the text (background-position animation, 3s infinite). 5. **Koban (Coin) Dividers**: Section dividers use a repeated oval coin shape (the koban, an Edo-period gold coin often held by maneki-neko figurines) rendered as CSS ovals with embossed text shadows. ## Prompts for Implementation **Storytelling and Narrative Arc** The site opens with a dramatic entrance: the Deep Lacquer background, then a single beckoning paw descends from above (translateY animation from -100vh). As it enters the viewport, it "beckons" three times, and with each beckon, elements appear: first the title "MANEKI" in chrome gradient, then "MOE" in candy-bright colors, then the subtitle in Japanese. Floating coins begin after the entrance completes. Zone 2 tells the story of the maneki-neko through bento-box panels that slide-reveal into view as the user scrolls. Each panel covers a different aspect: the legend of origin (Gotokuji Temple), the meaning of each color variant (white for purity, black for protection, gold for wealth, pink for love), the beckoning direction (left paw for customers, right paw for money), and regional variations across Asia. Zone 3 is interactive -- a "fortune generator" where the user clicks the beckoning cat and receives a randomly generated fortune message styled as an omikuji (fortune slip). The fortune slip unfolds with a CSS animation (scaleY from 0 to 1, transformOrigin top) revealing the message in Kosugi Maru font. **Animation Priorities** - Beckoning paw spring animation (CSS keyframes with cubic-bezier timing) - Holographic border gradient rotation (CSS hue-rotate on border-image or background) - 3D card tilt on hover (JS mousemove listener calculating rotateX/Y from cursor position relative to card center) - Floating coin particle system (CSS keyframes with randomized properties via CSS custom properties set by JS) - Chrome text gradient slide (CSS background-position animation on background-clip: text elements) - Fortune slip unfolding (CSS scaleY transition triggered by click) **Full-screen Narrative Experience**: Hero section fills 100vh. Bento grid sections use auto-height with generous padding. The fortune generator section fills 100vh for focused interaction. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, corporate styling, muted palettes, serious tones, hamburger menus. ## Uniqueness Notes **Differentiators:** 1. **Y2K chrome-holographic aesthetic applied to traditional cultural icon**: Combining early-2000s web maximalism (chrome gradients, holographic borders, candy colors) with a centuries-old Japanese lucky charm creates a unique cultural-temporal collision. 2. **Bento-box grid with diagonal tilt**: The slightly rotated grid container breaks conventional orthogonal layout expectations, creating visual dynamism unique in the batch. 3. **Interactive fortune generator**: The omikuji-style fortune slip mechanic provides a unique interactive element -- a playful divination tool that gives the visitor a reason to return and click again. 4. **Spring-physics beckoning paw as site mascot**: The perpetually beckoning cat paw serves as both ambient animation and site identity marker, functioning like a living logo. **Chosen seed/style:** y2k chrome metallic fashion **Avoided overused patterns:** corporate aesthetic (89%), centered-only layout (87%), minimal imagery (84%), counter-animate (90%), mysterious-moody tone (96%), mono typography (92%). Instead used bento-box with diagonal-sections layout, optimistic-bright tone, playful-rounded typography, and candy-bright palette with chrome-metallic accents.