# Humble — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://humblerobotics.ai/
Captured: 2026-11-06
CSS measured: 2026-11-06T17:39:57.716Z at 1440×1000 — https://humblerobotics.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: claude-sonnet-5

## Design direction

The Humble Robotics website presents a highly polished, cinematic experience focused on their autonomous electric hauler. It utilizes a continuous scroll-linked background video to drive the narrative, combined with stark, contrasting sections. The design is heavily rooted in a modern, technological aesthetic with a color palette dominated by black, white, and varying shades of green. Typography is a mix of the sans-serif 'Funnel Display' for headings and the monospaced 'Geist Mono' for data points, creating an industrial yet refined feel. Layouts are spacious, often utilizing split compositions to balance text with rich media.

## Classification

- Industry: hardware
- Site type: Landing
- Business model: Software
- Styles: corporate, typographic, minimal, cinematic, industrial-tech
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Funnel Display — weight 400; size 88px; line-height 96.8px; tracking -1.8px; Regular (90% role confidence, computed values)
- Heading: Funnel Display — weight 400; size 40px; line-height 44px; tracking normal; Regular (85% role confidence, computed values)
- Body: Funnel Sans — weight 300; size 18px; line-height 27px; tracking normal; Regular (80% role confidence, computed values)
- Mono: Geist Mono — weight 400; size 48px; line-height 54.7px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary text on dark backgrounds. (90% role confidence, computed values)
- Text — text #000000: color-7: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for primary text on light backgrounds. (90% role confidence, computed values)
- Primary Action — primary action #81F2B2: color-11: computed rgb(129, 242, 178); AI role: Bright green (#81F2B2) used for primary buttons like 'LEARN MORE' and 'GET UPDATES'. (85% role confidence, computed values)
- Surface — surface #FAFFF2: color-1: computed rgb(250, 255, 242); AI role: Off-white (#FAFFF2) used for contrasting light sections like 'The first of its kind...'. (80% role confidence, computed values)
- Accent — accent #EF682C: color-10: computed rgb(239, 104, 44); AI role: Orange (#EF682C) used for the 'SEE OPEN POSITIONS' button and numeric accents. (80% role confidence, computed values)
- Canvas — canvas #030101: color-6: computed rgb(3, 1, 1); AI role: Almost black (#030101) used as the primary background for the initial hero and lower dark sections. (70% 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": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "61.6px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 101,
    "contexts": [
      {
        "tag": "span",
        "text": "T",
        "top": 7408,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "h",
        "top": 7408,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 7408,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "88px",
    "lineHeight": "96.8px",
    "letterSpacing": "-1.8px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "div",
        "text": "A",
        "top": 726,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "n",
        "top": 726,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "a",
        "top": 726,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Port drayage",
        "top": 15862,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Plant to warehouse",
        "top": 16002,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Rail yard moves",
        "top": 16142,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "44px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "A refreshingly simple operating model",
        "top": 9253,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Handled by Humble at every step",
        "top": 9253,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Safe and compliant at scale",
        "top": 9253,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "44px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Technology that transforms freight and logistics",
        "top": 8647,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Join the team that first pioneered autonomous freight.",
        "top": 18416,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "29.1px",
    "lineHeight": "34.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Lowest per-mile cost",
        "top": 12802,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "400",
    "size": "22px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Greater hauling capacity",
        "top": 12540,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Zero fuel dependency",
        "top": 12744,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Carry more freight on each route with a cabless platform that weighs far less than a traditional tra",
        "top": 12596,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Increase uptime and protect operations from diesel volatility with a low-maintenance electric powert",
        "top": 12791,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Dramatic savings on equipment, maintenance, and driver expenses minimize the cost of each mile.",
        "top": 12866,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "300",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Streamlined load execution and reliable ROI with the only solution that can unload directly at the d",
        "top": 9371,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Full-service freight transport with 24/7 remote operational support and charging.",
        "top": 9371,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Predictive safety, redundant failsafe systems, and hardened independent controls.",
        "top": 9371,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "300",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Designed for maximum reliability and minimum cost.",
        "top": 12314,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "300",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Cabless, flexible design",
        "top": 8762,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Technology",
        "top": 103,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Company",
        "top": 103,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "News",
        "top": 103,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "GET IN TOUCH",
        "top": 103,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "LEARN MORE",
        "top": 8812,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "SEE OPEN POSITIONS",
        "top": 18560,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "54.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "200",
        "top": 13165,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "55",
        "top": 13165,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "20%",
        "top": 13165,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "300",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Technology",
        "top": 18856,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Company",
        "top": 18956,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Careers",
        "top": 19055,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "1.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "MILE MAX RANGE",
        "top": 13229,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "MPH SPEED",
        "top": 13229,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "LIGHTER",
        "top": 13229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "01",
        "top": 9222,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "02",
        "top": 9222,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "03",
        "top": 9222,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Ship with us",
        "top": 16242,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Funnel Sans",
    "fontStack": "\"Funnel Sans\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Humble Robotics",
        "top": 19297,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FAFFF2",
    "alpha": 1,
    "cssValue": "rgb(250, 255, 242)",
    "count": 19,
    "contexts": [
      {
        "tag": "main",
        "text": "TechnologyCompanySafetyNewsCareersGET IN TOUCH .navbar_hamburger-wrapper { --thickness: 2px; --gap: ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "TThhee ffiirrsstt ooff iittss kkiinndd:: aa hhaauulleerr tthhaatt rreeaassoonnss lliikkee aa hhuumma",
        "top": 7000,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 9090,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 35,
    "contexts": [
      {
        "tag": "body",
        "text": "$51M Series A to bring autonomous, electric freight to regional routes.See what’s next /* Make text ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Technology",
        "top": 103,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "GET IN TOUCH",
        "top": 94,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#0C1F1A",
    "alpha": 1,
    "cssValue": "rgb(12, 31, 26)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "The economics of efficiencyDesigned for maximum reliability and minimum cost.Greater hauling capacit",
        "top": 12152,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 13125,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#173A31",
    "alpha": 1,
    "cssValue": "rgb(23, 58, 49)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "/* Make text look crisper and more legible in all browsers */ body { -webkit-font-smoothing: antiali",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#0A0A0B",
    "alpha": 1,
    "cssValue": "rgb(10, 10, 11)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 8000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#030101",
    "alpha": 1,
    "cssValue": "rgb(3, 1, 1)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "GET IN TOUCH",
        "top": 103,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Built for the moves you make all day, every day",
        "top": 15956,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Short, repeatable freight runs from dock to dock",
        "top": 16161,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 96,
    "contexts": [
      {
        "tag": "span",
        "text": "T",
        "top": 7408,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "The only true dock-to-dock solution",
        "top": 8980,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "A refreshingly simple operating model",
        "top": 9253,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EFF2EA",
    "alpha": 1,
    "cssValue": "rgb(239, 242, 234)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "01A refreshingly simple operating modelStreamlined load execution and reliable ROI with the only sol",
        "top": 9092,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(0, 0, 0, 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "TechnologyCompanySafetyNewsCareersGET IN TOUCH .navbar_hamburger-wrapper { --thickness: 2px; --gap: ",
        "top": 79,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EF682C",
    "alpha": 1,
    "cssValue": "rgb(239, 104, 44)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "01",
        "top": 9222,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "SEE OPEN POSITIONS",
        "top": 18544,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#81F2B2",
    "alpha": 1,
    "cssValue": "rgb(129, 242, 178)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "LEARN MORE",
        "top": 8796,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "GET UPDATES",
        "top": 19143,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#F8FFE6",
    "alpha": 1,
    "cssValue": "rgb(248, 255, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Lowest per-mile cost",
        "top": 12802,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F0FEB1",
    "alpha": 1,
    "cssValue": "rgb(240, 254, 177)",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Greater hauling capacity",
        "top": 12540,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#ECFD9A",
    "alpha": 1,
    "cssValue": "rgb(236, 253, 154)",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Zero fuel dependency",
        "top": 12744,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F8FFF2",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(250, 255, 242, 0.15)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "TechnologyCompanySafetyNewsCareersGET IN TOUCH .navbar_hamburger-wrapper { --thickness: 2px; --gap: ",
        "top": 79,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#5F5E5D",
    "alpha": 1,
    "cssValue": "rgb(95, 94, 93)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Greater hauling capacityCarry more freight on each route with a cabless platform that weighs far les",
        "top": 12519,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 19075,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Technology",
        "top": 18856,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#EDFD9B",
    "alpha": 1,
    "cssValue": "rgb(237, 253, 155)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 18102,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#D6D4D1",
    "alpha": 1,
    "cssValue": "rgb(214, 212, 209)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 9222,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#F5F4F0",
    "alpha": 1,
    "cssValue": "rgb(245, 244, 240)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 18104,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F5F4F1",
    "alpha": 1,
    "cssValue": "rgb(245, 244, 241)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 18104,
        "property": "control-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: Generous vertical spacing between major sections, often using full viewport heights for dramatic effect. Within components like the split feature blocks, padding is substantial but structured.
- Corner style: A mix of sharp and rounded corners. Images and some containers have subtly chamfered or rounded corners, while text elements remain sharp.
- Radius: Not explicitly measured in provided facts, but visually, containers in the 'dock-to-dock' section appear to have slight border-radii, perhaps 8-12px.
- Borders: Subtle borders are used, such as the translucent border on the navigation bar (rgba(250, 255, 242, 0.15)) and fine lines separating features.
- Buttons: Solid fill with sharp corners or very slight radii, often featuring a distinct background color (green or orange) and a small, bold icon (like a play button or arrow).
- Content width: Content is generally constrained to a central column, likely around 1200px-1440px max-width, though background videos bleed to the edges.
- Density: Low density. The design prioritizes visual impact and narrative flow over cramming information, using large typography and ample whitespace.
- Evidence: Observations based on the visual structure of the provided crops and the list of DOM/CSS facts.

## Sections

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

1. **Navbar — Humble Navbar** (Home)
   A small centred bar with four links and one outlined button keeps navigation light against the black background.
   Capture: 1440×166px; page bounds 0–166px of 10487px; source section ID: `0d7f5e4d-b22e-4e11-9533-ece8e23ac878`; image: https://media.designdetails.io/library/275b0c131351358f3f78dff93474e06851d5716d78c7b139a7a75901bc278954/0d7f5e4d-b22e-4e11-9533-ece8e23ac878.webp
   SECTION.md v3.2: `0d7f5e4d-b22e-4e11-9533-ece8e23ac878` (deterministic evidence; editorial review pending)
2. **Hero — Split black and cream headline hero** (Home)
   A large headline on black above a cream statement with highlighted words gives a clear product claim and a strong colour contrast.
   Capture: 1440×1834px; page bounds 166–2000px of 10487px; source section ID: `9ef0a072-fec7-4204-b2a1-b7e9ab54af90`; image: https://media.designdetails.io/library/eca60c0c1acf49cc4cc1ee3ec79ae1ee3f7794cd829b2ba365a7f9c2ea1639b7/9ef0a072-fec7-4204-b2a1-b7e9ab54af90.webp
   SECTION.md v3.2: `9ef0a072-fec7-4204-b2a1-b7e9ab54af90` (deterministic evidence; editorial review pending)
3. **Features — Full-bleed photo with key points** (Home)
   A full-width truck photo carries the headline, with short bullet points and a green button giving quick facts and a next step.
   Capture: 1440×900px; page bounds 2000–2900px of 10487px; source section ID: `86e4843e-4ae8-4925-b386-bb3cddd122e2`; image: https://media.designdetails.io/library/7d8cbf95090a1e33a0f1fde9961853ac7e5510723e7fe5199982476fdfe7b144/86e4843e-4ae8-4925-b386-bb3cddd122e2.webp
   SECTION.md v3.2: `86e4843e-4ae8-4925-b386-bb3cddd122e2` (deterministic evidence; editorial review pending)
4. **Features — Stacked cards with image beside text** (Home)
   Each card pairs a short benefit paragraph with a large truck photo, so every claim is backed by a visual.
   Capture: 1440×2000px; page bounds 2900–4900px of 10487px; source section ID: `7ce7fe57-88c2-404a-8a88-5400093ab3ea`; image: https://media.designdetails.io/library/1c6ff85943f631f26fb5c80f78c6e6f97d617976857daabe2c51952666303b58/7ce7fe57-88c2-404a-8a88-5400093ab3ea.webp
   SECTION.md v3.2: `7ce7fe57-88c2-404a-8a88-5400093ab3ea` (deterministic evidence; editorial review pending)
5. **Stats — Annotated truck renders with spec tiles** (Home)
   Callout labels on dark renders explain parts, while a row of large numeric tiles states range, speed and emissions at a glance.
   Capture: 1440×2000px; page bounds 4900–6900px of 10487px; source section ID: `aab36b0a-b9cc-4229-995b-819fc6472098`; image: https://media.designdetails.io/library/59e69617548899619c888a5838085dcdc3079c6391197a42b328093b74c74e51/aab36b0a-b9cc-4229-995b-819fc6472098.webp
   SECTION.md v3.2: `aab36b0a-b9cc-4229-995b-819fc6472098` (deterministic evidence; editorial review pending)
6. **Features — Use cases list with line icons** (Home)
   A left headline with button sits beside four icon-led use cases, making each freight scenario quick to scan.
   Capture: 1440×720px; page bounds 6900–7620px of 10487px; source section ID: `03e008e5-7536-4b00-b844-cae4018d1675`; image: https://media.designdetails.io/library/4330b3d3e56f55f696acacaa43f1998e2bee0a404ace1e7a93c77219acec3f72/03e008e5-7536-4b00-b844-cae4018d1675.webp
   SECTION.md v3.2: `03e008e5-7536-4b00-b844-cae4018d1675` (deterministic evidence; editorial review pending)
7. **CTA — Full-bleed forest photo with incentive note** (Home)
   A large headline over an atmospheric photo, plus a small side note, ties the green message to a concrete incentive.
   Capture: 1440×752px; page bounds 7620–8372px of 10487px; source section ID: `a3ad1999-bd6c-406b-b52f-d3672f423697`; image: https://media.designdetails.io/library/4159804cceac0ac2cf856c34a82e00efbd6115483f3c151de64e2d765ed104aa/a3ad1999-bd6c-406b-b52f-d3672f423697.webp
   SECTION.md v3.2: `a3ad1999-bd6c-406b-b52f-d3672f423697` (deterministic evidence; editorial review pending)
8. **Gallery — Carousel of vehicle renders** (Home)
   A large rounded image with dot pagination shows the vehicle clearly, while the heading and intro line frame what to look at.
   Capture: 1440×1006px; page bounds 8372–9378px of 10487px; source section ID: `ef9319c0-499c-4b6a-a927-6534b3ffda4d`; image: https://media.designdetails.io/library/ee117248b410d4ac4b0dd4d350360e716589467b946bbb685cd69a1159c3b8e4/ef9319c0-499c-4b6a-a927-6534b3ffda4d.webp
   SECTION.md v3.2: `ef9319c0-499c-4b6a-a927-6534b3ffda4d` (deterministic evidence; editorial review pending)
9. **CTA — Careers banner on green gradient** (Home)
   A short headline and a bright orange button stand out on the dark gradient, pointing visitors straight to open roles.
   Capture: 1440×543px; page bounds 9378–9921px of 10487px; source section ID: `7bf99113-9fe7-49e7-92ac-b1b70e63a5ce`; image: https://media.designdetails.io/library/d8f2b3c80c1fed1eba0216c52298d965025fd4ee7e73f019fc45df73bfa8d07f/7bf99113-9fe7-49e7-92ac-b1b70e63a5ce.webp
   SECTION.md v3.2: `7bf99113-9fe7-49e7-92ac-b1b70e63a5ce` (deterministic evidence; editorial review pending)
10. **Footer — Footer with email signup and links** (Home)
   A short company blurb with an email field sits beside large, divided links, keeping navigation and updates easy to find.
   Capture: 1440×566px; page bounds 9921–10487px of 10487px; source section ID: `b1719949-ed79-4069-8309-6fe81c69e2db`; image: https://media.designdetails.io/library/c1439d2f6e056bd9c907e50f5c425ad61b5debf19dd1e21e86d2a1bce2e7e471/b1719949-ed79-4069-8309-6fe81c69e2db.webp
   SECTION.md v3.2: `b1719949-ed79-4069-8309-6fe81c69e2db` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/05457ca22c47b007dea2964bde95b5119ada87bf612d7040b49b14dae0390f04/desktop_full-10ff8030-2026-11-06T17-39-57-731Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3b25d30e8ce9b1aa58ff91a4e28f4c33c80456c42ff5bf3f282383e090b89acb/mobile_full-10ff8030-2026-11-06T17-40-56-104Z.webp
- Open Graph image: https://media.designdetails.io/library/6b905f2e9183260f6e0b5f787af84074c619043d41dbb20f9f93500a796529ce/og_image-10ff8030-2026-11-06T17-40-09-075Z.webp
- Full-page video: https://media.designdetails.io/library/ab657fa49a97c9bfdbe9746b3881cdc4619e747b3b5cced25f955eabcb5cac20/motion-1793987316387.mp4
- Video poster: https://media.designdetails.io/library/af1f150ecb66858d9478e8735c91971f17a48b8bffaae7934292a0f9f3e5c933/motion-poster-1793987316387.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
- Split Hero
- Feature Card
- Stat Block
- Primary Button
- Newsletter Form
- Footer
- Scroll Linked Video Narrative
- Interactive Feature Diagram

## Quality rubric

Overall: 57.25/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Humble Robotics delivers a polished, cinematic product site that competently executes the now-standard hardware-startup playbook: a scroll-scrubbed video hero, an annotated 3D diagram with floating callouts, and slider-based use-case comparisons, all stitched together with a disciplined three-tier type system (display/mono/sans) and a restrained black-white-green-orange palette. The motion vocabulary is genuinely systemic rather than a single isolated hero trick, recurring meaningfully across at least four distinct sections, and content is well-matched to its supporting visuals (labels point at real chassis components, stats sit beside the diagrams they substantiate). What holds the site back from a higher tier is a near-total reliance on devices that are now common across comparable EV/robotics sites (Tesla Semi-style reveals, annotated hardware diagrams, progress-bar sliders), combined with small signs of imprecision in the color system (multiple near-duplicate near-blacks and near-whites) and some long, low-density viewport-height stretches that pad the scroll. This is confident, well-crafted execution within a very familiar idiom rather than a landmark or boundary-pushing effort.

- Typography (15%): 65 — A clear three-role type system is in place: Funnel Display for large display/headline work (88px/-1.8px tracking in the hero, 40-56px for section heads), Geist Mono for data points and button labels (48px stat numbers, uppercase 14px CTAs with 0.6-1.4px tracking), and Funnel Sans at lighter weights for body copy (16-24px). The mono-for-data convention is a deliberate, legible choice that reinforces the industrial/technical positioning rather than being decorative.
- Color (10%): 57 — The black/white/green/orange palette is restrained and purposeful (green ties to the electric/sustainability message, orange flags secondary CTAs), but it is also a very common tech-hardware-startup trope at this point, and the palette has slight redundancy across several near-identical near-blacks (#030101, #0A0A0B, #0C1F1A) and near-whites (#FFFFFF, #FAFFF2, #F8FFF2) rather than a tightly curated set.
- Layout (20%): 65 — Multiple layout patterns (split hero/media panels, card grids, stat blocks, slider-with-progress-bar comparisons, annotated 3D diagram) recur and interlock across the page with consistent spacing and alignment, showing a genuine system rather than one-off sections. Generous whitespace and full-bleed media are used with intent to pace the scroll.
- Motion (20%): 66 — Motion is built around a sustained scroll-linked video/text choreography system applied consistently across the page — hero truck reveal, synced slider transitions with a visible progress bar, staggered feature-list reveals, and label call-outs tied to a 3D model — rather than a single hero effect. This is a broader system than most comparable sites, though specifics like easing quality, frame rate, and behavior when scrolling back up are not established by the evidence.
- Originality (25%): 38 — The core devices — a cinematic scroll-scrubbed hero video of a product reveal, a slider with a progress bar comparing use-cases, and an annotated 3D hardware diagram with floating callout labels — are now a well-established template across EV/robotics/hardware startup sites (Tesla Semi, Apple-style product pages, and numerous funded hardware startups use this exact combination). Execution is clean, but no section introduces a genuinely hard-to-substitute idea; this is a highly competent instance of an existing genre rather than a new contribution.
- Content (10%): 61 — Content and visuals are tightly paired throughout: stat callouts sit directly beside the 3D model they describe, feature labels point to specific chassis components, and icon-led use-case cards (port drayage, plant-to-warehouse, rail yard, terminal-to-terminal) clarify abstract claims with concrete scenarios. The narrative arc (problem → mechanism → economics → use cases → careers CTA) is logically sequenced.

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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A black opening screen with large type and a yellow-to-green gradient on key words sets a confident, technical tone before giving way to a pale cream section for calmer reading. Dark green data panels with glowing 3D renders of the truck break up the long page and make the capacity and cost numbers easy to spot at a glance.

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