# Design Language for recycle.studio

## Aesthetics and Tone

recycle.studio is a **material-world data atelier** — the imagined studio of a coastal oceanographer who also happens to be a product designer obsessed with what washes ashore. The aesthetic is **skeuomorphic realism** fused with **data visualization**: every element looks like it was cast, pressed, or extruded from actual recovered ocean plastic, then laser-etched with live tide charts. The mood is neither grim eco-guilt nor breezy resort — it is the **energetic tension** of a scientist who genuinely loves the material they're studying and is furious that it exists.

The skeuomorphism here is not '00s gloss or fake leather texture — it is **industrial material fidelity**: surfaces look like HDPE pellet sheets, polypropylene weave, or translucent PET pressed flat. Depth is achieved through real-feeling shadows cast at a shallow coastal sun-angle (5° above horizon, long raking shadows going left), die-cut edges, and debossed letterforms that catch ambient light. The overall effect is a **specimen board in a marine materials lab** — methodical, tactile, alive.

Tone is **energetic and purposeful**: short declarative sentences, present-tense verbs, the energy of someone mid-sprint rather than composing a manifesto. Copy is sparse but dense — no filler phrases. The site does not explain why recycling matters; it shows what happens when you take it seriously as a design material.

## Layout Motifs and Structure

The page is built as a **full-bleed layered-depth stage**: the viewport is treated as a tide pool cross-section viewed through glass, with the content stratified in three visible depth planes that parallax independently on scroll.

**Depth plane architecture (back to front):**
1. **Plane −600px — Coastal wash background**: A full-bleed animated SVG ripple field — concentric elliptical waveforms that originate at a point 70% right, 30% down, expanding outward at 0.3px/frame. The ripples are drawn in `#B8D8D8` at 12% opacity on a `#EEF5F5` base, suggesting a tidal pool surface.
2. **Plane −300px — Data-viz mesh**: A sparse network of connected plotted points (ocean buoy positions, current vectors, material-flow nodes) rendered as `<line>` and `<circle>` SVG, animated with a 4s ease-in-out pulse that makes dormant nodes breathe. Color: `#2E7D8C` at 30% opacity.
3. **Plane 0 — Content stage**: Full-bleed cards that look like die-cut HDPE sheets — soft 2px inset shadow on all edges, 1px bevel highlight at top-left, background color `#F2F7F7`, text letterpress-debossed (thin text-shadow: `1px 1px 2px rgba(0,0,0,0.25), -0.5px -0.5px 0 rgba(255,255,255,0.7)`).
4. **Plane +200px — Float layer**: Isolated material specimen tags (small rectangular chips with rounded corners, 3D tilt on hover via perspective transform) that float above the main surface, casting a soft drop shadow at `rgba(46, 125, 140, 0.2)`.

**Structural flow (single vertical scroll, no navigation, no sticky chrome):**
- **Opening act:** Full-viewport ripple stage. A single extruded wordmark `recycle.studio` in Space Grotesk ExtraBold emerges from behind the data-viz mesh — it animates from `scale(0.92) blur(8px)` to `scale(1) blur(0)` in 1.8s. Below the wordmark, three floating specimen tags cycle through material names: `#5 Polypropylene`, `#1 PET`, `#2 HDPE`.
- **Material Act:** Full-bleed horizontal band, background shifts to `#1F4E5F`. A live-rendered donut chart (pure SVG, no library) shows material composition of a sample "batch" — segments animate from arc-length 0 to final in 1.4s on scroll entry. Adjacent text is specimen-label style.
- **Data Act:** A full-bleed scatter plot with labeled axes — x: tensile strength, y: recyclability score — for 12 common ocean-recovered materials. Points are sized by abundance, colored by material class. On hover, each point extrudes into a small 3D extruded cube chip.
- **Process Act:** Four full-bleed cards that look like physical process sheets — each has a die-cut tab at top-right, a specimen-code number (S-01 through S-04), and a debossed heading.
- **Close:** Minimal — just the wordmark in reverse (white on `#1F4E5F`), coordinates of the studio, and a single ripple animation that echoes the opening.

**No navigation bar. No hamburger menu. No sticky header. No footer grid. No pricing table. No call-to-action buttons.**

## Typography and Palette

**Typography (Google Fonts only):**

- **Primary wordmark and display — [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk)**, weights 300 and 700, tracking `-0.02em` at display sizes. Used for all headings and the site wordmark. Space Grotesk's subtle ink-trap geometry reads as precision-engineered — it suits a studio that makes things from recovered materials.
- **Data labels and specimen codes — [`DM Mono`](https://fonts.google.com/specimen/DM+Mono)**, weight 400, size `clamp(10px, 1.2vw, 13px)`, tracking `0.08em`. Used for all data annotations, material codes, coordinate labels, and axis tick marks. The monospaced spacing reinforces the lab/specimen-board logic.
- **Body copy and captions — [`Inter`](https://fonts.google.com/specimen/Inter)**, weight 400 and 500, size `clamp(15px, 1.6vw, 17px)`, line-height 1.65. Inter's optical consistency across weights lets it disappear into the design — only the content registers.

**Palette — Coastal Blend (rare: 2% corpus use):**

- `#EEF5F5` — Tideline foam: the base surface, the color of a PET sheet held to overcast coastal light. Used as primary background.
- `#2E7D8C` — Deep channel: the primary teal, anchoring the data-viz layer and all interactive states. Used for ripple strokes, buoy nodes, and donut chart segments.
- `#1F4E5F` — Benthic dark: near-midnight teal-navy. Used for full-bleed section backgrounds and the closing act.
- `#B8D8D8` — Intertidal pale: the lightest version of the teal family, used for background ripple animation strokes.
- `#C8A882` — Strand amber: a warm beach-sand tone that provides the sole warm contrast in an otherwise cool palette. Used for material specimen chip backgrounds and hover states.
- `#3D3D3D` — Charcoal press: near-black for primary body text, debossed at sufficient contrast on `#EEF5F5`.
- `#F7F0E6` — Bleached specimen: an off-white warm card background for the specimen tag float layer.

**Color logic:** The palette is 85% cool coastal tones, 15% warm amber — this ratio mirrors the proportional reality of a tide pool (cool water, occasional shell or amber kelp bulb). The skeuomorphic material surfaces pick up the ambient cool tones, which makes the amber chips visually "lift" even before hover interaction.

## Imagery and Motifs

**No photography. No stock imagery. No product shots.** The entire visual world is generated SVG and CSS, in keeping with the material-fabrication aesthetic (everything built from raw constituents).

**Visual system:**

1. **Ripple field (pattern layer):** Concentric SVG ellipses animated with CSS `@keyframes ripple-expand` — `transform: scale(1) opacity(0.12)` to `transform: scale(3.2) opacity(0)` over 5s, staggered by 0.8s per ring, six rings total. The ripple originates at a single fixed point — not centered — to suggest a dropped object, a buoy, a sample hitting the water.

2. **Data-viz scatter and donut:** All charts are inline SVG with no external library. The scatter plot uses `<circle r="variable">` sized by abundance, with `<line>` tick marks at `rgba(46,125,140,0.4)`. The donut uses `stroke-dasharray` animation. Both use only palette colors.

3. **Specimen tag motif:** Small rectangular elements (`width: clamp(80px,8vw,120px)`, `height: 32px`, `border-radius: 4px`) styled with `background: #F7F0E6`, `box-shadow: 2px 2px 0 #C8A882, inset 0 1px 0 rgba(255,255,255,0.8)` — the classic skeuomorphic raised-tab look. Each has a debossed material code in DM Mono.

4. **Process sheet cards:** `border-radius: 3px`, `background: #F2F7F7`, `box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(46,125,140,0.15)` with a die-cut notch cut from the top-right corner using `clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%)`. The notch is the only "decorative" element that appears across all four cards.

5. **Buoy node network:** SVG `<circle>` elements at randomized positions, connected by `<line>` elements with `stroke-dasharray: 4 8` (dashed), pulsing opacity via CSS animation. On scroll entry, connection lines draw in with `stroke-dashoffset` animation from full-length to 0 over 1.2s. The effect reads as a live data network materializing — energetic, systematic.

6. **Layered-depth motif:** Each scroll section has a distinct `transform: translateZ()` value set in the CSS perspective context, creating genuine parallax depth. The back plane (ripple field) moves at 0.3x scroll speed; the data mesh at 0.6x; the content stage at 1x; the float layer at 1.15x.

## Prompts for Implementation

Build recycle.studio as a **single full-bleed vertical scroll in four acts** — no pages, no modals, no hamburger menus. The user moves through a stratified material world, reading specimens and watching live data breathe.

**Technical architecture:**
- Pure HTML, CSS, inline SVG — no external JS libraries, no canvas (SVG only for animations)
- CSS custom properties for all palette tokens (defined on `:root`)
- Perspective container: `perspective: 1200px; transform-style: preserve-3d` on the `<body>` or a single `.stage` wrapper
- `requestAnimationFrame` loop for the ripple field only; all other animations are CSS keyframes triggered by `IntersectionObserver` adding `.visible` classes

**Scroll narrative (acts in sequence):**

**Act 1 — Arrival (100vh):**
Full `#EEF5F5` background. The ripple animation starts immediately on load. The wordmark `recycle.studio` in Space Grotesk 700, `clamp(48px, 8vw, 96px)`, color `#1F4E5F`, emerges from blur on a 1.8s ease-out. Below it, three specimen tags animate in from `translateY(12px) opacity(0)` to rest, staggered 0.2s each. The data-viz buoy network fades in at 30% opacity across the full viewport. No scroll prompt, no chevron — the ripple motion implies continuation.

**Act 2 — Material (100vh):**
Background shifts to `#1F4E5F` (use `transition: background-color 0.6s ease` keyed off IntersectionObserver). The donut chart SVG enters from scale(0.9) and draws its arcs via `stroke-dashoffset` animation. Beside it, a vertical list of material names in DM Mono with small `#C8A882` percentage bars to the right. The section feels like a lab readout — cool, precise, energetic in its density.

**Act 3 — Data (120vh, taller to accommodate chart):**
Full-bleed `#EEF5F5` return. The scatter plot appears — axes draw in first (`stroke-dashoffset` on the two axis lines), then points scale in from 0 to final radius in staggered 0.05s intervals. On `mouseover` each circle extruded via `transform: translateZ(8px) scale(1.15)` in a `transition: 0.2s ease`. A tooltip in DM Mono appears `position: fixed` near the cursor showing material name, codes, and scores. No library — pure DOM mouseover handlers.

**Act 4 — Process (4 × 60vh full-bleed cards):**
Each card fills the full viewport width, `min-height: 60vh`. They alternate between `#EEF5F5` and `#F7F0E6` backgrounds. Each has the die-cut notch at top-right, a specimen code (S-01 to S-04) in DM Mono at top-left, and a Space Grotesk heading at `clamp(28px, 4vw, 48px)`. Body copy in Inter 400. Cards animate in from `translateY(24px) opacity(0)` on scroll entry.

**Closing act (60vh):**
Full `#1F4E5F` background. Wordmark centered, color `#EEF5F5`, reversed. Below: studio coordinates in DM Mono (`48.8566°N, 2.3522°E` — implied coordinates). A single ripple animation plays one final time, then fades.

**Animation rules:**
- All `IntersectionObserver` threshold: `0.2`
- All entrance animations: `duration 0.6s–1.4s`, `easing: cubic-bezier(0.22, 0.61, 0.36, 1)` (ease-out-cubic)
- Ripple: 5s per ring, 6 rings, `0.8s` stagger = continuous motion
- No `transition: all` — only specific properties

**AVOID in implementation:**
- No `prefers-reduced-motion` exception (per design brief — aesthetics only)
- No sticky navigation or hamburger
- No pricing blocks, stat grids, CTA buttons
- No placeholder filler text — every word must be real, purposeful copy about ocean-recovered materials
- No `@media` breakpoints for feature changes — use `clamp()` throughout for fluid scaling

## Uniqueness Notes

1. **Only skeuomorphic design using coastal-blend palette in the corpus.** Skeuomorphic is at 1% in the aesthetic category and coastal-blend at 2% in palette — no other design combines them. The material-fidelity skeuomorphism here (HDPE surfaces, debossed letterforms, specimen tabs) is entirely different from the '00s-era phone-leather skeuomorphism the term usually evokes. This is *industrial material* skeuomorphism.

2. **Data visualization as primary visual medium, not decoration.** The corpus uses data-viz at 4% but typically as an accent (a single chart tucked into a section). recycle.studio puts two live-rendered, animated SVG data visualizations — a donut and a scatter plot — at the heart of two full-bleed acts. The charts are not illustrative; they are the content.

3. **Ripple pattern used as literal environmental context, not interface decoration.** Ripple is at 11% in the corpus but typically appears as a CSS hover effect or loading animation. Here the ripple field is the persistent background environment — it establishes place (tidal pool) rather than interaction state. The origin point asymmetry (70% right, 30% down) and six-ring stagger make it read as a physical event in water rather than a UI microinteraction.

4. **Die-cut notch as the sole recurring decorative motif.** The process-sheet cards' top-right notch (`clip-path: polygon`) appears on every card and nowhere else. It functions like a tab on a physical file folder — immediately recognizable as organizational signage. No other design in the corpus uses `clip-path` as its primary repeating decorative motif.

5. **Layered-depth with three independently parallaxing planes at different scroll rates.** layered-depth is at 8% in the corpus, but the specimen-board/tide-pool-cross-section metaphor (three named depth planes: wash background, data mesh, content stage) is architecturally distinct from the aiice.io diorama approach (which uses a fully 3D scene metaphor). recycle.studio uses depth to suggest *stratigraphy* — geological/oceanic layers — rather than theatrical 3D space.

**Planned seed:** aesthetic: skeuomorphic, layout: full-bleed, typography: sans-grotesk, palette: coastal-blend, patterns: ripple, imagery: data-viz, motifs: layered-depth, tone: energetic
<!-- DESIGN STAMP
  timestamp: 2026-05-10T18:51:32
  domain: recycle.studio
  seed: aesthetic: skeuomorphic, layout: full-bleed, typography: sans-grotesk, palette: coastal-blend, patterns: ripple, imagery: data-viz, motifs: layered-depth, tone: energetic
  aesthetic: recycle.studio is a **material-world data atelier** — the imagined studio of a c...
  content_hash: e19806d009a0
-->