# Maticrobots — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://maticrobots.com/
Captured: 2026-10-13
CSS measured: 2026-10-13T02:00:50.466Z at 1440×1000 — https://maticrobots.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

The website presents a prominent modal overlay immediately upon loading, designed to capture user attention for a sweepstakes promotion. The design utilizes a split layout within the modal, featuring a seasonal photographic product shot on the left and a solid color block with typography and a call-to-action button on the right. The visual language is clean, modern, and slightly playful due to the warm yellow surface color.

## Classification

- Industry: technology
- Site type: Blog, Store
- Business model: Shopping
- Styles: minimal, photographic, colourful, promotional
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Trim Mono — weight 500; size 14px; line-height 20px; tracking -0.4px; uppercase (85% role confidence, computed values)
- Heading: Mori Gothic — weight 600; size 48px; line-height 52px; tracking -1.9px; Regular (90% role confidence, computed values)
- Body: Mori Gothic — weight 400; size 18px; line-height 26px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Surface — surface #FFE895: color-6: computed rgb(255, 232, 149); AI role: The #FFE895 warm yellow color forms the background for the text half of the modal. (95% role confidence, computed values)
- Text — text #1F2022: color-4: computed rgb(31, 32, 34); AI role: The dark #1F2022 color provides high contrast for typography on the yellow surface. (90% role confidence, computed values)
- Primary Action — primary action #1F2022: color-4: computed rgb(31, 32, 34); AI role: The dark #1F2022 color is also used as the background fill for the 'Of course' button. (85% 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": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 43,
    "contexts": [
      {
        "tag": "span",
        "text": "6 months to decide",
        "top": 925,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "·",
        "top": 925,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Free shipping & returns",
        "top": 925,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "22px",
    "lineHeight": "26px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“This Wall-E-like bot fixes the stuff every other robot vacuum gets wrong.”",
        "top": 7884,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "“Matic completely redefines the robot vacuum and does it so well that it outperforms many other, mor",
        "top": 7884,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "“I’ve never thought to describe a robot vacuum as fun, yet here we are.”",
        "top": 7884,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "36px",
    "lineHeight": "40px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Tell it. Show it.",
        "top": 1948,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Matic actually gets it.",
        "top": 1948,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Made for families, built with intelligence",
        "top": 2255,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "28px",
    "lineHeight": "34px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“Matic allows me to spend more quality time with our daughter instead of constantly worrying about c",
        "top": 8639,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Buy Matic",
        "top": 10084,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\"",
    "weight": "400",
    "size": "80px",
    "lineHeight": "96px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Matic robot vacuum and mop",
        "top": 95,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "48px",
    "lineHeight": "52px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Want to enter to win $500 off?",
        "top": 414,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "32px",
    "lineHeight": "38px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "The continuously clean home",
        "top": 9710,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Now available:",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HSA/FSA payment for qualifying customers",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Matic Cues",
        "top": 93,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Trim Mono",
    "fontStack": "\"Trim Mono\", monospace",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "-0.5px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Shop",
        "top": 967,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "voice & gesture control",
        "top": 1903,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "MEET matic cues",
        "top": 2017,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Trim Mono",
    "fontStack": "\"Trim Mono\", monospace",
    "weight": "500",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Chandan",
        "top": 8571,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Matic Customer Since November 2025",
        "top": 8589,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "October 7, 2026",
        "top": 11305,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "18px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Shop",
        "top": 12795,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Resources",
        "top": 12795,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Company",
        "top": 12795,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "More behind the scenes updates",
        "top": 11495,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Matic was founded by two busy fathers who love technology and hate cleaning. With decades of enginee",
        "top": 12163,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Careers at Matic",
        "top": 12307,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "34px",
    "lineHeight": "40px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Made for cozy homes",
        "top": 973,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "cozy homes",
        "top": 973,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "64px",
    "lineHeight": "70px",
    "letterSpacing": "-3.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Hey Matic",
        "top": 1292,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Trim Mono",
    "fontStack": "\"Trim Mono\", monospace",
    "weight": "500",
    "size": "18px",
    "lineHeight": "26px",
    "letterSpacing": "-0.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Explore Life with Matic",
        "top": 9672,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "We use cookies. Cookie preference choices are available at the end of the page.",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Pause live counters",
        "top": 12526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "56px",
    "lineHeight": "60px",
    "letterSpacing": "-2.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“This is the only 10/10 rating I have ever given in over a decade of reviewing products.”",
        "top": 7467,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "only 10/10 rating",
        "top": 7470,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 12795,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Trim Mono",
    "fontStack": "\"Trim Mono\", monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Fall sweepstakes",
        "top": 386,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "12.3px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "HSA/FSA",
        "top": 12540,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Shop",
        "top": 92,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Shop",
        "top": 52,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Mori Gothic",
    "fontStack": "\"Mori Gothic\", system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Of course",
        "top": 558,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 99,
    "contexts": [
      {
        "tag": "body",
        "text": "We use cookies. Cookie preference choices are available at the end of the page.Skip to contentNow av",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Shop",
        "top": 92,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 44,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F2F2F0",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 240)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to contentNow available:HSA/FSA payment for qualifying customersShopMatic CuesLife with MaticIn",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Hey Maticvoice & gesture controlTell it. Show it. Matic actually gets it.MEET matic cues",
        "top": 1195,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(0, 0, 0, 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#1F2022",
    "alpha": 1,
    "cssValue": "rgb(31, 32, 34)",
    "count": 105,
    "contexts": [
      {
        "tag": "div",
        "text": "We use cookies. Cookie preference choices are available at the end of the page.",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Now available:",
        "top": 22,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#006759",
    "alpha": 1,
    "cssValue": "rgb(0, 103, 89)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Pause live countersover 500 millionsq ft cleanedover 71 thousandweekends savedHSA/FSAShopMaticAccess",
        "top": 12479,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFE895",
    "alpha": 1,
    "cssValue": "rgb(255, 232, 149)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Fall sweepstakesWant to enter to win $500 off?Of course",
        "top": 134,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#C6C4BA",
    "alpha": 1,
    "cssValue": "rgb(198, 196, 186)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Now available:HSA/FSA payment for qualifying customers",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "figure",
        "text": "“This Wall-E-like bot fixes the stuff every other robot vacuum gets wrong.”Reviewed 9/10 · 2025",
        "top": 7819,
        "property": "border"
      },
      {
        "tag": "path",
        "text": "",
        "top": 10021,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#202022",
    "alpha": 0.6980392156862745,
    "cssValue": "rgba(31, 32, 34, 0.698)",
    "count": 16,
    "contexts": [
      {
        "tag": "p",
        "text": "A new era of home robotics",
        "top": 2213,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 10128,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 10129,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 10,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1259,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 12541,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "HSA/FSA",
        "top": 12540,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#F6F5F3",
    "alpha": 1,
    "cssValue": "rgb(246, 245, 243)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1260,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#4B3F36",
    "alpha": 1,
    "cssValue": "rgb(75, 63, 54)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1260,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FB6945",
    "alpha": 1,
    "cssValue": "rgb(251, 105, 69)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "only 10/10 rating",
        "top": 7470,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#3B3B3B",
    "alpha": 1,
    "cssValue": "rgb(59, 59, 59)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Hey Matic",
        "top": 1292,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#333E48",
    "alpha": 1,
    "cssValue": "rgb(51, 62, 72)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12531,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F47216",
    "alpha": 1,
    "cssValue": "rgb(244, 114, 22)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12542,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#3C4043",
    "alpha": 1,
    "cssValue": "rgb(60, 64, 67)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12541,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#1E1E23",
    "alpha": 0.2,
    "cssValue": "rgba(31, 32, 34, 0.2)",
    "count": 8,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 11821,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FF9900",
    "alpha": 1,
    "cssValue": "rgb(255, 153, 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12563,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#003087",
    "alpha": 1,
    "cssValue": "rgb(0, 48, 135)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12542,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 967,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#009CDE",
    "alpha": 1,
    "cssValue": "rgb(0, 156, 222)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12542,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#E94235",
    "alpha": 1,
    "cssValue": "rgb(233, 66, 53)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12540,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#34A853",
    "alpha": 1,
    "cssValue": "rgb(52, 168, 83)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12549,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#4285F4",
    "alpha": 1,
    "cssValue": "rgb(66, 133, 244)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12546,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FABB05",
    "alpha": 1,
    "cssValue": "rgb(250, 187, 5)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12545,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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 internal padding within the text half of the modal creates a breathable layout, focusing attention on the typography.
- Corner style: Rounded corners are a consistent theme, applied to the outer edges of the modal itself.
- Radius: The modal appears to have a border-radius of approximately 16px to 24px. The button uses a fully rounded 'pill' style.
- Borders: No visible strokes or borders are used on the primary structural elements of the modal.
- Buttons: Buttons are solid-filled, pill-shaped, and rely on color contrast rather than borders for definition.
- Content width: The modal acts as a constrained container, keeping the line lengths of the heading relatively short.
- Density: Spacious. The interface relies on significant negative space within the modal to create focus.
- Evidence: Observed from the rendering of the split modal, the pill-shaped CTA button, and the generous spacing around the text elements.

## Sections

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

1. **Hero — Matic robot vacuum and mop** (Home)
   Opening hero composition from Home, organized around “Matic robot vacuum and mop”.
   Capture: 1440×987px; page bounds 64–1051px of 9398px; source section ID: `169728a4-4f61-4d35-ac62-2725112f95a7`; image: https://media.designdetails.io/library/fd7afa9311562ec60a9be206029aeb74896208f0e12444e18148c796d1a21759/section_crop-169728a4-2026-10-13T02-01-01-395Z.webp
   SECTION.md v3.2: `169728a4-4f61-4d35-ac62-2725112f95a7` (deterministic evidence; editorial review pending)
2. **Features — Tell it. Show it. Matic actually gets it.** (Home)
   Reusable feature composition from Home, organized around “Tell it. Show it. Matic actually gets it.”.
   Capture: 1440×874px; page bounds 1195–2069px of 9398px; source section ID: `37927350-bf66-4e69-a254-bdb42fe9af53`; image: https://media.designdetails.io/library/57dfef649703c7ed5e78d8e7aab758583856cbbcf775c3a34a2fa2e4d09c2ef8/section_crop-37927350-2026-10-13T02-01-02-303Z.webp
   SECTION.md v3.2: `37927350-bf66-4e69-a254-bdb42fe9af53` (deterministic evidence; editorial review pending)
3. **Features — Maticrobots Features** (Home)
   Reusable feature composition from Home, organized around “Maticrobots Features”.
   Capture: 1440×799px; page bounds 3503–4302px of 9398px; source section ID: `90788386-3a11-47d6-8183-e5f5c15c9683`; image: https://media.designdetails.io/library/06b93f3aefcdc714227b070fbfcb47012ae7d649ad6fa7b36a32c2cfee02d903/section_crop-90788386-2026-10-13T02-01-03-182Z.webp
   SECTION.md v3.2: `90788386-3a11-47d6-8183-e5f5c15c9683` (deterministic evidence; editorial review pending)
4. **Features — The continuously clean home** (Home)
   Reusable feature composition from Home, organized around “The continuously clean home”.
   Capture: 1440×648px; page bounds 5328–5976px of 9398px; source section ID: `981135d4-a1f8-4011-b19f-d92e064ac630`; image: https://media.designdetails.io/library/638bca414925c192d1c556cd8c1c5676fadbe9c8b43c7d8a0beb40579f0de4da/section_crop-981135d4-2026-10-13T02-01-05-018Z.webp
   SECTION.md v3.2: `981135d4-a1f8-4011-b19f-d92e064ac630` (deterministic evidence; editorial review pending)
5. **Features — What we’re building, and why** (Home)
   Reusable feature composition from Home, organized around “What we’re building, and why”.
   Capture: 1440×742px; page bounds 6880–7622px of 9398px; source section ID: `3c922e3a-c15e-4a62-be15-1d8d0fd6cadf`; image: https://media.designdetails.io/library/81e56021f3fe9aa2187e461835cd8d2e4086cba57339f16f4dc967962903de72/section_crop-3c922e3a-2026-10-13T02-01-07-061Z.webp
   SECTION.md v3.2: `3c922e3a-c15e-4a62-be15-1d8d0fd6cadf` (deterministic evidence; editorial review pending)
6. **Features — The future of robotics comes home.** (Home)
   Reusable feature composition from Home, organized around “The future of robotics comes home.”.
   Capture: 1440×668px; page bounds 7767–8435px of 9398px; source section ID: `984e03b1-8e38-4ed8-a7ab-df3f1daf0c89`; image: https://media.designdetails.io/library/f9d6b0526339e47ca765ed2a5b1126ea1acce413909de0ccb53c3bfa4b2094f6/section_crop-984e03b1-2026-10-13T02-01-08-036Z.webp
   SECTION.md v3.2: `984e03b1-8e38-4ed8-a7ab-df3f1daf0c89` (deterministic evidence; editorial review pending)
7. **Footer — Maticrobots Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Maticrobots Footer”.
   Capture: 1440×819px; page bounds 8579–9398px of 9398px; source section ID: `cba90d00-794d-41f3-aaba-bdf661a4fea2`; image: https://media.designdetails.io/library/95256ccec4f7da0043e325b2a274d02a74b3c3b1642f6837f2bc9acc17d529ea/section_crop-cba90d00-2026-10-13T02-01-09-101Z.webp
   SECTION.md v3.2: `cba90d00-794d-41f3-aaba-bdf661a4fea2` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f9df1074854cd4325519bef70abb09d392f8df0741558f0f2c5b9a52c553e827/desktop_full-7b3f688f-2026-10-13T02-00-50-477Z.webp
- Mobile screenshot: https://media.designdetails.io/library/8623155be2a1faab7bd93ed452a4edb84c745b52d1c4db53009dedf62890deb0/mobile_full-7b3f688f-2026-10-13T02-01-34-612Z.webp
- Open Graph image: https://media.designdetails.io/library/4f476d5ccd31ad9d424b1fa96b3acd58be60cfa1a3b7bfcd6dc0a9060ff7edcd/og_image-7b3f688f-2026-10-13T02-01-00-422Z.webp
- Full-page video: https://media.designdetails.io/library/4c0033c23ad04d128fe70a8fbc74912e378ff739e62d21c975e0f2a2a34d488f/motion-1791857474894.mp4
- Video poster: https://media.designdetails.io/library/32b458d31f98005cc7c919849254cdfbe28823ff1ae9b33da6764d717e9b6c6d/motion-poster-1791857474894.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

- Primary Button
- Icon Button
- Modal Overlay
- Split Card Layout

## Quality rubric

Overall: 42.25/100 (Serviceable)
Evidence coverage: 60%
Judge tier: Serviceable
Verdict: Based on the supplied evidence, almost the entire visual record consists of the same intrusive on-load sweepstakes modal rather than the actual site, making layout and motion impossible to verify and originality clearly low (a stock split-card promo overlay). Typography and color show a competently assembled but unremarkable DTC design system. Until evidence of the dismissed, scrolled, and interacted-with page is available, the site cannot be credited with the coherent, verified system needed for a higher tier.

- Typography (15%): 58 — A consistent, deliberate type system pairs a humanist sans (Mori Gothic) for headlines/body with an uppercase monospace (Trim Mono) for kickers and labels, with controlled negative tracking on large display sizes. This is competent execution of a now-common DTC pairing, but nothing in the sampled sizes/weights suggests an unusual or highly refined type system beyond standard practice.
- Color (10%): 54 — The modal's warm yellow surface against near-black text and autumn photography creates a seasonally coherent, legible palette, and the page uses a dark green accent section elsewhere. However, the palette reads as generic 'warm DTC seasonal' styling, and several sampled colors are simply third-party payment/brand logo colors (PayPal blue, Amex colors, Google multicolor) rather than part of a controlled brand system.
- Layout (20%): Inconclusive — Every supplied crop and recording frame shows the identical sweepstakes modal blocking the underlying page; only font/color metadata hints at the structure of sections further down (hero, feature blocks, testimonials, stats counter, footer). Without visual confirmation of grid alignment, spacing consistency, or section-to-section composition, layout quality across the site cannot be judged.
- Motion (20%): Inconclusive — The motion capture is explicitly static: a single modal view held for ~29 seconds with no scrolling, no interaction, and no transitions. No animation, easing, or scroll-triggered behavior can be confirmed or denied from this evidence.
- Originality (25%): 25 — The only fully observable design artifact is a sweepstakes entry modal using an extremely conventional pattern: dark overlay, rounded split card, product photo on one side, colored text panel with eyebrow/headline/pill CTA on the other. This exact structure appears across countless ecommerce sites and offers no distinctive mechanic, metaphor, or interaction model that would register as original.
- Content (10%): 50 — The modal does connect its promotional copy to a seasonal theme — fall leaves photography, a warm yellow 'fall' surface color, and 'FALL SWEEPSTAKES' copy are thematically aligned — which is a basic but real instance of content and visual design working together. Beyond this single module, integration between on-page content (reviews, stats, founder story) and the visual system cannot be verified from available evidence.

Coverage: 60% 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

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

## Curator notes

A warm yellow panel paired with a close up photo of the robot nestled in autumn leaves sets a cozy, seasonal mood rather than a cold tech look. The large bold headline and dark pill button on bright yellow make the offer easy to spot and act on 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.