# Design Language for recycle.cafe ## Aesthetics and Tone recycle.cafe inhabits the productive friction between two impulses: the bureaucratic ugliness of waste systems and the warmth of a neighborhood cafe where everyone belongs. The site is a **glitch-optimism manifesto** — things are broken (literally: pixels corrupt, text stutters, containers fragment), but the breakage is beautiful, intentional, and ultimately hopeful. The aesthetic owes a debt to **Risograph printing** applied to digital space: a burgundy ink plate slightly mis-registered over a cream background, letting ghost halos appear around edges. The glitch aesthetic here is not cyberpunk darkness but **warm malfunction** — like a VHS tape of a community garden party, artifacts and all. Mood: a village square that also happens to be a repair shop and a coffee bar. Optimistic, unpretentious, culturally rooted without being ethnically specific. The tone is sunny but not saccharine — there are real stakes (the planet) but they are held lightly, with humor and texture. Visitors should feel they've discovered something, not been marketed to. Inspiration draws from: zine culture of the early 2000s, African wax print geometry, Japanese kintsugi (golden repair), and the oversaturated warmth of South American mercado signage. The glitch references all of these: things that have been repaired, copied, re-transmitted. Every artifact is a trace of use. ## Layout Motifs and Structure The page uses a **modified F-pattern reading structure** with deliberate glitch interruptions at the scan-line breaks. The F is made visible: two full-width horizontal bands (the F's top and middle bars) anchor a left-weighted vertical column. But the vertical column occasionally *slips* — a 4px rightward translate, a row that renders at 98% opacity as if the connection dropped mid-load. Structural vocabulary: - **Hero band (full width):** A gradient-mesh background of burgundy-to-cream, with an overlaid CSS glitch frame that creates a second, offset version of the hero text in a 15% opacity ghost. This is the top stroke of the F. - **Left column (60% width):** Primary narrative content, typeset in the geometric sans. This is the vertical stroke of the F. - **Mid-band accent (full width):** A horizontal strip, offset from the flow, carrying a rotating carousel of recycled-material close-up textures. This is the middle stroke of the F. - **Right gutter (40% width):** Loosely structured secondary content — dates, small images, fragments of text that seem to be loading asynchronously. Intentionally incomplete-feeling. - **Cultural motif insets:** Small rectangular panels, styled as if they were stickers or paste-up flyers, placed at unexpected Z-positions (CSS translate-Z) along the left column. Spacing uses an 8px base grid. The glitch effect is achieved via CSS `clip-path` animation on pseudo-elements — no image duplication needed. Margins are generous but asymmetric: 80px left, 48px right on the main column, creating a subtle tension. ## Typography and Palette **Primary palette — Burgundy-Cream with glitch highlights:** - `#6B1A2A` — Deep Burgundy (primary brand, headlines, active states) - `#F5EED8` — Antique Cream (page ground, body text background) - `#D4A853` — Warm Amber (accent, hover states, the "gold in the repair") - `#2D4A3E` — Forest Dark (secondary text, footer, grounding element) - `#E8D5B7` — Light Parchment (card backgrounds, section dividers) - `#C0392B` — Glitch Red (the mis-register ghost color, used at low opacity for glitch halos) - `#F0E8D0` — Off-White (large area fill, subtle from cream) - `#1A0A0E` — Near-Black Burgundy (deep shadows, ultra-dark text) **Glitch channel colors (used only in glitch pseudo-elements at 20-40% opacity):** - `#00BFFF` — Cyan channel ghost (RGB split top layer) - `#FF2D55` — Magenta channel ghost (RGB split bottom layer) **Typography:** - **Display / Hero:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 800, set very large (clamp 56px–120px), tracked at -0.03em. Geometric construction, humanist warmth. The geometric-sans seed made warm. - **Subheadings:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 500–700, echoes DM Sans geometry but with more distinctive glyph details (the 'a', the 'G'), creating a subtle typographic conversation. - **Body:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 400, 17px/28px, generous line-height for readability on the cream ground. - **Accent / Stamps / Sticker text:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — uppercase only, used for small labels, category stamps, and the "sticker" motifs. Compressed geometry at small sizes. - **Mono / Glitch fragments:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — used only for glitch-effect text renders (ASCII art fragments, corrupted strings that appear in the glitch animation sequence). The glitch effect on text uses CSS `text-shadow` in the cyan and magenta channel colors, animated with a keyframe that jiggles the shadows ±3px on a randomized 0.1s–2s loop using `animation-delay` spread across elements. ## Imagery and Motifs The visual world of recycle.cafe is built from **gradient-mesh backgrounds** and **cultural sticker insets**, tied together by the warm-malfunction glitch thread. **Gradient mesh backgrounds:** Each full-width section has a unique CSS `background: radial-gradient()` mesh — multiple overlapping radials in the palette colors create the effect of a hand-pulled Risograph layer. The hero mesh pulses very slowly (30s animation, opacity oscillating ±0.08) to suggest warmth and breath rather than a static image. Implementation uses 4–6 `radial-gradient` layers in a single `background` declaration. **Cultural motif stickers:** Small (120px–200px) rectangular panels styled as paste-up flyers from an imaginary city. Each carries a single bold geometric motif drawn in CSS: - A kintsugi crack motif (gold line breaking and rejoining, CSS SVG path) - A wax-print diamond tessellation (CSS repeating-linear-gradient at 45°) - A mercado-style sun burst (CSS conic-gradient in amber) - A recycle arrows triangle rendered as three overlapping tilted rectangles in CSS These stickers are positioned with `position: absolute` at slight rotations (–4° to +7°), creating a layered, hand-placed feeling. **Hover-lift cards:** Content cards use `transform: translateY(-8px) rotate(0.3deg)` on `:hover` with a `box-shadow` that deepens from `0 2px 8px rgba(107,26,42,0.12)` to `0 16px 40px rgba(107,26,42,0.28)`. The lift is paired with a burgundy left-border that slides in from 0px to 4px width. Transition: 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) — a slight spring overshoot that feels physical. **Glitch frames:** Hero and section dividers carry a CSS-only glitch frame: a `::before` pseudo-element with `clip-path: polygon(...)` animated through 4 keyframes that slice and shift a 3px-wide horizontal band across the element every 3–8 seconds. Duration is randomized via CSS custom properties set by a small inline script. The glitch is infrequent enough to feel like a genuine transmission artifact rather than a decorative loop. **No photography.** All "imagery" is CSS-generated or SVG. This keeps load fast and ensures the aesthetic is consistent — no stock photo inconsistency. ## Prompts for Implementation Treat the page as **a community bulletin board that is also slightly haunted by data**. Every section is a handmade thing that has passed through a digital copier one too many times — the warmth is real, the artifacts are real, both are welcome. **Hero section:** Full-viewport gradient-mesh in burgundy-cream. The headline "Recycle. Repeat. Rejoice." rendered in DM Sans 800 at `clamp(64px, 10vw, 120px)`. Behind it, a `::before` clone of the same text offset +4px right, +2px down, in `#C0392B` at 18% opacity — the Risograph mis-register ghost. A `::after` clone offset −3px right in `#00BFFF` at 12% opacity. The headline glitches: every 6 seconds, a 0.3s keyframe animation horizontally slices the text into 3 bands that shift by ±6px before snapping back. Below the headline, a Space Grotesk subtitle at weight 500, 22px, color `#2D4A3E`. **F-pattern top band:** Immediately below the hero — a full-width band, 96px tall, filled with a Bebas Neue label sequence: "REUSE · REDUCE · RECYCLE · REJOICE · REPAIR ·" repeated, moving left-to-right at 40s linear marquee speed. Color: `#6B1A2A` text on `#E8D5B7` ground. No border. This creates the top bar of the F. **Main column + right gutter:** CSS Grid, `grid-template-columns: 3fr 2fr`. Left column carries the narrative. Right gutter holds "loading" fragments — short lines of Space Mono text at 12px, `#2D4A3E` at 60% opacity, with a blinking cursor pseudo-element and occasional single-line glitch. These fragments describe imaginary recycling stats that "haven't loaded yet": `> fetching community_data...`, `> items_saved: [loading]`. This creates the vertical stroke of the F. **Cultural sticker insets:** Place 3–4 sticker panels along the left column using `position: absolute` with `z-index: 2`. Each sticker has a `border: 2px solid #6B1A2A`, a `box-shadow: 3px 3px 0 #D4A853` (offset shadow, no blur — screen-print feel), and a small `transform: rotate(Xdeg)`. On hover: `transform: rotate(0deg) scale(1.06)` — they straighten and pop, hover-lift variant for small elements. **Mid-band accent:** Full-width strip, `background: #6B1A2A`, 200px tall. Contains 5 CSS-only "material texture" squares: burlap (CSS noise via SVG filter), cardboard (layered linear gradients in amber+brown), glass (semi-transparent radial gradient in light blue+white), metal (linear gradient silver-grey), paper (very subtle noise in cream). Each square is 160px × 160px, displayed flex in a row with 32px gap. Hovering a square triggers a `hover-lift` of 6px + a label in Bebas Neue appearing from below via `clip-path: inset(100% 0 0 0)` → `inset(0 0 0 0)` transition. **Footer:** Dark section, `background: #1A0A0E`. DM Sans 14px in `#F5EED8` at 70% opacity. Includes the kintsugi crack SVG motif centered above the text: a thin gold line (`stroke: #D4A853`, `stroke-width: 1.5`) that runs across the full footer width, breaks in three places, and rejoins with a small gold diamond at each repair point. This grounds the cultural motif thread and closes the "repair" metaphor of the brand. **Glitch animation system:** Define CSS custom properties `--glitch-delay-1` through `--glitch-delay-5` on `:root` with values `0s, 1.7s, 3.2s, 5.1s, 7.4s`. Apply to glitch pseudo-elements via `animation-delay: var(--glitch-delay-N)`. This staggers the glitch moments across the page so they never all fire simultaneously, preserving the "transmission artifact" feeling rather than a synchronized strobe. **Interaction philosophy:** Hover states are the primary interaction layer. No JavaScript required for the core experience. The JS, if included, serves only to: (1) randomize `--glitch-delay-N` values on load for replay variation, and (2) drive the marquee strip. Everything else is CSS. This is intentional — a recycling site built from the most durable web materials. AVOID: CTAs stacked above the fold, pricing blocks, stat-grid dashboards, testimonial carousels, hero with centered button pair, sticky navigation with dropdown mega-menu, footer with 4-column link dump, modal popups, cookie banners (style them invisibly if legally required). ## Uniqueness Notes 1. **Warm-glitch fusion is unprecedented in this palette zone.** Glitch aesthetics in the registry appear at 10% frequency but always in dark/neon contexts (cyberpunk, dark-tech). Applying glitch to a burgundy-cream warm palette with Risograph mis-register logic is a novel inversion. The frequency report shows `burgundy-cream` at 3% and `glitch` at 10% — they have never been combined. 2. **The F-pattern is made structurally visible as a design element.** F-pattern layouts appear at 3% frequency in the registry; most use it invisibly as a reading-flow optimization. Here, the F-pattern is literally rendered: two horizontal bands and a weighted vertical form the skeleton that content hangs from. The layout is the concept. 3. **Cultural motifs sourced from four distinct traditions without privileging any one.** Most "cultural motif" designs in the registry (6% frequency) choose a single cultural reference and decorate with it. recycle.cafe draws simultaneously from Japanese kintsugi, West African wax-print geometry, South American mercado signage, and North American zine culture — held together by the "repair and reuse" theme. The motifs are not decorative but conceptually load-bearing: each one is a material or tradition of fixing things. 4. **No photography, no icons, no external assets.** The entire visual system is CSS-generated (gradients, clip-paths, pseudo-elements, SVG inline). This is a deliberate constraint that mirrors the site's domain: use only what you already have; create richness from available materials. 5. **Chosen seed:** aesthetic: glitch, layout: f-pattern, typography: geometric-sans, palette: burgundy-cream, patterns: hover-lift, imagery: gradient-mesh, motifs: cultural, tone: optimistic-bright. The glitch is warm, not cold. The F-pattern is literal, not invisible. The geometric-sans is humanist-warm (DM Sans), not cold-corporate. All seed dimensions are honored while being inverted from their default associations. 6. **Avoided from frequency analysis:** `hover-lift` (9% — overused, so here it is made more specific: the spring cubic-bezier overshoot and the sliding left-border are differentiators within the pattern). `gradient-mesh` (8% — overused, so here each section has a unique mesh composition rather than a single shared gradient system). `glitch` as pure aesthetic (10% overused in dark contexts — subverted by warmth).