# Design Language for amamya.com ## Aesthetics and Tone amamya.com (v2) is a **Watercolor Dopamine Opera** -- an opulent-grand parallax narrative for a fictional perfumer-architect, presented as if a wet watercolor study of a fictional cathedral had been over-saturated by a child's neon highlighter, then framed in oversized display type. The .com is treated as the flagship, the parade entrance; the design behaves like the front facade of a baroque opera house spotlit in dopamine neon. The mood is **opulent-grand**: theatrical, generous, slightly intoxicating, with every parallax layer pushing further depth into the page. Watercolor washes layer beneath neon, photography spans full-bleed with parallax displacement, and scale-hover interactions cause every image and headline to lean toward the cursor like a stage performer noticing the audience. Where most opulent sites lean gold-and-black, this one stays in dopamine watercolor: hot magenta, electric persimmon, neon viridian, and chromatic-aqua washes layered over deep merlot grounds. ## Layout Motifs and Structure The composition is **parallax-sections** -- each section is a layered scene composed of 3-5 parallax depth layers (foreground photograph, mid-ground watercolor wash, far-ground display headline, ambient neon halo, scanline-fine texture). As the user scrolls, layers translate at different rates (0.3x, 0.6x, 1.0x, 1.3x, 1.7x), creating a cinematic stage depth. **Macro structure:** - **Opera facade (Section 0, 130vh):** Foreground -- a single fashion-architectural photograph (a marble cornice, a velvet curtain) scaling at 1.7x parallax. Mid-ground -- a hot-magenta watercolor wash at 0.6x parallax. Far-ground -- the wordmark "AMAMYA" in oversized display at 0.3x parallax. Ambient neon halo at 1.3x parallax. Sci-fi-HUD overlay (faint corner brackets, range-finder ticks) in viridian. - **Perfume act (Section 1, 140vh):** Foreground -- a flacon photograph with watercolor splash backdrop, 1.7x parallax. Mid -- electric persimmon wash. Far -- "ACT I / OUVERTURE" headline at 0.3x. HUD overlay updates with a new range bracket. - **Cathedral act (Section 2, 160vh):** Foreground -- a cathedral interior photograph in deep merlot duotone. Mid -- neon viridian watercolor blooms. Far -- "ACT II / SANCTUM" at 0.3x parallax. Scale-hover interaction is most intense in this section. - **Garden act (Section 3, 140vh):** Foreground -- botanical photograph (orchid bouquet). Mid -- chromatic-aqua watercolor wash. Far -- "ACT III / JARDIN" at 0.3x. Sci-fi-HUD shows a small corner radar map. - **Final ovation (Section 4, 100vh):** A single full-bleed dopamine watercolor wash with the closing headline "FIN" at 0.3x parallax. HUD fades to a small "circuit closed" indicator. **Scale-hover pattern:** Every image and major headline scales 1.0 to 1.04 on cursor hover (380ms ease-out), with a slight 2-3deg cursor-direction rotation. The mid-ground watercolor wash also subtly scales (1.0 to 1.02) as the cursor passes over it. **Spacing:** Full-bleed sections (0 outer margin). Inner content padding 8vw. Vertical rhythm 32px. Section heights vary (100-160vh) to encourage scroll variation. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Big Shoulders Display" weight 800 -- an oversized display sans with strong condensed character, used at clamp(96px, 18vw, 320px). Tracking -0.02em. The huge scale creates the "opera house facade" headline presence. - **Act labels:** "Big Shoulders Display" weight 600 at 16-18px, tracking 0.18em uppercase, all caps. - **Body text:** "Cormorant Garamond" weight 400 at clamp(18px, 1.35vw, 22px), line-height 1.7. The serif provides editorial warmth against the display sans. - **HUD/captions:** "Space Mono" weight 400 at 12-13px, used for HUD overlays, range finders, and sci-fi-style markers. **Palette (dopamine-neon over deep merlot):** - `#1F0A1A` -- **Deep Merlot**, the primary background -- a near-black wine with magenta undertone. - `#3A0F2A` -- **Velvet Curtain**, secondary surface for parallax mid-ground washes. - `#FF2D8A` -- **Hot Magenta**, the dominant neon -- electric pink. - `#FF6A3D` -- **Electric Persimmon**, secondary neon -- vivid orange-coral. - `#3CD8B4` -- **Neon Viridian**, tertiary neon -- jewel-aqua green. - `#5BBFF0` -- **Chromatic Aqua**, fourth neon -- sky-pop blue. - `#F2E6D2` -- **Bone Cream**, the rare warm-neutral for body text and headlines on dark grounds. The palette is generous and theatrical: deep merlot grounds layered with four high-saturation neon washes. ## Imagery and Motifs **Core visual motifs:** - **Photography (imagery mandate):** Each section foreground features a single editorial photograph (marble cornices, perfume flacons, cathedral interiors, orchid bouquets), rendered in deep merlot duotone for cathedral and merlot/magenta duotone for botanical. Photos sit at 1.7x parallax for foreground prominence. - **Sci-fi-HUD motif (motif mandate):** A faint sci-fi heads-up display overlays the entire viewport: corner brackets, range-finder ticks, a small radar map in the lower-right, and section-act labels in Space Mono. The HUD is rendered in neon viridian at 32-44% opacity. - **Scale-hover pattern:** Every photograph and major headline scales 1.0 to 1.04 on cursor hover with a 380ms ease and a 2-3deg cursor-direction rotation. - **Watercolor washes:** Mid-ground parallax layers are loose SVG watercolor washes -- irregular bloomed shapes in dopamine neon hues with `feTurbulence` displacement maps and 28-44% opacity. - **Neon glow halos:** Display headlines carry a 32-48px neon drop-shadow in the section's primary neon hue (24% opacity). - **Scanline-fine texture:** A 2px horizontal scanline at 3% opacity overlays the entire viewport, giving the parallax stage a faint cinematic-CRT presence. ## Prompts for Implementation **Opening narrative:** Page loads on Deep Merlot. Over 2.6s, the sci-fi-HUD overlay materializes (corner brackets draw on via 1.4s SVG stroke reveal in viridian); the hot-magenta mid-ground watercolor blooms on with a slow alpha reveal; the foreground marble photograph zooms from 1.08 to 1.0 scale; the wordmark "AMAMYA" reveals letter-by-letter (110ms stagger) at 0.3x parallax depth; the ambient neon halo pulses on. The HUD's range-finder ticks complete their first sweep at 2.6s. **Scroll narrative:** As the user scrolls, parallax layers translate at their distinct rates (0.3x, 0.6x, 1.0x, 1.3x, 1.7x) producing strong stage depth. Watercolor washes drift slightly with a 0.04x horizontal float. Each section's display headline assembles letter-by-letter as the section crosses the viewport top (90ms stagger). HUD range-finder ticks update with each section change. Scanline scanlines remain constant. **Microinteractions:** - **Photograph hover:** Photo scales 1.0 to 1.04 with a 380ms ease; rotates 2-3deg toward cursor; the watercolor wash beneath subtly intensifies in saturation (+8%). - **Headline hover:** Display headline gains a 56px neon drop-shadow (in the section's primary hue) over 280ms; scales 1.0 to 1.02. - **Act label hover:** Space Mono label pulses neon viridian to chromatic aqua over 600ms. - **HUD bracket hover:** Bracket strokes thicken from 1px to 1.6px over 220ms. - **Section transitions:** Parallax depth re-anchors with a brief 600ms cross-fade of mid-ground washes. **Storytelling:** The site is structured as an opera in four acts plus an ovation. Section anchors: "Facade," "Act I / Ouverture," "Act II / Sanctum," "Act III / Jardin," "Fin." The voice is opulent, theatrical, declarative. There are no marketing CTAs. The site closes with a single line: "for correspondence, write to box 14, opera house." **Typography motion:** Big Shoulders Display headlines reveal letter-by-letter with 90ms stagger and a per-letter scale-from-0.94. Body Cormorant fades-in line-by-line (32ms cascade). HUD Space Mono types in mono-cadence (45ms per character). **AVOID:** stat-grids, pricing tiers, "shop now" CTAs, social-proof testimonial blocks, three-up service tiles, generic gold-on-black opulence cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Watercolor + dopamine-neon over merlot:** A watercolor aesthetic that refuses pastel restraint -- mid-ground washes are hot magenta, persimmon, viridian, aqua, layered over deep merlot grounds. The watercolor becomes opulent, theatrical, not delicate. 2. **5-layer parallax depth stage:** Each section composes 5 distinct parallax layers (foreground photo at 1.7x, mid watercolor at 0.6x, far headline at 0.3x, ambient halo at 1.3x, HUD overlay fixed) creating cinematic stage depth. 3. **Sci-fi-HUD overlay on opulent ground:** A faint sci-fi heads-up display (corner brackets, range-finder ticks, radar map) overlays the entire opera-house stage in neon viridian -- a futurist commentary on the baroque tableau. 4. **Oversized-display headlines at 320px:** Big Shoulders Display at clamp(96px, 18vw, 320px) -- enormous, condensed, theatrical -- a scale rarely held in registry designs. 5. **Scale-hover with cursor-direction rotation:** Photographs scale 1.04 and rotate 2-3deg toward the cursor, as if leaning toward the audience -- an opera-stage gesture not present in other designs. **Chosen seed/style:** Planned seed -- aesthetic: watercolor, layout: parallax-sections, typography: oversized-display, palette: dopamine-neon, patterns: scale-hover, imagery: photography, motifs: sci-fi-hud, tone: opulent-grand. **Avoided patterns from frequency analysis:** Avoided overused minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused watercolor aesthetic (6%), sci-fi-hud motif, dopamine-neon palette over merlot, oversized-display typography, and parallax-sections layout with photography as foreground-only.