# Design Language for addrenvoy.com ## Aesthetics and Tone addrenvoy.com is a **seapunk lobby for a parcel-relay diplomatic service** — imagine the sending desk of a 1996 Caribbean cyber-courier, half rendered in Studio Magicien CD-ROM ripples and half airbrushed onto the side of a sun-bleached Honda Civic in a Miami drift parking lot. The premise: every "address" handled by the envoy is a packet that has to dive *through* a warm tropical packet-ocean before arriving at its destination, and the site is the surface tension where those packets enter and exit the water. The mood is decisively **energetic** — caffeinated, sun-warmed, dolphin-cursored — never the cool melancholic vaporwave that usually owns this aesthetic neighborhood. We are reclaiming seapunk from its lavender/teal default and pulling it into the **burnt-orange** end of the spectrum: think a rolled-up beach towel that's been left in a hot trunk, the sun setting over a Sega Saturn boot screen, dolphin emojis but lit from below by a campfire. Every interaction should feel like *jumping into warm water*. Inspirations: 1995 Geocities under-construction GIFs but rendered in 2026 GPU shaders, the typography of Wipeout 2097, Lisa Frank trapper-keepers re-colored by a thunderstorm at golden hour, Hiroshi Nagai paintings sampled into a 60-second cassette loop, the Athleta page of an old Delia*s catalog soaked in mango juice. The tone of voice in copy is upbeat, slightly slangy, faintly diasporic — addresses are "delivered home," packets are "swimming in," the envoy is an enthusiastic dolphin-riding postman. Nothing is corporate. Nothing whispers. The page *grins*. ## Layout Motifs and Structure The structure is **immersive-scroll** — a single uninterrupted vertical descent in which the reader physically dives from the surface of the packet-ocean down to the seafloor where addresses are sorted, then resurfaces on the opposite coast. Eleven full-viewport "depth strata" are stacked: Surface Glare → Spray Layer → Wave Crest → Wave Trough → Sun-shaft Column → Reef Shelf → Coral Switchboard → Kelp Switchyard → Trench Mailroom → Black-Smoker Sorting Vent → Resurface (sunrise on the receiving coast). Each stratum is a full 100vh panel. The signature spatial grammar is **layered-depth**: every panel uses a *six-plane parallax stack* (background bokeh, mid-water particulate, foreground silhouettes, copy plane, cursor reflection, and a topmost caustic-light gobo) that scroll at independently tuned speeds (-0.85x, -0.55x, -0.25x, 0x, +0.15x, +0.55x). The reader's eye is never on a single plane — depth is the layout, not a decorative side-effect. Copy is set on Plane 4 (zero-parallax) so it stays fixed-feeling while everything around it drifts; this anchors reading without sacrificing the dive sensation. There is **no horizontal navigation bar**. Instead a vertical "depth gauge" rides the right gutter — a slim 2px column showing meters below surface (-0m to -2400m) that fills with burnt-orange liquid as the reader descends. A tiny dolphin glyph slides down this gauge and is the only persistent UI element. Click the dolphin to "ascend" (smooth-scroll back to surface). The grid inside each panel is deliberately **buoyant**: copy blocks are positioned on a 12-column field but *anchored to floating "buoy" coordinates* that drift sinusoidally ±6px on a 9-second period, giving the entire layout the gentle bob of objects floating in a swell. This is not the same as parallax — it's **ambient buoyancy**, an under-used motion vocabulary that keeps the page feeling wet even when scroll velocity is zero. Section transitions happen via **bounce-enter** — copy blocks for each new stratum arrive overshooting their final position by 14% then settle with a damped spring (mass: 1, stiffness: 180, damping: 12). The bounce reads as the impact of breaching a new water layer, not as generic "fancy reveal." It is the chosen motion-signature of the site. ## Typography and Palette **Type stack — Google Fonts only:** - **Jost** — display headings and the dolphin-courier wordmark. Jost is the closest faithful Google Fonts revival of Renner's Futura with the modern hinting needed for screen. We set the H1 ("addrenvoy // packet ferry across warm latitudes") at clamp(72px, 11vw, 196px), weight 800, letter-spacing -0.04em, and apply a single horizontal squash transform (scaleX 0.92) for that 1996 chrome-stretched logo feel. Jost's perfect circular `o`, `e`, `c` and the sharp triangular `A` give us the **futura-geometric** signature without having to license actual Futura. - **Sora** — secondary display and section labels (e.g., "DEPTH — 480m / SPRAY LAYER"), weight 600, letter-spacing 0.18em, all-caps. Sora's geometric humanism plays second fiddle to Jost without competing — a quiet partner for caption-grade information. - **Outfit** — running body copy at 17px / line-height 1.55. Outfit is variable-weight and we drift the wght axis from 320 to 380 across the depth strata so deeper sections quietly get heavier (increased "water pressure" on the type itself). A small, almost-subliminal narrative trick. - **Space Mono** — used *only* for the depth-gauge readout, packet IDs, and the addresses themselves (e.g., `RT/AE/04481/MIA→KAO`). 14px, weight 400. The contrast between geometric humanist sans and a single utility mono is the entire type-system — no third tier. **Palette — burnt-orange dominant, seven anchored values:** - `#C2501C` — **Sun-Trunk Orange** (primary brand, the burnt-orange anchor; the dolphin's belly, the depth gauge fill, primary CTA glow) - `#7A2A0E` — **Reef Rust** (deep accent for trench panels and heavy type) - `#F2A65A` — **Mango-Spray** (highlight, hover state, surface glare) - `#2A6E78` — **Lagoon Teal** (the *only* cool tone, used surgically — water mass beneath the sun, kelp silhouettes; never as a primary) - `#0F2A33` — **Trench Indigo** (deepest background at -2400m, near-black with a teal cast) - `#FFE6C4` — **Hot-Sand Cream** (running body copy on dark, paper-cream on light panels) - `#E84D2E` — **Coral Flare** (used once: the moment of "packet delivered" confirmation, otherwise forbidden) The palette is deliberately **warm-leading-cool**, the inverse of conventional ocean/aqua design where cool dominates. Burnt orange occupies ~55% of pixel-area; lagoon teal occupies ~12%; the rest is sand, cream, and rust. ## Imagery and Motifs **Bokeh-background is the foundational visual layer.** Every depth stratum sits in front of a procedurally rendered bokeh field: 60–120 soft circular light disks (CSS `radial-gradient` + heavy `filter: blur(24px)` + 35% opacity) drifting at the parallax speeds defined above. The bokeh circles are sized lognormally (radius 18–280px) and tinted from a 4-stop gradient between Sun-Trunk Orange and Mango-Spray near the surface, shifting through Reef Rust at mid-depth, and finally to Trench Indigo with rare Coral-Flare flashes at the seafloor. The bokeh is generated client-side from a seeded RNG so every reload looks subtly different but the *aesthetic fingerprint* remains identical — a living lens-flare ocean. **Layered-depth motifs that recur:** - **Dolphin-Envoy** — a flat-vector dolphin in two colors (Sun-Trunk + Hot-Sand belly), facing right, drawn as an SVG with seven articulated path segments. Appears nine times across the scroll: surfacing on Panel 1, diving the water columns on Panels 3–7, sleeping on a coral switchboard on Panel 8, carrying a packet upward on Panel 11. Cursor position within ±240px of the dolphin causes it to turn its head toward the cursor (SVG attribute interpolation on a single rotate transform). - **Packet-Fish** — small (24–48px) iridescent rectangles with rounded corners and a single white "scale" highlight, schooling in loose flocks across mid-water panels. Each packet-fish carries a tiny address fragment as a 9px Space Mono label that becomes legible only when the cursor approaches. - **Sun-Shafts** — diagonal volumetric light cones (CSS `linear-gradient` with `mix-blend-mode: screen`) descending at 18° from upper-right to lower-left through Panels 2–5. They animate slowly (8s loop) as if filtered through moving surface waves. - **Caustic-Light Gobo** — the topmost plane on every panel is a transparent SVG with hand-drawn caustic line-work (think pool-bottom dappling) that animates a subtle Perlin-noise displacement. This unifies the entire scroll under one moving-water atmosphere. - **Coral Switchboard** — Panel 7 features a hand-illustrated coral colony where every coral polyp is a glowing labeled jack ("MIA-04," "KHH-12," "LHR-00") — a sea-creature reframing of a 1940s telephone exchange. This is the visual centerpiece and the meme of the site. - **Black-Smoker Sorting Vent** — Panel 10's hero motif: a hydrothermal vent rendered in pure CSS (concentric burnt-orange radial gradients with a slow hue-rotate), erupting tiny packet-fish that spiral upward and out of frame. It's where addresses are "decided." **No raster photography anywhere.** Every illustration is SVG or CSS-drawn. The site never breaks its hand-illustrated tropical-cybernetic universe by importing a real photograph. ## Prompts for Implementation Build addrenvoy.com as a **single long HTML document** — one `
`, eleven `
`, no SPA framework, no client-side router, no "above the fold" pricing block. The page is a *dive*. The hero is the act of descending and resurfacing. Narrative > conversion. **Panel-by-panel implementation prompts:** 1. **Surface Glare (0–100vh).** On load, the page is overexposed white-cream (`#FFE6C4`) for 600ms. Then the bokeh field fades in from white, the Jost wordmark "addrenvoy" arrives via **bounce-enter** from y:-80px overshooting +14% then damped-spring settling, while a single Mango-Spray sun-disk rises from the bottom edge to ~30vh. The dolphin breaches from the right, rotates once (360°, 1.4s ease-out), and rests on the right gutter. As soon as the user scrolls 1px the depth gauge appears in the right gutter. 2. **Spray Layer (100–200vh).** The bokeh thickens. White spray-particles (12px circles, opacity 0.4, blur 4px) drift up-and-right at 0.85x scroll speed. The H2 "we ferry packets through warm water" arrives bounce-enter from x:+120px. A single packet-fish swims left-to-right behind the H2, dropping a Space Mono label that reads `pkt://AE-0001/depart` then dissolves. 3. **Wave Crest / Wave Trough (200–400vh).** Between these two panels the reader's viewport "breaches" — implement a single 1.6s scroll-locked moment where the bokeh inverts (orange → teal-tinted) and a CSS-drawn wave crest sweeps across the entire viewport on a `clip-path` reveal, scoring a "thump" of motion (no audio, purely visual: a 4% scale pulse on every plane simultaneously). This is the most expensive moment in the page and the entire panel sequence is built to set it up. 4. **Sun-Shaft Column (400–500vh).** The viewport now feels submerged. The Outfit body weight thickens by 30 wght units. Volumetric sun-shafts descend diagonally. Copy here is the longest narrative passage on the site — a 280-word "depth log" written in upbeat slang about how addresses get carried. Every fifth word is a packet-fish that drifts off to the right when scrolled past. 5. **Reef Shelf (500–700vh).** Asymmetric layout: copy occupies left 40%, the right 60% is a hand-drawn SVG reef colony rendered live with `stroke-dasharray` self-drawing animation (3.2s, ease-in-out). Coral polyps light up sequentially as they finish drawing. 6. **Coral Switchboard (700–950vh) — visual centerpiece.** The reef from Panel 5 continues but now every polyp is an interactive labeled jack. Hovering a polyp causes (a) the polyp to bounce-enter +18%, (b) a translucent Mango-Spray "patch cable" to draw from that polyp toward a destination polyp, (c) a Space Mono caption to appear naming the routing pair. The cursor itself becomes a small jack-plug glyph while inside this panel. 7. **Kelp Switchyard (950–1200vh).** Vertical kelp ribbons (animated SVG path with sinusoidal `d` attribute interpolation, 11s period) sway in front of and behind the copy. Packet-fish school through the kelp — staggered enter every 80ms, total of 24 fish per scroll-pass. 8. **Trench Mailroom (1200–1500vh).** Deepest panel. Background is Trench Indigo. The bokeh thins to ~20 large soft Reef-Rust disks. A skeletal SVG mailroom is sketched in 1px Hot-Sand Cream lines — open mail-slots labeled with the world's longest list of destination codes scrolling slowly upward like an airport departure board. The copy here is set in Outfit weight 380 and is the most somber moment in the otherwise energetic site — a single beat of pressure before the ascent. 9. **Black-Smoker Sorting Vent (1500–1800vh).** A pure-CSS hydrothermal vent erupts from offscreen-bottom. Tiny packet-fish stream out of it spiraling upward via a CSS `@keyframes` animation that uses `motion-path: path()` to follow a hand-drawn helix. Each fish carries a final destination address and flies out of the top of the viewport. 10. **Resurface (1800–2200vh).** The reader ascends. Implement this as a *reverse* of Panels 4→1 played at 1.4× speed: bokeh reorients orange-warm, sun-shafts come back, surface particles increase. The dolphin rises through the entire panel from -480px to 0px on its own dedicated parallax track. 11. **Sunrise on the Receiving Coast (2200–2400vh / final).** A wide horizon line at 60vh, Sun-Trunk Orange sun cresting it, single line of copy: "your packet arrived. say hi." in Jost weight 700 at 96px. A single Coral-Flare burst (the only use of `#E84D2E` in the entire page) pulses once on the final period. Dolphin breaches and exits stage right. **Cross-cutting implementation directives:** - **Cursor:** the cursor is a small custom Sun-Trunk dolphin (12×8px SVG) that leaves a 240ms-decay Mango-Spray bokeh trail behind it. Trail is rendered into a single `` with `globalCompositeOperation = 'lighter'`. - **Scroll velocity → bokeh reactivity:** when scroll velocity exceeds 1200px/s, every bokeh circle blooms +25% radius and -15% opacity, then decays back over 600ms. Fast scrolling literally stirs the water. - **Buoyancy bob:** every text block, every illustration, every UI chip uses a shared `--bob` CSS custom property that drives a `translateY(calc(sin(var(--t)) * 6px))` where `--t` is updated by a single `requestAnimationFrame` loop. One source of bob, applied everywhere — extremely cheap, extremely consistent. - **Bounce-enter intersection observer:** every section header registers with a single shared IntersectionObserver and animates in via Web Animations API spring (`mass: 1, stiffness: 180, damping: 12, velocity: 0.4`). No staggered delay — the bounce IS the signature. Stagger is forbidden here on purpose. - **No CTA-heavy layout, no pricing, no stat-grid.** There is exactly one tiny "send a packet" link in the footer, set in Space Mono 12px, no button styling. The dive itself is the product demonstration. - **No modal, no dropdown, no form on this page.** Every interactive surface is in-flow. - **Reduced-motion fallback** is *not* a design concern per project rules, but the buoyancy bob and bokeh drift use CSS-only transforms that GPU-rasterize cleanly so performance is not a tradeoff for poetry. ## Uniqueness Notes This design's distinct departures from the other 40 designs in the registry and from default seapunk web aesthetics: 1. **Burnt-orange seapunk.** Seapunk's web canon is lavender, cyan, and chrome-teal. addrenvoy.com is the first design in the registry to render seapunk *warm-leading* — Sun-Trunk Orange at 55% pixel-area, lagoon teal used surgically at ~12%, no lavender or chrome at all. The thermal inversion of an aesthetic is the headline differentiator. 2. **Bokeh-background as load-bearing structural layer, not decoration.** Frequency analysis shows no current design uses `bokeh-background` as an imagery primary (the term doesn't even appear in the imagery histogram). Here, the bokeh field is the *primary visual medium* — every depth stratum's atmosphere is the bokeh tinted differently. It is also reactive to scroll velocity, which is unique. 3. **Layered-depth via six-plane parallax with explicit copy-plane anchoring.** Most parallax sites stack 2–3 planes. addrenvoy.com commits to a six-plane stack with copy locked to plane-4 zero-parallax. This is more like film-camera depth-of-field than web parallax and is not used elsewhere in the registry. 4. **Bounce-enter as the section-transition signature.** Frequency shows `bounce-enter` at only 5% across 40 designs. addrenvoy.com makes it the only entrance animation — every section header bounces, nothing fades, nothing slides. Combined with the buoyancy bob this gives the site a coherent "wet physics" feel no other design pursues. 5. **Buoyancy bob as a cross-component ambient motion.** I did not see this pattern in any reference design — a single shared `--bob` custom property driven by one rAF loop, applied to every element so the whole page floats. Different from parallax, different from spring stagger, different from idle-loop scaling. It is the site's invented motion idiom. 6. **Futura-geometric (Jost) as the headline display in a seapunk context.** Seapunk historically pairs with Comic-Sans, Papyrus, or chrome-bevel display. Putting strict Renner-revival geometry against tropical bokeh creates intentional friction — the "diplomatic envoy" half of the brand asserts itself against the "underwater rave" half. 7. **Vertical depth-gauge as the only persistent navigation.** No top nav, no hamburger, no breadcrumbs. The right-gutter depth gauge with a sliding dolphin glyph is the entire UI. Frequency analysis shows no other design uses a depth/elevation gauge as nav. 8. **The Coral Switchboard as central interaction metaphor.** Reframing 1940s telephone-exchange patch-cable routing as a coral colony is a unique conceptual move. It also satisfies the "address envoy" domain semantics without ever drawing a postal envelope, mailbox, or arrow icon — every other "delivery"-type site reaches for those tropes; this one refuses them. 9. **Energetic tone in a typically melancholic aesthetic.** Frequency shows `energetic` at only 2% across 40 designs and seapunk references in pop culture skew dreamy/melancholic. Combining `tone: energetic` with `aesthetic: seapunk` is contrarian by intent — caffeinated tropical cybernetics rather than washed-out nostalgia. **Chosen seed:** aesthetic: seapunk, layout: immersive-scroll, typography: futura-geometric, palette: burnt-orange, patterns: bounce-enter, imagery: bokeh-background, motifs: layered-depth, tone: energetic. **Avoided patterns from frequency analysis:** - Avoided `hand-drawn` aesthetic (90% — overused). - Avoided `glassmorphism` (65% — overused). - Avoided `photography` imagery (95% — overused). - Avoided `full-bleed` + `centered` default layout (85% / 72% — overused). - Avoided `parallax` as a stand-alone signature — used here only as one mechanic of a richer six-plane depth system. - Avoided `mono` as primary typography (92% — overused); Space Mono restricted to depth-gauge and packet IDs only. - Avoided `gradient + warm` as the entire palette story (90% / 90% — overused) by anchoring on a single specific burnt-orange family with surgical cool accents. - Avoided `cursor-follow` (50%) and `magnetic` (35%) — replaced with the more specific dolphin-cursor-with-bokeh-trail and the dolphin-head-tracks-cursor mechanic.