# Design Language for footprint.bar ## Aesthetics and Tone **footprint.bar** is a meditation on the marks we leave — in sand, in water, in time. The name fuses two ideas: the physical imprint (footprint) and the celestial meridian (bar, as in a measurement horizon). The site is a **seapunk zen atlas**: tide charts rendered in the visual grammar of 1970s oceanographic printing, where the nostalgia of faded sepia field journals collides with the luminous, aquatic iridescence of the seapunk underground. Think of a marine biologist who moonlights as a rave DJ, whose logbook is half careful pencil-draft and half phosphorescent ink smeared under blacklight. The mood is **zen-contemplative but not austere** — stillness here is active, like the moment just before a wave breaks. The site does not sell, does not funnel, does not announce. It unfolds like a tide: slowly revealing its contents in layers of depth, each scroll revealing another stratum of ocean floor mapped in sepia-duotone with teal luminescence bleeding through the grain. The tonal anchor is **nostalgia underlit by the uncanny** — the warm sepia of old survey charts printed with hexagonal grid overlays, except the hexagons pulse faintly with bioluminescent teal, as if each cell contains a living organism viewed through a specimen jar. ## Layout Motifs and Structure The grid is a **hexagonal honeycomb** — not the clichéd CSS hex grid of tech portfolios, but specifically the **oceanographic specimen-tile** variety: hexagonal cells that suggest both the wax cells of a beehive found washed up on a beach and the bathymetric survey grid of a nautical chart. Each cell is a discrete container of content, information, or imagery, separated by thin lines at 0.5px, the color of aged pencil. **Macro layout:** - The page opens on a single full-viewport cell — one massive hexagon centered in the frame, its interior holding the wordmark in geometric-sans, surrounded by a slow ripple emanating outward from the center - Scrolling reveals the honeycomb expanding outward: cells appear in concentric rings, each ring one scroll-depth deeper, like sonar echoes spreading from an impact point - The honeycomb is never perfectly regular — a 3–6% stochastic variation in cell size introduces the organic imperfection of a natural comb, and of a hand-drawn survey grid **Navigation:** - No conventional navbar — instead a fixed **compass rose** in the upper-right corner, rendered in geometric line art, whose four cardinal directions link to the four site areas. The rose rotates 15° on hover. - Section transitions use a **ripple-from-center** morph: the active hexagon cell expands, its edges dissolve in a water-surface ripple, and the new content floods in from the outside **Spatial vocabulary:** - Hexagon interior padding: `clamp(2rem, 4vw, 5rem)` - Minimum cell diameter: `clamp(180px, 28vw, 380px)` - Gap (stroke) between cells: `1px` rendered in `#c4a97d` (aged-pencil ochre) - Content cells sit on a deep sepia field: `#1a1208` - The whole composition floats over a subtle grain texture (noise overlay at 12% opacity) ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark**: [`Jost`](https://fonts.google.com/specimen/Jost), weight 200 (ultralight) — a geometric-sans with Bauhaus DNA, its circular letterforms echo the hexagonal cells' inherent geometry. Used at `clamp(3.5rem, 9vw, 10rem)` for the main wordmark `footprint.bar`, tracked to `0.18em`, uppercase. The dot in `footprint.bar` is replaced by a tiny hexagon SVG. - **Body / Captions**: [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), weight 300 — a humanist sans with geometric underpinnings, highly legible at small sizes inside the hex cells. Used at `clamp(0.85rem, 1.1vw, 1rem)`, line-height `1.65`. - **Labels / Coordinates**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400 — for bathymetric depth annotations, tide timestamps, and the subtle coordinate readouts along cell edges. Used at `0.7rem`, tracked to `0.08em`, all-caps. **Color Palette:** | Role | Name | Hex | |------|------|-----| | Background deep | Abyssal Sepia | `#1a1208` | | Background mid | Tide Sediment | `#2e2112` | | Surface cells | Aged Vellum | `#f0e6cf` | | Primary text | Carbon Pencil | `#1f1a10` | | Accent luminous | Bioluminescent Teal | `#00e5c3` | | Accent secondary | Phosphor Violet | `#8b5cf6` | | Stroke / Grid | Ochre Pencil | `#c4a97d` | | Highlight | Sea Foam Whisper | `#b2f5ea` | The palette operates as a **sepia-first duotone**: most content is rendered in the warm sepia register (`#1a1208` through `#f0e6cf`), but wherever star/celestial imagery, hover states, or ripple animations occur, the teal-violet luminescent register bleeds in — as if bioluminescent organisms in the sediment are activated by pressure. ## Imagery and Motifs **Duotone photography:** All photographic content is processed through a strict two-tone filter: `#2e2112` (deep sepia shadow) mapped to `#00e5c3` (bioluminescent teal highlight). The duotone is applied via CSS `filter: sepia(1) hue-rotate()` + SVG `feColorMatrix` — no raw full-color photography appears. Subjects are specifically: tide pools, sand ripple patterns, aerial coastline, underwater kelp forests. Every image must feel like a cyanotype or a daguerreotype unexpectedly lit from beneath by reef fluorescence. **Ripple patterns:** The primary kinetic vocabulary. Water-surface ripples emanate from: 1. The center of the wordmark hex on page load (a single 4-second slow bloom) 2. Any hex cell on hover (fast 0.6s ring pulse) 3. Section-change transitions (full-viewport radial wipe) Ripples are implemented as CSS `box-shadow` multi-ring animations on pseudo-elements and as SVG `animate` on circle elements. Each ring is `1px` stroke, color cycling from `#c4a97d` → `#00e5c3` → transparent. **Star-celestial motifs:** Stars appear as **navigational markers** inside the honeycomb grid — small 6-pointed stars (not 5-pointed: the hexagonal geometry demands 6) at the vertices where three cells meet. These vertex-stars are rendered in `Space Mono` as the Unicode character `✦` or as SVG `polygon` elements, 4–6px, color `#00e5c3` at 60% opacity. They function as both decorative punctuation and subtle reference marks (like the registration marks of a nautical chart). On scroll, they twinkle: a sinusoidal opacity oscillation at 2–4 second intervals, staggered so no two adjacent stars pulse simultaneously. **Additional motifs:** - **Tide lines**: horizontal rules rendered as `svg path` with a gently undulating sine-wave, 0.5px stroke, `#c4a97d`, used as section dividers - **Depth annotations**: faint coordinate/depth numbers (`Space Mono`, 8px, 20% opacity) float in the empty margins of hex cells, referencing imaginary bathymetric readings (e.g., `−47m`, `32°14'N`) - **Sand grain texture**: SVG `feTurbulence` noise at `baseFrequency="0.65"` as a base texture layer, `#c4a97d` at 8% opacity overlay on all cells ## Prompts for Implementation **The narrative.** A visitor opens a tide survey logbook left on a bar (the measuring instrument, not the drinking establishment) at the edge of a Pacific atoll. The logbook is two things simultaneously: a careful 1970s government oceanographic survey, all grid paper and pencil notations, and a record of something else — bioluminescent disturbances, uncharted depth anomalies, stars that appear to be underwater. The site does not explain what footprint.bar is; it shows you the logbook and lets you read the evidence. **HTML/CSS/JS implementation guidance:** - Build the hexagonal grid using CSS clip-path (`polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`) on div containers. Do NOT use CSS grid hexagonal hacks — use `clip-path` for true hex shapes. - Implement the stochastic cell variation by generating a random scale factor `(0.94–1.06)` per cell using a seeded pseudo-random function keyed to the cell index, so the variation is deterministic across reloads. - The ripple animation: a `@keyframes ripple` expanding `box-shadow` from `0 0 0 0px rgba(0,229,195,0.8)` to `0 0 0 40px rgba(0,229,195,0)`. Chain three rings with 0.2s offset each. - The vertex-stars: compute the vertex positions mathematically from the hex center coordinates. Use SVG overlay positioned `absolute` over the entire honeycomb container, and place `` references to a defined ``. - The sepia-teal duotone on images: wrap each `` in a `
` and apply SVG filter via `filter: url(#duotone-sepia-teal)`. Define the filter in a hidden SVG in the document head using `feColorMatrix` with values tuned to map luminance → `#2e2112` shadows and `#00e5c3` highlights. - Typography scale: use CSS custom properties `--type-scale` driven by a fluid clamp system, minimum at 375px viewport, maximum at 1440px. - The compass rose navigation: use an SVG with four `` arms and `` labels. On hover, apply `transform: rotate(15deg)` with `transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)` for a spring bounce. - Scrolljack ONLY the first hex reveal sequence (cells emerging concentrically). After the first section, use native scroll. Use IntersectionObserver for cell reveal, staggered with 60ms delay per ring. - Avoid: pricing blocks, CTA buttons, testimonial carousels, hero-with-subheading-and-button patterns. The site has zero call-to-action language. - Background: `radial-gradient(ellipse at center, #2e2112 0%, #1a1208 100%)` on `body`. Grain SVG noise overlay at 8% via `::before` pseudoelement. ## Uniqueness Notes 1. **Seapunk-sepia duotone collision** — Zero other registry entries combine seapunk (0%) with sepia-nostalgic palette (0%). This is the only site that treats the seapunk aesthetic (aquatic iridescence, teal neon, phosphorescent violet) through a warm antiquarian sepia lens rather than the expected dark-purple/cyan cyberpunk base. The result is an aesthetic that has no direct precedent in the registry. 2. **Hexagonal honeycomb as oceanographic survey instrument** — Hexagonal layout (2%) already rare; this site reframes the hex grid not as a UI pattern but as a bathymetric survey tool, making each cell both a structural unit and a specimen container. The stochastic size variation (3–6% per cell, deterministic per index) differentiates from all other hex grid uses which are perfectly regular. 3. **Vertex-star celestial motifs at hex intersections** — Star-celestial motifs (2%) are used here exclusively at the mathematical vertices where three hexagonal cells converge — functioning as navigational registration marks on a chart rather than decorative stars. This is geometrically precise: regular hexagonal tilings have exactly two vertex stars per cell on average, and the 6-pointed form is dictated by the 60° interior angles of the grid. 4. **Ripple as sonar + tide, not as click feedback** — Ripple patterns (20%, common) are almost universally used as Material Design–style click-feedback. This site uses ripple as the primary narrative metaphor: sonar pulse, tide breath, the spreading consequence of a footprint in wet sand. Ripples are autonomous (not triggered by user action for the wordmark), slow (4s bloom vs typical 0.6s), and cinematically staged (three staggered rings, color-cycling from ochre to teal). 5. **Geometric-sans at ultralight weight with hex-dot substitution** — Geometric-sans typography (0%) + `Jost` at weight 200 is unused in the registry. The substitution of the period in `footprint.bar` with a hexagon SVG glyph is a site-specific typographic intervention that literalizes the connection between domain name, grid system, and star-vertex motifs. Seed: aesthetic: seapunk, layout: hexagonal-honeycomb, typography: geometric-sans, palette: sepia-nostalgic, patterns: ripple, imagery: duotone-photo, motifs: star-celestial, tone: zen-contemplative