# Design Language for addrproxy.com ## Aesthetics and Tone addrproxy.com is a spatial relay station floating between dimensional membranes — a surreal control interface for routing addresses through impossible geometric corridors. The visual identity channels the disorientation of M.C. Escher's impossible architecture crossed with the cold precision of a network routing table. Every surface appears to exist at multiple depths simultaneously: panels hover in front of other panels, which themselves are windows into receding corridors of stacked geometric forms. The surreal quality comes not from dreamlike softness but from hard-edged geometric impossibility — shapes that shouldn't connect do, planes that should be parallel intersect, and the viewer is never sure which layer is "closest." The tone is futuristic-cutting-edge without being sterile. There is a sense of controlled wonder — the feeling of operating advanced technology that bends spatial rules. The color language uses a triadic palette (magenta, teal, amber) that reinforces the three-dimensional layering: each color "owns" a different perceived depth plane, so the eye reads magenta elements as foreground, teal as midground, and amber as deep background markers. The overall mood is that of a mission-critical relay dashboard reimagined by a surrealist architect — functional impossibility rendered with typographic precision. ## Layout Motifs and Structure The layout uses a **layered-depth** composition system. Rather than a flat page with sections stacked vertically, the design presents content as a series of overlapping planes at different visual z-depths. This is achieved through a combination of CSS transforms (translateZ, perspective), drop shadows with deliberately exaggerated offsets (16-32px), and overlapping positioned elements where "deeper" layers are partially visible behind "nearer" ones. **Structure:** - **Dimensional Gateway (Hero):** A full-viewport entry zone where a central geometric portal — an octagonal frame rendered in thin magenta (#E91E8C) strokes — appears to recede infinitely into the screen. Concentric octagons shrink toward a vanishing point, each ring slightly rotated. The domain name "addrproxy.com" is set in monospaced type at the exact center of the portal, appearing to float at the convergence point. A slow CSS animation causes the rings to pulse outward, creating the illusion that the viewer is traveling forward through the portal. - **Relay Layer Stack (Main Content):** Below the hero, content is organized as 3-5 rectangular panels that overlap each other at deliberate offsets. Each panel is tilted very slightly (1-3 degrees on the Y axis via perspective transform) so it appears to occupy a different depth plane. The panels are arranged in a staggered cascade — the first panel sits flush-left with its top edge overlapping the hero by 80px. The second panel is offset 120px right and 60px down, partially covering the first panel's right edge. The third panel shifts back left and drops further. This zigzag cascade creates a sense of sifting through stacked documents or relay routing cards. - **Signal Path Connectors:** Thin SVG lines (1px, teal #00C9B7) connect related panels, drawn as right-angle paths with small circular nodes at each bend — mimicking network routing diagrams. These lines appear to run behind some panels and in front of others, reinforcing the layered-depth illusion. - **Deep Field Footer:** The footer is set at the "deepest" perceived layer — rendered at 85% opacity with a slight CSS blur (0.5px) and scaled down to 95%, as if it exists behind glass further back in the dimensional stack. Footer text is in amber (#F0A830), the designated "deep layer" color. ## Typography and Palette **Typography:** - **Primary Display / Hero Title:** "IBM Plex Mono" (Google Fonts) — weight 500 (Medium), size 48-72px, letter-spacing: 0.12em, text-transform: uppercase. The geometric regularity of IBM Plex Mono reinforces the routing-table precision. Used for the domain name, section headers, and any label that identifies a "relay node." Characters are individually wrapped in spans to enable per-character stagger animations on scroll entry. - **Body / Content Text:** "IBM Plex Mono" (Google Fonts) — weight 400 (Regular), size 15px/1.75 line-height. All body text is monospaced to maintain the terminal-relay aesthetic. Paragraph widths are capped at 52ch to ensure comfortable reading in the mono typeface. Text color alternates between pure white (#FFFFFF) on dark panels and deep charcoal (#1A1A2E) on light-accent panels. - **Data Labels / Annotations:** "Space Mono" (Google Fonts) — weight 400, size 11px/1.4, letter-spacing: 0.16em, text-transform: uppercase. Used for metadata labels, connection-path annotations, timestamps, and the footer. This smaller, slightly more compressed mono font differentiates hierarchical annotations from primary content. **Palette (Triadic — Magenta / Teal / Amber on Deep Indigo):** | Role | Color | Hex | |------|-------|-----| | **Foreground Plane / Primary Accent** | Electric Magenta | `#E91E8C` | | **Midground Plane / Secondary Accent** | Luminous Teal | `#00C9B7` | | **Background Plane / Tertiary Accent** | Signal Amber | `#F0A830` | | **Base Background** | Dimensional Indigo | `#0D0B1E` | | **Panel Surface (Foreground)** | Elevated Slate | `#1C1A35` | | **Panel Surface (Midground)** | Recessed Plum | `#14122A` | | **Panel Surface (Background)** | Deep Void | `#09081A` | | **Text Primary** | Crisp White | `#F0F0F5` | | **Text Secondary** | Muted Lavender | `#8A87A8` | The triadic relationship between magenta, teal, and amber provides maximum chromatic separation, meaning each depth plane reads as visually distinct even when panels overlap. The deep indigo base (#0D0B1E) is nearly black but carries enough blue to feel spatial rather than flat. ## Imagery and Motifs **Geometric Portal Icons (Icon-Heavy Approach):** The site uses a dense vocabulary of custom geometric icons rendered as inline SVGs. Every concept is represented by a geometric-shape icon rather than text alone. These icons are built from a constrained set of primitive shapes — octagons, hexagons, nested squares rotated 45 degrees (diamonds within squares), concentric circles with radial tick marks, and isometric cubes. Each icon is drawn with thin strokes (1.5px) in the accent color of its depth plane. The icon set includes: - **Address Node:** A hexagon with a dot at center and six radiating lines to vertices — represents an address endpoint. - **Proxy Relay:** Two overlapping octagons offset by 15 degrees — represents routing/proxying. - **Signal Path:** A right-angle polyline with circular nodes — represents connection flow. - **Depth Gate:** A square containing a smaller rotated square containing a smaller square — the nested rotation creates a tunnel/portal effect. - **Encryption Lock:** A circle with an inscribed triangle pointing upward — represents secure proxy. - **Throughput Meter:** A semicircle with radial graduation marks and a needle line — represents performance. At least 12 distinct geometric icons populate the site, appearing inline with headings, as decorative elements within panels, and as node markers on the signal-path connector lines. Icons are never filled — always stroke-only to maintain a technical blueprint quality. **Geometric-Shapes Motifs:** The background of the base layer contains a subtle repeating pattern of faint geometric shapes — hexagons and octagons tiled in a semi-regular tessellation, rendered at 3-4% opacity in teal (#00C9B7). This tessellation scrolls at 50% of the page scroll speed (parallax offset), making the geometric field feel like a spatial reference grid that exists behind all content layers. At certain scroll positions, specific shapes in the tessellation "light up" to 20% opacity in amber, creating the impression of relay nodes activating as the user scrolls past them. **Impossible Geometry Illustrations:** Two to three larger decorative illustrations appear at section transitions: Escher-inspired impossible geometric constructions (a staircase that loops into itself, a cube where front faces connect to back faces) drawn in thin magenta and teal strokes. These are pure CSS/SVG constructions, not images — built from carefully positioned parallelograms and rhombuses. They serve as visual punctuation between content sections and reinforce the surreal-geometric identity. ## Prompts for Implementation **Full-Screen Narrative Experience — The Relay Descent:** The site is experienced as a continuous scroll that feels like descending through layers of a dimensional relay network. The hero portal animation gives the initial impression of entering the system. As the user scrolls, content panels appear to slide in from different depth planes — some rising from below, others emerging from behind existing panels. The narrative arc moves from "what is this place?" (hero) through "how does it work?" (relay layer stack) to "where does it go?" (deep field footer). There is no traditional navigation bar; instead, a thin vertical progress indicator on the right edge — a line of teal that fills downward — shows the user's position in the relay descent. **Stagger Animation System:** All content enters the viewport via stagger animations. When a panel scrolls into view, its child elements (heading, icon, body text, connector lines) appear one after another with 80ms delays between each. The heading characters themselves stagger individually with 30ms per character, creating a "typing into existence" effect. Panels that are further back in the depth stack animate in with slightly longer durations (600ms vs 400ms for foreground panels), reinforcing the spatial depth metaphor — things further away move more slowly. **Depth-Responsive Scroll Parallax:** Each content panel scrolls at a different rate based on its assigned depth plane. Foreground panels (magenta-accented) scroll at 1.0x speed (normal). Midground panels (teal-accented) scroll at 0.92x. Background-layer elements (amber-accented, including the geometric tessellation and the footer) scroll at 0.8x. This differential creates a natural parallax that reinforces the layered-depth layout without requiring heavy JavaScript — pure CSS scroll-driven animations using `animation-timeline: scroll()` where supported, with a lightweight JS fallback. **Interactive Geometric Hover States:** When the user hovers over a geometric icon, it rotates 45 degrees and its stroke color transitions from the panel's accent color to white, while a faint radial gradient glow (the accent color at 15% opacity) expands behind it. The Signal Path connector lines animate on hover too — the circular nodes pulse outward with a ripple effect, and the line segments draw a brief traveling-dot animation (a small filled circle moves along the path from one node to the next over 1.2 seconds). **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, feature comparison tables - Hero banners with stock photography or gradient blobs - Card grids with uniform sizing and spacing - Heavy drop shadows or glossy/glassy surfaces (the depth is achieved through overlap, parallax, and color coding, not through realistic shadow rendering) - Standard navigation bars or hamburger menus ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Triadic Depth-Coding System:** No other design uses color to encode spatial depth. The magenta/teal/amber triadic palette is not merely decorative — it is a functional signifier where each hue maps to a specific z-plane (foreground/midground/background). This creates a visual language where the user intuitively reads spatial relationships through color alone, a technique borrowed from stereoscopic rendering and topographic map coloring. 2. **Layered-Depth Layout (4% frequency):** While 95% of existing designs use asymmetric layouts and 79% use centered layouts, this design uses the rarely-employed layered-depth approach where content panels physically overlap and exist at different perceived depths via CSS perspective transforms. The zigzag cascade of overlapping panels is structurally distinct from every other design in the collection. 3. **Surreal Geometric Impossibility:** The surreal aesthetic (8% frequency) is executed here not through dreamlike organic forms or melting clocks, but through hard-edged geometric impossibility — Escher-style constructions, portal recursion, and spatial contradictions. This "geometric surrealism" is a unique fusion that no other design in the collection attempts. The impossible geometry serves the domain's concept (a proxy that routes addresses through non-obvious paths) as a visual metaphor. 4. **Icon-Heavy Geometric Vocabulary (4% frequency):** While 87% of designs use minimal imagery, this design invests heavily in a bespoke library of 12+ geometric stroke icons. Every key concept has its own icon, creating a visual shorthand language. The icons use only primitive geometric shapes (hexagons, octagons, nested rotated squares) to maintain thematic cohesion with the geometric-shapes motif system. 5. **Scroll-Position-Activated Tessellation:** The background geometric tessellation that "lights up" individual shapes as the user scrolls past them is a unique interaction pattern. It transforms the background from a static texture into a responsive spatial field, reinforcing the idea that the proxy network activates in response to traversal. **Planned Seed:** `aesthetic: surreal, layout: layered-depth, typography: mono, palette: triadic, patterns: stagger, imagery: icon-heavy, motifs: geometric-shapes, tone: futuristic-cutting-edge` **Avoided Overused Patterns:** - Asymmetric layout (95%) — replaced with layered-depth (4%) - Minimal imagery (87%) — replaced with icon-heavy (4%) - Warm palette (100%) — replaced with triadic (4%) on cool indigo base - Friendly/authoritative tone — replaced with futuristic-cutting-edge (4%) - Tech motifs (95%) — replaced with geometric-shapes (not yet in frequency data)