# Design Language for recycle.report ## Aesthetics and Tone `recycle.report` is a **brutalist dispatch from the waste bin of civilization** — an anti-design manifesto dressed in the hide of something older than the internet. Imagine a field auditor's leather binder left in the back of a recycling truck for two years: the cover is cracked, the binding is stressed, the paper inside smells faintly of cardboard and amber. The site does not aspire to elegance. It *refuses* elegance. Instead it hoards it in broken hexagonal grids like a honeycomb that has been struck by a hammer — still structurally coherent, still producing something, but obviously, forcefully wrong by design. The tone is **bold-confident to the point of confrontation**. This is not a site that whispers. It announces. Every section header is a declaration. Every data point is a judgment. The mood sits between the bluntness of a shipping manifest and the celestial authority of something printed under a star chart. The stars are not decorative — they are navigational. The leather is not nostalgic — it is functional. The hex grid is not trendy — it is the geometry of maximum density under structural stress. Anti-design principle: **intentional rupture**. Rules are broken on purpose, documented on purpose, and the rupture is the content. The hex cells do not align. The serifs bleed past their containers. The amber tones fight the stark white of raw data. This is how recycling actually looks: chaotic, sorted by force, beautiful only from a distance. ## Layout Motifs and Structure The primary structural unit is the **hexagonal honeycomb grid** — not a decorative background, but the actual content container. Each hex cell is a content node: a material type, a statistic, a region, a call to action. Cells tile across the viewport in a true offset hex pattern at 240px width per cell on desktop, 140px on mobile. Cells are not all equal height — content determines height, and the grid breathes organically. **Anti-design ruptures in the layout:** - Three cells in every screen-height are deliberately misaligned: rotated 4–8 degrees off-axis, overlapping their neighbors by 12–20px. The ruptures are not random — they fall at scroll intervals that correspond to the site's data inflection points (highest tonnage, lowest recovery rate, first year recycling mandates passed). - One cell per section is "exploded" — its border expanded to 3× normal size, its content font set at 1.4× scale, acting as a visual editorial anchor without being a traditional hero. - The hex grid scrolls at 0.85× the page scroll rate (a subtle parallax created purely via `transform: translateY()` on the grid container, not the `parallax` pattern) while the content within cells scrolls at 1× — creating a controlled dissonance. **Navigation:** No traditional navbar. Instead, a vertical strip of seven stacked hex silhouettes on the far left edge of the viewport, fixed-position, each representing a section. The active section hex is filled with the amber-honey tone. Hover reveals a single word label in 10px uppercase serif. This strip is 48px wide. **Structural sections:** 1. **MASTHEAD HEX** — full-viewport arrangement of 18 hex cells, all empty except for one central cell containing the logotype. Cells fill with texture on scroll. 2. **MATERIAL ATLAS** — hex grid populated with material types (glass, aluminum, cardboard, plastic types 1–7, e-waste, organic). Each cell has a leather-texture background at different opacity. 3. **RECOVERY RATES** — the same hex grid reused, cells now colored by recovery rate percentage. Cells animate individually on scroll entry. 4. **STAR MAP** — a full-bleed section where the hex grid dissolves into a celestial star field showing which municipalities are "stars" in recycling performance. Stars are actual SVG points sized by performance score. 5. **DISPATCH** — editorial section, single-column serif text on amber ground, breaking from the hex pattern entirely as a deliberate layout rupture. 6. **SUBMIT / CONTACT** — three hex cells, large, centered, with leather-embossed borders. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Primary display and all section anchors — `Playfair Display`** (Google Fonts, wght 400–900, italic variant). Used at 72–96px for section titles. Set in `font-style: italic` at the masthead. The serifs are deliberately large at this scale — they bleed outside their containing hex cells by 8–12px on the right edge, a controlled anti-design rupture that makes the grid feel inhabited rather than pristine. - **Body and data text — `Libre Baskerville`** (Google Fonts, wght 400, 700). Used at 15–17px for all running text, data labels inside hex cells, and the DISPATCH editorial column. Baskerville's thick-thin contrast at small sizes reads like text stamped into leather — intentional. - **Numeric data displays — `Courier Prime`** (Google Fonts, monospace, wght 400, 700). All percentages, tonnage figures, year numbers, and recovery rates. Set in uppercase with letter-spacing: 0.12em. Appears inside hex cells like a typed field report. - **Navigation labels — `Playfair Display SC`** (Google Fonts, small-caps variant). 9px, tracking 0.3em, for the hex nav strip labels. **Palette (honeyed-neutral with celestial accents):** - `#C49A22` — deep amber, primary brand color, used for filled hex cells, active nav items, and the masthead logotype - `#F2E4C0` — honeyed cream, page ground color, the "paper inside the leather binder" - `#2B1F0A` — near-black brown, all body text, hex borders at 1.5px, typographic anchors - `#8B6914` — warm ochre, secondary amber for hover states, the leather-texture overlay tint - `#E8D5A0` — pale honey, used for hex cell backgrounds at rest (before fill animations) - `#1A1410` — deep leather black, the masthead background, footer background, and the star field ground - `#F7F2E8` — off-white parchment, used only in DISPATCH section for the high-contrast editorial column - `#C8A96E` — tanned leather mid-tone, used in the leather-texture SVG filter, secondary motif surfaces **No blue. No green. No gray.** The palette is a deliberate refusal of environmental-brand conventions (no eco-green, no sky-blue). Recycling is about material transformation — amber, ochre, and leather brown are the colors of raw material and compressed heat. ## Imagery and Motifs **Leather texture as the only imagery system.** No photography, no stock. All surface texture is achieved via a single SVG `` + `` filter pipeline that simulates hand-burnished leather grain. The filter is applied at different `baseFrequency` values (0.015 for coarse grain in masthead cells, 0.055 for fine grain in data cells) and blended with `mix-blend-mode: multiply` over the amber cell backgrounds. The result: each hex cell reads like a patch of worn leather rather than a flat fill. **Star-celestial motifs as data representation:** - In the STAR MAP section, each municipality is an SVG `` of radius 2–12px (mapped to recovery rate) rendered on `#1A1410` ground. Points are positioned using an actual hex-offset coordinate system so the stars cluster by geographic region. Connecting lines between neighboring municipalities are 0.4px, opacity 0.3, like constellation drawings on a star chart. - Seven SVG star-burst shapes (8-pointed, hand-drawn feel via irregular polygon vertices) appear as decorative dividers between sections, set in `#C49A22` at 32px. These are the only purely decorative elements on the page. - The masthead hex grid has a faint star-field overlay at 6% opacity — barely perceptible at first, revealed fully only after 400ms on-load delay, as if the night sky is emerging behind the honeycomb. **Anti-design decorative ruptures:** - The logotype `recycle.report` is set in Playfair Display italic, 88px, with the `.` enlarged to 200% and offset 8px above baseline — punctuation as anchor, not separator. - Hex cell borders use `stroke-dasharray` to appear partially complete — as if the cells are still being drawn, mid-construction. - One hex cell in every row is rotated 180°, its content inverted (white text on dark amber instead of dark text on light), creating a visual "wrong cell" that the eye must consciously process. ## Prompts for Implementation Build `recycle.report` as a **single-page scrolling field report** — the kind a regional waste auditor files after touring twelve facilities in one week. The visitor is the reader of the report. The hex grid is the filing system. **Scroll-triggered animation architecture:** The core animation pattern is `scroll-triggered` — specifically using `IntersectionObserver` (no external library, native only) to fire per-cell animations: 1. **Hex cell fill sequence:** When a hex cell enters the viewport at 80% threshold, its background color transitions from `#E8D5A0` (pale honey rest) to the target amber fill over 380ms via CSS `transition: background-color`. Cells in a row fire in left-to-right sequence using `IntersectionObserver` entry order + a 45ms per-cell stagger implemented as inline `transition-delay` set dynamically. 2. **Leather texture reveal:** Simultaneously with the fill, the SVG texture filter's `stdDeviation` animates from 0 to its final value (4 for coarse, 2 for fine grain) via a CSS custom property `--texture-blur` interpolated in a `@keyframes` rule. The effect: cells appear to gain material weight as they enter the frame. 3. **Star field emergence (STAR MAP section):** Each `` SVG element begins at `r=0, opacity=0` and animates to its target radius and `opacity=0.85` when its containing row enters the viewport. Stars within the same hex-coordinate row animate together with a 60ms stagger. Constellation lines draw via `stroke-dashoffset` animation from full offset to 0 over 600ms. 4. **Data counter reveal:** All `Courier Prime` numeric fields start at `0` and count up to their final value when the cell becomes active, using a lightweight vanilla JS counter (duration 800ms, easing `easeOutCubic`, no library). 5. **Rupture cells:** The three intentionally misaligned cells are positioned using CSS `transform: rotate(Xdeg) translateX(Ypx)`. On scroll entry, they animate from `transform: rotate(0) translateX(0)` to their ruptured position over 500ms with `easing: cubic-bezier(0.34, 1.56, 0.64, 1)` (a slight overshoot spring). This makes the rupture feel like it *happens* rather than being pre-existing. **Masthead sequence (on load, before scroll):** - 0ms: page appears, all hex cells are border-only (no fill, no content) - 200ms: the central logotype cell fades in (opacity 0→1, 300ms ease) - 500ms: the star field overlay behind the hex grid fades in (opacity 0→0.06, 400ms) - 900ms: the amber progress bar at the very bottom of the viewport (4px tall, full width) begins filling left to right, representing total scroll distance — the auditor's progress through the report **DISPATCH section (anti-hex rupture):** This section deliberately breaks out of the hex grid: a single 640px centered column on `#F7F2E8` parchment ground, bounded by a 1.5px `#2B1F0A` border that extends full viewport width as a horizontal rule above and below. The text is Libre Baskerville 17px, line-height 1.85. No hex geometry. No texture. This is the only moment the grid disappears — a deliberate white silence in the amber noise. **Implementation rules:** - No CSS frameworks. No component libraries. Vanilla CSS grid + SVG + vanilla JS only. - Hex geometry calculated via JavaScript: center coordinates, vertex points, offset rows — all derived from a single `HEX_SIZE` constant (default: 120 for the hex inradius). - The SVG hex grid is rendered programmatically — not hardcoded. A single `renderHexGrid(container, data)` function distributes content nodes into hex cells based on available width. - The leather texture SVG filter is defined once in a `` block and referenced by filter ID across all hex cells. - All scroll animations are zero-dependency: `IntersectionObserver` + `requestAnimationFrame` + CSS transitions only. ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Hexagonal honeycomb as the sole layout primitive (registry: 3%).** The registry shows hexagonal-honeycomb at 3% — barely present. `recycle.report` makes it the *only* layout system: no rectangular cards, no full-bleed sections (except one), no sidebar in the traditional sense. Every content unit lives in a hex. The nav is a hex strip. The star map is hex-coordinate-spaced. This is the registry's first site where hexagons are structurally load-bearing, not decorative. 2. **Anti-design applied to an environmental data domain.** Anti-design in the registry (5%) appears in arts, fashion, and tech contexts. Applying it to recycling data — a domain usually dressed in eco-green and optimistic gradients — creates a genuine visual surprise. The refusal of eco-color-signaling (no green, no blue, no gray) in favor of amber and leather-brown is a specific aesthetic argument: recycling is industrial transformation, not pastoral. 3. **Leather-texture via programmatic SVG filter (registry: 3%).** The registry shows leather-texture at 3%, and in those cases it's typically a background image or CSS pattern. `recycle.report` renders all texture programmatically via SVG feTurbulence filters — no images, no external assets, full code control. The texture is data-driven: coarser grain for high-volume cells, finer grain for precision data cells. 4. **Star-celestial motifs as a data visualization system, not decoration.** Star-celestial appears at 5% in the registry, always as a background or mood element. Here, stars ARE the data — municipality recovery rates plotted as star magnitudes in a hex-coordinate space. The celestial motif earns its place by doing analytical work, not atmospheric work. 5. **Chosen seed documented:** aesthetic: anti-design, layout: hexagonal-honeycomb, typography: serif-classic, palette: honeyed-neutral, patterns: scroll-triggered, imagery: leather-texture, motifs: star-celestial, tone: bold-confident 6. **Avoided overused patterns from frequency analysis:** photography (87% — avoided entirely), centered layout (84% — refused, hex grid is structurally off-center), warm+gradient palette (89%/77% — replaced with amber-specific honeyed-neutral, no gradients), parallax (75% — avoided, using scroll-triggered hex-cell animations instead), stagger (50% — partially used but only at 45ms per-cell intervals, not the full stagger pattern), hand-drawn aesthetic (58% — refused, all texture is computational).