# Design Language for addrproxy.com ## Aesthetics and Tone addrproxy.com is staged as **the cheerful flight-deck of a sun-drenched orbital relay station** — a sci-fi command surface where postal addresses are not records in a database but glowing packets in transit, hand-drawn by an off-duty cartographer who got bored of vector neatness and decided to render the future in colored pencil. The site is a **glassmorphic hex-comb HUD floating over a noon-bright sky** rather than the usual cyberpunk midnight: sci-fi without the gloom, neon without the rain, futurism that smells like sunscreen and fresh ink. Picture the morning shift on a Mediterranean spaceport — the air is clear, the windows are huge, every readout is a frosted hexagon you can squint through, and somebody on staff keeps annotating the official telemetry in pink and yellow highlighter because the official telemetry is too dry to be honest. The mood is **optimistic-bright**: a deliberate refusal of the dark-mode default that has swallowed nearly every "proxy / privacy / network" landing page on the web. addrproxy.com is the privacy product that does not look paranoid. It looks like a friend's atlas, photocopied and laminated and stuck on the bridge of a small, kind starship. The page should feel as if a competent six-year-old illustrator and a NASA UI designer co-authored every screen at lunchtime, and neither was willing to tone the other down. Inspirations, named: **Frank Hampson's Dan Dare cockpit interiors**, **Jean Giraud (Mœbius) hand-inked space-station diagrams from L'Incal and Arzach**, **the Dymaxion air-ocean map** redrawn in fluorescent gel pens, **Sega Saturn box-art chrome-bevel hexes**, **the Apollo 11 onboard checklist binder annotated in Crayola**, **Casio F-91W LCD aesthetics as if printed on rice paper**, **Wes Anderson's *Asteroid City* observatory palette filtered through Tron-arcade neon**, and **Studio Ghibli's *Castle in the Sky* sky-fortress instrument panels**. The texture floor is **hand-drawn imperfection**: every "official" hex tile of the HUD is overlaid by a wobbly graphite duplicate, every neon stroke has a slightly off-register pencil shadow, every chart axis is annotated by a fast cursive footnote in the margin. Glassmorphism keeps the technology legible; hand-drawing keeps the technology kind. Glitch interruptions remind the visitor that an *address proxy* is, fundamentally, a misdirection — so the screen occasionally lies on purpose, slips one frame sideways in cyan/magenta, and corrects itself with a wink. The voice never warns and never frightens. It says: *your address goes through here and comes out somewhere else, and that's cheerful, actually.* It is a privacy tool that begins with a sunrise. ## Layout Motifs and Structure The structure is a **hexagonal-honeycomb HUD** — not a card grid, not a bento box, not a dashboard. The entire page is a single contiguous comb of irregular hexes at three nested scales (macro, mid, micro), pinned to a 60°-rotated axial coordinate system rather than the usual rectangular CSS grid. Each hex is a frosted glass tile with a 1.5px hand-drawn pencil border laid on top, and each hex is *addressable* — every hex has a six-digit hex ID stamped in its upper-left corner (e.g. `H-7A2F`), which is the visual rhyme with the product (an "address proxy" naming every one of its own UI cells). The page is a **vertical scroll through ten honeycomb plates**, each plate a full viewport. The plates are not stacked — they slide *into each other* hex-by-hex, so what looks like one continuous comb is actually a parallax of six honeycomb layers descending at slightly different speeds. The visitor scrolls and the comb breathes; cells in the foreground drift at 1.0×, mid-ground at 0.7×, and background sky at 0.3×. The illusion is of flying slowly *through* a comb that extends in every direction. The ten plates, in order: 1. **Sunrise Lattice (Approach).** Wordmark "addrproxy" set in a single oversized hex; the surrounding 36 hexes light up in sequence as the page loads, like landing-strip beacons. Tagline beneath, hand-lettered: *"the postal address that arrives somewhere else."* 2. **The Origin Cell.** A single hex labeled `H-0001`, drawn larger than its neighbors, captioned *"this is your real address."* It pulses gently. A soft pencil arrow drawn into the next hex. 3. **The Relay Comb.** Twenty-four hexes, each labeled with a fictional relay codename (Halcyon, Kestrel, Mariner, Polaris, Ursa, Vela, etc.), connected by curved hand-drawn graphite lines. Hovering any hex lights its trail. This is the explanation — *the packet hops*, and each hop is a hex. 4. **Sun-side Telemetry.** A wide-format hex grid where each cell is a tiny gauge: not as a chart, but as a pencil-sketched dial with a neon-electric needle. Counters tick up as you scroll into view — packets relayed, postcards diverted, lighthouses lit. 5. **The Glitch Plate.** The hex-comb breaks for a single viewport: cyan/magenta channel separation, the labels scramble for ~1.2 seconds, then snap back into perfect alignment. Caption appears post-glitch in handwriting: *"yes, it's supposed to do that. that's the point."* 6. **Field Notebook.** Two-column hex spread: left column is "official spec" in retro-display caps, right column is the same spec re-annotated in hand-drawn margin notes ("this is where the parcel actually goes," with a doodled rocket). 7. **The Cartographer's Plate.** A full-bleed hand-drawn world map in honey-yellow ink with hex-shaped territories, neon-electric postal routes traced like aurora arcs between continents. 8. **The Optimistic Disclosure.** What addrproxy *does not* do — printed transparently, hex by hex, no marketing curlicue. *"we do not sell, we do not log beyond seven days, we do not hide what we are doing from you."* Each hex is a one-line vow. 9. **The Lighthouse.** A single hex, isolated, in the dead center of an otherwise empty plate. The hex contains a hand-drawn lighthouse with a slowly rotating beam. Caption: *"if the relay fails, this is what blinks."* Beam rotates a real 360° every 18 seconds. 10. **Resurface.** The honeycomb dissolves upward; the wordmark returns at small scale; a single contact hex hovers in the bright sky. No "buy now," no pricing tier. The footer is one sentence in pencil: *"addresses arrive. that's all."* Every plate is **full-bleed**. There is no sidebar, no sticky nav, no breadcrumb. The honeycomb itself *is* the navigation: hovering any hex anywhere on the page reveals a faint hex-id, and clicking jumps the camera to that cell with a smooth 600ms parallax glide. ## Typography and Palette **Type stack — Google Fonts only:** - **Monoton** — the wordmark and primary retro-display headline face. Monoton's hollow-line characters give the inline-stripe arcade-marquee feel of late-70s sci-fi paperbacks (the Penguin *Foundation* covers, the original *2000 AD* mastheads). Used at clamp(96px, 14vw, 240px) for plate-1 wordmark with letter-spacing 0.02em and a 1px neon-electric outer stroke. Monoton is deliberately impractical; it's used sparingly — wordmark, plate titles, and large standalone numerals only. - **Major Mono Display** — secondary retro-display for hex-IDs (`H-7A2F`), gauge labels, and the "official spec" column of the Field Notebook plate. Its tall, precise mono-monoline letters carry the cockpit-readout register without the cliché of Courier or Roboto Mono. Used at 14–22px, all caps, letter-spacing 0.12em, color in foreground neon. - **Caveat** — the hand-drawn voice. Caveat is a Google Fonts handwritten script designed by Impallari that genuinely *feels* like a felt-tip pencil rather than a polished cursive. Used for every margin annotation, every "yes, it's supposed to do that," every doodled caption, at 18–28px in the warm coral or hot-pink ink colors below. Variable line-height between 1.4 and 1.7 to mimic real margin scribble. - **Inter** — the workhorse for any longer-form body paragraph (only present on the Optimistic Disclosure and Cartographer's plates). Plain weight 400, 16px, color #1B2A3A. Inter is invisible by design here; it carries text the other three faces would make unreadable in volume. **Palette — neon-electric over a sun-bright glass field:** - `#F5F8FF` — **Daylight Cream**. The base sky background. Not white — a faint cool-warm cream, like aged graph paper held to a window at noon. Used as the canvas of every plate. - `#1B2A3A` — **Deep Indigo Ink**. The hand-drawn line color, all pencil borders, all body text. Never pure black. This is the ink that draws every hex border, every pencil arrow, every cartographer's margin note. - `#00F0FF` — **Electric Cyan**. The first neon-electric accent. Used for active hex glow, primary chart needles, and the rear channel of the glitch effect. Always rendered with a 12–24px outer-glow filter and an 80%-opacity inner core. - `#FF2EC4` — **Hot Magenta**. The complementary neon. Used for hover states, the front channel of the glitch effect, and the lighthouse beam. Pairs with cyan to drive the chromatic aberration on the glitch plate. - `#FFD23F` — **Solar Yellow**. The cartographer's ink and the honey-yellow continent fill on the world map. Used at 70–90% opacity over the cream base to create the warm, lit, daylight-on-paper feel that distinguishes this design from every cyberpunk-proxy site that has come before. - `#7CFFB2` — **Mint Pulse**. The "everything is fine" status color. Used for the lighthouse-not-failing indicator, the seven-day-log counter, and the gentle pulse of the origin cell. Deliberately friendlier than the harsh greens of terminal-aesthetic. - `#FF7A59` — **Coral Annotation**. The handwritten-margin-note color. Caveat text is rendered in this coral at 90% opacity, never in neon, to keep the human voice distinct from the cockpit telemetry voice. - `#B8C4D9` — **Frosted Glass**. The 35%-alpha tint inside every hex tile. Combined with backdrop-filter blur(18px) saturate(140%), this is the literal glassmorphic substrate. Every other color sits on top of this layer. The palette ratio across the page: cream 55%, indigo 18%, frosted-glass tint 12%, solar yellow 7%, electric cyan 4%, hot magenta 2%, mint pulse 1%, coral annotation 1%. Magenta and cyan are kept rare on purpose so each appearance reads as an event. ## Imagery and Motifs **Hand-drawn lines are the unifying texture, but they are the *opposite* of the cottagecore-watercolor hand-drawn that dominates the registry.** Every hand-drawn element on addrproxy.com is rendered as a **technical pencil illustration** — 0.5mm graphite on graph paper, schematic discipline, no painterly bleed. The diagrams of relay paths, the world map, the lighthouse, the gauges, all of it is drawn the way an aerospace draftsman would have drawn an instrument-panel exploded-view in 1972, except the draftsman is also leaving cheerful margin notes in pink coral pen. This pairing — schematic ink + cheerful annotation — is the signature. **Sci-fi-HUD motifs, but warmly lit:** - **Hexagonal cells** are everywhere — they are the page's structural unit. Every hex has a six-digit ID stamped in Major Mono Display at the upper-left. IDs increment across the page so a visitor with sharp eyes can read them as a path: `H-0001 → H-0002 → … → H-0144`. - **Reticle crosshairs** appear at the center of any hex the cursor is currently inside, drawn in cyan with a 200ms fade-in. They are small (12px) and never aggressive. - **Telemetry tickers** at plate edges scroll quietly: *"PACKET 472 RELAYED · UPTIME 99.97 · LIGHTHOUSE OK · TEMP NOMINAL · BEACONS 14/14"*. They never cover content. They are rendered in Major Mono Display 11px in indigo at 50% opacity. - **The Lighthouse** is the recurring motif of trust. It appears as a tiny watermark in the corner of every plate, full-size on plate 9, and as a 16px favicon-scale tile in the contact hex on plate 10. Its beam is the single source of magenta on a non-glitch plate; everywhere else magenta is reserved for failure-channel. - **The Compass Rose**, hand-drawn, hex-shaped instead of star-shaped, anchors the cartographer's plate. Six points instead of eight, labeled *Halcyon · Kestrel · Mariner · Polaris · Ursa · Vela* — the same six relay codenames that populate plate 3. **Glitch as decorative event, not destructive aesthetic.** The page has exactly *three* scheduled glitches: 1. The Glitch Plate (plate 5): a deliberate 1.2s chromatic-aberration on entry, then perfect snap-back. 2. Hover-glitch on the wordmark: a 90ms cyan/magenta separation, fixed instantly. Charming, not threatening. 3. The "404-style" on a non-existent hex: clicking outside the comb produces a one-time 200ms scramble of the nearest 6 hex IDs and a coral-pen note: *"that hex is not on this map. try another."* The glitch never persists, never degrades the page, never feels like a bug. It is a wink. **Pattern library, page-wide:** - **Hex tile** — frosted-glass fill #B8C4D9 35%, indigo 1.5px stroke, hand-jittered SVG path (`d` attribute regenerated with ±0.6px per anchor on load), 6° drop-shadow at 8px blur in indigo at 12% alpha. - **Pencil arrow** — quadratic-bezier hand-drawn arc, indigo, 2px stroke, with a ~3% per-segment width variance to mimic graphite pressure. Used for every directional cue, never replaced by an emoji or icon arrow. - **Margin annotation** — Caveat in coral, 22px, slight 2° rotation, with a wavy underline drawn beneath any phrase that the annotation is "underlining." Each annotation has a hand-drawn arrow connecting it to its referent in indigo. - **Aurora line** — a 4px gradient stroke, neon-cyan to mint to solar yellow, used only for postal routes on the world map. Never used elsewhere. ## Prompts for Implementation Build addrproxy.com as a **single long HTML document** — one `
`, ten `
`. No SPA framework, no client-side router, no pricing block, no testimonials, no "as featured in," no stat-grid summary. The page is a *flight*. It begins with a wordmark and ends with a sentence in pencil. There is no CTA above the fold because there is no fold. **Honeycomb geometry primer.** Use SVG, not CSS grid, for the comb. Each hex is a `` on a 60°-rotated axial-coordinate basis: every hex anchor is `{x: col * 1.5 * R, y: row * sqrt(3) * R + (col % 2) * sqrt(3)/2 * R}`, where R is the hex radius. A single root `` per plate. Group hexes by parallax depth: ``, ``, ``. On scroll, translate each group by `-window.scrollY * (1 - depth*0.3)`. This produces the "flying through the comb" effect at near-zero JS cost. Hex IDs are emitted as `` siblings, not as DOM children of the polygon. **Glassmorphism layer.** Each hex has TWO SVG filters applied: (1) a backdrop blur via `` for the frosted substrate, and (2) a hand-jitter on the polygon path via `` to give the pencil-on-paper wobble. The double filter is what creates the unique signature texture: clean cockpit glass + hand-trembled outline. **Plate-by-plate prompts:** 1. **Sunrise Lattice.** On load, daylight cream background. The 36 surrounding hexes ignite in a clockwise sequence: each hex fades from 0% to 100% opacity over 80ms, staggered 35ms per cell. Once the ring completes, the central wordmark hex fills with cyan-to-magenta vertical gradient. Total cinematic load < 1.5s. 2. **Origin Cell.** Single hex, 30% larger than neighbors, mint-pulse glow on a 2.4-second sinusoidal cycle. As the visitor scrolls into view, a hand-drawn pencil arrow draws itself toward the next plate using SVG `stroke-dasharray` animation over 1.1s. 3. **Relay Comb.** 24 named hexes connected by 36 curved graphite lines. On `mouseenter` any hex, every line connected to that hex animates its `stroke` from indigo to electric cyan over 220ms; the hex itself rises 6px with a soft drop-shadow grow; the connected destination hexes glow mint. On `mouseleave`, all reverse over 320ms. 4. **Sun-side Telemetry.** Six hex gauges, each rendered as a hand-drawn pencil dial. The needle is a neon-cyan SVG line that animates with `IntersectionObserver`: as the plate enters the viewport, each needle sweeps from 0° to its target angle over 800ms with a `cubic-bezier(.2,.8,.2,1)` ease. Counter labels (Major Mono Display) tick from 0 to target value in lockstep with the needle. 5. **Glitch Plate.** On 50%-viewport entry, trigger a JS-scheduled 1.2s sequence: t=0 split text into two `` clones, position cyan-tinted clone at +6px X / +0px Y, magenta-tinted clone at -6px X. t=400ms scramble each label's text content for 280ms (random hex-IDs). t=680ms snap back. t=720ms render the coral handwritten caption with a 200ms typewriter reveal in Caveat. 6. **Field Notebook.** Two-column hex grid. Left column hexes have a Major Mono Display label and a 4-line spec in Inter. Right column hexes have a Caveat handwritten annotation and a hand-drawn arrow connecting to the left column's hex. Annotations are positioned at randomized 1–4° rotations between -2° and +2° to avoid mechanical alignment. 7. **Cartographer's Plate.** Full-bleed hand-drawn world map. Continents are unioned hex shapes filled in solar yellow at 80% opacity. Postal routes are aurora-line SVG paths, each animating its `stroke-dashoffset` from full-length to 0 as the plate scrolls into view, with staggered delays so the 14 routes draw themselves over 4 seconds in waves. 8. **Optimistic Disclosure.** A vertical column of nine hexes, each containing one short vow in Inter 18px. Hexes pulse mint at 0.5Hz when in view. No animation on hover — these statements should feel still, declarative, factual. 9. **Lighthouse.** Single isolated hex, dead center, 320px wide. The lighthouse SVG inside has a `` "beam" element that rotates 360° every 18 seconds via CSS `@keyframes`. The beam is a 60°-wedge `` filled with a magenta-to-transparent radial gradient at 40% opacity. The beam is the only persistent magenta on the page. 10. **Resurface.** Wordmark scales from 100% to 24% over the final 80vh of scroll. The honeycomb cells fade upward sequentially as the visitor scrolls, leaving only the contact hex and the pencil-written closing line. The closing sentence is rendered in Caveat with a typewriter draw-in animation triggered when the line enters viewport. **Cursor behavior.** The cursor is replaced by a 16px hand-drawn hex reticle in indigo with a 1px cyan core. On hovering any hex, the reticle scales to 24px and the hex's six-digit ID appears 18px below the cursor in Major Mono Display 11px coral. The reticle has a 90ms lag-spring follow (not magnetic snap — gentle elasticity). **Scroll feel.** Use `scroll-behavior: smooth` and a momentum-friendly inertia (`overscroll-behavior: contain`). No scroll-jacking. The visitor is in control. The parallax does the work of cinematic movement without taking the wheel. **No CTA, no pricing, no signup form on this page.** The contact hex on plate 10 reveals a single mailto link, written in Caveat as if it were a margin note: *"write to us — we read everything."* That is the entire conversion surface. **Storytelling discipline.** Every animation must serve the metaphor: *an address departs, hops through a sunlit relay comb, arrives somewhere else.* If an animation does not advance that story, it does not ship. The site is a flight, not a brochure. ## Uniqueness Notes This design's distinct departures from the other 50 designs in the registry and from default sci-fi-proxy aesthetics: 1. **Optimistic-bright sci-fi.** The "proxy / privacy / network" web is canonically dark — black backgrounds, neon green terminal text, paranoid rain. addrproxy.com is the first design in the registry to render sci-fi-HUD on a **#F5F8FF daylight cream** field at 55% pixel-area, treating the trust message as a sunrise rather than a midnight bunker. The frequency analysis confirms `optimistic-bright` is at near-zero adoption and `dark-mode neon` is the default this design is deliberately rejecting. 2. **Hexagonal-honeycomb as load-bearing layout, not decoration.** The registry shows `hexagonal-honeycomb` at near-zero adoption while `card-grid` (56%) and `centered` (76%) dominate. This design uses honeycomb not as a hero motif but as the **primary geometric substrate** — every UI cell on every plate is a hex on a 60°-rotated axial coordinate system, navigated by a six-digit hex-ID convention that doubles as a thematic rhyme with the product name "addrproxy." 3. **Schematic-pencil hand-drawn, not cottagecore-watercolor.** `hand-drawn` is at 92% — the most overused aesthetic in the registry — but its overwhelming prior usage is botanical, watercolor, and pastoral. addrproxy.com inverts that: hand-drawn is rendered as **0.5mm graphite technical illustration** (Hampson's Dan Dare, Mœbius's Arzach, NASA exploded-view draftsmanship) with cheerful coral margin annotations. This is the first hand-drawn design in the registry whose drawing reference is *aerospace schematic*, not *botanical sketchbook*. 4. **Sci-fi-HUD as warm motif.** `sci-fi-hud` is at 2% adoption and is virtually always paired with `dark-mode` and `cyberpunk` palettes. This design pairs sci-fi-HUD with `optimistic-bright` tone, `daylight cream` background, and `solar-yellow + mint-pulse` accents — the inversion of HUD-aesthetic's normal nighttime register. 5. **Glitch as a wink, not a wound.** `glitch` patterns are at 12% in the registry and almost always rendered as a destructive, decay-forward, system-failing aesthetic. addrproxy.com schedules **exactly three glitches** across the entire page, each lasting under 1.5 seconds, each followed by a snap-back to perfect alignment and a handwritten margin note acknowledging the glitch ("yes, it's supposed to do that"). Glitch is reframed as a charming acknowledgment that misdirection is the *product*, not a failure mode. 6. **Retro-display typography from genuine sci-fi paperback covers.** `retro-display` is at 6%, almost always rendered through Bebas, Anton, or generic condensed sans. This design uses **Monoton** (hollow inline-stripe, faithful to 1970s sci-fi paperback mastheads and arcade-marquee chrome) paired with **Major Mono Display** (cockpit telemetry register without the Courier-Mono cliché). Both are Google Fonts. 7. **Honeycomb parallax instead of card-grid scroll.** Where the registry's 56% card-grid + 92% parallax norm produces stacked rectangular containers sliding at slightly different speeds, this design produces six honeycomb depth layers translating through each other at depth-stratified speeds, creating the sensation of *flying through* a comb that extends in every direction rather than scrolling past a stack of cards. 8. **No CTA, no pricing, no signup form.** Per the SDESIGN guidance to bias against CTA-heavy and stat-grid layouts, this design has **zero** above-the-fold conversion surface, **zero** pricing tiers, **zero** testimonial blocks, and **zero** stat-grids. The single conversion surface is a Caveat-handwritten mailto on plate 10. The page is a flight; the conversion is a friend. 9. **Documented seed:** *aesthetic: glassmorphism, layout: hexagonal-honeycomb, typography: retro-display, palette: neon-electric, patterns: glitch, imagery: hand-drawn, motifs: sci-fi-hud, tone: optimistic-bright.* 10. **Avoided patterns from frequency analysis:** explicitly avoided `card-grid` (56%), `centered` (76%), `gradient` (92%), `warm` (90%) palettes, `mono` typography (94% — replaced with retro-display), `parallax` as the *only* motion (still used, but subordinate to honeycomb depth), `cursor-follow magnetic snap` (replaced with a gentle 90ms lag-spring reticle), `photography` imagery (96% — replaced with schematic pencil illustration), and `dark-mode` (rejected at the canvas level in favor of `daylight cream`).