# Design Language for amamiya-hompo.net ## Aesthetics and Tone amamiya-hompo.net is the late-night flagship storefront of an imagined traditional Japanese sweets house ("甘味屋本舗 / amamiya hompo" = sweets shop main store), translated into a moody, glassmorphic, after-hours dreamscape. The site is set in the silent moments after the shop has closed: the lights are dimmed, the wagashi (Japanese sweets) sit behind frosted glass cases catching aurora-light from the evening sky, and a single quiet narrator hovers behind the counter recounting the history and craft of each confection. This is not a daylight retail experience -- this is the shop after midnight, when the candies are dreaming. The aesthetic is **glassmorphism** in service of a moody nocturnal atmosphere -- frosted translucent panels stacked over a deep aurora-gradient backdrop, with subtle backdrop-filter blur creating layered depth. But the glass here is not the bright corporate-iOS variant; this is glass shelves in a darkened shop, glass display cases lit from below by moon-blue under-shelf lighting, glass jars of sugar crystals catching aurora reflections. The translucency feels material and physical, not flat-design ornamental. The tone is **mysterious-moody** -- hushed, slightly enigmatic, narrated by an unseen master confectioner. Headlines are cryptic and inviting: "what dreams the dorayaki," "the crystal night of mizuyokan." Body copy describes each sweet with poetic precision -- the texture of azuki, the layering of yokan, the crystalline glaze of kingyokuto -- in a voice that suggests centuries of accumulated craft. There is no "shop our collection" or "order online" energy. The site reads like a curatorial essay about the spirit of wagashi after closing. A persistent aurora-gradient backdrop suffuses every viewport with slowly-shifting violet, cyan, and rose-pink luminance, like northern lights captured in a neighborhood corner shop's window glass. Floating glassmorphic panels drift gently in space, catching the aurora and rendering each wagashi specimen in soft frosted relief. ## Layout Motifs and Structure **Full-Bleed Composition (immersive depth):** The entire site is built as a single continuous full-bleed scroll experience -- no max-width container, no grid columns visible to the user, no card boundaries. Each section occupies the full viewport edge-to-edge, with content elements (glass panels, floating objects, headlines) positioned freely in space using absolute positioning and depth-implying transforms. There are 7 distinct full-bleed scenes, each a moment in the after-hours shop: 1. **Closed sign / entry:** Dark storefront window with one warm light still glowing inside. 2. **The display case:** Hovering glass cases showing 4-5 wagashi specimens in cross-section. 3. **Crystallography of yokan:** A single specimen in glass case, with annotated cross-section. 4. **The mochi room:** Floating mochi spheres drifting against an aurora backdrop. 5. **Sugar archive:** Hovering jars of crystallized sugar in various hues. 6. **Recipe whispers:** A long-form essay on the craft and lineage of the shop. 7. **Goodnight:** Closing scene with shop lights dimming, aurora fading. **Glassmorphic Panel System:** The primary content container is a glassmorphic panel -- a rectangular surface with `backdrop-filter: blur(24px) saturate(140%)`, a 1px border in `rgba(255, 255, 255, 0.18)`, a translucent fill (`rgba(255, 255, 255, 0.06)` to `rgba(255, 255, 255, 0.12)` depending on emphasis), and an inner soft shadow suggesting the glass thickness. Each panel has rounded corners (16px) and a subtle 2px outer glow in a palette accent color. Multiple glassmorphic panels overlap at varying z-depths, with the rear-most panels having heavier blur and lower opacity (10-15%) and the foremost panels having lighter blur and higher opacity (45-55%). This creates a sense of glass-shelves stacked in space. **Floating Elements (the wagashi themselves):** The wagashi specimens (dorayaki, mochi, yokan, mizuyokan, kingyokuto, dango, monaka) are rendered as detailed SVG illustrations and float freely in the composition with gentle continuous animation. Each specimen drifts with translateY/X transforms over 8-15 second cycles, with subtle rotation (max ±3deg). They cast soft glows in palette colors. Specimens hover at varying z-depths, with parallax response to scroll. **Morph Pattern Behavior:** Section transitions use the **morph** pattern -- as the user scrolls between scenes, the glassmorphic panels reshape via SVG path morphing, and floating wagashi specimens transform from one form to another (e.g., a mochi sphere morphs into a wagashi hexagon, then into a sugar crystal cluster). The morph animations are continuous and slow (1200-1800ms) using catmull-rom spline interpolation between path keyframes. Wagashi morphing reinforces the sense that the entire site is a dream where forms are not fixed. **No Conventional Navigation Bar.** Instead, a small glass orb (32px) floats in the lower-right corner. Hovering causes 7 small orbs to emerge in a vertical column, each labeled with a section name in tiny geometric-sans typography. The orbs themselves are smaller glassmorphic panels with the same backdrop-filter treatment. ## Typography and Palette **Primary Display Font:** "Outfit" (Google Fonts) -- a geometric variable sans with rounded terminals and modern proportions. Used for all hero headlines and section titles. Weight 200 for atmospheric large display, weight 600 for emphasis. Letter-spacing -0.02em at large sizes, +0.02em at small sizes. The geometric-sans choice provides a contemporary counter-balance to the traditional Japanese subject matter. **Secondary Display Font:** "Manrope" (Google Fonts) -- a contemporary sans with subtle humanist influence. Weight 300 used for subheadings and longer narrative voice. **Body Font:** "Manrope" weight 400, used for prose body copy. Line-height 1.7, letter-spacing 0.005em. **Japanese Voice Font:** "Klee One" (Google Fonts) -- a Japanese textbook-style font with a slightly hand-written feel. Weight 400 used for the wagashi names rendered in kanji/hiragana (どらやき, 練り切り, 水羊羹, etc.) and short Japanese phrases interspersed in the narrative. **Type Scale:** - Hero phrase: clamp(80px, 10vw, 168px) -- Outfit weight 200, very airy - H1 / Scene title: clamp(56px, 6vw, 88px) -- Outfit weight 600 - Wagashi name (Japanese): clamp(36px, 4vw, 56px) -- Klee One weight 400 - H2: clamp(28px, 2.8vw, 36px) -- Outfit weight 600 - H3: clamp(20px, 1.8vw, 24px) -- Outfit weight 500 - Body: clamp(16px, 1.1vw, 18px) -- Manrope weight 400 - Caption: 13px Manrope weight 300, italic - Glass panel UI label: 11px Outfit weight 500, letter-spacing 0.12em uppercase **Palette (Aurora-Gradient, after-hours nocturnal):** - Vault deep: `#0a0d1a` (the deepest backdrop, the shop after-hours sky) - Vault midnight: `#161830` (slight elevation in the gradient) - Aurora violet: `#5b3d7a` (primary aurora hue) - Aurora cyan: `#3d8a9b` (secondary aurora hue) - Aurora rose: `#a45d7e` (tertiary aurora hue) - Aurora cream: `#f0d4c8` (warm highlight, used for warm-light spill in panels) - Glass surface: `rgba(255, 255, 255, 0.08)` (the base glassmorphic fill) - Glass border: `rgba(255, 255, 255, 0.20)` (panel hairline) - Inner shadow: `rgba(0, 0, 0, 0.30)` (glass thickness shadow inside panels) - Body text: `#e8e2d2` (warm parchment cream, readable on dark backdrop) - Sugar highlight: `#f8e8c4` (used for wagashi crystallization details) - Azuki red: `#86344a` (the bean-paste color, used for one wagashi specimen and one accent) The aurora gradient is animated: a multi-stop `radial-gradient` with 4 stops shifting in position over 60-second cycles, creating slow auroral movement across the backdrop. The gradient never fully resolves to a stable shape -- it is in continuous gentle drift. ## Imagery and Motifs **Wagashi Specimen Illustrations (the unifying decorative vocabulary):** The site features 9-12 hand-drawn SVG illustrations of traditional Japanese sweets, each rendered with: - Detailed cross-section views showing internal structure (azuki layer, yokan jelly, mochi skin) - Illustration style: soft fills + 1px outline strokes in cream/sugar-highlight color - Color drawn from the palette: primarily cream and aurora-cream, with azuki accents - Each specimen sits at approximately 240-400px and floats with continuous drift animation Specific wagashi specimens to feature: - **Dorayaki:** Two pancakes with azuki paste filling, cross-section view - **Mochi:** Spherical, with subtle dimpling suggesting hand-shaped texture - **Yokan:** Block of jellied azuki, slightly translucent edges - **Mizuyokan:** Pale, translucent summer yokan with a single cherry blossom embedded - **Kingyokuto:** Crystal-clear sugar jelly with imitation goldfish shape inside - **Dango:** Three balls on a stick, glazed in mitarashi sauce - **Monaka:** Crisp wafer shells filled with paste, partially open **Collage Imagery (the decorative ornamentation):** Scattered around and behind the glassmorphic panels are **collage** imagery elements drawn from traditional Japanese material culture: - Torn paper edges with washi-paper texture - Faded woodblock-print fragments (waves, mountains, cranes) - Hand-written kanji characters in calligraphic ink - Old shop receipts and ledger fragments - Snippets of traditional patterns (asanoha, seigaiha, kikko) These collage elements are rendered as semi-transparent layers (10-25% opacity), drifting at slow parallax velocities. They suggest the deep cultural memory of the shop. **Aurora Backdrop:** The aurora itself is a CSS-animated multi-stop radial gradient drifting slowly across the viewport background, layered beneath all glassmorphic panels. The aurora's hues blend violet, cyan, and rose-pink in soft luminous bands, never fully resolving. Light sources within the aurora cast soft glow halos onto the front-facing glass panels. **Floating Light Particles:** Small luminous dots (3-6px) drift slowly upward in the background, suggesting sugar crystal dust or distant lantern fireflies. Density 8-14 per viewport, with random translateY animations over 18-32 seconds. Color: aurora-cream, opacity 25-65%. **Photography:** Forbidden. All imagery is hand-drawn SVG illustration. ## Prompts for Implementation **Storytelling Frame:** The visitor enters the after-hours shop and is gently guided through 7 scenes, each a different chamber or specimen of the wagashi craft. The narrator is unseen but present. Each scene contributes a small piece to the site's overall meditation on tradition, craft, and the strange beauty of confections viewed at midnight. The site is short to read but rewards lingering. **Scene Implementation Pattern:** Each scene is a full-bleed `section` element occupying 130vh of scroll. Within each scene: - The aurora backdrop continues uninterrupted (it is fixed-position). - 1-3 glassmorphic panels float at various z-depths and positions, holding the content for the scene. - 2-5 wagashi specimen illustrations float in space with continuous drift animations. - 8-14 small light particles drift in the background. - 1-3 collage element fragments drift at slow parallax velocities. **Glassmorphic Panel Implementation:** ```css .glass-panel { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.20); } ``` Panels at deeper z-index get heavier blur (32-40px) and lower opacity. Panels at front get lighter blur (16-20px) and higher opacity (15-22% fill). **Morph Animation Implementation:** - Wagashi specimens have 3-4 stored SVG path variants. Animation interpolates between paths over 1200-1800ms using a path-morphing library or hand-coded path interpolation. - Glassmorphic panels animate `border-radius` values (e.g., from 16px uniform to 32px/8px/24px/16px asymmetric) on scene transition, suggesting that the glass itself is reshaping. - Background aurora gradient animates `background-position` over 60s linear infinite, creating slow auroral drift. **Floating Animation Implementation:** Each wagashi specimen has 3 simultaneous CSS keyframe animations: - translateY oscillation: -8px → +8px → -8px over 9-13s, ease-in-out - translateX oscillation: -4px → +4px → -4px over 11-15s, ease-in-out (different period creates non-repeating drift) - rotation: -2deg → +2deg → -2deg over 16-20s, ease-in-out **Cursor and Hover Affordances:** - Cursor is replaced with a small glass orb (12px) on desktop, with a soft inner glow. - Hovering a wagashi specimen causes it to scale 1.05x and the orb glow to intensify. - Hovering a glass panel causes its inner brightness to lift slightly (from rgba(255,255,255,0.08) to 0.12). **Avoid Absolutely:** - Bright daylight imagery; the shop is firmly after-hours. - Solid (non-translucent) cards or panels. - Hard-edged geometric ornament that doesn't accept the glass + aurora aesthetic. - Photography, including stock photos of pastries or storefronts. - Hero CTAs, "shop now" buttons, e-commerce affordances. This is not a store. - Carousel sliders, accordion panels, modal dialogs. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Glassmorphism executed at full atmospheric system level rather than as a one-off card style** -- multiple stacked translucent panels at varying depths, with backdrop-filter creating real layered glass. Glassmorphism aesthetic is at 7% in corpus, but this implementation is unusually committed. 2. **Aurora-gradient backdrop animated across 60-second cycles** -- a continuous slow auroral drift backdrop is rare in the corpus. Aurora-gradient palette at 2% frequency. 3. **Wagashi specimen illustrations as central imagery** -- detailed cross-section illustrations of traditional Japanese sweets, hand-drawn in SVG, treated as floating specimens. Distinct from the corpus' typical photography or generic geometric ornament. 4. **Morph pattern executed at SVG-path level for wagashi specimens** -- each specimen continuously morphs between forms, reinforcing the dream-like quality. Morph pattern is non-trivial in the corpus. 5. **Mysterious-moody after-hours framing** -- the conceit that the shop is being shown after closing, when the candies are dreaming, gives the site a distinct narrative voice that few in the corpus share. 6. **Distinct from other amamiya/amamya domains in this batch** -- this site frames the brand as a traditional flagship storefront ("hompo / 本舗 = main store"), with deep cultural reference and material specificity. Other amamiya/amamya variants will frame the brand differently (urban, experimental, etc.). **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: glassmorphism, layout: full-bleed, typography: geometric-sans, palette: aurora-gradient, patterns: morph, imagery: collage, motifs: floating-elements, tone: mysterious-moody **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (99%, broadly), "muted" palette (50%). - Embracing under-used patterns: glassmorphism (7%, but uncommonly committed implementation), aurora-gradient palette (2%), collage imagery (3%), floating-elements motif, morph pattern. - Geometric-sans typography common, but the specific Outfit weight 200 + Klee One Japanese pairing is distinctive.