# Design Language for addrproxy.com ## Aesthetics and Tone addrproxy.com channels the feral beauty of goblincore -- the aesthetic of finding treasure in the dirt, of crystals growing in abandoned mineshafts, of moss reclaiming concrete -- but translated into a monochrome digital language that feels like a black-and-white photograph of a cave system lit by bioluminescent fungi. The visual identity is built on contradiction: organic chaos contained within precise hexagonal geometry. Think of a geode cracked open under harsh fluorescent light -- all sharp crystalline edges and raw mineral surfaces rendered in a stark palette of blacks, whites, and silvers. The tone is edgy and rebellious, rejecting the polished friendliness that dominates the web design landscape. addrproxy.com doesn't smile at you; it stares. The voice is terse, declarative, and slightly confrontational -- the kind of copy that reads like it was etched into stone rather than typed into a CMS. There is an undercurrent of anti-establishment defiance in every design decision: no rounded corners, no pastel gradients, no welcoming hero images. Instead, the site communicates through raw geometry, crystalline fractures, and the quiet menace of something beautiful growing in the dark. The inspiration draws from Brutalist architecture photographed in high-contrast black and white, electron microscope imagery of mineral crystal structures, the illustrations of Ernst Haeckel (specifically his radiolarian drawings), and the visual language of underground zines from the 1990s punk scene -- photocopied, high-contrast, deliberately rough. ## Layout Motifs and Structure The layout is built on a hexagonal honeycomb grid -- a departure from the rectangular grids that dominate the portfolio. Every content block, every image container, every interactive element snaps to a hexagonal tessellation that covers the viewport like a crystalline lattice. **Hexagonal Grid Architecture:** The base grid is constructed from CSS `clip-path: polygon()` hexagons arranged in an offset honeycomb pattern. Each hexagon cell is approximately `280px` wide and `242px` tall (maintaining the 1:0.866 width-to-height ratio of a regular hexagon). Rows alternate with a horizontal offset of half a cell width to create the tessellation. On viewports below `768px`, the grid collapses to a stacked single-column of hexagons centered on the vertical axis. - **Hero Cluster:** The opening section is a cluster of 7 hexagons arranged in the classic honeycomb rosette (1 center + 6 surrounding). The center hexagon holds the site title; the surrounding six hold animated crystalline fragments that rotate slowly on independent axes. - **Content Veins:** Below the hero, content flows through "veins" -- linear chains of hexagons that snake across the viewport in diagonal paths, like mineral veins running through rock. Each vein is 3-5 hexagons long and contains a single narrative thread (a concept, a feature description, a statement). - **Fracture Points:** Between veins, the hexagonal grid deliberately "fractures" -- hexagons break apart with visible gaps, rotated at slight angles (2-5 degrees), creating the impression of a cracked crystal surface. These fracture zones serve as visual breathing room and section dividers. - **Cluster Nodes:** Key content moments are presented as dense hexagonal clusters (3-4 hexagons packed tight) that function as focal points within the fractured grid. These clusters emerge from the fracture zones like crystals growing from a crack in rock. **Depth Layering:** The hexagonal grid exists on three depth planes: 1. **Background plane:** A faint honeycomb wireframe in `#1a1a1a` on `#0d0d0d`, providing a subtle geometric texture across the entire page. 2. **Content plane:** The primary hexagons containing text, imagery, and interactive elements. 3. **Foreground plane:** Floating crystalline fragments (small decorative hexagons at 30-50% opacity) that drift slowly across the viewport on scroll, creating a parallax-like depth effect without traditional parallax scrolling. ## Typography and Palette **Typography:** - **Headlines / Display:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant, slightly elongated proportions that echo the angular precision of crystal facets. Used at weights 600 and 700. Sizes: `clamp(2.5rem, 5vw + 1rem, 5rem)` for the hero title, `clamp(1.8rem, 3vw + 0.5rem, 3rem)` for section headlines. Letter-spacing: `-0.03em` at display sizes for a tight, aggressive set. Text-transform: `uppercase` on all headlines to reinforce the edgy, commanding tone. - **Body Text:** "Jost" (Google Fonts) -- a geometric sans-serif inspired by the 1920s Futura lineage but with warmer, more readable proportions at body sizes. Weight 400 for body, 500 for emphasis. Size: `clamp(0.95rem, 1vw + 0.5rem, 1.1rem)`. Line-height: `1.65`. Letter-spacing: `0.01em`. Color: `#b0b0b0` on dark backgrounds for comfortable reading without the harshness of pure white. - **Accent / Labels:** "Space Mono" (Google Fonts) -- a monospace font used sparingly for labels, metadata, hexagon cell identifiers, and technical annotations. Weight 400 only. Size: `0.75rem`. Letter-spacing: `0.08em`. Text-transform: `uppercase`. Color: `#666666`. This font provides a technical, specimen-label quality that reinforces the "cataloging found objects" aspect of goblincore. **Palette (Monochrome):** The palette is strictly monochrome -- no hue, only value. This is a deliberate rejection of the warm palettes that saturate 100% of the existing portfolio. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Void Black | `#0d0d0d` | Page background, deepest layer | | Surface | Obsidian | `#1a1a1a` | Hexagon cell backgrounds, card surfaces | | Border | Graphite | `#2e2e2e` | Hexagon borders, divider lines, grid wireframe | | Muted Text | Slate | `#666666` | Labels, metadata, secondary text | | Body Text | Silver Ore | `#b0b0b0` | Primary body copy | | Headline Text | Quartz | `#e0e0e0` | Headlines, primary interactive text | | Accent / Highlight | Raw Crystal | `#ffffff` | Hover states, active elements, crystalline glints | | Glow | Moonstone | `#f5f5f5` | Glow effects, frosted glass overlays | Gradients are used minimally and only as subtle radial glows behind cluster nodes: `radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 70%)`. No linear gradients, no color gradients -- only light-to-transparent monochrome. ## Imagery and Motifs **Crystalline Structures:** The primary visual motif is the crystal -- specifically, the geometric forms of naturally occurring crystal systems (hexagonal prisms, rhombohedra, octahedra). These are rendered as CSS-only constructions using `clip-path`, `border`, and `transform: rotate3d()` to create wireframe crystal shapes that float in the hexagonal grid. Crystals are always rendered in monochrome: white wireframe strokes on dark backgrounds, with occasional `box-shadow: 0 0 20px rgba(255,255,255,0.08)` for a faint moonlit glow. Crystal shapes serve multiple purposes: - **Decorative fragments** scattered across fracture zones, slowly rotating via `@keyframes` (8-15 second cycles). - **Content containers** where text is clipped into faceted shapes using `clip-path` polygons. - **Loading indicators** replacing traditional spinners with a slowly growing crystal that adds facets as content loads. **Glassmorphic Cards:** Key information panels are rendered as glassmorphic hexagonal cards -- hexagons with `backdrop-filter: blur(16px) saturate(120%)`, a `background: rgba(255,255,255,0.03)` fill, and a `1px solid rgba(255,255,255,0.08)` border. These cards appear to float above the background grid like frosted glass panes, catching light on their edges. When hovered, the blur increases to `24px` and the border brightens to `rgba(255,255,255,0.15)`, creating the impression of the glass catching light. **Moss and Decay Textures:** True to goblincore's celebration of the overlooked and organic, subtle noise textures overlay key surfaces. This is achieved via a CSS `background-image` using an inline SVG `` with `feTurbulence` (type: fractalNoise, baseFrequency: 0.65, numOctaves: 4) at very low opacity (`0.03`). The effect is barely perceptible -- a faint organic grain that prevents surfaces from feeling too sterile and digitally perfect. On hover, the noise opacity increases to `0.06`, as if brushing dirt off a found object. **Hexagonal Wireframe Background:** The entire page sits atop a full-viewport hexagonal wireframe grid rendered via SVG. Lines are `0.5px` stroke in `#1a1a1a`, creating a faint crystalline lattice that extends infinitely in all directions. On scroll, this background grid shifts at 30% of the scroll speed, creating a subtle depth parallax that makes the content hexagons feel like they're floating above a deep geometric substrate. **Motif: The Geode Cross-Section:** A recurring decorative element is the "geode slice" -- a circular or irregular shape filled with concentric rings of progressively lighter grays (from `#1a1a1a` at the outer edge to `#e0e0e0` at the center), rendered via nested `box-shadow` or concentric `border-radius` elements. These geode slices appear at key section transitions, rotating slowly and pulsing with a breathing animation (`scale(1)` to `scale(1.02)` over 4 seconds). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a full-viewport black screen (`#0d0d0d`). After a 500ms pause, the hexagonal wireframe background fades in from `opacity: 0` to `opacity: 1` over 1.5 seconds, spreading from the center outward (achieved by animating the SVG stroke-dasharray from 0 to full length with a center-origin delay map). The effect is of a crystal lattice growing from a seed point. Once the wireframe is established, the hero rosette cluster assembles: the center hexagon scales up from `scale(0)` to `scale(1)` with an elastic easing (`cubic-bezier(0.175, 0.885, 0.32, 1.275)`) over 800ms. The six surrounding hexagons follow with a 150ms stagger, each arriving with the same elastic bounce. The center hexagon contains "ADDRPROXY" in Josefin Sans Bold at maximum size, letter-spaced at `0.15em`, with each letter fading in sequentially (100ms stagger) after the hexagon lands. **Scroll-Driven Crystalline Growth:** As the user scrolls, new hexagonal veins "grow" into view. Each vein assembles hex-by-hex from one end using `IntersectionObserver` with a `threshold: 0.2`. The first hexagon in a vein scales up from `scale(0)` with elastic easing, and subsequent hexagons follow with 200ms staggers. The growth direction alternates: left-to-right, then right-to-left, creating a zigzag descent through the page that mirrors how crystals grow along alternating axes. Between veins, crystalline fragments drift into view -- small decorative hexagons (40-80px) that enter from random viewport edges with slow linear translations (5-8 second duration), rotating gently. These fragments are triggered by scroll position and persist as the user continues scrolling, gradually populating the fracture zones. **Elastic Interaction Model:** All interactive elements use elastic physics for their animations (the "elastic" pattern from the seed). Hover states don't simply transition -- they spring: - **Hexagon hover:** The hovered hexagon scales to `1.08` with `transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)`, creating a slight overshoot-and-settle effect. Simultaneously, the glassmorphic blur increases and the border brightens. - **Text hover:** On interactive text, an underline draws itself from left to right using `scaleX(0)` to `scaleX(1)` with elastic easing, overshooting by about 5% before settling. - **Click response:** On click/tap, the hexagon compresses to `scale(0.95)` for 100ms then springs back to `scale(1)` with aggressive elastic easing (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`), mimicking the physical sensation of pressing a crystal button. **Fracture Animation on Section Change:** When scrolling from one major section to another, the hexagonal grid between sections performs a "fracture" animation: hexagons in the transition zone rotate by 2-5 degrees in random directions, gaps appear between them (achieved by reducing their scale to `0.92`), and faint "crack" lines (1px white SVG paths) draw themselves along the gaps. This happens over 1.2 seconds as the transition zone enters the viewport, and the fractured state persists. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. The site is a narrative experience, not a conversion funnel. Content unfolds through exploration of the crystalline grid, rewarding curiosity rather than funneling attention toward a signup button. **Responsive Behavior:** On mobile (below `768px`), the hexagonal grid transforms into a single column of stacked hexagons centered on the x-axis. Veins become vertical chains. Fracture zones become simple spacing gaps. The glassmorphic card effects are preserved but with reduced blur (`8px` instead of `16px`) for mobile GPU performance. The wireframe background simplifies to a static SVG (no scroll-parallax) to conserve battery and rendering resources. Touch interactions replace hover states: tap-and-hold triggers the elastic spring animation. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Hexagonal Grid as Primary Layout System:** No other design in the portfolio uses a hexagonal honeycomb grid. Every existing design operates within rectangular coordinate systems (card grids, editorial columns, masonry, sidebars). The hexagonal tessellation creates a fundamentally different spatial rhythm -- one that feels geological and crystalline rather than architectural and editorial. 2. **Strictly Monochrome Palette with Zero Hue:** The portfolio's palette category shows 100% warm palette usage. addrproxy.com is the anti-thesis: a pure monochrome palette from `#0d0d0d` to `#ffffff` with absolutely no color hue. This makes it instantly identifiable among the portfolio's warm, muted, and gradient-heavy designs. The restriction is radical -- no accent color, no hover-state tint, no gradient hue shift. Only light and dark. 3. **Goblincore Aesthetic in Web Design:** Goblincore is entirely unrepresented in the current portfolio (0% frequency). While most designs lean into polished, editorial, or playful aesthetics, addrproxy.com embraces the goblincore ethos of finding beauty in the rough, the overlooked, and the imperfect. The noise textures, the fractured grid, the raw crystalline forms -- these all reject the clean perfection of mainstream web design in favor of something more feral and authentic. 4. **Elastic Physics as Interaction Paradigm:** While spring animations appear in 29% of designs and elastic in 16%, addrproxy.com makes elastic physics the _defining_ interaction paradigm rather than a supplemental effect. Every interaction -- hover, click, scroll-reveal -- uses elastic easing with visible overshoot. This creates a tactile, almost physical quality to the interface that feels like handling actual crystalline objects with weight and momentum. 5. **Anti-Friendly Tone:** The edgy-rebellious tone (4% frequency) stands in stark opposition to the dominant friendly tone (95%). addrproxy.com doesn't welcome, guide, or reassure. It confronts, declares, and challenges. The copy strategy is subtractive rather than additive -- say less, imply more, trust the user to explore without hand-holding. **Chosen seed/style:** `aesthetic: goblincore, layout: hexagonal-honeycomb, typography: futura-geometric, palette: monochrome, patterns: elastic, imagery: glassmorphic-cards, motifs: crystalline, tone: edgy-rebellious` **Avoided overused patterns from frequency analysis:** - Avoided "playful" aesthetic (95% frequency) in favor of "goblincore" (0%) - Avoided "centered" layout (95% frequency) in favor of "hexagonal-honeycomb" (0%) - Avoided "mono" typography as primary (95% frequency) -- used only as tertiary accent; primary is futura-geometric (8%) - Avoided "warm" palette (100% frequency) in favor of "monochrome" (4%) - Avoided "scroll-triggered" as sole pattern (100% frequency) -- used elastic (16%) as the defining interaction model - Avoided "minimal" imagery (95% frequency) in favor of "glassmorphic-cards" (4%) - Avoided "friendly" tone (95% frequency) in favor of "edgy-rebellious" (4%)