# Design Language for amamiya.xyz ## Aesthetics and Tone amamiya.xyz (v2) is a **Cyberpunk Floral Codex** -- a whimsical-creative portfolio-shrine for an imaginary collective of digital florist-hackers, presented as if a wet Tokyo back-alley arcade window had been wallpapered in dopamine-neon orchid bouquets and then run through a CRT scanline encoder. The .xyz suffix encourages experimentation; the design takes that license literally and stacks neon floral-botanical motifs on top of noise-texture grids, treating every project tile as a digital greenhouse window. The mood is **whimsical-creative**: chromatic, exuberant, slightly anarchic, but tightly controlled by a serif revival typography that grounds every burst of neon with a steady, almost typographic-academic hand. Where most cyberpunk sites lean black-and-cyan austerity, this one stays in dopamine pink, neon lime, electric tangerine, and lilac haze over a deep midnight ground -- a cyberpunk that smells like florist tape. ## Layout Motifs and Structure The composition is a **portfolio-grid** -- a 12-column irregular masonry where each tile is a "greenhouse window" displaying one floral-botanical motif rendered in dopamine neon over a noise-texture ground. Tiles vary in size from 1x1 to 3x2 modules, and pulse-attention is the animating pattern: a subtle pulse cycles across the grid, drawing the eye through a planned reading path. **Macro structure:** - **Hero greenhouse (Section 0, 100vh):** A single oversized tile (full bleed) showing a neon orchid bouquet over a noise-grain midnight ground. The wordmark "AMAMIYA.XYZ" sits in serif revival at the upper-left, with a small cipher "CODEX 026" in pink-neon mono. A faint CRT scanline overlays the entire viewport at 4% opacity. - **Project grid (Section 1, 200vh):** A 12-column irregular masonry with 18 tiles. Each tile features a single floral-botanical motif (orchids, peonies, foxgloves, ferns, lotuses, jasmine) painted in dopamine neon SVG strokes. Tiles have noise-texture grounds in deep midnight or oxblood plum. Pulse-attention runs as a 1.4Hz subtle brightness wave sweeping the grid diagonally. - **Codex page (Section 2, 140vh):** A single dense portfolio "page" with serif revival body text describing the collective's manifesto, framed by two oversized neon foxglove stems in the page margins. - **Garden grid (Section 3, 180vh):** A second portfolio-grid section showing 12 smaller "garden plot" tiles, each tile with a smaller floral motif and a serif-revival caption. - **Colophon (Section 4, 80vh):** A single tile-as-page showing the colophon text on noise texture, with one final dopamine peony pulsing in the corner. **Pulse-attention pattern:** A diagonal "pulse wave" sweeps across the portfolio grid every 6 seconds at 1.4Hz, brightening tiles by 8% in a moving band. When the user's cursor enters a tile, that tile's pulse intensifies (16% brightness lift) and the floral motif's stroke pulses 1.0 to 1.04 scale at 1.8Hz. **Spacing:** Outer margin 4vw. Grid gap 18px. Vertical rhythm 24px on body text. The grid is intentionally irregular -- tiles align on the column system but vary freely in row height. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Cormorant Garamond" weight 700 -- a serif revival used at clamp(36px, 5.5vw, 96px), tracking -0.005em. The classical serifs act as a chromatic anchor against the dopamine palette. - **Sub-labels/cipher:** "Cormorant Garamond" weight 500 small-caps at 13-14px, tracking 0.14em uppercase. Used for cipher tags, tile captions, and section markers. - **Body text:** "Cormorant Garamond" weight 400 at clamp(17px, 1.25vw, 21px), line-height 1.7. Italic for pull-quotes and floral Latin names. - **Numerals:** "Cormorant Garamond" old-style figures for codex numbers; the asymmetric numerals add archival warmth against neon. **Palette (dopamine-neon with deep midnight grounds):** - `#0E0822` -- **Deep Midnight**, the primary background -- a near-black indigo with a faint purple cast. - `#1A0F35` -- **Oxblood Plum**, secondary tile ground -- a deep wine-purple. - `#FF3FA4` -- **Dopamine Pink**, the dominant neon -- electric, slightly hot magenta. - `#9CFF4A` -- **Neon Lime**, secondary neon -- chartreuse-pop for fern motifs and pulse highlights. - `#FFA53D` -- **Electric Tangerine**, third neon -- used for marigold and foxglove motifs. - `#C5A8FF` -- **Lilac Haze**, the cool-neon halo color for orchid motifs. - `#F4ECE0` -- **Bone Cream**, the rare warm-neutral used for body text and serif highlights. The palette is exuberant but tightly typed: four neon hues plus two grounds, with bone cream as the only neutral. ## Imagery and Motifs **Core visual motifs:** - **Noise-texture grounds (imagery mandate):** Every tile carries a noise-grain texture overlay at 14% opacity, generated via SVG `feTurbulence` with `baseFrequency=0.65`. The noise gives every neon stroke a faint analog-CRT shimmer. - **Floral-botanical motif (motif mandate):** Each tile features a single floral motif drawn in 1.5-2.5px neon SVG strokes -- orchids, peonies, foxgloves, ferns, lotuses, jasmine, marigolds. The strokes are unfilled, painterly, slightly imperfect. Latin names accompany each motif in italic serif revival. - **Pulse-attention pattern:** A 1.4Hz diagonal brightness wave sweeps the grid every 6s. Tile-hover intensifies the pulse to 1.8Hz with a 16% brightness lift. - **CRT scanline overlay:** A faint horizontal scanline pattern (4% opacity, 2px line, 2px gap) overlays the entire viewport, giving the site a constant CRT-analog presence. - **Neon glow halos:** Each floral motif carries a faint `filter: drop-shadow` glow in its primary hue (12px blur, 24% opacity), simulating a wet-neon greenhouse light. - **Cipher tags:** Each tile has a small cipher tag in serif-revival small-caps (e.g., "FLORA-09 / ORCHID / DOPAMINE-PINK"). ## Prompts for Implementation **Opening narrative:** Page loads on Deep Midnight. Over 2.2s, the CRT scanline fades in (0% to 4%); the hero tile's noise-texture ground fades in (0% to 14%); the orchid motif's strokes draw on with a 1.6s SVG stroke-dasharray reveal; the wordmark "AMAMIYA.XYZ" types in via serif-revival letter reveal (80ms stagger); the cipher "CODEX 026" types in mono-cadence after a 700ms delay. The pulse-attention wave begins its first sweep at 2.6s. **Scroll narrative:** As the user scrolls into the project grid, tiles fade-up in a staggered cascade (60ms per tile, scrolling from upper-left to lower-right); each tile's floral motif draws on with a 900ms SVG stroke reveal; the pulse-attention wave continues its 6s diagonal sweep. As the user crosses into the codex page, the two oversized foxglove stems in the margins draw on with a 2s SVG reveal. Re-entry to the garden grid triggers a 400ms re-pulse of all visible tiles. **Microinteractions:** - **Tile hover:** Tile's pulse intensifies to 1.8Hz; brightness lifts 16%; the floral motif scales 1.0 to 1.04 at 1.8Hz; the cipher tag pulses dopamine-pink. - **Wordmark hover:** Wordmark gains a 24px neon-pink drop-shadow glow. - **Caption hover:** Italic Latin name pulses lilac-haze. - **Cipher hover:** Cipher flickers between neon-lime and dopamine-pink (200ms cycle). - **Section transitions:** A 600ms diagonal pulse-wave sweeps across the new section. **Storytelling:** The site is structured as a "codex" of an imaginary digital-florist collective. Section anchors: "Hero Greenhouse," "Project Codex," "Manifesto Page," "Garden Plots," "Colophon." The voice is whimsical-creative, slightly anarchic, lovingly chromatic. There are no marketing CTAs; the codex closes with a quiet invitation to send a single flower by post. **Typography motion:** Cormorant Garamond display reveals letter-by-letter with an 80ms stagger and a per-letter scale-from-0.92. Body serif fades-in line-by-line with a 30ms cascade. Italic Latin names underline-draw in lilac haze on hover. **AVOID:** stat-grids, pricing tiers, "buy now" CTAs, testimonial rows, three-up service tiles, generic neon-cyber cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dopamine cyberpunk:** Where most cyberpunk sites lean black-and-cyan austerity, this design floods the cyberpunk grid with dopamine-neon florals -- pink, lime, tangerine, lilac -- giving the cyberpunk frame a horticultural, whimsical chroma. 2. **Floral-botanical strokes over noise texture:** Every tile is a digital greenhouse window: 1.5-2.5px neon SVG strokes of orchids, peonies, foxgloves, ferns, lotuses, jasmine, drawn unfilled and painterly, over a noise-grain ground. 3. **Pulse-attention diagonal wave:** A 1.4Hz diagonal brightness wave sweeps across the entire portfolio grid every 6 seconds, drawing the eye through a planned reading path -- a distinctive pulse mechanic not present in other designs. 4. **Serif-revival typography against neon:** Cormorant Garamond at headline scale anchors the entire neon palette in a classical-typographic register, producing a tone unlike conventional cyberpunk practice. 5. **CRT scanline as analog presence:** A constant 4% horizontal scanline overlay gives the site a quiet CRT-analog character beneath the otherwise crisp digital pulse. **Chosen seed/style:** Planned seed -- aesthetic: cyberpunk, layout: portfolio-grid, typography: serif-revival, palette: dopamine-neon, patterns: pulse-attention, imagery: noise-texture, motifs: floral-botanical, tone: whimsical-creative. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused cyberpunk aesthetic (5%), noise-texture imagery (3%), floral-botanical motif, dopamine-neon palette, and pulse-attention pattern with serif-revival typography.