# Wastetide — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.wastetide.ai/
Captured: 2026-10-11
CSS measured: 2026-10-11T21:55:25.764Z at 1440×1000 — https://www.wastetide.ai/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Wastetide employs a brutalist, bold, and typographic design language characterised by oversized, tightly set headings, a high-contrast palette (black, white, and vivid orange), and rigid, geometric layouts. Monospaced typography is used for secondary accents, reinforcing an industrial, data-driven aesthetic. Components are stark and functional, with evident scroll-triggered animations adding a layer of dynamic storytelling.

## Classification

- Industry: ai
- Site type: Landing
- Business model: AI
- Styles: brutalist, typographic, bold, minimal, industrial
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Suisseintl — weight 700; size 115px; line-height 103.5px; tracking -2.5px; uppercase (100% role confidence, computed values)
- Heading: Suisseintl — weight 700; size 56px; line-height 56px; tracking -1px; uppercase (95% role confidence, computed values)
- Body: Suisseintl — weight 400; size 22.4px; line-height 29.1px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Ibmplexmono — weight 400; size 14px; line-height 18.2px; tracking normal; uppercase (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) serves as the primary background for most sections. (100% role confidence, computed values)
- Primary Action — primary action #FF3316: color-5: computed rgb(255, 51, 22); AI role: Vibrant orange (#FF3316) used for CTA buttons and highlight blocks. (100% role confidence, computed values)
- Surface — surface #111111: color-2: computed rgb(17, 17, 17); AI role: Black (#111111) used for inverted sections like the footer and testimonial areas. (95% role confidence, computed values)
- Text — text #1B0401: color-3: computed rgb(27, 4, 1); AI role: Dark brown/black (#1B0401) is the primary text color on light backgrounds. (95% role confidence, computed values)
- Surface — surface #F1F1F1: color-6: computed rgb(241, 241, 241); AI role: Light grey (#F1F1F1, #F7F7F7) used as background blocks for specific content areas. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "56px",
    "lineHeight": "56px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "How Wastetide helps you turn trash into cash.",
        "top": 1081,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "THE BEST INVESTMENT YOU WILL MAKE THIS YEAR",
        "top": 5004,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Turn waste into opportunity. Hack the flow.Join Wastetide.",
        "top": 7319,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Free 30 days trial",
        "top": 646,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Theytrust us",
        "top": 877,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "115px",
    "lineHeight": "103.5px",
    "letterSpacing": "-2.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "They trust us",
        "top": 6499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "88px",
    "lineHeight": "88px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "The wastetide effect",
        "top": 5732,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Ibmplexmono",
    "fontStack": "Ibmplexmono, Georgia, sans-serif",
    "weight": "400",
    "size": "68px",
    "lineHeight": "61.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Trash is cash",
        "top": 162,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Ibmplexmono",
    "fontStack": "Ibmplexmono, Georgia, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 17,
    "contexts": [
      {
        "tag": "p",
        "text": "Waste is source of costs. Waste management is a source of painful excel sheets and reporting. Wastet",
        "top": 694,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Upload your last waste management invoice.Upload your contract.We find on average 10 optimizations i",
        "top": 3502,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Upload a couple of pictures of your most common waste streams.We assess the quality of your material",
        "top": 3520,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "Free Impact Assessment",
        "top": 5315,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "WASTE-TO-VALUE",
        "top": 5315,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Christian",
        "top": 6666,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "29.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "No spreadsheets",
        "top": 1438,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Auto-review invoices",
        "top": 1494,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Monitor managers",
        "top": 1549,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Book a demo call",
        "top": 29,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Login",
        "top": 29,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Book a call",
        "top": 715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Solutions",
        "top": 8195,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About us",
        "top": 8195,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 8195,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "64px",
    "lineHeight": "57.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "ehs",
        "top": 1429,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Purchasing",
        "top": 1503,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Finance",
        "top": 1577,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "66px",
    "lineHeight": "59.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Scan",
        "top": 3434,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Analyse",
        "top": 3453,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "monetize",
        "top": 3471,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "01",
        "top": 3032,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "02",
        "top": 3032,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "03",
        "top": 3032,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Solutions",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Pricing",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About",
        "top": 32,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "88px",
    "lineHeight": "70.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "30%",
        "top": 6163,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "200",
        "top": 6163,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "56px",
    "lineHeight": "44.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "0$",
        "top": 5515,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "2000$",
        "top": 5533,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "/ month HT",
        "top": 5545,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "/ month HT",
        "top": 5563,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "120px",
    "lineHeight": "108px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "WASTETIDE DOESN'T CHANGE OPERATIONS, WE BUILD ON EXISTING WORKFLOWS",
        "top": 1916,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "112px",
    "lineHeight": "100.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "+30 000 $",
        "top": 5732,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "hours",
        "top": 6198,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Ibmplexmono",
    "fontStack": "Ibmplexmono, Georgia, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "SCROLL DOWN to discover",
        "top": 731,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "©Wastetide2025",
        "top": 8121,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Back top the top",
        "top": 8121,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "AI inspection",
        "top": 8238,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Material identification",
        "top": 8274,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Monitor your Waste Management Contract",
        "top": 8310,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "EN",
        "top": 8388,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Suisseintl",
    "fontStack": "Suisseintl, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "FR",
        "top": 8388,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 151,
    "contexts": [
      {
        "tag": "body",
        "text": "/* html { font-size: calc(0.625rem + 0.41666666666666663vw); } @media screen and (max-width:1920px) ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Login",
        "top": 29,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 87,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "02AnalyseUpload a couple of pictures of your most common waste streams.We assess the quality of your",
        "top": 3008,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "©Wastetide2025Back top the topSolutionsAI inspectionMaterial identificationMonitor your Waste Manage",
        "top": 8105,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#1B0401",
    "alpha": 1,
    "cssValue": "rgb(27, 4, 1)",
    "count": 43,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 22,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "Solutions",
        "top": 32,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Book a demo call",
        "top": 16,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F7F7F7",
    "alpha": 1,
    "cssValue": "rgb(247, 247, 247)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1049,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FF3316",
    "alpha": 1,
    "cssValue": "rgb(255, 51, 22)",
    "count": 47,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 16,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Login",
        "top": 16,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "Login",
        "top": 16,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F1F1F1",
    "alpha": 1,
    "cssValue": "rgb(241, 241, 241)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "03monetizeUse our AI agent to find who is ready to offer you the best price.",
        "top": 3008,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F2F1F1",
    "alpha": 1,
    "cssValue": "rgb(242, 241, 241)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "200hoursper week saved in useless reporting",
        "top": 6131,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "AI inspection",
        "top": 8238,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 7220,
        "property": "control-background"
      },
      {
        "tag": "input",
        "text": "",
        "top": 8235,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "",
        "top": 8307,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#312B2A",
    "alpha": 1,
    "cssValue": "rgb(49, 43, 42)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6670,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Very rigid, structural grid with visible dashed and solid border lines defining sections. Spacing is tight around text but generous in macro layout.
- Corner style: Sharp, 0px border radius across all elements, reinforcing the brutalist aesthetic.
- Radius: 0px.
- Borders: Frequent use of 1px solid and dashed borders (e.g., in navigation, around buttons, separating grid sections) in dark colors.
- Buttons: Solid color fills (#FF3316) with sharp corners and bold, centered text. Outline variants use dashed or solid borders.
- Content width: Edge-to-edge full width layouts for major sections, often constrained internally by a rigid grid system.
- Density: High density in typographic treatment (tight letter spacing and line heights), balanced by large structural white space between components.
- Evidence: Sharp corners on all buttons and cards. Visible border lines acting as grid structural elements. Massive headings touching the edges of their containers.

## Sections

Gallery section count: 8. Each entry corresponds to one gallery capture.

1. **Features — Wastetide Features** (Home)
   Reusable feature composition from Home, organized around “Wastetide Features”.
   Capture: 1440×2000px; page bounds 1740–3740px of 7635px; source section ID: `5ebd03a1-cbfe-4ef7-a64c-d1a84ba3653f`; image: https://media.designdetails.io/library/566ac7309c6a4a966d3f7d92d1aa6501d360dbb2bb16387e3be73085c8ef2763/section_crop-5ebd03a1-2026-10-11T21-55-38-465Z.webp
   SECTION.md v3.2: `5ebd03a1-cbfe-4ef7-a64c-d1a84ba3653f` (deterministic evidence; editorial review pending)
2. **Features — THEY TRUST US** (Home)
   Reusable feature composition from Home, organized around “THEY TRUST US”.
   Capture: 1440×837px; page bounds 5219–6056px of 7635px; source section ID: `7d65e4c3-d9d3-47fe-b8dc-b7b1ad99e30f`; image: https://media.designdetails.io/library/30e5190694c5281eb74a7c223d32751505a281ba1ac486537816e8bd7639c1f4/section_crop-7d65e4c3-2026-10-11T21-55-41-293Z.webp
   SECTION.md v3.2: `7d65e4c3-d9d3-47fe-b8dc-b7b1ad99e30f` (deterministic evidence; editorial review pending)
3. **Footer — Wastetide Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Wastetide Footer”.
   Capture: 1440×730px; page bounds 6905–7635px of 7635px; source section ID: `fa320bf3-e293-46d4-a644-788e085369a8`; image: https://media.designdetails.io/library/20afa059f201a682bd81ccbd39b7b52c255c56fa50ac0cba38243c94efaa30ea/section_crop-fa320bf3-2026-10-11T21-55-43-188Z.webp
   SECTION.md v3.2: `fa320bf3-e293-46d4-a644-788e085369a8` (deterministic evidence; editorial review pending)
4. **Hero — Trash Is Cash Trial Hero** (Home)
   AI suggestion (98% confidence): Complete opening hero with a bold value proposition, distinctive segmented scrapyard image, trial offer, supporting copy, and booking CTA.
   Capture: 1440×696px; page bounds 78–774px of 7635px; source section ID: `4110a21d-a22e-4291-bc57-61c7d09e84ba`; image: https://media.designdetails.io/library/f28254b923c6d21c55d3943e72505e9903b7e8f490dfd7c292b7c979c0f1c8a0/4110a21d-a22e-4291-bc57-61c7d09e84ba.webp
   SECTION.md v3.2: `4110a21d-a22e-4291-bc57-61c7d09e84ba` (deterministic evidence; editorial review pending)
5. **Features — Turn Trash Into Cash Workflow Feature** (Home)
   AI suggestion (96% confidence): Self-contained product capability section pairing department/workflow selections with automation benefits and a waste-category analytics preview.
   Capture: 1440×696px; page bounds 1053–1749px of 7635px; source section ID: `b2eae1f6-a365-4e4d-9fdc-ee92ee4d2f04`; image: https://media.designdetails.io/library/21297778d7f7259c6cc8f8c5e0cad5d9cd1d15fae05d181a4bacb3445a9ab1eb/b2eae1f6-a365-4e4d-9fdc-ee92ee4d2f04.webp
   SECTION.md v3.2: `b2eae1f6-a365-4e4d-9fdc-ee92ee4d2f04` (deterministic evidence; editorial review pending)
6. **Pricing — Investment Pricing Options** (Home)
   AI suggestion (98% confidence): Complete pricing section with a strong headline, sign-up CTA, and two clearly contrasted offer cards for a free assessment and paid Waste-to-Value service.
   Capture: 1440×753px; page bounds 3746–4499px of 7635px; source section ID: `45963d24-fa78-4652-93b1-be140cc62595`; image: https://media.designdetails.io/library/40937ca9a204a3b35279cf4df813f28be61dba4b9666bfb4fc898dbefece3efd/45963d24-fa78-4652-93b1-be140cc62595.webp
   SECTION.md v3.2: `45963d24-fa78-4652-93b1-be140cc62595` (deterministic evidence; editorial review pending)
7. **Stats — The Wastetide Effect** (Home)
   AI suggestion (98% confidence): Self-contained impact-statistics section combining a concise value statement with prominent revenue, savings, and time-saved metrics in a distinctive modular layout.
   Capture: 1440×723px; page bounds 4502–5225px of 7635px; source section ID: `b6310a3e-edd6-475e-bd70-6c4d6c624a68`; image: https://media.designdetails.io/library/8424b9cd360190e2bec316c7a244a8751f06a492be81b95435bdfe09e1be4ae0/b6310a3e-edd6-475e-bd70-6c4d6c624a68.webp
   SECTION.md v3.2: `b6310a3e-edd6-475e-bd70-6c4d6c624a68` (deterministic evidence; editorial review pending)
8. **CTA — Turn Waste Into Opportunity** (Home)
   AI suggestion (98% confidence): Self-contained conversion section combining a bold campaign headline, distinctive flag visual, supporting copy, and two clear action buttons.
   Capture: 1440×701px; page bounds 6057–6758px of 7635px; source section ID: `88532e8d-a94f-4326-85bf-d71f97a338e3`; image: https://media.designdetails.io/library/b8515713243c8418f9ccabadd4dcbd8c8e9d7979dc8100e6e6f1f22826a91941/88532e8d-a94f-4326-85bf-d71f97a338e3.webp
   SECTION.md v3.2: `88532e8d-a94f-4326-85bf-d71f97a338e3` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/6170b73e1e9e0576abb4f09ac5de9ebca7ca90697664da5f5e41083f4ae77ffa/desktop_full-d86f25e7-2026-10-11T21-55-25-772Z.webp
- Mobile screenshot: https://media.designdetails.io/library/8c0f37b9fea8772c8b589331046db3abb3d1e150d2a622931c6199330282e7df/mobile_full-d86f25e7-2026-10-11T21-56-17-914Z.webp
- Open Graph image: https://media.designdetails.io/library/106fd86842d9261c0ec375b42f41a469f75c7c51402ba3cb36c67c36bc749ea1/og_image-d86f25e7-2026-10-11T21-55-35-641Z.webp
- Full-page video: https://media.designdetails.io/library/97f27f53a8416ef0d58e3c879717a0de059a8058cf664de463f8ac23fa372c1d/motion-1791756866148.mp4
- Video poster: https://media.designdetails.io/library/a24073d9809a87e9a91bbc48d43b28bc00998382acab517cc810d3d80197f4ef/motion-poster-1791756866148.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Primary Button
- Outline Button
- Feature Collection
- Stat Block
- Testimonial Card
- Pricing Table
- Newsletter Form
- Language Switcher
- Footer
- Text Masked Imagery
- Stacked Scroll Cards

## Quality rubric

Overall: 54.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Wastetide executes a bold black/orange/white brutalist system with reasonable consistency — strong CTA logic, a text-masked hero, and a numbered scroll-stacking process sequence — but the individual components (masked hero, scroll-stack cards, mono microcopy, donut stat chart) are recognizable staples of current startup-template design, and the heading scale lacks a disciplined rhythm. The result is a competently assembled, on-brand site rather than a distinctive or landmark one.

- Typography (15%): 62 — A consistent two-voice system (Suisse Int'l display/body plus IBM Plex Mono for microcopy) gives the page an industrial, data-sheet feel, and negative letter-spacing on headings (-1 to -2.5px) is deliberate. However the heading scale is erratic rather than modular — distinct sizes of 32, 56, 64, 66, 88, 112, 115 and 120px appear across sections with no clear ratio, which reads as ad hoc rather than a disciplined type system. Font stacks fall back to Arial/Georgia, suggesting fragile custom-font loading.
- Color (10%): 61 — A tight, high-contrast black/white/orange palette is applied consistently for CTAs, inverted sections, and stat highlights, giving clear visual direction. But the palette is narrow (one accent, two neutrals, a couple of near-black/near-white variants) and is now a very common 'brutalist SaaS' combination, limiting differentiation beyond functional clarity.
- Layout (20%): 59 — The page follows a visible grid with dashed/solid structural borders, edge-to-edge sections, and large stat blocks (24.05% donut, 30%/200 hours) that organize information clearly. The numbered Scan/Analyse/Monetize sequence and pricing cards show intentional compositional thinking. However the oversized background headline text sitting behind stacking cards (120px 'WASTETIDE DOESN'T CHANGE...') functions as a decorative backdrop rather than an integrated layout element, and the jump from 115px 'They trust us' to adjacent smaller stat type creates uneven visual weight between sections.
- Motion (20%): 56 — Scroll-driven reveals are present and functioning (slide-ins, fades, a stack/unstack sequence for the 01/02/03 cards), which is more than static scrolling. But the vocabulary is limited to common scroll-trigger patterns (slide-in-and-scale, fade, stack-on-scroll) seen across many current template-driven sites, and no evidence of hover states, cursor interactions, or choreography beyond direct scroll-linkage is given.
- Originality (25%): 40 — The individual pieces — oversized sans-serif headline with a masked industrial photo, mono accent microcopy, orange-on-black CTA, numbered scroll-stacking process cards, and a circular stat donut — are each highly recognizable from the current wave of brutalist-leaning SaaS/agency templates (Framer/Linear-adjacent aesthetic). 'TRASH IS CASH' wordplay and the clipped-image hero show some creative intent, but the overall system does not depart meaningfully from this now-common idiom, and no single idea here is hard to substitute with a generic template equivalent.
- Content (10%): 59 — Industrial/waste photography (scrapyard, excavator, dumpsters) is used in the hero mask and testimonial sections in a way that reinforces subject matter, and real client logos (Air France, Renault, Thales) plus named testimonials with roles add credibility. Stats like '+30,000$', '30%', '200 hours' are given prominent typographic weight that matches their persuasive intent. The pairing is coherent but fairly conventional B2B SaaS proof-section content rather than a tightly bespoke integration.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Giant black slab headlines and a torn-strip photo collage of scrapyards give a grim material a blunt, confident voice. A bright red block with a live circular data chart shows the product turning rows of waste into one clear percentage, so visitors immediately see the payoff rather than reading about it.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.