# Design Language for amamiya.xyz ## Aesthetics and Tone amamiya.xyz is a deep-water editorial zine -- the imagined sweets shop ("甘味屋 / amamiya" = sweets shop) reframed as an underwater literary magazine that publishes essays, recipes, and photo-essay-style explorations about wagashi from the perspective of an oceanographic research vessel. Where amamiya.monster is the back-alley night-shop, amamiya.xyz is the deep-blue editorial dispatch: a long-form magazine layout, with a bento-box grid of articles, set against an ocean-deep navy backdrop, with sudden bursts of neon-glow accent that feel like bioluminescence in the abyss. The .xyz TLD signals "experimental publication" rather than "commercial storefront." The aesthetic is **editorial** -- magazine-grade typography, considered photo-essay layout (though rendered as illustration here, given the no-photography rule), pull-quote treatment, sidebar metadata, and a strong sense that each "card" in the bento is one article in a multi-piece zine issue. The editorial register provides hierarchy, gravitas, and reading rhythm, which is then disrupted by sudden eruptions of neon-glow color and bubble-playful ornament -- because the zine is published from underwater, where the squids glow and the jellyfish wear neon. The tone is **raw-authentic** -- the magazine is written by a small team of obsessives. The voice is direct, slightly weird, willing to take risks. Headlines are punchy and unpolished: "we tried mochi at -200m," "the science of azuki collapse." Body copy is conversational but informationally dense, willing to digress, willing to be wrong. There is no marketing voice. There is a real point of view being expressed. The site uses bento-box layout to organize multiple articles, illustrations, sidebars, and pull-quotes within a single "issue" view, rendered against an ocean-deep gradient backdrop with bioluminescent neon-glow ornaments and bubble-playful decorative elements. A live cursor-follow effect creates a sense that the reader is exploring with a flashlight. ## Layout Motifs and Structure **Bento-Box Editorial Composition:** The site is built as a single-page bento-box magazine spread -- a 12-column CSS Grid with cells of varying spans (2-12 columns) and rows (1-4 row units, where 1 unit = 220px on desktop). The bento here is editorial-magazine in spirit: each cell is an article fragment, a pull-quote, a sidebar, a contributors list, an illustration, an index. The cells fit together with 24px gutters, like a sheet of magazine pages laid flat. **Cell Types and Roles:** - **Cover-cell (12-col, 3-row):** The issue's cover image and title at the top of the page. Massive headline, illustrated bioluminescent jellyfish. - **Article cells (6-col, 3-4-row):** Long-form articles. Title, byline, body copy in a single readable column. - **Pull-quote cells (4-col, 2-row):** Highlighted quotes from articles. Set in massive italic Cormorant. - **Sidebar metadata (3-col, 1-row):** Issue number, publication date, contributor names. Mono type. - **Illustration cells (4-col or 6-col, 2-3 row):** Hand-drawn SVG illustrations of wagashi, marine life, oceanographic equipment. - **Recipe cells (4-col, 3-row):** Step-by-step recipes with ingredient lists. - **Index cells (3-col, 4-row):** Lists of articles in this issue, with page numbers. **Section Architecture (Issue Layout):** The site is presented as one editorial "issue" with a defined reading sequence: 1. Cover spread (Hero cell) 2. Editor's note (a full-width text cell) 3. Feature article 1: "We tried mochi at -200m" 4. Pull-quote eruption 5. Sidebar: Issue contributors 6. Feature article 2: "The science of azuki collapse" 7. Recipe sidebar: Mizuyokan from a research vessel 8. Pull-quote eruption 9. Feature article 3: "Bioluminescent Wagashi" 10. Photo-essay (illustration grid of marine wagashi specimens) 11. Index of articles 12. Footer / colophon **Cursor-Follow Pattern:** A subtle but persistent cursor-follow effect creates the feeling of exploring the layout with an underwater flashlight: - A soft 320px-radius radial-gradient "spotlight" follows the cursor at all times, brightening the bento cells beneath it. - The cursor itself is replaced with a small bioluminescent dot (8px) with a soft outer glow. - Cells under the cursor's spotlight have their opacity stepped from 0.85 to 1.0 over 200ms. - Decorative bubble-playful elements scattered throughout the layout brighten momentarily as the cursor passes near them. The cursor-follow is the site's primary "discovery" interaction. The cursor is essentially a flashlight in a dim deep-water environment. **Bubble-Playful Ornamental Elements:** Scattered throughout the bento layout are small decorative bubble-playful elements -- not as cells in the grid, but as overlaid decorations that float above and between cells: - Small SVG bubble-clusters (multiple overlapping circles in cool palette tones) at cell corners - Tiny illustrated jellyfish (40-60px) drifting slowly across cell boundaries - Sparkle-burst marks (radiating short lines) at cell intersections - Speech-bubble-style decorative shapes containing micro-quotes These bubble-playful elements break up the bento grid's geometry with organic, slightly cartoonish ornament -- preventing the editorial layout from feeling too sterile or corporate. ## Typography and Palette **Primary Display Font:** "Manrope" (Google Fonts) -- chosen as the futura-geometric-adjacent contemporary sans. Used for all H1 article headlines, issue title, section labels. Weight 700 for hero headlines, weight 500 for article H1, weight 400 for subheads. Letter-spacing -0.025em at large sizes. **Editorial Body Font:** "EB Garamond" (Google Fonts) -- a high-quality Garamond revival used for long-form article body copy. Weight 400, line-height 1.65, letter-spacing 0.005em. The serif provides the editorial-magazine reading experience. **Pull-Quote Italic Font:** "EB Garamond" italic weight 500 -- used for pull-quotes set at very large sizes (clamp 48px to 96px). The italics provide visual energy and editorial tradition. **Mono Caption Font:** "JetBrains Mono" (Google Fonts) -- weight 400 used for issue metadata, page numbers, captions, byline-credits. Letter-spacing 0.04em, size 11-13px. **Japanese Voice Font:** "Klee One" (Google Fonts) -- weight 400 used for occasional Japanese phrases or wagashi names rendered in kanji within body copy. **Type Scale:** - Issue title: clamp(96px, 12vw, 192px) -- Manrope weight 700, with neon-glow text-shadow - Article H1: clamp(40px, 4.5vw, 64px) -- Manrope weight 500 - Article H2: clamp(24px, 2.4vw, 32px) -- Manrope weight 500 - Pull-quote: clamp(48px, 6vw, 96px) -- EB Garamond italic weight 500 - Body: clamp(16px, 1.1vw, 18px) -- EB Garamond weight 400 - Caption / Metadata: 12px JetBrains Mono weight 400 - Sidebar label: 11px Manrope weight 700 uppercase, letter-spacing 0.14em **Palette (Ocean-Deep, with neon-glow eruptions):** - Abyssal navy: `#0a1628` (the deepest backdrop) - Deep ocean: `#162840` (slight elevation, used for some cell backgrounds) - Mid ocean: `#1f3a5c` (used for some cell backgrounds at brighter elevation) - Foam highlight: `#e8f0f8` (paper-cream-on-navy for body text) - Body text on dark: `#d8e0e8` (slightly cooler cream) - Headline white: `#ffffff` (used very sparingly for hero treatments) - **Neon glow accents (the bioluminescent eruptions):** - Squid pink: `#ff5cb8` (hot magenta-pink, used for one pull-quote text-shadow and one decorative glow) - Jellyfish cyan: `#3fffe5` (electric cyan, used for one section header and bubble decorations) - Lantern-fish yellow: `#ffd84d` (warm neon yellow, used very sparingly for one accent) - Coral pulse: `#ff7e3e` (warm coral-orange, used for one decorative element) The neon-glow palette is used as eruption-accent: maybe 2-3 elements per section get neon treatment (a glow text-shadow, a colored underline, a glowing border) while everything else stays in the deep-ocean navy/cream register. The neon eruptions are surprises, not dominant. Each neon color is rendered with a CSS text-shadow or box-shadow that creates a soft outer glow: ```css text-shadow: 0 0 12px var(--neon-color), 0 0 24px var(--neon-color-faded); ``` ## Imagery and Motifs **Editorial Illustrations (the dominant imagery):** The site uses hand-drawn SVG illustrations as its primary imagery, in lieu of photography. Subjects: - **Wagashi specimens viewed from research-vessel perspective:** mochi floating in a glass container at depth, a dorayaki being lowered on a wire, a mizuyokan-shaped bathysphere. - **Marine life with neon-glow accents:** anglerfish with a glowing lure, jellyfish with bioluminescent edges, deep-sea squid, lantern fish. - **Oceanographic equipment:** sonar diagrams, depth-sounding charts, niskin bottles, bathysphere viewports. - **Recipe diagrams:** step-by-step ingredient layouts in cross-section style. All illustrations are 1.5px-stroke line art with selective color fills in the foam-highlight cream and the neon-glow accents. The illustrations have a slightly hand-drawn imperfection, suggesting they were sketched by a researcher onboard the vessel. **Bubble-Playful Decorative Vocabulary:** - **Bubble clusters:** overlapping circles (8-32px), low opacity, in foam-highlight color. - **Jellyfish ornaments:** small (40-60px) line-drawn jellyfish silhouettes with bioluminescent edge accents. - **Sparkle bursts:** 6-pointed star-burst SVG marks, used at cell corners and around pull-quotes. - **Speech bubbles:** rounded rectangles with tail, holding micro-quotes in 11px Mono. Faint outline, transparent fill. **Neon-Glow Ornamental Treatment:** Specific elements receive neon-glow treatment: the issue title gets a soft cyan glow, one pull-quote per section gets a squid-pink text-shadow, certain cell borders get a faint neon stroke. The neon-glow is precious and rare -- it should feel like noticing a bioluminescent creature in the dark. **Photography:** Forbidden. All imagery is illustrated SVG. **Iconography:** Custom mini-glyphs in the editorial register: a small star (article rating), a small fish (recipe), a small wave (sidebar), a small jellyfish (pull-quote). All 16-20px, line-drawn. ## Prompts for Implementation **Storytelling Frame:** The visitor opens "Issue 03" of an underwater editorial zine called amamiya. They scroll through a bento-box layout of articles, illustrations, pull-quotes, and recipes -- each cell a fragment of a coherent magazine spread. The cursor moves through the layout like a flashlight, brightening cells under its beam. Occasional bursts of neon-glow color erupt from the navy depths -- a pull-quote glowing pink, a section header in cyan, a small bubble-cluster sparking yellow. The visitor feels they are reading a real, niche, slightly weird magazine -- one that takes wagashi seriously and frames it through unusual lenses. **Bento Grid Implementation:** ```css .issue-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 80px 40px; } ``` Cells span columns and rows according to their type. Responsive: collapses to 6 columns at 900px viewport, 1 column below 600px. **Cursor-Follow Spotlight Implementation:** ```javascript document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--cursor-x', e.clientX + 'px'); document.documentElement.style.setProperty('--cursor-y', e.clientY + 'px'); }); ``` ```css body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient( 320px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(255, 255, 255, 0.08), transparent 70% ); z-index: 1; } .bento-cell { position: relative; z-index: 2; transition: opacity 200ms ease; } .bento-cell:hover { opacity: 1.0; } .bento-cell:not(:hover) { opacity: 0.92; } ``` The spotlight follows the cursor at all times, gently illuminating cells beneath it. **Custom Cursor Implementation:** A custom CSS cursor or fixed-position pseudo-element that lags slightly behind the actual cursor (20ms via requestAnimationFrame interpolation), styled as an 8px bioluminescent dot with a 16px outer glow. **Neon-Glow Eruption Implementation:** Specific elements get the neon treatment via CSS classes: ```css .neon-pink { color: var(--squid-pink); text-shadow: 0 0 12px var(--squid-pink), 0 0 24px rgba(255, 92, 184, 0.5); } .neon-cyan { color: var(--jellyfish-cyan); text-shadow: 0 0 12px var(--jellyfish-cyan), 0 0 24px rgba(63, 255, 229, 0.5); } ``` Used sparingly: maybe 4-6 elements on the entire page get the neon treatment. **Bubble Animation:** Decorative bubbles rise slowly from the bottom of certain cells via CSS keyframes (translateY 0 → -100% over 18-32 seconds, with random delays and durations per bubble). **Reading Affordances:** - Article cells have generous padding (40-56px) and a max-width body column for legibility. - Pull-quote cells span 4 columns and have minimal padding, letting the italic Garamond breathe. - Sidebar metadata cells are visually subordinate (smaller type, less padding, lighter fill). - Illustration cells have only 16px padding around the SVG. **Hover Affordances:** - Hovering an article cell brightens its content opacity from 0.92 to 1.0 (in addition to the spotlight effect). - Hovering a pull-quote causes its neon-glow text-shadow to intensify (12px glow → 18px glow over 300ms). - Hovering a bubble decoration causes it to gently expand (scale 1.0 → 1.1 over 200ms). - Hovering an illustration causes a soft inner glow to bloom. **Avoid Absolutely:** - Bright daylight palettes; the ocean-deep navy is structural. - Photography of any kind. - Generic "shop now" / "subscribe" CTAs. The site is a free magazine; reading IS the action. - Carousels, sliders, accordions. - Drop shadows in the conventional sense; use only the neon-glow text/box-shadow vocabulary. - Flat-color cells. Every cell should have some texture: a subtle gradient, a faint grain overlay, a hairline border. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Editorial bento at full magazine spread fidelity** -- not a dashboard bento, not a portfolio bento, but a real editorial-zine bento with article cells, pull-quotes, sidebars, and indices. Editorial aesthetic is at 15% in corpus, but this implementation as a full magazine layout is rare. 2. **Neon-glow eruptions in an otherwise restrained ocean-deep palette** -- the neon-glow is precious accent, not dominant decoration. The contrast between deep-navy editorial gravity and sudden bioluminescent color bursts is distinctive. 3. **Cursor-follow spotlight as ambient reading affordance** -- the cursor functions as a flashlight in a dim deep-water environment. Cursor-follow pattern at 2% in corpus. 4. **Bubble-playful ornament balanced against editorial register** -- the layout combines magazine-grade typography with cartoonish bubble/jellyfish decorations, creating an unusual tonal hybrid. 5. **Distinct from this batch's other amamiya/amamya domains** -- this site frames the brand as an experimental zine published from a research vessel. amamiya-hompo is moody flagship, amamiya-honpo is museum archive, amamiya.monster is back-alley shop, this .xyz is editorial zine. Each TLD gets a distinct frame. 6. **Ocean-deep palette at 2% in corpus** -- leveraged here as the structural canvas, not a one-off accent. **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: editorial, layout: bento-box, typography: futura-geometric, palette: ocean-deep, patterns: cursor-follow, imagery: neon-glow, motifs: bubble-playful, tone: raw-authentic **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (99%), "muted" palette (50%), "gradient" palette (70%). - Embracing under-used patterns: ocean-deep palette (2%), neon-glow imagery, cursor-follow pattern (2%), bubble-playful motif (low frequency). - The bento-box layout is increasingly common in the corpus, but its application here as a magazine-editorial spread (rather than dashboard/portfolio) differentiates the implementation.