# Design Language for recycle.digital

## Aesthetics and Tone

recycle.digital is a digital-material reclamation platform — the imagined collision between a Roy Lichtenstein print shop and a brutalist e-waste manifesto. The aesthetic is **pop-art industrial**: the visual language of Andy Warhol's silkscreen repetition applied to circuit boards, cracked screens, and discarded logic chips. Every element feels **screen-printed**, as if it were pulled through a halftone mesh onto industrial kraft paper — bold dot-matrix overlays on hard-edged marble slabs, Ben-Day dots as textures on white negative space, sharp CMYK registration-offset shadows on display text.

The tone is **professional-but-provocative**: this is not a feel-good recycling charity. It is a technical, monetizable, credibility-first platform for businesses and municipal programs that need certified digital-asset destruction and material recovery. The voice is direct, authoritative, and structurally confident — not preachy, not warm, not pastoral. No earth-tones. No green gradients. No leaf icons.

The contradiction that drives the design: **industrial materials rendered as fine art**. A shattered LCD panel is photographed in macro, its marble-vein crack pattern lit at raking angle until it looks indistinguishable from Calacatta stone, then duotoned in two electric, opposing hues. The halftone dot — the symbol of mass-reproduction — becomes the motif for mass-reclamation.

**Mood board reference:** Warhol's 1962 Marilyns, but swapped for a CRT monitor. Lichtenstein's Ben-Day pop panels, but the image is a motherboard. The marble hall of a Milanese palazzo, but the veins are copper traces.

**Color temperature:** cold. No amber. No cream. No sand. Everything is graphite, electric, and marble-white.

## Layout Motifs and Structure

The structural philosophy is **ma** — the Japanese concept of negative space as active presence, not emptiness. Every section is composed around a vast, deliberately unoccupied field that makes the single element within it feel monumental. The page is not full; the page is *intentional absence with punctuation*.

**Macro structure:** The page is a **vertical sequence of white voids punctuated by hard-edged geometric interventions**. Each section occupies the full viewport height. Within it, a single content block — one headline, one fragment of marble-texture imagery, one geometric shape — is placed in an unexpected quadrant: lower-left, upper-right, dead-center, far-left edge. Nothing fills the field. The whiteness is the surface.

**Grid logic:** 16-column at 1440px, collapsed to 4 at mobile. Content rarely spans more than 6 columns. Margins are exaggerated: 120px side gutters on desktop. The sense is that content is exhibited, not published.

**Section anatomy (5 total, each full-screen):**
1. **Hero void** — The domain logotype "recycle.digital" set in Bebas Neue at 14vw, left-anchored at column 1, vertically centered at 35% viewport. A single duotoned marble-slab image fragment occupies the lower-right quadrant, bleeding off the page edge. Ben-Day dot overlay at 7% opacity covers the entire viewport.
2. **Proposition field** — One sentence, set in 5vw display bold, positioned upper-left. A solid geometric shape (rectangle, 4:7 ratio, electric-blue fill) sits in the lower-right at 40% opacity, behind the text column.
3. **Process void** — Three numbered steps, each in a separate white void separated by a 2px rule line. Steps are staggered: step 1 left, step 2 right, step 3 left — each with 80% of the row empty.
4. **Material field** — A triptych of macro-marble-texture imagery (cracked screen, circuit board, glass panel), each treated as duotone plates, arranged in a broken asymmetric row with large white gaps between.
5. **Contact void** — A single email address and a geometric-shapes badge in the extreme lower-right. 90% of the section is white.

**Navigation:** Ultra-minimal. Five items in a top bar, left-aligned, set in Bebas Neue 16px caps. No underlines, no hover backgrounds — only a color shift on active state.

**Skeleton loading:** The loading state uses geometric placeholder shapes (rectangles, one circle) in `#E8E8E8` fill, animated with a left-to-right shimmer in the duotone primary color. Shapes match exactly the expected content geometry — no generic bars. The effect feels like an art-print edition of a standard skeleton, because the placeholders are large, structural, and deliberate.

## Typography and Palette

**Palette — duotone, cold, pop-art severity:**

- `#F5F5F5` — Marble white. Background of every void section. Near-white, with the faint warmth of veined stone.
- `#0D0D0D` — Carbon black. All body text, rules, and outlines.
- `#E6007E` — Magenta electric. Duotone foreground. Pop-art CMYK magenta. The reclamation color.
- `#00B4D8` — Cyan ice. Duotone shadow/background. The digital-cold counterpart.
- `#1A1A1A` — Dark graphite. Navigation, metadata, secondary type.
- `#C8C8C8` — Skeleton ash. Skeleton-loading shape fill before shimmer.

**Duotone application:** All imagery is treated as strict two-color duotones: shadows map to `#0D0D0D` or `#00B4D8`, highlights map to `#E6007E` or `#F5F5F5`. Never three tones. Never photographic color. The marble-texture images become abstract color-field compositions — barely recognizable as physical objects, more like prints.

**Typography (Google Fonts only):**

- **Display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)**, weight 400 (only weight available). Set at extreme scale: 10vw–18vw for section headlines, 5vw for sub-headlines. All-caps by nature. Tracking: 0.04em. The compressed condensed form creates instant visual density even on a void field. Every display line is a **graphic object**, not a text element.
- **Body — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, weights 300 and 500. Size: 16–18px for body, 13px for metadata. DM Sans is clean, geometric, and cool — it reads as professional and technical without personality. It disappears into the void, which is exactly correct.
- **Accent — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)** at small scale (12px) for labels, tags, and navigation. The contrast between 18vw display Bebas and 12px Bebas metadata is the typographic joke: the same letterform at two extremes of scale.

**Typographic rules:**
- No italic anywhere. Pop-art does not whisper.
- Letter-spacing on display: 0.04em (slightly open, so large glyphs breathe on white).
- Line-height on display: 0.92 (tighter than word-spacing, headlines compress into a block).
- Body: 1.65 line-height for legibility in DM Sans.

## Imagery and Motifs

**All imagery is marble-texture sourced from macro photography of discarded electronics:**

The core imagery concept: a shattered smartphone screen, when lit at raking angle and photographed at 1:1 macro, produces crack patterns indistinguishable from Calacatta marble veins. A motherboard's copper trace layer, etched and oxidized, reads as travertine limestone cross-section. A heat-damaged LCD panel, shot on a neutral ground, looks like quarried stone. This is the conceptual anchor: **digital waste as geological material**.

All images are:
1. Shot (or sourced as) extreme close-up, no context — no hands, no rooms, no people.
2. Duotoned to the two-color palette: `#E6007E` / `#F5F5F5` or `#00B4D8` / `#0D0D0D`.
3. Printed with a halftone Ben-Day dot overlay at 12–15 LPI (screen frequency), creating the pop-art silkscreen effect.
4. Cropped to bleeds — images never float inside frames; they bleed off page edges.

**Geometric motifs:**
- **Hard-edged rectangles** as compositional counterweights. Not decorative — structural. A solid `#E6007E` rectangle occupying 30% of a section balances a 6-column text block on the opposite side.
- **Ben-Day dot fields** as texture layer: a CSS `radial-gradient` dot pattern at 7% opacity, `#0D0D0D` dots on white ground, 4px dots at 8px pitch. Applied as a universal page overlay, referencing Lichtenstein's halftone grounds.
- **Registration-offset shadows**: display headlines cast a `2px, 4px` hard shadow in `#00B4D8` (cyan), with a second `4px, 8px` shadow in `#E6007E` (magenta) — the classic mis-registered CMYK print effect. This is the central typographic motif.
- **Rule lines**: single 1px horizontal rules in `#0D0D0D`, used as section separators and table dividers. No decorative rules.
- **Circles used sparingly**: one circle motif appears only in the contact/badge section — a perfect 64px circle outlined in 2px `#E6007E` containing a recycling-arrow symbol rendered in geometric, pop-art block style (no gradients, no shadows on the icon itself).

**No photography of people. No nature photography. No gradients. No bokeh. No organic blobs. No grain overlays.**

## Prompts for Implementation

Build recycle.digital as a **5-act scroll experience**, each act a full-viewport void with a single monumental intervention. The page does not explain — it exhibits. The user moves through a sequence of graphic propositions, as if walking past prints in a gallery where every print is the size of a wall.

**Act I — The Logotype Void:**
Open on pure `#F5F5F5`. The Ben-Day dot overlay (`radial-gradient` CSS pattern at 7% opacity) covers the entire viewport from load. The logotype "recycle.digital" enters: Bebas Neue at 14vw, `#0D0D0D`, left-anchored at 8% from left, vertically placed at 38% viewport height. Below it, in DM Sans 300 at 1.1vw: "certified material reclamation for digital infrastructure." In the lower-right quadrant (60% from left, 55% from top), a duotoned marble-slab image fragment (cracked smartphone screen, `#E6007E`/`#0D0D0D` duotone) bleeds off the right and bottom edges. Registration-offset shadow on the logotype: `#00B4D8` at 2px/4px, `#E6007E` at 4px/8px. No animation on load — instant render. Skeleton loading covers this entire act until assets resolve.

**Skeleton loading implementation:** Before images load, show a `#C8C8C8` rectangle matching the exact image proportions in the lower-right quadrant. Animate a shimmer: a linear-gradient strip (`rgba(230,0,126,0.15)` to transparent) sweeping left-to-right over 1.4s, infinite. The skeleton shape must match the final image geometry exactly — no generic pill or bar. When the image loads, dissolve the skeleton at `opacity: 0` over 200ms.

**Act II — The Proposition:**
Full-screen `#F5F5F5`. A single sentence in Bebas Neue at 5.5vw, `#0D0D0D`, placed at 12% from left, 18% from top. Registration-offset shadow applied. Below, in DM Sans 300 at 18px, two lines of supporting copy. In the lower-right (columns 10–16 of the 16-col grid), a hard-edged solid rectangle in `#00B4D8` at full height of the copy block, extending 120px below it. This rectangle has no text, no icon — it is pure compositional mass. The transition from Act I to Act II: a simple cross-fade, no parallax, no scroll-jacking.

**Act III — The Process:**
Background `#0D0D0D`. Three numbered steps in a vertical stagger. Step labels in Bebas Neue at 8vw, `#E6007E`, tracking 0.04em. Step body in DM Sans 300 at 16px, `#F5F5F5`. Step 1: left-aligned (columns 1–6). Step 2: right-aligned (columns 9–14), offset down by one-third viewport. Step 3: left-aligned (columns 1–7), offset down from Step 2. Between steps, the vast dark field breathes. A Ben-Day dot overlay in `#1A1A1A` (barely visible, 5% contrast difference) provides surface texture on the dark background.

**Act IV — The Material Triptych:**
Three duotone marble-texture image panels arranged horizontally with deliberate white-gap asymmetry. Panel 1 (cracked screen, `#E6007E`/`#F5F5F5`): columns 1–4, full panel height. White gap: 3 columns. Panel 2 (motherboard macro, `#00B4D8`/`#0D0D0D`): columns 8–11. White gap: 2 columns. Panel 3 (LCD glass, `#E6007E`/`#0D0D0D`): columns 14–16, bleeding right edge. Below each panel: a one-line caption in Bebas Neue 13px, all-caps, `#0D0D0D`, tracking 0.12em. The three panels enter on scroll with a staggered `opacity: 0 → 1` over 600ms with 200ms delay increments — this is the only scroll-triggered animation on the page.

**Act V — The Contact Void:**
Near-white `#F5F5F5` again. In the extreme lower-right, a 64px circle outlined in 2px `#E6007E`, containing a geometric recycle-arrow. Above it: the contact email in Bebas Neue at 3vw, `#0D0D0D`, with registration-offset shadow. 90% of the section is empty. This emptiness is the final graphic statement: the company occupies one corner of a vast white field, which is precisely where digital material goes — collected, edged, contained.

**Implementation constraints:**
- NO parallax. NO scroll-jacking. The page scrolls naturally.
- NO gradient fills. No `background: linear-gradient(...)` anywhere except the skeleton shimmer.
- NO photography of humans or nature.
- NO rounded corners on geometric shapes (rectangles are always `border-radius: 0`).
- Ben-Day dot overlay must be CSS-only: `background-image: radial-gradient(circle, #0D0D0D 1.5px, transparent 1.5px); background-size: 8px 8px; opacity: 0.07;`
- Registration-offset shadow on Bebas display text: `text-shadow: 2px 4px 0 #00B4D8, 4px 8px 0 #E6007E;`
- Skeleton loading shapes must be `border-radius: 0` — no pill shapes.
- Images use `<img>` with `object-fit: cover` inside a positioned container with `overflow: hidden`.
- All images must be served with `loading="eager"` on Act I, `loading="lazy"` on Acts II–V.

## Uniqueness Notes

1. **Pop-art duotone applied to e-waste industrial materials — not to faces, cans, or consumer goods.** The corpus shows zero designs using pop-art aesthetic. The duotone palette exists at ~3% of the corpus but is always applied to lifestyle photography. recycle.digital applies duotone to macro industrial imagery (cracked screens, motherboard traces) and treats them as marble — inverting both the material hierarchy (waste-as-luxury-stone) and the pop-art subject matter (industrial, not consumer).

2. **Ma (negative space as primary structure) combined with pop-art bold forms — a contradiction that creates tension.** Japanese ma-negative-space appears in low frequency in the corpus, typically paired with zen or minimal aesthetics. Here it is paired with Bebas Neue at 14vw, magenta/cyan duotone, and Ben-Day halftone overlays — the antithesis of zen. The vast white field makes the pop-art interventions feel monumental rather than loud, and the pop-art density makes the negative space feel charged rather than empty.

3. **Skeleton loading as a designed art object, not a utility pattern.** Skeleton loading appears rarely in the corpus and is always implemented generically (grey pill shapes). recycle.digital's skeleton shapes match exact content geometry (`border-radius: 0`, large structural rectangles) and use the brand's magenta as the shimmer color — so the loading state is itself a designed composition, consistent with the pop-art print aesthetic.

4. **Registration-offset CMYK shadow as the single recurring typographic motif.** No other design in the corpus uses this technique. The mis-registered print shadow (cyan at 2/4px, magenta at 4/8px) directly references the physical accident of offset printing — aligning with both the pop-art aesthetic (Warhol/Lichtenstein) and the domain concept (material reclamation, print as industrial process).

5. **Documented seed:** aesthetic: pop-art, layout: ma-negative-space, typography: display-bold, palette: duotone, patterns: skeleton-loading, imagery: marble-texture, motifs: geometric-shapes, tone: professional
<!-- DESIGN STAMP
  timestamp: 2026-05-10T13:18:32
  seed: photography
  aesthetic: recycle.digital is a digital-material reclamation platform — the imagined collis...
  content_hash: e13a36268b42
-->