# Design Language for recycle.wiki ## Aesthetics and Tone recycle.wiki channels the quiet authority of a Scandinavian municipal information bureau -- the kind of place where complex waste sorting regulations are presented with such clarity and visual restraint that compliance feels not like obligation but like participation in a shared civic ritual. The aesthetic is rooted in **scandinavian functionalism**: the clean plywood surfaces of a Copenhagen recycling station, the matte-finish signage of a Stockholm sorting hall, the precise color-coding of Finnish waste bins rendered as architectural objects. There is no greenwashing here, no stock photos of hands cupping soil. Instead, the site treats recycling as what it is -- an industrial process, a materials science, a logistics problem -- and presents it with the sober beauty that Scandinavian design brings to everything from bus shelters to hospital wayfinding. The tone is **authoritative** without being cold. Think of the voice as a well-informed materials scientist who also happens to care deeply about municipal design standards. Information is presented with confidence and precision -- exact decomposition timelines, specific material properties, clear sorting hierarchies -- but always through a lens of visual warmth that makes the density of information feel inviting rather than overwhelming. The warmth comes not from friendliness or playfulness but from the quality of the materials: the amber undertones in the background surfaces, the golden warmth of birch-toned accents, the comfortable weight of well-set condensed type. The site should feel like browsing a beautifully designed exhibition at the Swedish Museum of Natural History -- authoritative institutional knowledge presented with the care and visual refinement that only Scandinavian design culture can produce. ## Layout Motifs and Structure The layout employs a **bento-box** grid system -- a modular composition of rectangular cells of varying proportions arranged in a tight, gap-controlled matrix. This is not a standard CSS grid with uniform gutters; it is a carefully composed arrangement where each cell has a specific aspect ratio and content density, creating a visual rhythm that mirrors the sorting and categorization at the heart of recycling itself. Materials are sorted into bins; information is sorted into bento cells. **Grid Architecture:** - Primary grid: 12-column base with cells spanning 2, 3, 4, or 6 columns - Row heights vary: tall cells (aspect ratio 3:4) for deep-dive content, wide cells (4:1) for material flow diagrams, square cells (1:1) for category icons and stats - Gap: a consistent 6px everywhere -- tight enough to feel like a unified composition, wide enough to delineate boundaries. The gap color is `#F2EDE6` (warm linen), creating hairline borders that read as the thin walls between compartments in a physical bento box - Cells never have rounded corners -- all edges are sharp, echoing the precision of Scandinavian industrial design - On mobile (< 768px), the grid collapses to a 2-column bento with cells stacking vertically but maintaining their relative proportions where possible **Narrative Scroll Structure:** The page is divided into five major bento "trays," each occupying approximately 90-100vh: 1. **Hero Tray:** A single full-width cell containing the site identity, with two smaller cells below showing a material decomposition timeline and a "today's sort" prompt 2. **Materials Tray:** A dense 3x4 bento of material categories (glass, paper, plastic, metal, organic, textile, electronics, hazardous, wood, composite, rare earth, other), each cell containing a material photograph and key sorting data 3. **Process Tray:** A horizontal flow diagram rendered across wide bento cells, showing the lifecycle from collection to reprocessing to new product 4. **Knowledge Tray:** Mixed-proportion cells containing articles, data visualizations, and interactive sorting guides 5. **Action Tray:** Cells for local recycling station finder, material lookup search, and contribution/community modules Each tray is separated by a 48px breathing space with a thin 1px line in `#D4C4B0` acting as a section divider. ## Typography and Palette **Typography:** - **Headlines / Tray Titles:** "Barlow Condensed" (Google Fonts) -- weight 600, uppercase, tracking 0.12em. This typeface embodies the Scandinavian industrial signage tradition: tall, narrow, space-efficient letterforms that command attention without shouting. Used at 2.5rem-5rem for tray headings. The condensed proportions directly echo the vertical compression of bento cells, creating visual harmony between type and layout. Color: `#2C2418` (Deep Bark). - **Body / Data Labels:** "Inter" (Google Fonts) -- weight 400 for body text, weight 500 for data labels and sorting instructions. Set at 0.95rem-1.1rem with line-height 1.65. Inter's clarity at small sizes makes it ideal for the dense informational content within bento cells, where readability inside compact containers is critical. Color: `#4A3F33` (Warm Umber). - **Data / Statistics:** "Roboto Mono" (Google Fonts) -- weight 400. Used exclusively for numerical data: decomposition timelines, recycling rates, material weights, temperature thresholds. Set at 0.85rem-1rem. The monospace proportions allow numbers to align vertically in data columns within bento cells. Color: `#8B7355` (Tawny Bronze). - **Accent / Navigation:** "Barlow Condensed" -- weight 500, uppercase, tracking 0.15em, at 0.75rem. Used for navigation labels, cell category tags, and breadcrumb elements. The condensed form allows labels to fit within the tight horizontal space of bento cell headers. **Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Background | `#F7F2EB` | Warm Parchment | Page background, default cell fill | | Cell Surface | `#EDE6DB` | Birch Veneer | Alternate bento cell backgrounds for contrast | | Gap / Border | `#F2EDE6` | Linen Thread | 6px gap fill between bento cells | | Primary Text | `#2C2418` | Deep Bark | Headlines, primary content | | Body Text | `#4A3F33` | Warm Umber | Paragraph text, descriptions | | Accent Warm | `#C4973B` | Amber Resin | Active states, highlighted cells, CTAs | | Data Accent | `#8B7355` | Tawny Bronze | Monospace data, secondary information | | Section Line | `#D4C4B0` | Pale Teak | Dividers, thin borders, inactive states | | Material Glass | `#7BA88B` | Bottle Green | Glass category cells | | Material Paper | `#C4A87D` | Cardboard Tan | Paper/cardboard category cells | | Material Metal | `#9A9BA0` | Aluminum Grey | Metal category cells | | Alert | `#B85C3A` | Terracotta Signal | Warning states, hazardous material flags | The palette is warm throughout -- amber, tawny, birch -- but achieves sophistication through restraint. No gradients, no dramatic contrasts. The warmth is tonal and material-based, evoking natural surfaces (birch plywood, linen, raw cardboard, amber resin) rather than digital color effects. ## Imagery and Motifs **Photography:** The primary imagery mode is **photography** -- but specifically the tradition of Scandinavian product photography applied to recycled materials. Each material category cell in the bento grid contains a tightly cropped, overhead photograph of the material in its pre-recycling state: crumpled aluminum cans arranged in a grid, stacked newspaper bundles with visible type, sorted glass bottles organized by color gradient, tangled electronic cables forming abstract compositions. The photography style follows these rules: - **Overhead / flat-lay perspective** exclusively -- no angled shots, no environmental context - **Warm ambient lighting** with soft shadows (matching the `#F7F2EB` background temperature) - **Tight cropping** so materials fill the entire bento cell with minimal margin - **No human hands or figures** -- the materials are the subjects, not the people - **Color accuracy** -- glass is actually green, paper is actually tan, metal is actually grey. No color grading that distorts material truth. When photography is unavailable, placeholder cells use solid fills from the material color system (Bottle Green for glass, Cardboard Tan for paper, etc.) with a subtle 2% noise texture overlay to evoke material surfaces. **Abstract-Tech Motifs:** Overlaid on the bento structure are **abstract-tech** motifs that visualize recycling as a systems process: - **Flow arrows:** Thin 1px lines in `#D4C4B0` connecting bento cells to show material flow paths (collection to sorting to processing). These arrows are drawn as SVG paths with 90-degree turns (never curves -- Scandinavian precision), creating a circuit-board-like network overlaying the bento grid. - **Sorting diagrams:** Within certain cells, simple geometric diagrams show material sorting decision trees -- binary branching paths rendered in `#8B7355` with Roboto Mono labels at each node. - **Lifecycle rings:** Circular SVG diagrams (stroked, not filled) showing the circular economy loop for each material type. Ring segments are colored with the material's category color and rotate slowly (one full rotation per 60 seconds) to emphasize the cyclical nature of recycling. **Lottie Animations:** The primary animation system uses **Lottie** (lottie-web) for three specific purposes: 1. **Material decomposition timers:** Each material cell contains a small Lottie animation (48x48px) showing the material gradually breaking down -- paper fibers separating, glass cracking into sand-like particles, metal oxidizing. These play once on scroll-enter and pause at their final frame. 2. **Sorting guide animations:** In the Knowledge Tray, interactive sorting guides use Lottie sequences showing items being placed into correct bins -- a frame-by-frame instructional animation with the clean, diagrammatic quality of IKEA assembly instructions. 3. **Cycle loop in hero:** The hero tray features a larger Lottie animation (200x200px) of the recycling cycle -- abstract geometric shapes (triangle, circle, square representing reduce/reuse/recycle) transforming into each other in an endless loop, rendered in `#C4973B` Amber Resin against `#F7F2EB` Warm Parchment. All Lottie animations use a limited color palette (maximum 3 colors per animation) and employ thin stroked lines (1-2px) rather than filled shapes, maintaining the diagrammatic quality consistent with Scandinavian design. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens with a full-viewport hero tray. The background is `#F7F2EB` Warm Parchment. After a 300ms pause, the central Lottie cycle-loop animation fades in (opacity 0 to 1 over 600ms, eased with cubic-bezier(0.25, 0.1, 0.25, 1.0)). Simultaneously, "RECYCLE.WIKI" appears in Barlow Condensed 600 weight at 5rem, uppercase, tracking 0.15em, positioned above the animation. Below the animation, a single line of Inter 400 at 1.1rem reads: "A comprehensive guide to materials, sorting, and the circular economy." No navigation is visible initially -- it reveals as a thin horizontal bar (height: 48px, background: `#EDE6DB`) when the user scrolls past the hero tray, using a sticky position with a subtle 200ms slide-down transition. **Bento Cell Entrance Animations:** As the user scrolls into each tray, bento cells do not all appear simultaneously. Instead, they stagger in using a Lottie-driven reveal sequence: each cell fades from opacity 0 to 1 and translates upward by 12px over 400ms, with each subsequent cell delayed by 60ms from its predecessor. The stagger follows reading order (left-to-right, top-to-bottom). This creates a "filling the tray" effect -- as if items are being sorted into compartments one by one. **Material Cell Interactions:** When a user hovers over a material category cell (desktop only), the cell expands by 2px in each direction (achieved via transform: scale(1.02) with transform-origin: center), the background photograph gains a subtle warm overlay (`#C4973B` at 8% opacity), and a thin bottom border in `#C4973B` appears (0 to 2px height over 200ms). On click/tap, the cell expands to fill the full viewport width (spanning all 12 columns) with a smooth 500ms transition, revealing detailed sorting instructions, decomposition data in Roboto Mono, and the material's Lottie decomposition animation playing from the beginning. **Flow Arrow Drawing:** The SVG flow arrows connecting bento cells are drawn on scroll using path-draw animation (stroke-dasharray / stroke-dashoffset technique). As the user scrolls through a tray, arrows progressively draw themselves along their 90-degree paths at a rate synchronized to scroll position. This creates the sensation of watching a process diagram being drawn in real-time -- the recycling system revealing its connections as you explore. **Data Display in Bento Cells:** Numerical data within cells (decomposition times, recycling rates, processing temperatures) uses the counter-animate pattern: numbers count up from 0 to their target value over 800ms when the cell enters the viewport. The counting uses Roboto Mono and eases with a deceleration curve (cubic-bezier(0.0, 0.0, 0.2, 1)) so the numbers slow down as they approach their final values, giving a sense of precision arrival. **AVOID:** CTA-heavy layouts (no "Sign Up Now" blocks), pricing grids, testimonial carousels, stat-grids with large vanity numbers. The site is an information resource, not a conversion funnel. Every element earns its bento cell through informational value. **Storytelling Emphasis:** The narrative arc follows a material's journey: What is it? How do you sort it? Where does it go? What does it become? This story is told across the bento trays, with each tray representing a chapter. The user's scroll is the page turn. The tight bento grid prevents information from feeling scattered -- everything has its compartment, its place, its purpose. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bento-box recycling metaphor:** The bento-box layout (3% frequency) is used here not as a generic grid alternative but as a direct metaphor for waste sorting -- materials sorted into compartments, information sorted into cells. This structural-conceptual alignment between layout choice and subject matter is unique. No other design in the portfolio uses bento-box specifically to mirror a sorting/categorization domain. 2. **Lottie-as-diagram, not decoration:** Lottie animations (2% frequency -- heavily underused) are deployed here exclusively as informational diagrams: material decomposition sequences, sorting instructions, and cycle visualizations. This contrasts with typical Lottie usage as decorative flair or loading states. The animations serve the same function as the technical illustrations in a Scandinavian design manual -- they explain, they do not entertain. 3. **Material-truthful photography:** While photography is common (72%), the specific approach here -- overhead flat-lay product photography of waste materials, following Scandinavian product photography conventions -- is entirely distinct. Most photography in the portfolio serves as atmospheric background; here, every photograph is a material specimen, tightly cropped and scientifically lit, functioning as both documentation and visual texture within the bento cells. 4. **Abstract-tech as process visualization:** The abstract-tech motif (6% frequency) is typically used for generic circuit-board or particle effects. Here, it manifests specifically as recycling process diagrams: 90-degree flow arrows, binary sorting trees, and lifecycle rings. The "tech" is the technology of waste processing rendered as visual systems. 5. **Warm palette without softness:** The warm palette is ubiquitous (100%), but this design achieves warmth through material-referencing (birch, amber, cardboard, linen) rather than through gradients or pastel washes. The palette is warm but firm -- authoritative warmth, not cozy warmth. Every color references an actual physical material involved in recycling. **Chosen seed/style:** aesthetic: scandinavian, layout: bento-box, typography: condensed, palette: warm, patterns: lottie-animation, imagery: photography, motifs: abstract-tech, tone: authoritative **Avoided patterns from frequency analysis:** - playful aesthetic (95% -- replaced with scandinavian at 6%) - centered layout (99% -- replaced with bento-box at 3%) - mono typography (99% -- replaced with condensed at 19%, with Roboto Mono only for data) - scroll-triggered pattern (96% -- replaced with lottie-animation at 2% as primary animation driver) - friendly tone (98% -- replaced with authoritative at 19%) - vintage motifs (88% -- replaced with abstract-tech at 6%) - minimal imagery (95% -- replaced with photography with specific material-documentation approach)