# Design Language for recycle.reviews ## Aesthetics and Tone **recycle.reviews** sits at an impossible crossroads: a Swiss design system — built on precision grids, Helvetica discipline, and negative space as structure — filtered through the warm strangeness of a coral reef at depth. The site reviews things: consumer goods, ideas, materials, the act of recycling itself. But the *visual premise* is that reviewing and recycling share the same verb structure — both are loops that return something to usefulness. The aesthetic treats the page as a **deep-sea observation window** into a recycling loop that never ends. The mood is **futuristic-cutting-edge** but refuses the typical dark-mode neon register. Instead: bright coastal daylight, the electric aqua of shallow tide pools, the faint bioluminescence of something living just below the glass. Swiss rigor provides the skeleton — every element aligns to an invisible 8px grid, type is set with mathematical spacing, and the composition breathes with deliberate silence between panels. Tropical fish motifs (as SVG paths, not photography) dart through the masonry grid as if the content cards themselves were the walls of a reef tank. The tone is neither nostalgic nor dystopian. It is the tone of a marine biologist who builds beautiful spreadsheets: precise, curious, genuinely delighted by the fact that tuna cans become bicycle frames. **Inspiration:** Swiss International Style posters from the 1960s colliding with the visual language of deep-sea research submersibles and the palette of a bioluminescent tide pool at noon. ## Layout Motifs and Structure The layout is a **true masonry grid** — not the pseudo-masonry of equal-height cards. Review entries have variable heights based on content density. The grid uses 4 columns on desktop (≥1280px), 3 on tablet (768–1279px), 2 on mobile-landscape (480–767px), 1 on mobile-portrait (<480px). Column gap: 20px. Each card settles into its natural height; the masonry algorithm packs them bottom-up. **The Swiss constraint applied to masonry:** Every card has a hard left edge aligned to its column. Horizontal alignment is rigid; only the vertical flow is free. This is Swiss typography's respect for the axis meeting the organic settlement of riverbed stones. **Structural zones:** 1. **Navigation bar** — ultra-thin (48px), fixed top. Logo left (wordmark only, no icon). Nav links right, 12px Nunito Sans Medium, spaced with 32px gaps. Transparent background with `backdrop-filter: blur(12px)` over a `rgba(255,255,255,0.72)` base. No hamburger on desktop. On mobile: full-height slide-over drawer that emerges from the right. 2. **Hero strip** — full-width, 80vh height. The bokeh-background fills this zone entirely: a layered CSS blur of overlapping coral-aqua and white discs creating soft depth of field. The wordmark sits centered over it in a rigid Swiss lockup. No CTA buttons. One rotating ``-style ticker (CSS `animation: marquee`) below the headline cycling through recycling facts: "Aluminum recycled in 60 days · A glass bottle recycled in 30 days ·" — 14px Nunito Sans, spaced with 3em gaps, aqua text on white. 3. **Masonry content zone** — the primary body. No section headers above the grid. The grid begins immediately after the hero strip with a 40px gap. Cards float in the coastal-blend palette. 4. **Category filter rail** — sticky just below the nav bar (top: 48px) when the user scrolls past the hero. Pill-shaped filter buttons. Horizontal scroll on mobile. No vertical filter sidebar (avoids the overused sidebar at 29%). 5. **Footer** — minimal, 120px tall. Two columns: wordmark + copyright left; 4 links right. Background `#0D2B3E`. No newsletter signup, no social grid. **No full-bleed sections after the hero** (avoiding full-bleed 65% overuse). Cards have 2px borders, not borderless bleed into background. ## Typography and Palette **Typography (Google Fonts only, verified):** - **Display / Hero wordmark:** [Nunito](https://fonts.google.com/specimen/Nunito), weight 800, letter-spacing -0.02em, size clamp(3.2rem, 8vw, 7rem). Nunito's rounded terminals give the Swiss-grid structure a warmth that Helvetica would flatten. The wordmark `recycle.reviews` splits on the period: `recycle` in weight 800, `.reviews` in weight 400, both in `#0D2B3E`. - **Section labels / category pills:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 600, uppercase, letter-spacing 0.12em, 11px. The sans variant of the same family maintains the rounded DNA without the extreme expressiveness of the display cut. - **Body / card content:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 400, 15px/24px line-height. Review scores set in weight 700, 22px. Bylines in weight 300, 13px. - **Data labels / scores:** [DM Mono](https://fonts.google.com/specimen/DM+Mono), weight 400, 13px. Recyclability scores (e.g., "87/100"), material composition percentages, and timestamps use this font to ground the futuristic-cutting-edge tone in legibility. **Palette — coastal-blend:** | Token | Hex | Role | |---|---|---| | `--tide-deep` | `#0D2B3E` | Primary dark — nav text, footer background, headings | | `--tide-surface` | `#1B6CA8` | Interactive blue — links, active states, score rings | | `--aqua-bright` | `#2EC4B6` | Accent — filter pill hover, score highlights, fish SVGs | | `--seafoam` | `#C8F4EF` | Light tint — card backgrounds, bokeh disc fills | | `--coral-warm` | `#F4845F` | Counter-accent — "Low recyclability" badges, warnings | | `--salt-white` | `#F7FBFD` | Page background, card text areas | | `--brine-mid` | `#4D8FAC` | Secondary text, borders, dividers | | `--kelp-shadow` | `#092033` | Deep shadow on cards, overlay tints | No black (#000000). No pure white (#FFFFFF). Gradients used sparingly: one linear gradient from `#1B6CA8` to `#2EC4B6` for score ring fills only. The palette avoids warm (89%) and gradient (77%) overuse by keeping warm tones (`--coral-warm`) as a warning accent only and restricting gradients to a single micro-component. ## Imagery and Motifs **Bokeh background (hero zone):** The hero bokeh is built entirely in CSS — no photography (avoiding photography 87% overuse). Six to ten absolutely-positioned `
` elements with `border-radius: 50%`, sizes ranging from 120px to 480px, filled with `--seafoam` or `--aqua-bright` at 35–60% opacity, and `filter: blur(40px)` to `blur(80px)`. They overlap at different z-levels. A slow animation (`animation: drift 18s ease-in-out infinite alternate`) shifts each disc 20–40px on both axes with independent `animation-delay` values, creating the breathing out-of-focus quality of an underwater photograph without a single image file. **Tropical fish motifs:** Fish appear as inline SVG path illustrations — not icons, not emoji, not photography. Each fish is a minimal 2–4 path SVG: a body ellipse, a forked tail triangle, and one curved fin. No more than 3 colors per fish (always from the coastal-blend palette). Fish appear in three contexts: 1. **Grid interstitials** — one fish SVG appears every 9–12 cards in the masonry grid, occupying a full card slot but containing no review content. These are decorative grid spacers. They appear to swim left (CSS `transform: scaleX(-1)` on alternates) as if crossing the grid. 2. **Empty state** — when filters return 0 results, a larger fish (320px wide) swims across the empty zone with `animation: swimAcross 6s linear forwards`. 3. **Score ring companions** — a tiny fish (24px) sits beside each recyclability score, its color corresponding to the score tier: aqua-bright for high, coral-warm for low. **No photography, no stock imagery, no icon fonts.** All decorative elements are SVG or CSS. **Recyclability score rings:** A circular SVG `` with `stroke-dasharray` / `stroke-dashoffset` technique. The ring fills on scroll-entry using the `IntersectionObserver` API. The fill gradient goes from `--aqua-bright` (high score) to `--coral-warm` (low score) through `--brine-mid`. Each ring is 64px diameter on cards, 96px in expanded view. **Card material tags:** Pill badges showing material type ("Aluminum", "PET", "Glass", "Paper"). Each material has its own subtle background derived from the palette: Aluminum → `--brine-mid` 20% opacity; PET → `--coral-warm` 20% opacity; Glass → `--seafoam`; Paper → `#E8F5E0` (an off-palette natural green tint, used only here). ## Prompts for Implementation **The story to tell:** A visitor arrives at recycle.reviews the way a marine researcher arrives at a glass-bottom observation deck — with a notebook, an eye for pattern, and genuine wonder at what lives beneath. The site does not sell. It does not funnel. It observes and reports. The masonry grid is the observation log: uneven, dense where evidence is dense, sparse where the record is sparse. Every scroll reveals more of the reef. **Scroll behavior:** - Masonry cards use a staggered `IntersectionObserver` entrance: each card fades in and translates +24px → 0 on Y axis. Delay is computed as `card.index % 4 * 80ms` (column-aware stagger, not pure sequential). This avoids the generic stagger (50% overuse) by tying the timing to column position. - The bokeh discs in the hero drift continuously and independently; the speed drops to 25% when `prefers-reduced-motion: reduce` is detected. - Category filter rail: when a filter is selected, non-matching cards shrink to `height: 0; opacity: 0; margin: 0` with a 200ms ease — the grid reflows around them. Matching cards pulse once with `box-shadow: 0 0 0 3px var(--aqua-bright)` then settle. **Magnetic interaction (primary pattern):** Interactive elements — filter pills, card titles, the score rings — implement a magnetic pull effect. On `mousemove` within 80px of an element, the element translates toward the cursor using `transform: translate(deltaX * 0.3, deltaY * 0.3)`. On `mouseleave`, it springs back with `transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot). This creates the sensation that content wants to be examined — like a fish approaching the glass. **Card anatomy (each review card):** ``` ┌─────────────────────────────┐ │ [Material pill] [Score ring + fish] │ │ │ │ Product name (Nunito 700) │ │ Brand · Category │ │ │ │ Review excerpt (2–3 lines) │ │ │ │ Recycled-into: [icons] │ │ ─────────────────────────── │ │ @author · date │ └─────────────────────────────┘ ``` Card background: `--salt-white`. Border: `1px solid rgba(77, 143, 172, 0.2)` (brine-mid at 20%). Border-radius: `12px`. Box-shadow: `0 2px 12px rgba(13, 43, 62, 0.08)`. On hover: shadow deepens to `0 8px 32px rgba(13, 43, 62, 0.18)` and the card translates `0, -4px` with 200ms ease. No flip animations (avoiding card-flip 3% pattern). **Navigation behavior:** The nav starts transparent with dark text over the hero bokeh. On scroll past 80vh, it transitions to `rgba(247, 251, 253, 0.88)` background with `backdrop-filter: blur(16px)` and a `1px solid rgba(77, 143, 172, 0.15)` bottom border. Transition: `background 300ms ease, backdrop-filter 300ms ease`. **Swiss grid discipline enforced in CSS:** ```css .masonry-grid { columns: 4; column-gap: 20px; padding: 0 40px; } .masonry-card { break-inside: avoid; margin-bottom: 20px; } ``` On tablet (≤1024px): `columns: 3`. On mobile (≤640px): `columns: 2`. On small mobile (≤380px): `columns: 1`. **DO NOT BUILD:** CTA buttons in the hero, pricing blocks, stat-grids with "10,000 products reviewed" counters, testimonials, newsletter popups, cookie banners styled as main content, sticky floating chat widgets, comparison tables, feature grids, social proof logos. **What to build instead:** A living reef of reviews where the act of browsing *is* the experience. The fish swim. The bokeh breathes. The cards settle. The score rings fill. The grid holds its Swiss axis. Nothing sells. Everything informs. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Masonry layout applied with Swiss International Style discipline is unprecedented.** Masonry appears in 7% of designs — almost always combined with editorial or hand-drawn aesthetics (which dominate at 58% and 53%). This site applies masonry under the strict horizontal-axis Swiss system: columns lock left, only vertical flow is free. This is structurally novel in the registry. 2. **Bokeh as a CSS-only, non-photographic atmospheric system.** Bokeh-background appears in 3% of designs, and in virtually every case it means blurred photographic backgrounds. Here, bokeh is constructed from CSS blur, opacity, and animation — no image files, no photography (dodging the 87% photography overuse). The result is a bokeh that can be palette-controlled, animated, and guaranteed to load at zero bytes. 3. **Tropical fish as functional grid interstitials, not decoration.** Tropical-fish appears in only 3% of designs and universally as illustrative background decoration. This site uses fish SVGs as *structural grid elements* — they occupy card slots in the masonry, serve as empty-state illustrations, and act as score-tier indicators. The motif does functional work, not merely aesthetic work. 4. **Magnetic pull as primary interaction metaphor linked to domain concept.** Magnetic appears in 14% of designs but typically as a cursor-magnet hover on buttons. Here, magnetic is the conceptual through-line: content pulls toward examination the way a fish approaches glass. The effect is applied to three distinct element classes (filters, titles, score rings) with column-aware delay timing, not generic sequential stagger (50% overuse avoided). 5. **Coastal-blend palette at only 2% occurrence, deployed without warm dominance.** The palette uses coastal colors without warm (89% overuse) or gradient (77% overuse) as primary devices. Warm (`--coral-warm`) is restricted to warning states. The single gradient is confined to a 64px score ring — making coastal-blend work through flat color and opacity modulation instead of the typical warm-gradient treatment. **Chosen seed:** aesthetic: swiss, layout: masonry, typography: playful-rounded, palette: coastal-blend, patterns: magnetic, imagery: bokeh-background, motifs: tropical-fish, tone: futuristic-cutting-edge **Avoided overused patterns per frequency analysis:** - photography (87%) → replaced with CSS bokeh and inline SVG - full-bleed sections (65%) → hero only; cards have borders and contained backgrounds - parallax (75%) → replaced with IntersectionObserver fade-translate entrance - stagger (50%) → used only in column-aware variant (delay = index % 4 × 80ms) to avoid generic - warm palette (89%) → warm used only as warning accent color - gradient (77%) → single gradient confined to score ring fill - centered layout (84%) → hero centered, grid is masonry (non-centered by nature) - vintage motifs (35%) → no vintage anywhere; all motifs are marine/futuristic - hand-drawn aesthetic (58%) → all SVGs are geometric, not hand-drawn