# Design Language for addrproxy.com ## Aesthetics and Tone addrproxy.com embodies the inflated, tactile maximalism of contemporary 3D design -- think puffy letterforms that look squeezable, glossy surfaces that catch virtual light, and UI elements that appear to have physical weight and bounce. The "proxy" concept (an intermediary, a stand-in) is visualized through the split-screen layout: two worlds coexisting side by side, one representing the sender, the other the receiver, with the proxy as the luminous membrane between them. The tone is edgy-rebellious -- this is not your corporate VPN provider's landing page. addrproxy.com presents privacy infrastructure with the swagger of a streetwear brand drop. The inflated 3D aesthetic gives everything a playful physicality, but the neon-glow imagery and complementary color clashes keep the energy aggressive and contemporary. Think MSCHF meets Cloudflare. ## Layout Motifs and Structure The layout uses a **split-screen** composition as its foundational metaphor. The viewport is divided vertically into two halves that represent the two sides of a proxy relationship: origin and destination, sender and receiver, public and private. **Primary structure:** - **Opening viewport (100vh):** A true 50/50 vertical split. The left half uses a dark background (#1A0A2E) representing the "source" side; the right half uses a contrasting warm background (#2E1A0A) representing the "destination" side. The "addrproxy" logotype spans the split -- letters on the left are rendered in the left palette, letters on the right in the right palette. A glowing neon line (2px, animated gradient) marks the center divide. - **Scrolling merge:** As the user scrolls past the hero, the split gradually narrows (the center line moves, the split ratio shifts) until sections below become unified full-width content. This transition symbolizes the proxy's unifying function. - **Content sections post-merge:** Full-width sections with inflated 3D card elements. Each card has thick rounded corners (border-radius: 24px), a slight CSS 3D rotation (rotateX(2deg) rotateY(-1deg)), and a layered shadow system (3+ box-shadows at different offsets and colors for dimensionality). - **Candle-atmospheric lighting:** Strategic radial gradients positioned behind key content blocks simulate the warm glow of candlelight or neon tubes. These are CSS pseudo-elements with radial-gradient fills, sized at 300-500px, animated to pulse subtly (opacity: 0.3 to 0.5 over 4s). - **Section scale-hover interaction:** Content blocks scale up slightly (transform: scale(1.02)) on hover with a 200ms ease transition, paired with shadow intensification. This reinforces the 3D physicality -- objects "lift" toward the viewer. ## Typography and Palette **Fonts:** - **Headlines:** "DM Serif Display" (Google Fonts) -- a contemporary serif revival with sharp, high-contrast strokes and elegant ball terminals. Its blend of classical serif structure with modern proportions fits the edgy-yet-refined tone. Weight 400, size: clamp(32px, 5vw, 72px). Applied with slight letter-spacing: -0.02em for tight, impactful headlines. - **Body text:** "DM Sans" (Google Fonts) -- a geometric sans-serif paired naturally with DM Serif. Weight 400 for body, 500 for emphasis. Line-height: 1.7. Its friendly rounded geometry complements the inflated 3D aesthetic. - **Accent/Technical:** "Fira Code" (Google Fonts) -- a programming-oriented monospace with ligatures, used for technical terms, proxy addresses, and code-like content. Weight 400, font-size: 0.88em. **Color Palette -- Complementary Neon Split:** - **Source Dark:** #1A0A2E -- deep violet-black for the "origin" side of the split - **Destination Warm:** #2E1A0A -- deep amber-black for the "destination" side - **Neon Coral:** #FF6B6B -- primary complementary warm accent - **Electric Teal:** #00CEC9 -- primary complementary cool accent, the proxy's signature color - **Proxy Glow:** #FF00AA -- hot pink neon for the center divide and key interactions - **Inflated Cream:** #FFF5EE -- warm white for text on dark backgrounds and card surfaces - **Shadow Purple:** #0D0520 -- deepest shadow tone for layered depth effects ## Imagery and Motifs **Core visual motifs:** - **Neon-glow line divider:** The central split line is the design's signature element. A 2px line with a 20px glow (box-shadow: 0 0 20px #FF00AA, 0 0 60px rgba(255,0,170,0.3)) that pulses with a breathing animation. As the page scrolls, this line bends and curves (SVG path morphing) before dissolving into the unified content below. - **Inflated 3D cards:** Content containers appear puffy and tactile. Achieved via: border-radius: 24px, background: linear-gradient(135deg, #FFF5EE 0%, #FFE8D6 100%), box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 12px 28px rgba(0,0,0,0.12), 0 20px 40px rgba(13,5,32,0.15), and a subtle inner highlight (inset 0 1px 0 rgba(255,255,255,0.8)) that simulates top lighting. - **Candle-atmospheric radial glows:** Positioned behind key sections, large radial gradients (radial-gradient(circle at 50% 50%, rgba(255,0,170,0.12) 0%, transparent 70%)) create pools of warm light. These are sized at 400-600px and positioned off-center for naturalism. - **Scale-hover tactile response:** Interactive elements respond to hover with scale(1.03) and shadow deepening (additional 10px to shadow blur). On mousedown, they compress (scale(0.98)) with shadow reduction, simulating physical press. - **Split-identity iconography:** Icons and illustrations use a split treatment: the left half rendered in Electric Teal, the right half in Neon Coral, with a 1px Proxy Glow line at the seam. This visual device reinforces the proxy/intermediary concept throughout. - **Glossy surface reflections:** Key 3D elements have a pseudo-element overlay that simulates a glossy highlight -- a thin white-to-transparent gradient strip positioned at 30 degrees across the top-left quadrant of the element, at 8% opacity. ## Prompts for Implementation **Full-screen narrative experience:** The page opens on the split viewport. Both halves fade in from black simultaneously (1s duration). The central neon line draws itself from top to bottom (SVG stroke-dashoffset animation, 800ms). The logotype fades in across the split -- letters on each side enter with a slight scale-up (scale(0.8) to scale(1)) staggered by 60ms per character. **Split-to-unified scroll transition:** As the user scrolls past the hero section (calculate via scroll position as percentage of hero height), the left and right halves animate their widths. The split line morphs from straight to curved (SVG path interpolation) and eventually fades out. By the time the second section enters view, the layout is unified. Implement with CSS custom properties updated on scroll: `--split-ratio` from 0.5 to 1.0. **Scale-hover interaction system:** All interactive cards implement the three-state tactile system: (1) rest state with standard shadow, (2) hover with scale(1.03) + deeper shadow + slight rotateX(-1deg) for perspective lift, (3) active/pressed with scale(0.98) + shallow shadow. Transitions: 200ms cubic-bezier(0.25, 0.8, 0.25, 1). **Candle-glow scroll animation:** The atmospheric radial gradients shift position slightly as the user scrolls (translateY at 0.1x scroll rate), creating a subtle living-light effect. Their opacity also modulates (0.08 to 0.15) in a 6s CSS animation cycle. **Neon line as scroll progress:** After the split dissolves, the neon Proxy Glow line reappears at the right edge as a thin vertical progress indicator (height maps to scroll percentage). This provides continuity for the signature element. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No flat 2D design -- everything should feel like it has physical depth and weight. No thin hairline aesthetics -- this is inflated, bold, and chunky. ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-to-unified scroll morphing:** The viewport split that gradually merges into unified content as the user scrolls is a structural transformation unique to this design. The animating split ratio and curving divider line create a narrative about proxy unification. 2. **Three-state tactile interaction (rest/hover/press):** While hover effects are common, the deliberate three-state system with scale, shadow, and rotation changes that simulate physical object manipulation (lift and press) is a cohesive interaction language specific to the inflated-3D aesthetic. 3. **Split-identity icon treatment:** Rendering icons with two halves in complementary colors divided by a neon seam line creates a visual motif that is both decorative and semantically tied to the proxy concept. No other design uses bisected-color iconography. 4. **Neon line as narrative thread:** The central split line that transforms from a divider into a curved path into a progress indicator creates a single visual element that evolves throughout the scroll journey, serving different functional purposes at different scroll positions. 5. **Complementary palette spatial mapping:** Assigning the two complementary colors (warm/cool) to spatial halves of the layout (left/right) creates a color-as-space language where palette position has meaning. **Planned seed/style:** aesthetic: inflated-3d, layout: split-screen, typography: serif-revival, palette: complementary, patterns: scale-hover, imagery: neon-glow, motifs: candle-atmospheric, tone: edgy-rebellious **Avoided overused patterns:** Centered layout (90%), card-grid (70%), parallax (85%), scroll-triggered (80%), cursor-follow (75%), mono typography (85%), gradient palette (95%), mysterious-moody tone (60%). Instead uses split-screen (15%), scale-hover (20%), serif-revival (rare), complementary (10%), and edgy-rebellious tone (10%).