# Colmez: Powering next-generation hazardous waste teams — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.colmez.com/
Captured: 2026-10-19
CSS measured: 2026-10-19T16:13:51.719Z at 1440×1000 — https://www.colmez.com/
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

Colmez uses a 'brutalist' and 'corporate' aesthetic characterized by a stark black-and-white high-contrast palette with a prominent dark-yellow accent. The typography relies on a bold, utilitarian custom font ('brandSans') for display paired with a clean sans-serif ('productSans') for data and UI. The design heavily utilizes grid layouts, stark borders, and intricate, technical visual motifs like topographical maps and industrial debris. The UI components are highly structured, presenting complex data in dense, dashboard-like tables and cards.

## Classification

- Industry: other
- Site type: Not identified
- Business model: Software
- Styles: corporate, bold, typographic, industrial, high-contrast-dark-mode, brutalist
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: brandSans — weight 500; size 48.1px; line-height 48.1px; tracking -1px; Regular (90% role confidence, computed values)
- Heading: brandSans — weight 500; size 53.9px; line-height 48.5px; tracking -1.1px; Regular (85% role confidence, computed values)
- Body: productSans — weight 400; size 13px; line-height normal; tracking -0.1px; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #121212: color-1: computed rgb(18, 18, 18); AI role: Predominant background color (#121212) across most sections. (95% role confidence, computed values)
- Text — text #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: Primary white (#FFFFFF) used for headings and main body text against dark backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #AE9A29: color-13: computed rgb(174, 154, 41); AI role: Yellow/gold color (#AE9A29) used for primary CTA buttons ('Book a meeting') and specific highlight elements. (90% role confidence, computed values)
- Surface — surface #141414: color-5: computed rgb(20, 20, 20); AI role: Dark gray (#141414) used for specific component backgrounds, like the Product UI mockups. (80% role confidence, computed values)
- Muted Text — muted text #A6A6A6: color-14: computed rgb(166, 166, 166); AI role: Gray tones (#A6A6A6) used for secondary UI elements, strokes, and less prominent text. (75% 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": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 77,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 8705,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "19,518 t",
        "top": 8715,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "74",
        "top": 8718,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 37,
    "contexts": [
      {
        "tag": "span",
        "text": "Recommended action",
        "top": 9374,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Market map",
        "top": 9374,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Contacts",
        "top": 9374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "12px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Account",
        "top": 8670,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Signal",
        "top": 8670,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tons/yr",
        "top": 8670,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "48.1px",
    "lineHeight": "48.1px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "Solvents001",
        "top": 150,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 150,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Corrosives002",
        "top": 150,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Wallet share",
        "top": 8711,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Governance",
        "top": 8747,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Signal",
        "top": 8784,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "13.5px",
    "lineHeight": "13.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "LinkedIn",
        "top": 14758,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Terms of Service",
        "top": 14758,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 14758,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "TSMC Arizona",
        "top": 10112,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Boeing Auburn",
        "top": 10181,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Amgen Thousand Oaks",
        "top": 10250,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Hazardous waste streams",
        "top": 9445,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "6,522 t",
        "top": 9446,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Non-hazardous waste streams",
        "top": 9445,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "9px",
    "lineHeight": "9px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "P",
        "top": 9710,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "E",
        "top": 9745,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "P",
        "top": 9779,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "53.9px",
    "lineHeight": "48.5px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Powering",
        "top": 14584,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "next-generation",
        "top": 14584,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "hazardous",
        "top": 14633,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "46.2px",
    "lineHeight": "46.2px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Powering",
        "top": 254,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "next-generation",
        "top": 254,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "hazardous",
        "top": 301,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "15.4px",
    "lineHeight": "18.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 327,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "→",
        "top": 327,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Book a meeting",
        "top": 14663,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "30.8px",
    "lineHeight": "27.7px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Brian Meng",
        "top": 11681,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Numair Razzak",
        "top": 11769,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Jeff Feeler",
        "top": 11856,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "600",
    "size": "9.6px",
    "lineHeight": "9.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "CTO",
        "top": 11721,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "COO",
        "top": 11808,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Strategic Advisor",
        "top": 11895,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "The Chemours Company",
        "top": 9340,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ampac Fine Chemicals",
        "top": 9993,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Overview",
        "top": 9374,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Recommended action",
        "top": 10025,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 34,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "→",
        "top": 34,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "brandSans",
    "fontStack": "brandSans, \"brandSans Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "15.4px",
    "lineHeight": "18.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 915,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Hazardous pickups at Rancho Cordova",
        "top": 10187,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "productSans",
    "fontStack": "productSans, \"productSans Fallback\", ui-sans-serif, system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "D001",
        "top": 8715,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#121212",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 18)",
    "count": 30,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Colmez, Inc.\",\"alternateName\":\"Colme",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Powering next-generation hazardous waste teams.Book a meeting→→Solvents001 / Corrosives002 / Ignitab",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Powering next-generation hazardous waste teams.Book a meeting→→Solvents001 / Corrosives002 / Ignitab",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 123,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 39,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "→",
        "top": 327,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Find the opportunity. Take the account. Keep the pipeline moving.001Every generator in America. Ever",
        "top": 8234,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#EBEBEB",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 235)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Built with the people who ran this industry.Rayhan RazzakCEOBrian MengCTONumair RazzakCOOJeff Feeler",
        "top": 11021,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "AccountSignalTons/yrFitTop waste codes1Intel Ocotillo, ChandlerWallet share19,518 t74D001D002F003F00",
        "top": 8648,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 9755,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 9757,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#141414",
    "alpha": 1,
    "cssValue": "rgb(20, 20, 20)",
    "count": 32,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 8710,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "The Chemours CompanyWallet shareRecommended actionOverviewMarket mapContactsActivityHazardous waste ",
        "top": 9316,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#313131",
    "alpha": 1,
    "cssValue": "rgb(49, 49, 49)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "001",
        "top": 4606,
        "property": "background"
      },
      {
        "tag": "hr",
        "text": "",
        "top": 4940,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "“The teams that win in this industry are the ones that turn information into action first. Colmez ke",
        "top": 7753,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#0B0B0B",
    "alpha": 1,
    "cssValue": "rgb(11, 11, 11)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Hazardous waste streams6,522 tOrganic liquids to incineration5,475 tHazardous liquid, n.o.s.704 tOth",
        "top": 9436,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#151515",
    "alpha": 1,
    "cssValue": "rgb(21, 21, 21)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "Hazardous waste streams6,522 t",
        "top": 9437,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Alex Morgan",
        "top": 10121,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 527,
    "contexts": [
      {
        "tag": "div",
        "text": "AccountSignalTons/yrFitTop waste codes1Intel Ocotillo, ChandlerWallet share19,518 t74D001D002F003F00",
        "top": 8669,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8670,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8713,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#454748",
    "alpha": 1,
    "cssValue": "rgb(69, 71, 72)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7753,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#38360D",
    "alpha": 1,
    "cssValue": "rgb(56, 54, 13)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 353,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#C6C6C6",
    "alpha": 1,
    "cssValue": "rgb(198, 198, 198)",
    "count": 61,
    "contexts": [
      {
        "tag": "span",
        "text": "Recommended action",
        "top": 9374,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 10128,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 10130,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#AE9A29",
    "alpha": 1,
    "cssValue": "rgb(174, 154, 41)",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a meeting→→",
        "top": 46,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "001",
        "top": 8655,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#A6A6A6",
    "alpha": 1,
    "cssValue": "rgb(166, 166, 166)",
    "count": 55,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 8681,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 8683,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8685,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#E8E8E8",
    "alpha": 1,
    "cssValue": "rgb(232, 232, 232)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "SendSent",
        "top": 10295,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#0D0D0D",
    "alpha": 1,
    "cssValue": "rgb(13, 13, 13)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Send",
        "top": 10303,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.14)",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10044,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#AFD0FE",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.073071 256.323)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Governance",
        "top": 8747,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#25364D",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0472812 256.323)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Governance",
        "top": 8747,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#BFDA91",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.0994356 124.738)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Wallet share",
        "top": 8711,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#2E3B12",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0643407 124.738)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Wallet share",
        "top": 8711,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#D2CDC2",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.015747 87.9547)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "New account",
        "top": 8922,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#373530",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0101892 87.9547)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "New account",
        "top": 8922,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#ECCA78",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.107756 87.0346)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Signal",
        "top": 8784,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#453200",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0697244 87.0346)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Signal",
        "top": 8784,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#CDB84E",
    "alpha": 1,
    "cssValue": "rgb(205, 184, 78)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9487,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#737373",
    "alpha": 1,
    "cssValue": "rgb(115, 115, 115)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "COO",
        "top": 11808,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#737373",
    "alpha": 0.2,
    "cssValue": "rgba(115, 115, 115, 0.2)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 9187,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFA797",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.144477 28.4228)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "At risk",
        "top": 8819,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#5C1D18",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0934851 28.4228)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "At risk",
        "top": 8819,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#8C7C23",
    "alpha": 1,
    "cssValue": "rgb(140, 124, 35)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9487,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#DABFFF",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.0973423 302.337)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "New site",
        "top": 8853,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#3C2D50",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0629862 302.337)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "New site",
        "top": 8853,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#5E5B53",
    "alpha": 1,
    "cssValue": "rgb(94, 91, 83)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9487,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#395274",
    "alpha": 1,
    "cssValue": "oklch(0.435 0.0644744 256.323)",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "Governance",
        "top": 8747,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#46591D",
    "alpha": 1,
    "cssValue": "oklch(0.435 0.0877373 124.738)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Wallet share",
        "top": 8711,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#FFBF82",
    "alpha": 1,
    "cssValue": "oklch(0.85 0.106949 64.6443)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "D001",
        "top": 8715,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#4D2D06",
    "alpha": 1,
    "cssValue": "oklch(0.33 0.0692021 64.6443)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "D001",
        "top": 8715,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#E42E46",
    "alpha": 1,
    "cssValue": "lab(51.3151 68.8894 33.9742)",
    "count": 36,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 9713,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#CC0033",
    "alpha": 1,
    "cssValue": "rgb(204, 0, 51)",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "P",
        "top": 9710,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "P",
        "top": 9710,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#78776C",
    "alpha": 1,
    "cssValue": "rgb(120, 119, 108)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "CTO",
        "top": 11721,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#545149",
    "alpha": 1,
    "cssValue": "oklch(0.435 0.0138944 87.9547)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "New account",
        "top": 8922,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#00B3FF",
    "alpha": 1,
    "cssValue": "rgb(0, 179, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 9983,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#684D00",
    "alpha": 1,
    "cssValue": "oklch(0.435 0.0950788 87.0346)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Signal",
        "top": 8784,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#2AA6A5",
    "alpha": 1,
    "cssValue": "lab(61.6546 -33.7521 -9.99822)",
    "count": 24,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 9816,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#2A2A2A",
    "alpha": 1,
    "cssValue": "rgb(42, 42, 42)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10125,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#009494",
    "alpha": 1,
    "cssValue": "rgb(0, 148, 148)",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 9814,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "A",
        "top": 9814,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#8A2D25",
    "alpha": 1,
    "cssValue": "oklch(0.435 0.12748 28.4228)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "At risk",
        "top": 8819,
        "property": "border"
      }
    ]
  }
]
```

### 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: Generous vertical rhythm between major sections, contrasting with dense, tight spacing within the Product UI mockups.
- Corner style: Sharp, 90-degree corners dominate the design, enforcing a brutalist and technical feel.
- Radius: Virtually zero border-radius; elements are strictly rectilinear.
- Borders: Thin, often subtle (low opacity white/gray) solid borders used to define structure, especially in the data dashboard UI.
- Buttons: Solid rectangular blocks of color (primarily gold/yellow) with high-contrast text and sharp corners. No visible shadows or gradients.
- Content width: Content spans a wide grid, often extending close to the edges of the viewport to maximize data display area.
- Density: High density in the product UI sections (tables, charts), balanced by very low density in editorial/narrative sections.
- Evidence: Visual inspection of CTA buttons, data table borders, full-width section layouts, and the stark contrast between UI mockups and narrative copy.

## Sections

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

1. **Hero — Next-generation hazardous waste hero** (Home)
   AI suggestion (98% confidence): Complete opening hero with oversized COLMEZ wordmark, concise positioning statement, meeting CTA, and a distinctive full-width industrial image.
   Capture: 1440×1005px; page bounds 0–1005px of 10620px; source section ID: `bba51fd2-9b95-4f3e-a717-23616ddf759e`; image: https://media.designdetails.io/library/e034a458db7358a619494955737ec241414f83cb97c05c7e82f818befbee3032/bba51fd2-9b95-4f3e-a717-23616ddf759e.webp
   SECTION.md v3.2: `bba51fd2-9b95-4f3e-a717-23616ddf759e` (deterministic evidence; editorial review pending)
2. **Features — Hazardous waste operators must move faster than the markets they serve.** (Home)
   Reusable feature composition from Home, organized around “Hazardous waste operators must move faster than the markets they serve.”.
   Capture: 1440×657px; page bounds 2000–2657px of 10620px; source section ID: `c90961db-3a99-41ce-a507-44363d34087a`; image: https://media.designdetails.io/library/d9c03cc3ad11984d22cbf5440b5a0f2c6a6da0fd94e3fe428037fe719056c7d8/section-manual-c90961db-3a99-41ce-a507-44363d34087a-1792473929979.webp
   SECTION.md v3.2: `c90961db-3a99-41ce-a507-44363d34087a` (deterministic evidence; editorial review pending)
3. **Features — Colmez: Powering next-generation hazardous waste teams Features** (Home)
   Reusable feature composition from Home, organized around “Colmez: Powering next-generation hazardous waste teams Features”.
   Capture: 1440×352px; page bounds 4000–4352px of 10620px; source section ID: `266d61de-f40a-463c-a753-ff9c14fc1616`; image: https://media.designdetails.io/library/5059ee8574b55e0b96ffc4b5823d52496fc44e0220ea680225a0c734cb955cfe/section_crop-266d61de-2026-10-19T16-14-03-367Z.webp
   SECTION.md v3.2: `266d61de-f40a-463c-a753-ff9c14fc1616` (deterministic evidence; editorial review pending)
4. **Features — Find the opportunity. Take the account. Keep the pipeline moving.** (Home)
   Reusable feature composition from Home, organized around “Find the opportunity. Take the account. Keep the pipeline moving.”.
   Capture: 1440×1605px; page bounds 4833–6438px of 10620px; source section ID: `e1e0adec-1837-4656-aae9-3cc29493ae91`; image: https://media.designdetails.io/library/d374fedb997f64da867025815a614dc9d0bbd80911ded1f8a8772ed705f748ad/section-manual-e1e0adec-1837-4656-aae9-3cc29493ae91-1792473946478.webp
   SECTION.md v3.2: `e1e0adec-1837-4656-aae9-3cc29493ae91` (deterministic evidence; editorial review pending)
5. **Certification — Colmez never trains on one operator's data for another, and never…** (Home)
   Certification composition from Home, organized around “Colmez never trains on one operator's data for another, and never…”.
   Capture: 1440×636px; page bounds 6983–7619px of 10620px; source section ID: `e62ee6e9-7748-43db-baa8-aa1be50ea549`; image: https://media.designdetails.io/library/48fcfb76f7e650d60d97ff59d45cd5828aa9411926712f0b066cecf04af03f62/section_crop-e62ee6e9-2026-10-19T16-14-06-102Z.webp
   SECTION.md v3.2: `e62ee6e9-7748-43db-baa8-aa1be50ea549` (deterministic evidence; editorial review pending)
6. **Features — Built with the people who ran this industry.** (Home)
   Reusable feature composition from Home, organized around “Built with the people who ran this industry.”.
   Capture: 1440×867px; page bounds 7744–8611px of 10620px; source section ID: `2aee3349-0890-4632-84b4-1ab945086c25`; image: https://media.designdetails.io/library/fe31d95f827b17d33ee179d899650f1f820d54d53a953784538ade4cc32fcba5/section-manual-2aee3349-0890-4632-84b4-1ab945086c25-1792474017762.webp
   SECTION.md v3.2: `2aee3349-0890-4632-84b4-1ab945086c25` (deterministic evidence; editorial review pending)
7. **Editorial — Hazardous waste scope manifesto** (Home)
   AI suggestion (91% confidence): Self-contained editorial statement pairing a typographic inventory of hazardous materials with concise market context; it has clear boundaries before the following problem grid begins.
   Capture: 1440×990px; page bounds 1008–1998px of 10620px; source section ID: `9afd1164-8f73-4507-918c-cd98925c2989`; image: https://media.designdetails.io/library/3a24b3a2107a62dbca291a3e5dfbe06dc509ba7772f321bf8b54419885720d4c/9afd1164-8f73-4507-918c-cd98925c2989.webp
   SECTION.md v3.2: `9afd1164-8f73-4507-918c-cd98925c2989` (deterministic evidence; editorial review pending)
8. **Testimonial Card — Industry Revenue Testimonial** (Home)
   AI suggestion (96% confidence): Complete, self-contained dark testimonial panel pairing a monochrome executive portrait with a prominent industry-specific customer quote.
   Capture: 1440×476px; page bounds 4382–4858px of 10620px; source section ID: `daddf65e-7877-41c8-bd0c-bc9ebae4a6e6`; image: https://media.designdetails.io/library/43e3e4ac2696b426a0c09fe4fb67510e2df3c18fde3e9b2cb22b91fcd10d0541/section-manual-daddf65e-7877-41c8-bd0c-bc9ebae4a6e6-1792473940425.webp
   SECTION.md v3.2: `daddf65e-7877-41c8-bd0c-bc9ebae4a6e6` (deterministic evidence; editorial review pending)
9. **Feature Card — Competitor Wallet Share Insight** (Home)
   AI suggestion (96% confidence): Complete split-layout product feature with a clear headline, supporting copy, three insight points, and a substantial dashboard visual.
   Capture: 1440×630px; page bounds 5803–6433px of 10620px; source section ID: `e9768ba7-4b1c-4c9f-bd77-5a4e50772f81`; image: https://media.designdetails.io/library/cfcd6bf0d74ba6bb46f8c87236ee467b12cc7aa8b4c95ce44bb8b482ad88c24b/e9768ba7-4b1c-4c9f-bd77-5a4e50772f81.webp
   SECTION.md v3.2: `e9768ba7-4b1c-4c9f-bd77-5a4e50772f81` (deterministic evidence; editorial review pending)
10. **Footer — Colmez Hazardous Waste CTA Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial page footer with a distinctive contour-map background, oversized COLMEZ branding, mission statement, meeting CTA, legal links, credits, and partner marks.
   Capture: 1440×998px; page bounds 9622–10620px of 10620px; source section ID: `870e7203-f0c3-48e2-965b-f58c1cf05e65`; image: https://media.designdetails.io/library/f6f446f22dd534db0c00c87cfabafcc02121816711e0cfca84784fb1792f9cf1/870e7203-f0c3-48e2-965b-f58c1cf05e65.webp
   SECTION.md v3.2: `870e7203-f0c3-48e2-965b-f58c1cf05e65` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/519208ada7799db9f4468c86602db7a55273758de90971c10c2f3367222b6144/desktop_full-9534d210-2026-10-19T16-13-51-745Z.webp
- Mobile screenshot: https://media.designdetails.io/library/a75109bb39cd2d7a25ba4ee8ddb6e6cb700fae7b197d7fb16b7172bb87de45d7/mobile_full-9534d210-2026-10-19T16-14-37-653Z.webp
- Open Graph image: https://media.designdetails.io/library/30899f63aaddd851d5ff72cefdbbddd23b44dae56cfc86140e4f65b98e8fb542/og_image-9534d210-2026-10-19T16-14-00-345Z.webp
- Full-page video: https://media.designdetails.io/library/d959fc7e13b558507057d31a8fb7b756210c3e9353b8a094698d1b5abea81d3d/motion-1792427738992.mp4
- Video poster: https://media.designdetails.io/library/74e53628c03bd24dd889f9044374e790fb548ab2d93725250337e29c9dd42af3/motion-poster-1792427738992.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 With Background Imagery
- Primary Button
- Testimonial Card
- Product UI
- Footer
- Data Dashboard Mockup
- Numbered Feature List
- Topographical Background

## Quality rubric

Overall: 63/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Colmez executes a disciplined brutalist-industrial visual system — consistent black/gold palette, heavy condensed display type, sharp-cornered dashboard UI, and scroll-choreographed transitions — with product content that is concrete and specific rather than generic. The core idea (debris/topographic imagery tied to a hazardous-waste SaaS) is a fitting, well-rendered conceit, but the page's underlying structure is a familiar startup-marketing template, and several details (tiny dashboard type, an abrupt light-mode team section) keep it from reaching a more distinctive, end-to-end polished tier.

- Typography (15%): 64 — A clear two-tier type system (heavy, tight-tracking 'brandSans' for display/headers vs. compact 'productSans' for data/UI) is applied consistently from hero through numbered feature lists, team bios, and dashboard mockups. Negative letter-spacing and large point sizes (46-54px) give the display type a branded, industrial weight, and small UI sizes (9-14px) are used appropriately for dense tabular data. The system is coherent but relies on a fairly conventional condensed-sans pairing without much typographic experimentation beyond scale and tracking.
- Color (10%): 68 — A disciplined near-black canvas (#121212/#141414), white text, and a single dark-gold accent (#AE9A29) run through nav, CTAs, hero imagery, and footer topographic pattern, giving strong thematic cohesion with the hazardous-waste/industrial subject matter. Semantic colors (blue/green/red/teal tag pairs) appear only inside dashboard mockups, which is appropriate scoping rather than palette sprawl.
- Layout (20%): 66 — The page is built from a repeating, legible system: numbered problem/feature blocks (001/002/003) with text-left/visual-right panels, full-bleed hero and footer sections, and dense but well-bordered dashboard tables. A deliberate tonal break to a light (#EBEBEB) team section against an otherwise all-dark site shows some structural intent, though it also reads as a stock 'light interlude' section common to SaaS templates. Content spans near full viewport width in data areas and sharp 90° corners are used uniformly, reinforcing the brutalist premise.
- Motion (20%): 62 — Gemini's frame-by-frame observation documents several distinct scroll-tied sequences — a hero text-mask zoom into imagery, synchronized text wipe-ins with a topographic line draw-in, staggered bottom-up image clips, and horizontal-translate-plus-clip team portraits — indicating a built motion system rather than a single hero gimmick. However, no evidence substantiates animation smoothness, easing quality, or frame rate, and the effects described (mask zoom, clip-path reveals, horizontal translate) are common scroll-animation patterns rather than a novel motion language.
- Originality (25%): 56 — The site commits to a specific, well-chosen conceptual device — pairing brutalist bold type and stark black/gold contrast with macro photography of industrial/hazardous debris that doubles as both hero backdrop and section dividers, tying visual identity directly to the 'hazardous waste' subject. This is a genuinely fitting idea for a niche vertical SaaS. However, the overall page architecture (numbered feature list, split text/screenshot blocks, team grid, testimonial, 'backed by a16z' footer) is a very standard B2B/YC-style SaaS template; the distinctiveness rests almost entirely on the photographic/typographic skin rather than structural or interaction novelty.
- Content (10%): 70 — Product screenshots are concrete and specific (named accounts like 'Intel Ocotillo', 'TSMC Arizona', waste codes, wallet-share bars, a draft email to a named contact), directly substantiating the copy's claims rather than using generic placeholder UI. Team bios pair named individuals with specific credentials and recognizable former-employer logos (US Ecology, Stanford, a16z/Speedrun), reinforcing credibility claims with matched visual evidence.

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
- [ ] Typography roles

## Curator notes

Curator review pending.

## 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.