# Design Language for recycle.digital ## Aesthetics and Tone recycle.digital inhabits the visual world of a Nordic materials research lab -- the kind of pristine, light-filled space where engineers in undyed linen aprons examine cross-sections of recycled polymers under magnifying lenses, where sample jars of granulated ocean plastic sit in orderly rows on birch plywood shelving, and where every surface communicates a quiet conviction that waste is merely matter waiting for its next purpose. The aesthetic is **Scandinavian functionalism** pushed to its philosophical extreme: not the Instagram version of Scandi with its token monstera leaf and sheepskin throw, but the deeply principled Nordic design tradition where every element earns its place through utility, where beauty is the inevitable byproduct of rigorous problem-solving, and where the absence of decoration is itself a statement about material honesty. The tone is **professional** in the truest sense -- not the corporate-slide-deck professionalism of blue gradients and handshake stock photos, but the quiet authority of someone who has spent years studying material lifecycles and speaks about circular economies with the measured precision of a researcher presenting peer-reviewed findings. There is warmth here, but it is the warmth of competence rather than friendliness. The site communicates trust through restraint, expertise through specificity, and optimism through evidence rather than slogans. Imagine the visual equivalent of a well-organized white paper that you actually want to read. The mood draws from the work of Scandinavian architects like Alvar Aalto and Jorn Utzon -- spaces where natural light does more work than any ornament ever could, where the grain of the wood IS the decoration, and where the human experience of moving through a space matters more than how it photographs. Applied to a digital recycling platform, this translates to interfaces that feel like walking through a clean, bright processing facility where complexity has been organized into comprehensible flows. ## Layout Motifs and Structure The layout follows a strict **F-pattern** reading architecture -- acknowledging the empirically documented way Western users actually scan digital content, then using that knowledge to place critical information along the F-shaped heat map of attention. This is not a passive acceptance of the F-pattern but an active exploitation of it: the left vertical rail and the two horizontal scan lines become the primary content highways, while the lower-right quadrant (the attention dead zone in F-pattern research) is deliberately used for secondary supporting detail or left as negative space. **The F-Pattern Grid System:** The underlying grid is a 12-column system with asymmetric gutters -- 24px standard gutters except for the left margin, which is expanded to 48px to create a subtle visual "rail" that anchors the eye to the left edge. This left rail serves as both a navigation landmark and a structural echo of the recycling loop itself: the eye starts at the top-left, scans right, returns left, scans right at a lower level, then drifts down the left edge -- a continuous loop of attention. **Horizontal Scan Bands:** Content is organized into two primary horizontal bands visible above the fold: 1. **First scan band (top):** The domain identity and primary value proposition. Set at viewport height 8-15%, spanning 75% of the viewport width from the left. This band uses the largest typography and highest contrast. 2. **Second scan band (middle):** The key narrative content. Set at viewport height 35-50%, spanning roughly 60% of the viewport width from the left. This band uses medium typography and the primary illustration content. Below these bands, the page transitions into a vertical scroll where content flows in single-column blocks aligned to the left 60% of the viewport, creating a deliberate asymmetry where the right 40% remains breathing space -- sometimes punctuated by floating grid-line annotations or small illustration vignettes that reward peripheral attention without demanding it. **Section Transitions:** Sections are not separated by horizontal rules or background color changes. Instead, generous vertical spacing (120-160px) creates clear breathing room, with subtle grid-line markers in the left margin that function like paragraph marks in typeset manuscripts -- tiny structural cues that say "a new thought begins here" without interrupting the visual flow. **No traditional navigation bar.** The domain name sits in the top-left corner as a permanent anchor (position: fixed, but with opacity that reduces to 0.4 on scroll to avoid visual noise). Content sections are accessed through the natural scroll, reinforcing the single-path narrative structure. A minimal floating indicator in the left rail shows scroll progress as a thin vertical line that fills downward -- the only persistent UI element besides the domain name. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- the quintessential bold condensed sans-serif that carries industrial authority without aggression. Its tall, narrow letterforms evoke the vertical efficiency of recycling facility signage and Scandinavian transit wayfinding systems. Used at 4rem-7rem for primary headings, always in UPPERCASE (Bebas Neue is designed for uppercase use), with `letter-spacing: 0.08em` to let each character breathe and `line-height: 0.95` for tight vertical rhythm. The condensed proportions allow large type sizes without consuming excessive horizontal space, reinforcing the F-pattern's left-weighted structure. - **Body / Reading Text:** "DM Sans" (Google Fonts) -- a geometric sans-serif with subtle humanist touches that balances the industrial weight of Bebas Neue with approachable readability. Its open apertures and generous x-height ensure comfortable reading at 1rem-1.125rem body sizes. Set with `line-height: 1.7` and `letter-spacing: 0.01em` for extended reading comfort. Used in weight 400 for body text and weight 500 for emphasis or subheadings. - **Accent / Data Labels:** "IBM Plex Mono" (Google Fonts) -- a monospace typeface used sparingly for numerical data, material codes, percentage labels on illustrations, and technical annotations. Its Scandinavian-clean letterforms complement the overall aesthetic while signaling "this is precise data." Used at 0.8rem-0.9rem in weight 400, color set to the muted olive (#7A8B6E) for low-contrast informational hierarchy. **Palette:** The palette is **creamy-pastel** -- built on the premise that recycling is not about sterile whiteness or aggressive green-washing, but about the warm, organic tones of materials returning to their natural state. Every color references a real material in the recycling stream. | Role | Color | Hex | Reference | |------|-------|-----|-----------| | Background (primary) | Cream Linen | #F5F0E8 | Unbleached recycled paper | | Background (secondary) | Warm Oat | #EDE5D8 | Cardboard pulp | | Text (primary) | Charcoal Clay | #2C2C2C | Carbon-filtered water | | Text (secondary) | Warm Graphite | #5A5650 | Pencil shavings | | Accent (primary) | Sage Olive | #7A8B6E | Oxidized copper patina | | Accent (secondary) | Dusty Rose | #C4A6A0 | Terracotta dust | | Highlight | Soft Marigold | #E8C87A | Beeswax sealant | | Grid / Structural | Pale Birch | #D6CFC4 | Birch plywood edge | The palette operates on a principle of **minimal chromatic distance** -- no two colors are more than 40% apart on the HSL wheel, creating a harmonious, low-fatigue viewing experience. The sage olive (#7A8B6E) serves as the only color with genuine chromatic intensity, and it is used as a deliberate accent to draw attention to interactive elements and key data points. The dusty rose (#C4A6A0) provides a warm counterpoint for secondary callouts and illustration accents. ## Imagery and Motifs **Custom Illustration as Primary Visual Language:** The defining imagery mode is **custom illustration** -- not stock illustrations or generic vector art, but a specific illustration style that fuses Scandinavian design sensibility with technical precision. Think of the cross-section diagrams in a beautifully designed materials science textbook, rendered by someone who trained at Konstfack. **Illustration Style Specifications:** 1. **Material Cross-Sections:** The hero illustrations depict cross-sectional views of recyclable materials at macro scale -- a sheet of cardboard showing its corrugated layers, a PET bottle wall revealing its molecular alignment, an aluminum can cross-section with its oxide layer visible. These are rendered in flat, muted tones from the palette with thin, precise outlines in Warm Graphite (#5A5650). No gradients, no shadows, no 3D effects -- just clean, flat color fields separated by 1px lines, like architectural section drawings. 2. **Flow Diagrams as Art:** Recycling process flows are illustrated as abstract circuit-like diagrams where materials enter from the left (matching the F-pattern reading direction), undergo transformation through geometric nodes, and emerge on the right as new products. These diagrams use the Sage Olive (#7A8B6E) for flow lines, Soft Marigold (#E8C87A) for transformation nodes, and Dusty Rose (#C4A6A0) for output endpoints. The aesthetic references Harry Beck's London Underground map -- schematic rather than geographic, clarity over realism. 3. **Annotated Specimens:** Small illustrations scattered in the right margin (the F-pattern's peripheral zone) show individual recyclable objects -- a glass jar, a newspaper stack, a circuit board -- rendered in the same flat cross-section style, each with a small IBM Plex Mono label indicating its material code and recycling category. These function like a naturalist's specimen plates, bringing scientific precision to everyday waste objects. **Grid-Lines as Structural Motif:** The grid-lines motif manifests as a persistent but subtle background pattern -- a 48px-interval grid drawn in Pale Birch (#D6CFC4) at 0.3 opacity across the entire page. This grid is not merely decorative; it references the measurement and categorization systems that make recycling possible. The grid becomes more visible (opacity: 0.6) in sections discussing data or process, and fades to near-invisibility (opacity: 0.15) in narrative sections, creating a breathing rhythm that ties structural visibility to content type. Specific grid-line treatments: - **Intersection dots:** At every grid intersection, a 2px circle in Pale Birch provides subtle texture, evoking graph paper or engineering blueprints - **Emphasized verticals:** Every 4th vertical grid line is drawn at double opacity, creating a visual hierarchy within the grid itself - **Grid interruption:** Where illustrations appear, the grid lines stop 16px from the illustration edge, creating a "cleared zone" that frames each illustration like a specimen in a vitrine ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to a full-viewport screen of Cream Linen (#F5F0E8) with the background grid barely visible (opacity: 0.15). "RECYCLE.DIGITAL" is set in Bebas Neue at 6rem, positioned at the F-pattern's first scan point (top-left quadrant, approximately 8% from top, 48px from left). Below it, a single line in DM Sans at 1.125rem reads as a subtitle describing the platform's purpose. The grid-line background is the only visual texture -- no images, no icons, no animation on load. Just typography, grid, and breathing space. The restraint IS the statement. **Cursor-Follow Interaction Pattern:** The primary interaction pattern is **cursor-follow** -- implemented as a subtle influence on the grid-line background rather than a flashy particle trail. As the cursor moves across the page: 1. **Grid illumination:** Grid lines within a 120px radius of the cursor position increase in opacity from 0.3 to 0.7, creating a soft "spotlight" effect that reveals the underlying structure wherever the user looks. The transition uses a 400ms ease-out timing function for a gentle, organic feel. 2. **Intersection pulse:** Grid intersection dots within the cursor's proximity radius scale from 2px to 4px and shift color from Pale Birch (#D6CFC4) to Sage Olive (#7A8B6E), creating tiny points of life that follow the user's exploration. This effect should feel like bioluminescence -- a quiet, living response to presence rather than an aggressive attention-grab. 3. **Illustration response:** When the cursor passes near (within 80px) any illustration element, the illustration's outline strokes shift from Warm Graphite (#5A5650) to Sage Olive (#7A8B6E) with a 300ms transition, as if the user's attention is activating or selecting the specimen for closer inspection. 4. **On mobile:** The cursor-follow behavior translates to a scroll-position-based equivalent where the "spotlight" is anchored to the vertical center of the viewport and moves down with the scroll, creating a moving window of grid illumination. **Section Scroll Behavior:** Content sections do not use scroll-triggered fade-ins or slide-ins. Instead, all content is present and visible from the moment it enters the viewport -- the only animation is the cursor-follow grid illumination passing over it. This is a deliberate rejection of the ubiquitous scroll-triggered animation pattern (used in 96% of existing designs). The philosophy: recycling is about materials that already exist being recognized and valued, not about dramatic reveals. Content, like recyclable material, is already there -- it just needs attention to become visible. The single exception is the flow diagram illustrations, which draw their path lines progressively as the user scrolls past them. The SVG path-draw animation uses `stroke-dasharray` and `stroke-dashoffset` driven by scroll position, so the recycling flow literally traces itself as you read about it. The drawing speed is calibrated to comfortable reading pace (approximately 200px of scroll per full path completion). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, hero image sliders, gradient overlays on photographs, floating action buttons, cookie consent modals in the design (handle separately), chatbot widgets, social proof counters, "trusted by" logo bars, newsletter signup forms in the main narrative flow. **Technical Implementation Notes:** - The grid background is a single SVG element with `position: fixed` that covers the full viewport, with opacity controlled by CSS custom properties that JavaScript updates based on cursor position and scroll depth. - Illustrations are inline SVGs (not img tags) to allow CSS-driven color transitions on the cursor-follow interaction. - The scroll-progress indicator in the left rail uses a CSS-only implementation: a pseudo-element whose `scaleY` transform is driven by `scroll()` timeline. - Typography sizes use `clamp()` for fluid scaling: headings use `clamp(2.5rem, 5vw + 1rem, 7rem)`, body uses `clamp(0.95rem, 1vw + 0.5rem, 1.125rem)`. - The entire page weight target is under 150KB including SVG illustrations, reinforcing the recycling ethos of minimal resource consumption. ## Uniqueness Notes **Differentiators from other designs:** 1. **F-Pattern as Conscious Structural Choice:** While 99% of designs use centered layouts and only 2% use f-pattern, recycle.digital treats the F-pattern not as a default reading assumption but as a deliberate structural decision. The asymmetric left-weighted content placement, the two horizontal scan bands, and the intentional use of the right margin as peripheral illustration space create a reading experience that respects empirical eye-tracking research rather than defaulting to centered symmetry. No other design in the portfolio uses the F-pattern as an explicit, named structural framework. 2. **Cursor-Follow Grid Illumination (Not Particle Trails):** The cursor-follow interaction pattern (used in only 4% of designs) is implemented as grid-line illumination rather than the typical floating elements or magnetic hover effects. The cursor reveals structure rather than creating decoration -- a conceptual alignment with the recycling theme where attention reveals value in existing materials. This is a fundamentally different interaction philosophy from any cursor-follow implementation in the portfolio. 3. **Anti-Animation Scroll Philosophy:** In direct opposition to the 96% of designs using scroll-triggered animations, recycle.digital presents all content as immediately visible. The only scroll-driven animation is the SVG path-draw on flow diagrams. This creates a dramatically different temporal experience -- the site feels calm, present, and respectful of the user's agency rather than performing a choreographed reveal sequence. The absence of animation IS the design choice. 4. **Material-Referenced Color Naming:** Every hex color in the palette is named after a specific recycled material (unbleached paper, cardboard pulp, oxidized copper, terracotta, beeswax, birch plywood). This is not just a naming convention but a conceptual framework where the visual design literally embodies its subject matter. No other design in the portfolio ties its color palette to physical materials with this specificity. 5. **Specimen-Plate Illustration Style:** The custom illustrations reference the tradition of scientific specimen plates and architectural section drawings, applied to everyday recyclable objects. This elevates mundane waste items to objects worthy of study and attention -- a visual argument for the value of recycling that works through aesthetic framing rather than statistics or guilt. **Chosen Seed / Style:** - aesthetic: scandinavian (6% frequency -- underused) - layout: f-pattern (2% frequency -- underused) - typography: bebas-bold (3% frequency -- underused) - palette: creamy-pastel (1% frequency -- underused) - patterns: cursor-follow (4% frequency -- underused) - imagery: custom-illustration (6% frequency -- underused) - motifs: grid-lines (6% frequency -- underused) - tone: professional (9% frequency -- underused) All eight seed dimensions are in the underused category (below 10%), making this design maximally differentiated from the existing portfolio. **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with scandinavian - centered layout (99%) -- replaced with f-pattern - mono typography (99%) -- replaced with bebas-bold - warm palette (100%) -- replaced with creamy-pastel - scroll-triggered patterns (96%) -- replaced with cursor-follow - minimal imagery (95%) -- replaced with custom-illustration - vintage motifs (88%) -- replaced with grid-lines - friendly tone (98%) -- replaced with professional