# Design Language for amamiya.monster ## Aesthetics and Tone amamiya.monster is a back-alley night-shop dispatch -- the imagined sweets shop ("甘味屋 / amamiya" = sweets shop) reframed as a streetwise after-hours operation in a dimly-lit Tokyo alley, where wagashi are sold from a hole-in-the-wall storefront that may or may not be officially licensed. The .monster TLD signals an outsider, half-feral, cult-following stance: this is the amamiya for people who know about it through a friend-of-a-friend, who walk down a particular alley after midnight to find the flickering shop sign, who order in a kind of code. The site treats the sweets-shop concept with raw-authentic attitude: gritty, urban, unpolished, slightly suspicious of polish itself. The aesthetic is **dark-mode** -- not the corporate "dark theme toggle" version, but committed dark-mode at a structural level: the page begins, lives, and ends in deep urban darkness, with only a few warm-amber pools of light revealing content. The light sources are diegetic: imagined lantern-glow from the alley shop, a flickering vending machine, a streetlamp two blocks over. The darkness is the canvas; light is the precious accent. The tone is **raw-authentic** -- unvarnished, slightly brusque, without marketing polish. Headlines read like graffiti tag lines or text-message shop instructions: "knock 3x. wait." "we make 12 mochi a night. don't ask twice." Body copy is short, present-tense, in first-person plural ("we make daifuku starting at 11pm. by 2am we have run out"). There are no flowery descriptions, no historical retrospectives, no curatorial voice. It is the shop owner's voice, terse and present. The site uses card-grid layout populated with glassmorphic-cards on the dark backdrop, each card representing one specific wagashi from tonight's shop -- with limited inventory, real-time-feeling sold-out states, and a sense that the user is browsing a constantly-changing alley menu. ## Layout Motifs and Structure **Card-Grid Architecture (the alley menu):** The dominant structural device is a 3-column card grid (responsive: 3 cols on desktop ≥1100px, 2 cols on tablet, 1 col on mobile). Each card represents one wagashi specimen available "tonight." The grid uses 32px gaps between cards, with cards of varying heights creating a packed-but-organic "masonry" feel. The card-grid is presented as the imagined alley shop's "tonight's menu" -- a list of what's available, what's nearly sold out, and what's gone for the night. Some cards have a "SOLD OUT" diagonal stamp; some have a "3 LEFT" tiny indicator; some are bright and full. The grid feels like a real-time window into a small, limited inventory. **Glassmorphic Cards on Dark:** Each card is a glassmorphic surface with: - Background: `rgba(40, 30, 22, 0.45)` (translucent warm dark over the deep alley backdrop) - backdrop-filter: blur(16px) saturate(120%) - 1px border in `rgba(212, 163, 115, 0.18)` (warm amber hairline) - Border-radius: 12px (slightly softer than corporate-rectangular, but not blob-soft) - Inner texture: a faint film-grain noise overlay at 4% opacity - Soft outer drop-glow in warm amber at 8% opacity The glassmorphism is rough rather than crystalline -- the blur is heavy enough that the backdrop is murky, and the surface texture suggests cracked vending-machine glass rather than corporate iOS pristine. **Card Content Composition:** Each wagashi card contains: - **Front face:** A line-illustration of the wagashi (top), the wagashi's hiragana/kanji name in big Klee One type, the romaji name below in mono-spaced Inter, a 1-line description, a price (e.g., "¥420"), and an inventory indicator ("3 LEFT," "SOLD OUT," or empty). - **Back face:** Recipe and lineage info — when it was first made, what it tastes like, what to eat with it. Rendered in smaller type with a single warm-amber accent rule between sections. **Card-Flip Pattern:** The interaction vocabulary centers on **card-flip** -- clicking any card causes a 3D Y-axis rotation animation (rotateY: 0deg → 180deg over 600ms with cubic-bezier(0.4, 0, 0.2, 1)) revealing the back face with detailed info. Clicking again flips back. The card-flip is the entire interaction system; there are no expandable accordions, no modal popups, no separate detail pages. Everything happens in-card via flip. The flip animation maintains the card's grid position; siblings do not move during the flip. CSS `transform-style: preserve-3d` plus `backface-visibility: hidden` on each face. The card has a deliberate slight bounce at the end of the flip (1deg overshoot) to feel mechanical and material. **Hero Header (above the grid):** The page opens with a dimly-lit hero section (60vh) showing only: - A flickering vending-machine-style sign reading "甘味屋" (amamiya) in large warm amber, with a CSS keyframe flicker animation (opacity 1.0 → 0.92 → 1.0 randomly every 4-7 seconds, suggesting electrical instability). - Below the sign: a single line of mono-spaced text reading "TONIGHT'S MENU // [current time, computed in JS] // [day of week]" - A small amber arrow pointing down to the grid below. **Footer (after the grid):** A small section with: - A line-drawn map fragment showing the location of the alley (anonymous, no street names). - The shop's "hours" rendered in mono: "23:00 — until we run out. some nights, never opens." - A single haiku-length closing line in italic Klee One. **City-Urban Motifs:** Scattered throughout the layout are small details suggesting the urban alley setting: - Faint "wet pavement" reflective hot-spots beneath the cards (subtle radial gradients in warm amber at low opacity) - Tiny "graffiti tag" SVG marks scattered as section ornaments - A static "rain falling" particle effect in the hero header (8-12 thin vertical streaks at 30% opacity) - Vending machine glass-pane reflections on the largest cards ## Typography and Palette **Primary Display Font:** "Space Grotesk" (Google Fonts) -- a contemporary grotesque-neo sans with subtle character quirks (unusual a, g, t terminals) and a slightly imperfect feel that suits the raw-authentic register. Used for all H1, H2, and primary card headlines. Weight 500 for headlines, weight 700 only for the largest hero treatments. Letter-spacing -0.01em above 32px. **Secondary Sans Font:** "Inter" (Google Fonts) -- weight 400 for card body copy and short descriptions. Slightly tighter line-height 1.45. **Japanese Display Font:** "Klee One" (Google Fonts) -- weight 600 for the wagashi names rendered in kanji/hiragana on each card. Klee One has a slightly hand-drawn quality that fits the back-alley shop register. **Mono Font:** "Space Mono" (Google Fonts) -- weight 400 for prices, inventory counts, the "TONIGHT'S MENU" header, and shop hours. Letter-spacing 0.04em. **Type Scale:** - Hero shop sign: clamp(96px, 12vw, 160px) -- Klee One weight 600 (Japanese only), with subtle text-shadow glow - H1 / Section title: clamp(40px, 4vw, 64px) -- Space Grotesk weight 700 - Card headline (Japanese): clamp(28px, 2.6vw, 36px) -- Klee One weight 600 - Card headline (Romaji): 14px -- Space Grotesk weight 500 - Body card text: 15px -- Inter weight 400 - Price: 16px -- Space Mono weight 400 - Inventory tag: 11px Space Mono weight 700, letter-spacing 0.10em uppercase - Shop hours: 13px Space Mono weight 400 **Palette (Earth-Tones, after-hours alley):** - Alley deep: `#0c0a08` (the deepest darkness, almost black) - Alley mid: `#181410` (slight elevation in the dark backdrop) - Wet asphalt: `#1f1a15` (used for ambient pavement tone) - Card glass fill: `rgba(40, 30, 22, 0.45)` (warm translucent over the alley backdrop) - Amber lantern: `#d4a373` (the primary warm light source -- shop sign, card border, key text) - Lantern bright: `#ecc491` (the brightest amber, used for the flickering sign at peak brightness) - Amber dim: `#7a5a3a` (faded amber, used for secondary annotations) - Body text: `#e8dccb` (cream paper, readable on the dark backdrop) - Caution red: `#c4512c` (used only for "SOLD OUT" stamps and a single graffiti tag) - Vending green: `#3a5a3a` (a faded fluorescent-green glow, used sparingly for one accent) The palette is dark, warm-shifted, and intentionally limited. Saturation is uniformly low. The amber pools of light are the only "bright" elements, and they exist in pools rather than washes. ## Imagery and Motifs **Wagashi Line-Illustrations on Cards:** Each card's primary visual element is a hand-drawn SVG line illustration of one specific wagashi, rendered in 1.5px strokes in amber-lantern color (#d4a373) on a transparent background. The illustrations are deliberately rough and slightly imperfect -- they look as if they were sketched on a bar napkin by the shop owner rather than commissioned from a designer. Each illustration is approximately 80-120px and centered in the upper portion of its card. Wagashi specimens covered (12 cards initially): - Daifuku, Dorayaki, Yokan, Mizuyokan, Kingyokuto (gold-jelly fish), Mochi, Dango, Monaka, Anpan, Manju, Warabimochi, Hanabira-mochi. **Glassmorphic-Cards (the visual base):** The cards themselves, as described in Layout, are glassmorphic in a rough, alley-glass register. The blur is heavy, the texture is murky, the borders are amber hairlines. **City-Urban Atmospheric Motifs:** - **Vending machine glow:** One large card has a faint cyan-green glow on its left edge, suggesting that a vending machine sits just out of frame. The cyan-green is the only cool color on the entire site. - **Graffiti tag marks:** Three small SVG graffiti-style tags appear at section boundaries -- one is a cursive amamiya signature, one is a tag reading "OPEN," one is a simple star. Caution-red color, 30% opacity, slightly off-axis rotated. - **Wet pavement reflections:** Beneath the card grid, a subtle radial gradient creates the illusion of wet alley pavement reflecting the amber light from above. - **Rain particles in hero:** 8-12 thin vertical streaks (1px wide, 40-80px tall) animated falling in the hero header at varying speeds. Opacity 25-45%. Color: cool gray with slight blue tint. - **Steam wisps:** Tiny soft-edged plumes of steam drifting upward in the lower-third of certain cards, suggesting freshly-made warm wagashi. Opacity 8-15%, slight upward animation. **Photography:** Forbidden. All imagery is hand-drawn SVG. **Iconography:** No formal icon set. Where UI affordances are needed, mono-typography labels suffice (e.g., "SOLD OUT," "3 LEFT," "FLIP FOR INFO"). ## Prompts for Implementation **Storytelling Frame:** The visitor stumbles into amamiya.monster like they've stumbled into the back-alley shop -- the flickering sign greets them, the menu is right there, and they can browse what's available tonight. Some cards are sold out. Some have only a few left. Each card flips to reveal more about the specific wagashi if the visitor wants to know. The site is functional-feeling (like a real menu) but stylized into a moody, urban, after-hours mood. The visitor is treated like an insider who already knows about this place. **Card-Flip Implementation:** Each card is a 3D-transformable container with two faces: ```css .card { transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .card.flipped { transform: rotateY(180deg); } .card-face { position: absolute; backface-visibility: hidden; width: 100%; height: 100%; } .card-back { transform: rotateY(180deg); } ``` The flip animation includes a slight overshoot at the end (1deg over-rotation, settling). Click anywhere on the card triggers the flip. **Inventory Indicator Implementation:** Each card has a `data-stock="N"` attribute. Rendered as: - 0: A large red diagonal "SOLD OUT" stamp overlay (rotation -8deg) on the card front. - 1-3: A small amber "N LEFT" tag in the card's upper-right corner. - 4+: No indicator (card looks fully available). The values are hand-coded into the HTML to give the page a specific tonight-feeling. They do not represent real inventory. **Hero Sign Flicker Implementation:** ```css @keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 0.99; text-shadow: 0 0 8px var(--amber); } 20%, 24%, 55% { opacity: 0.4; text-shadow: none; } } .shop-sign { animation: flicker 8s ease-in-out infinite; } ``` The flicker is irregular (not metronomic) to feel like real electrical instability. **Rain Particle Implementation:** 12 thin vertical lines positioned absolutely in the hero header, each with its own translateY animation (top: -40px → 100vh, duration 3-6s, ease-linear, infinite, with random delays). **Hover Affordances:** - Hovering a card causes a subtle lift (translateY -2px) and the amber border opacity to step from 0.18 to 0.32 over 200ms. - Hovering the price element on a card causes the price digits to gently pulse (opacity 1.0 → 0.85 → 1.0 over 1s). - Hovering the shop sign in the hero causes the flicker to pause briefly (sign holds at full brightness while hover persists). **Avoid Absolutely:** - Bright daylight imagery; the alley is firmly nocturnal. - Hero CTAs of the corporate variety ("Shop Now," "Order Today"). The flicker sign and menu grid ARE the CTAs. - Photography of any kind. - Saccharine or twee aesthetics. This is the gritty, raw register. - Light/white backgrounds. The dark-mode is structural and non-negotiable. - Clean, polished glassmorphism. The cards should look like real alley vending-glass, not iOS dialog boxes. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Dark-mode at a structural rather than toggle level** -- the entire site is committed to nocturnal dark, with diegetic light sources (lantern, vending, streetlamp) rather than a "dark theme variant." Dark-mode aesthetic at 4% in corpus. 2. **Card-flip as the entire interaction vocabulary** -- no modals, no expand panels, just card-flips. This single-pattern discipline is rare. 3. **Fictional limited inventory creating real-time-feeling state** -- "SOLD OUT," "3 LEFT" indicators give the menu a sense of ephemeral availability. Treating wagashi cards as a dynamic alley menu rather than a static product catalog. 4. **Raw-authentic urban tone executed via flickering shop sign and graffiti motifs** -- the back-alley aesthetic with city-urban motifs (steam, rain, wet pavement, graffiti) is distinct from the corpus' typical clean retail framings. 5. **Distinct from this batch's amamiya-hompo.net (moody glass aurora) and amamiya-honpo.net (museum archive)** -- where those interpret the brand as an established institution (flagship or archive), this .monster variant interprets it as a back-alley underground operation. Same imagined institution, three radically different stances based on TLD signaling. 6. **Glassmorphic cards over dark backdrop in earth-tones rather than the typical white/light dashboard register** -- a rare dark-mode glassmorphism execution. **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: dark-mode, layout: card-grid, typography: grotesque-neo, palette: earth-tones, patterns: card-flip, imagery: glassmorphic-cards, motifs: city-urban, tone: raw-authentic **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (99% broadly), "muted" palette (50%), "gradient" palette (70%). - Embracing under-used patterns: dark-mode aesthetic (4%), grotesque-neo typography, glassmorphic-cards imagery (2%), card-flip pattern, city-urban motif. - The card-grid layout is more common in the corpus, but used here on a dark-mode urban-alley canvas with glassmorphic-card materiality, distinguishing this implementation.