# Design Language for recycle.reviews

## Aesthetics and Tone

recycle.reviews inhabits the visual language of a sophisticated command-line interface reimagined as a luxury editorial experience. Imagine a phosphor-green terminal from the 1980s that has been meticulously restored by a Swiss design atelier -- every character perfectly kerned, every scanline a deliberate compositional choice. The aesthetic is **terminal** but elevated: not the chaotic hacker-movie cliche, but the quiet authority of a master engineer's personal workstation, where recycling data streams past in elegant columns like stock tickers in a private banking lobby.

The tone is **elegant-sophisticated** -- this is not a scrappy startup recycling tracker. It is an authoritative, design-forward publication that treats waste management and material lifecycles with the same reverence a fashion magazine gives to haute couture. The site whispers rather than shouts. Information is revealed with deliberate pacing, as if each recycling insight is a rare artifact being unveiled behind glass. Think: the calm confidence of a Bloomberg Terminal crossed with the editorial restraint of Kinfolk magazine, all rendered through the monochromatic glow of a cathode ray tube.

The atmosphere oscillates between two states: the clinical precision of data processing and the contemplative stillness of watching materials decompose and reconstitute. Cursor blinks serve as meditative heartbeats. Loading states feel intentional rather than apologetic. Every interaction communicates that recycling is not mundane -- it is an elegant closed-loop system worthy of reverence.

## Layout Motifs and Structure

The layout follows an **editorial-flow** paradigm -- content unfolds vertically in a deliberate, magazine-like sequence of distinct editorial "spreads," each occupying a full viewport height. But unlike conventional editorial layouts, the compositional logic borrows from terminal interfaces: content is organized in columns that echo the fixed-width character grids of command-line environments.

**Primary Grid System:**
A 12-column grid where columns are defined by character-width units rather than percentages. The base unit is the width of a single character in Space Grotesk at 16px (approximately 9.6px). Content blocks snap to character boundaries, creating the illusion that all text and UI elements share a monospaced alignment even when using a proportional typeface. Gutters are exactly 3 character-widths wide (approximately 29px).

**Editorial Spreads (6 distinct sections):**

1. **The Boot Sequence (Hero):** A full-viewport opening that simulates a system boot. The screen fills with monochrome text streaming upward -- recycling statistics, material classifications, processing rates -- before resolving into the site title. The "boot" concludes with a single blinking cursor and the tagline rendered one character at a time.

2. **The Feed (Primary Content):** A two-column editorial spread. The left column (7 grid units) contains long-form narrative content about recycling ecosystems -- dense, literary, richly typeset. The right column (4 grid units, with 1 unit gutter) displays a continuous "terminal feed" of live-updating recycling metrics in a fixed-width format, styled as a running log output.

3. **The Taxonomy (Material Classification):** A full-width section presenting recyclable material categories in a grid of labeled terminal "windows." Each window is a bordered rectangle (using box-drawing characters: single-line borders) containing a material name, its recycling symbol rendered in ASCII art, and a one-line status readout. Windows are arranged in a 3-column layout with staggered vertical positioning.

4. **The Lifecycle (Process Visualization):** A horizontal flow diagram rendered entirely in text characters (arrows, pipes, boxes) that maps a material's journey from disposal through processing to rebirth. This section uses the full viewport width and scrolls the diagram horizontally within its container using Lottie-animated transitions between lifecycle stages.

5. **The Archive (Editorial Reviews):** A stacked sequence of review cards, each styled as a terminal session transcript. Each card shows a "command" (the review query), followed by the "output" (the review content). Cards alternate between left-aligned and right-aligned placement within the grid, creating a conversational rhythm.

6. **The Signal (Closing):** A minimal closing section with a single blinking cursor, a sign-off message rendered in the style of a system shutdown sequence, and a subtle Lottie animation of particles dispersing and reconverging -- symbolizing the recycling loop.

**Navigation:** A persistent left-edge vertical navigation rail (1 grid unit wide) displaying section indicators as single characters (numbers or symbols) that highlight as the user scrolls. No hamburger menus, no horizontal navbars.

## Typography and Palette

**Typography:**

- **Headlines / Section Titles:** "Space Grotesk" (Google Fonts) -- a grotesque-neo sans-serif with distinctive quirks in its letterforms (the angular cuts on the 'G', the asymmetric 'a') that give it personality without sacrificing legibility. Used at 3.5rem-6rem for section titles, with letter-spacing of -0.03em for tight, authoritative display. Weights: 700 for primary headlines, 500 for secondary headings. The grotesque heritage connects to terminal aesthetics while its modern proportions signal sophistication.

- **Body / Editorial Content:** "Space Grotesk" (Google Fonts) at 400 weight, 1.125rem/1.75 line-height for body text. The single-family approach reinforces the terminal's monolithic character set philosophy -- one typeface, multiple voices through weight variation alone. Letter-spacing: 0.005em for comfortable reading at body sizes.

- **Terminal / Data Feed:** "JetBrains Mono" (Google Fonts) -- a true monospaced typeface designed for code readability, with distinctive ligatures and carefully calibrated character widths. Used at 0.875rem for the terminal feed elements, log outputs, and data displays. Weight: 400. Letter-spacing: 0em (monospaced fonts handle their own spacing). The contrast between Space Grotesk's proportional elegance and JetBrains Mono's fixed-width precision creates a dialogue between editorial and technical registers.

- **Accent / Labels:** "Space Grotesk" at 600 weight, 0.75rem, letter-spacing: 0.12em, text-transform: uppercase. Used for section labels, navigation indicators, and metadata tags. The wide tracking transforms the grotesque into something approaching a display face.

**Palette (Monochrome):**

The palette is strictly **monochrome** -- a carefully calibrated grayscale with a single accent frequency, like a terminal that knows only one color beyond black and white.

| Role | Hex | Description |
|------|-----|-------------|
| Deep Ground | #0A0A0A | Near-black background, the void of a powered-off screen |
| Terminal Dark | #141414 | Slightly elevated surface for card backgrounds and secondary panels |
| Charcoal Mid | #2A2A2A | Border color, divider lines, box-drawing characters |
| Smoke | #4A4A4A | Disabled text, tertiary information, subtle UI elements |
| Silver Read | #8A8A8A | Secondary body text, metadata, timestamps |
| Light Gray | #C0C0C0 | Primary body text -- the classic terminal silver |
| Bright White | #E8E8E8 | Headlines, emphasized text, active states |
| Pure Signal | #FFFFFF | Reserved exclusively for the blinking cursor and critical highlights |
| Phosphor Green | #33FF66 | The single chromatic accent -- used sparingly for active states, links, hover effects, and the cursor blink. Evokes CRT phosphor glow. Applied at reduced opacity (0.7-0.9) to prevent harsh contrast against the dark ground. |

**Color Usage Rules:**
- Background surfaces use only #0A0A0A and #141414
- Text hierarchy is managed through #C0C0C0 (body), #E8E8E8 (headlines), #8A8A8A (secondary)
- #33FF66 appears in no more than 5% of any viewport -- it is a signal, not a theme
- Box-drawing borders and dividers use #2A2A2A exclusively
- Hover states transition text from #C0C0C0 to #33FF66 over 200ms with a subtle 0 0 8px rgba(51,255,102,0.3) glow

## Imagery and Motifs

**Lens Flare as Data Artifact:**
The primary imagery style is **lens-flare** -- but not the cinematic J.J. Abrams variety. These are subtle, geometric flares that appear as if light is leaking through the seams of a CRT monitor housing. Horizontal streak flares in #33FF66 at 5-15% opacity appear at the edges of section transitions, suggesting the phosphor coating is catching ambient light. Vertical light leaks in pure white (#FFFFFF at 3-8% opacity) bleed down from the top of the viewport during scroll, as if the screen bezel is slightly warped.

Flares are implemented as CSS pseudo-elements and SVG filters rather than raster images:
- Horizontal streaks: 100vw x 2px gradients from transparent through rgba(51,255,102,0.12) back to transparent, positioned at section boundaries
- Circular flare spots: Radial gradients of rgba(255,255,255,0.06) at 120px diameter, placed at intersection points of the grid
- Anamorphic stretches: Elliptical gradients (aspect ratio 8:1) that drift slowly across sections via CSS animation at 60-second cycles

**Tech Motifs:**
The **tech** motif vocabulary draws from recycling-as-system-process:
- **Box-drawing characters** (single-line Unicode: light horizontal, light vertical, light arc corners) used to construct borders, flow diagrams, and decorative frames around content blocks. These are rendered as actual text characters, not CSS borders, reinforcing the terminal identity.
- **ASCII recycling symbols:** The universal recycling triangle (chasing arrows) rendered in ASCII art using forward slashes, backslashes, and underscores. Displayed at large scale (20+ character-widths) as section decorations.
- **Process flow arrows:** Sequences of dashes and angle brackets (--->, <---) connecting content blocks to suggest material flow paths.
- **Blinking cursors:** A pulsing vertical bar (|) in #33FF66 that appears at strategic locations -- after the hero title, at the end of review excerpts, beside the navigation rail's active indicator. The blink follows a 1s on / 0.5s off cadence using CSS animation.
- **Scanline overlay:** A repeating horizontal line pattern (1px solid #FFFFFF at 2% opacity, spaced every 3px) applied as a full-viewport overlay via CSS background-image on the body, simulating CRT scanlines. Subtle enough to be felt rather than seen.

**Lottie Animations:**
Three custom Lottie sequences integrated into the editorial flow:
1. **Boot Sequence Particles:** Tiny rectangular particles (styled as text characters) that scatter from center-screen and arrange themselves into the site title. Duration: 2.5s. Triggered on page load.
2. **Lifecycle Flow:** The material lifecycle diagram animates segment by segment -- arrows extend, boxes fill, labels type themselves in. Duration: 8s. Triggered when the Lifecycle section enters viewport.
3. **Dissolution Loop:** In the closing section, the recycling symbol slowly dissolves into individual particles that drift apart, pause, then reconverge into the symbol. Duration: 12s. Loops infinitely. Represents the eternal recycling loop.

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site must be built as a single-page vertical scroll experience with each section occupying exactly 100vh. Use CSS `scroll-snap-type: y proximity` on the main container and `scroll-snap-align: start` on each section to create a paginated feel without rigid mandatory snapping. The scroll behavior should feel like turning pages in a high-end publication.

**The Boot Sequence (Hero Implementation):**
On page load, the hero section displays a simulated boot process. Implement using a single `<pre>` element with JavaScript that progressively reveals lines of text using `requestAnimationFrame`. Each line appears with a 40-80ms delay (randomized for organic feel). Lines contain fabricated system diagnostics related to recycling: `[OK] Material classification engine initialized`, `[OK] Lifecycle tracking module loaded`, `[OK] Contamination detection: all clear`. After 15-20 lines, the output pauses for 500ms, then the `<pre>` element fades to 20% opacity while the actual hero title ("recycle.reviews") fades in at center, rendered in Space Grotesk at 6rem, #E8E8E8, with letter-spacing: -0.04em. A blinking cursor appears after the last character.

**Terminal Feed (Sidebar Data Stream):**
The right-column terminal feed is a `<div>` with `overflow: hidden` containing a continuously scrolling `<ul>` of log entries. Each entry is formatted as: `[HH:MM:SS] MATERIAL_CODE — STATUS — WEIGHT`. New entries are prepended to the list every 3-5 seconds via JavaScript `setInterval`, with the list smoothly translating upward using CSS `transform: translateY()` transitions. The feed uses JetBrains Mono at 0.875rem, #8A8A8A, with the timestamp in #4A4A4A and the status keyword in #33FF66 when the status is "PROCESSED."

**Lottie Integration:**
Load the Lottie web player via CDN (`lottie-web` library). Each Lottie animation is triggered by an Intersection Observer callback when its parent section reaches 0.3 threshold visibility. Animations play once (except the Dissolution Loop, which loops). The Lottie container should have `mix-blend-mode: screen` to integrate naturally with the dark background -- the green phosphor elements in the animation will glow against #0A0A0A.

**Scanline Effect:**
Apply to the `<body>` as a CSS pseudo-element (`::after`) with `pointer-events: none`, `position: fixed`, `inset: 0`, `z-index: 9999`, and `background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px)`. This creates an ever-present CRT scanline effect that does not interfere with interaction.

**Box-Drawing Borders:**
Content cards and terminal windows use Unicode box-drawing characters for borders instead of CSS borders. Implement as a CSS custom property system: `--border-top`, `--border-side`, `--corner-tl`, etc., with the actual characters rendered via `::before` and `::after` pseudo-elements using `content:` properties. This maintains the terminal authenticity while allowing CSS-based layout control.

**Hover and Interaction States:**
All interactive elements (links, navigation indicators, review cards) transition to #33FF66 on hover with a phosphor glow effect: `text-shadow: 0 0 8px rgba(51,255,102,0.4), 0 0 16px rgba(51,255,102,0.15)`. The glow should pulse subtly (opacity oscillating between 0.3 and 0.5 over 2 seconds) while hovered, simulating phosphor persistence. Cursor changes to a custom SVG cursor shaped like a terminal block cursor (filled rectangle) in #33FF66.

**Navigation Rail:**
The left-edge navigation rail is `position: fixed`, `left: 0`, `top: 0`, `height: 100vh`, `width: 48px`, with section indicators vertically centered. Each indicator is a single character (section number) in JetBrains Mono at 0.75rem, #4A4A4A by default, transitioning to #33FF66 with glow when its corresponding section is in viewport (tracked via Intersection Observer). A thin vertical line (1px, #2A2A2A) runs the full height of the rail, with a small filled circle (6px, #33FF66) that translates vertically to indicate current scroll position.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero images, stock photography, gradient backgrounds, rounded corners (use sharp 90-degree angles exclusively), drop shadows (use box-drawing characters and border effects instead), emoji, sans-serif font stacks without specific named fonts.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Typography-as-infrastructure:** Unlike designs that use typography decoratively, recycle.reviews uses the Space Grotesk + JetBrains Mono pairing as the fundamental building material. Box-drawing characters replace CSS borders. ASCII art replaces icons. The typeface IS the visual design, not merely a vehicle for content. No other design in the collection uses Unicode box-drawing characters as a primary compositional element.

2. **Monochrome with single-frequency accent:** While other monochrome designs tend toward grayscale neutrality, this design introduces exactly one chromatic frequency (#33FF66 phosphor green) used at a strict 5% maximum viewport coverage. The phosphor green is treated as a functional signal -- it indicates interactivity, activity, and life within the system -- not as decoration. This creates a visual hierarchy impossible to achieve with pure grayscale.

3. **Simulated boot sequence as narrative device:** The hero section is not a static composition or a simple animation -- it is a simulated system boot that establishes the terminal metaphor through progressive text revelation. This is a temporal, text-based hero experience that has no visual equivalent in the existing design collection. Users read the boot sequence; they don't merely see it.

4. **Editorial-flow layout with terminal grid logic:** The editorial-flow layout is uncommon (5% frequency) and is further differentiated here by grounding it in character-width grid units rather than percentage-based columns. Content alignment follows monospaced character boundaries even when rendered in proportional type, creating a subtle visual tension unique to this design.

5. **Lens flare as CRT light artifact:** Lens flare imagery (1% frequency) is recontextualized as monitor light leakage rather than cinematic effect. The flares are geometric, horizontal, and rendered in the phosphor green accent color, serving the terminal narrative rather than generic visual spectacle.

**Chosen Seed:** aesthetic: terminal, layout: editorial-flow, typography: grotesque-neo, palette: monochrome, patterns: lottie-animation, imagery: lens-flare, motifs: tech, tone: elegant-sophisticated

**Avoided Overused Patterns:**
- playful aesthetic (95%) -- replaced with terminal (24%)
- centered layout (99%) -- replaced with editorial-flow (5%)
- mono typography (99%) -- replaced with grotesque-neo (4%)
- warm palette (100%) -- replaced with monochrome (11%)
- scroll-triggered patterns (96%) -- replaced with lottie-animation (2%)
- friendly tone (98%) -- replaced with elegant-sophisticated (5%)
- minimal imagery (95%) -- replaced with lens-flare (1%)
- vintage motifs (88%) -- replaced with tech (25%)
<!-- DESIGN STAMP
  timestamp: 2026-03-10T23:04:58
  seed: seed:
  aesthetic: recycle.reviews inhabits the visual language of a sophisticated command-line int...
  content_hash: 36824e759682
-->