# Design Language for amamya.dev ## Aesthetics and Tone amamya.dev (v2) is a **Vaporwave Aurora Promenade** -- a zen-contemplative horizontal-scroll gallery for a developer-collective imagined as if a 1990s shopping-mall arcade had grown a meditative slow-pulsing aurora aquarium along its second-floor balcony. The .dev suffix is the developer's quiet workshop -- but here it is reframed as a horizontal moving sidewalk that the visitor watches drift by, not steers. The mood is **zen-contemplative**: still in posture, slow in motion, with vaporwave nostalgia held at a generous, almost meditative distance. Grid-lines motif gives the entire promenade a faint terrazzo-mall floor structure; lens-flare imagery interpolates between the aurora gradient washes; elastic patterns mean every interaction recoils with soft inertia. Where most vaporwave sites lean party-pink-and-cyan loud, this one stays in aurora gradients -- iris blue, mint pearl, dusty mauve, and a soft chrome-silver chrome -- a vaporwave that has grown up. ## Layout Motifs and Structure The composition is **horizontal-scroll** -- the entire site is a single 700vw-wide horizontal promenade, scrolled by mousewheel-to-horizontal mapping. The visitor moves along a meditation walkway, with sections appearing as "stations" along the path. Grid-lines run as a faint terrazzo-floor pattern beneath the entire promenade. **Macro structure:** - **Station 0 - Threshold (100vw):** A single sans-grotesk wordmark "amamya.dev" centered in a vast empty aurora-gradient void. A small clock-face mono cipher (current local time) ticks beneath. Grid-lines floor pattern fades in beneath. - **Station 1 - Project Promenade (200vw):** A horizontal row of 6 project "cards" floating above the grid-line floor. Each card has a lens-flare halo and a soft sans-grotesk caption. Cards bob slowly (3s sine cycle, 8px Y-axis). - **Station 2 - Aurora Atrium (150vw):** A central vista of a wide aurora gradient wash, with a single zen-contemplative pull-quote reading "we ship slowly." Grid-lines floor pattern is denser here. - **Station 3 - Code Garden (150vw):** A horizontal row of 8 tiny "code crystal" snippets -- each a small floating glass cube containing a 4-6 line code excerpt. Cubes drift gently and elastically respond to cursor proximity. - **Station 4 - Colophon (100vw):** A small terminal-style block in sans-grotesk with the colophon text, hovering above a final aurora gradient sunset. **Elastic pattern:** Every interactive element responds with elastic motion -- card hover triggers a "pull then release" spring (spring constant 0.18, damping 0.62, returning to rest with subtle oscillation). Mousewheel scroll is mapped to horizontal scroll with elastic over-scroll at the edges (rubber-band 80px). **Spacing:** Outer vertical padding 14vh (sections feel tall and airy). Horizontal padding within stations 6vw. Vertical rhythm 28px. The promenade total width is approximately 700vw. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Space Grotesk" weight 500 -- a sans-grotesk used at clamp(40px, 5vw, 96px). Tracking -0.01em. The geometric sans gives the promenade a meditative-modernist voice. - **Sub-labels:** "Space Grotesk" weight 400 at 13-14px, tracking 0.14em uppercase. Used for station labels and cipher tags. - **Body text:** "Space Grotesk" weight 400 at clamp(16px, 1.15vw, 19px), line-height 1.7. - **Code snippets:** "JetBrains Mono" weight 400 at 12-14px, used inside the code crystals at Station 3. - **Numerals:** "Space Grotesk" tabular-nums for clock cipher. **Palette (aurora-gradient vaporwave):** - `#0E1230` -- **Iris Deep**, the primary background -- deep ink-blue with a violet cast. - `#252B5A` -- **Indigo Wash**, secondary background for gradient mid-tones. - `#9CD6C3` -- **Mint Pearl**, the soft mint accent for aurora highlights. - `#C8A3D5` -- **Dusty Mauve**, the soft mauve accent for aurora mid-tones. - `#E8CFAA` -- **Pearl Sand**, the warm-pearl accent for aurora warm highlights. - `#C8C8D6` -- **Chrome Silver**, the metallic neutral for grid-lines and card edges. - `#F3F1FF` -- **Lunar Bone**, the rare bright-white for headline text and lens-flare cores. The palette runs as a slow aurora gradient: iris deep -> indigo wash -> dusty mauve -> mint pearl -> pearl sand, layered with chrome silver structure. ## Imagery and Motifs **Core visual motifs:** - **Lens-flare (imagery mandate):** Each project card and major headline carries a soft lens-flare halo -- a radial gradient bloom in pearl sand or mint pearl with a faint chromatic-aberration fringe (a 2px hue-shifted offset in dusty mauve). Lens-flares pulse slowly (4s breathing cycle). - **Grid-lines (motif mandate):** A terrazzo-mall floor pattern runs beneath the entire promenade -- a 64px grid of chrome-silver thin lines at 14% opacity, with occasional dusty-mauve dots at intersections. The floor pattern parallaxes slightly with horizontal scroll (0.6x rate). - **Elastic pattern:** All hover and scroll interactions respond elastically -- spring constant 0.18, damping 0.62. Mousewheel-to-horizontal scroll has 80px rubber-band over-scroll. - **Aurora gradient washes:** Background gradients run as slow-moving auroras -- conic gradients with offset hue stops, animated by rotating the conic origin at 60s cycle. - **Code crystal cubes:** Station 3 features tiny floating "code crystal" cubes -- 3D CSS transforms producing a glass-block effect with a code excerpt visible on the front face. Cubes rotate 8deg on cursor proximity. - **Clock cipher:** The threshold wordmark is accompanied by a live-updating clock (visitor's local time) in mono sans tabular-nums. ## Prompts for Implementation **Opening narrative:** Page loads on Iris Deep. Over 2.8s, the aurora gradient wash blooms on (slow alpha and conic rotation begin); the grid-lines terrazzo floor pattern fades in at 14% opacity; the wordmark "amamya.dev" appears letter-by-letter (90ms stagger) with a small per-letter Y-bob; the clock cipher starts ticking. The visitor is positioned at horizontal-scroll origin 0. **Scroll narrative:** As the user scrolls (mapped horizontally), the promenade drifts past. Each station's content reveals as it enters viewport center -- cards fade-and-bob into position (60ms stagger), lens-flare halos pulse-on, code crystals rotate on. Grid-lines floor pattern parallaxes at 0.6x rate, creating a depth illusion. Aurora gradient continues its slow 60s conic rotation. At the edges of the promenade, scroll bounces back with elastic rubber-band. **Microinteractions:** - **Project card hover:** Card elastic-pulls 8-12px toward cursor (spring 0.18, damping 0.62), releases with soft oscillation; lens-flare halo intensifies (24% to 36% opacity); caption underlines via 220ms draw in mint pearl. - **Code crystal hover:** Cube rotates 8deg toward cursor; the code excerpt's syntax highlight shifts hue slightly; the cube's glass-edge gains a 1.2px chrome silver outline. - **Pull-quote hover:** Quote scales 1.0 to 1.015 with elastic settling. - **Clock cipher hover:** Cipher pulses dusty mauve to pearl sand over 600ms. - **Scroll edge:** Reaching either edge of the promenade triggers an 80px elastic rubber-band with 600ms settle. **Storytelling:** The site is structured as a slow meditation walk along a developer's promenade. Station anchors: "Threshold," "Project Promenade," "Aurora Atrium," "Code Garden," "Colophon." The voice is zen, slow, slightly nostalgic. There are no marketing CTAs. The colophon ends with "ship slowly, sleep often." **Typography motion:** Space Grotesk display reveals letter-by-letter with a 90ms stagger and a per-letter Y-bob of 4-6px. Body sans fades-in line-by-line (32ms cascade). Code crystal JetBrains Mono types in with a 30ms-per-character cadence. **AVOID:** stat-grids, pricing tiers, "hire me" CTAs, social-proof testimonial blocks, three-up service tiles, generic vaporwave loud-cyber cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal-scroll promenade:** The entire site is a single 700vw-wide horizontal promenade, scrolled by mousewheel-to-horizontal mapping. Vertical scroll is suppressed -- the visitor walks the path. 2. **Vaporwave as zen, not as party:** The vaporwave aesthetic is rendered in slow aurora gradients (iris, mint pearl, dusty mauve, pearl sand) with chrome-silver structural lines, holding the genre in a meditative register. 3. **Grid-lines terrazzo floor:** A 64px chrome-silver grid floor pattern parallaxes at 0.6x rate beneath the promenade, creating a faint mall-arcade architectural floor. 4. **Code crystal cubes:** Station 3 features tiny 3D CSS-transformed glass cubes containing code excerpts, rotating 8deg on cursor proximity -- a developer-portfolio metaphor not present in other designs. 5. **Elastic mousewheel-to-horizontal scroll with rubber-band edges:** The entire navigation is elastic -- spring physics on every hover, rubber-band over-scroll at edges. **Chosen seed/style:** Planned seed -- aesthetic: vaporwave, layout: horizontal-scroll, typography: sans-grotesk, palette: aurora-gradient, patterns: elastic, imagery: lens-flare, motifs: grid-lines, tone: zen-contemplative. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused vaporwave aesthetic (1%), lens-flare imagery, grid-lines motif, aurora-gradient palette, and horizontal-scroll layout with elastic patterns and zen tone.