# Zaro — Design Reference

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

## Design direction

The website features a clean, technical, and modern aesthetic. It employs a warm off-white canvas with stark contrasting dark text and structural elements, accented by subtle purples and greens. Typography pairs a highly legible geometric sans-serif (Saans) with a monospace font (JetBrains Mono) for technical metadata and labels, reinforcing a developer-centric yet enterprise-ready tone. The layout relies heavily on thin borders, structured grids, and generous negative space to organize complex information logically.

## Classification

- Industry: ai
- Site type: Landing
- Business model: Software
- Styles: minimal, corporate, typographic, technical-swiss
- Platform: Custom code
- Technology: Tailwind CSS, Three.js

## Typography

- Display: Saans — weight 500; size 84px; line-height 84px; tracking -1px; Regular (100% role confidence, computed values)
- Heading: Saans — weight 500; size 56px; line-height 61.6px; tracking -1.1px; Regular (95% role confidence, computed values)
- Body: Saans — weight 400; size 18px; line-height 28.8px; tracking 0.2px; Regular (90% role confidence, computed values)
- Mono: JetBrains Mono — weight 400; size 13.9px; line-height 20.9px; tracking 0.8px; uppercase (100% role confidence, computed values)

## Functional palette

- Canvas — canvas #FAFAF8: color-1: computed rgb(250, 250, 248); AI role: #FAFAF8 used as the primary background color across most of the page. (100% role confidence, computed values)
- Border — border #DAD8CE: color-4: computed rgb(218, 216, 206); AI role: #DAD8CE used extensively for fine grid lines, panel borders, and element separators. (95% role confidence, computed values)
- Text — text #130D0B: color-7: computed rgb(19, 13, 11); AI role: #130D0B used for primary reading text, providing high contrast against the light canvas. (90% role confidence, computed values)
- Primary Action — primary action #201613: color-11: computed rgb(32, 22, 19); AI role: #201613 used as the solid background color for the 'Talk to our team' primary CTA buttons. (90% role confidence, computed values)
- Surface — surface #FFFFFF: color-8: computed rgb(255, 255, 255); AI role: #FFFFFF used for cards, overlapping UI elements, and input simulations to differentiate from the canvas. (85% role confidence, computed values)
- Muted Text — muted text #736761: color-14: computed rgb(115, 103, 97); AI role: #736761 used for secondary descriptive text and metadata. (85% role confidence, computed values)
- Accent — accent #8566EC: color-16: computed rgb(133, 102, 236); AI role: #8566EC (purple) used for graphical highlights, dynamic text effects, and specific UI accents. (80% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "01The data warehouse.",
        "top": 1216,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Solved the numbers.Not the knowledge.",
        "top": 1638,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "02A license for everyone.",
        "top": 1216,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Knowledge Graph",
        "top": 2194,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Stale",
        "top": 2194,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Zaro",
        "top": 2194,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "42px",
    "lineHeight": "44.5px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "A knowledge graph tells you what was true. Zaro tells you what is true.",
        "top": 1934,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Zaro tells you what is true.",
        "top": 1977,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Why is this rep converting at half the team average?",
        "top": 3019,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Follow-up",
        "top": 3112,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "lands",
        "top": 3112,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "A store in the north outperforms its region, and nobody can say why. Zaro joins sales, footfall, pri",
        "top": 6604,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The top rep closes at three times the team average. Zaro reads every call, every email, and every de",
        "top": 6604,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Eight plants each make their own scheduling and sourcing calls. The dashboard is a weekly snapshot, ",
        "top": 6604,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Project 01",
        "top": 4851,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Project 02",
        "top": 4851,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Project 03",
        "top": 4851,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "It made structured data queryable. Most of what your company knows was never in a table.",
        "top": 1697,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The right first move. It gave every person an assistant and the company no shared memory.",
        "top": 1697,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "It reads from a snapshot and never writes back, so it is out of date until someone rebuilds it.",
        "top": 1697,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "29px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "A knowledge graph is built once.",
        "top": 2238,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Zaro updates dynamically.",
        "top": 2238,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14.5px",
    "lineHeight": "23.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Accurate on the day it shipped.",
        "top": 2271,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Updated by the work itself.",
        "top": 2271,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Open any file behind that answer and you can see which version was read and who last changed it. No ",
        "top": 3418,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "One current, attributable account of how your business actually runs, rewritten by the work itself a",
        "top": 513,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "29.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Find the data, clean it, agree what it means, get it past governance. Do that once in Zaro and no pr",
        "top": 4694,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Zaro protects the files, tools, apps, and actions your AI depends on from one shared work layer. Acc",
        "top": 5428,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Your context lives as files that the work itself writes to. Version history is free, updates are ins",
        "top": 2043,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "/meetings/apr-pipeline-review.md",
        "top": 3274,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Platform",
        "top": 7633,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sign in",
        "top": 7665,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Why Zaro",
        "top": 7633,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "li",
        "text": "Convergence",
        "top": 879,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "PolyAI",
        "top": 903,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Salesforce",
        "top": 927,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16.6px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "pipeline-q3.md",
        "top": 2478,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "customer-tiers.yaml",
        "top": 2522,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "objection-playbook.md",
        "top": 2566,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "400",
    "size": "13.9px",
    "lineHeight": "20.9px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Jan 2026",
        "top": 2480,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Jan 2026",
        "top": 2524,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Jan 2026",
        "top": 2568,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "36px",
    "lineHeight": "39.6px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Retail store intelligence.",
        "top": 6357,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Go-to-market intelligence.",
        "top": 6357,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Distributed operations intelligence.",
        "top": 6357,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Fabric",
        "top": 1756,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Snowflake",
        "top": 1756,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Databricks",
        "top": 1756,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Retail",
        "top": 6170,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sales",
        "top": 6170,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Manufacturing",
        "top": 6170,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "72px",
    "lineHeight": "72px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Find",
        "top": 7085,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "out",
        "top": 7085,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "how",
        "top": 7085,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16.5px",
    "lineHeight": "24.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Chat",
        "top": 2919,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sales Call Update",
        "top": 2919,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Salesforce",
        "top": 3219,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Why Zaro",
        "top": 38,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Platform",
        "top": 38,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Perfect Knowledge",
        "top": 38,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "©2026 ZARO. ALL RIGHTS RESERVED.",
        "top": 7936,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "PRIVACY POLICY",
        "top": 7936,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "TERMS AND CONDITIONS",
        "top": 7936,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Product",
        "top": 7598,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Resources",
        "top": 7598,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Support",
        "top": 7598,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "16px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "6 Months Ago",
        "top": 678,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "2 Months Ago",
        "top": 526,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Last Month",
        "top": 374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "84px",
    "lineHeight": "84px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Zaro -",
        "top": 244,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Perfect knowledge",
        "top": 245,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is here.",
        "top": 413,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "9px",
    "lineHeight": "9px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1234,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 1234,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 1234,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "400",
    "size": "8.4px",
    "lineHeight": "10.1px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Permissions",
        "top": 5648,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tool access",
        "top": 5659,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Role scopes",
        "top": 5669,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "60px",
    "lineHeight": "66px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Three things Zaro",
        "top": 5916,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "can do.",
        "top": 5982,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "56px",
    "lineHeight": "61.6px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Governed from the",
        "top": 5281,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "layer where AI works.",
        "top": 5343,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "The first project pays for itself.",
        "top": 4516,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "The fifth is nearly free.",
        "top": 4621,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "You have already bought the AI.",
        "top": 1081,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "It cannot read your business.",
        "top": 1129,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "24.5px",
    "lineHeight": "24.5px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "41%",
        "top": 2407,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "99%",
        "top": 2407,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "20.2px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Still current:",
        "top": 2412,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Still current:",
        "top": 2411,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Saans",
    "fontStack": "Saans, \"Host Grotesk\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "19.4px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Effort per Project",
        "top": 4435,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Value per Unit Effort",
        "top": 4435,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.1px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "BUILT BY THE TEAM FROM",
        "top": 880,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "BACKED BY",
        "top": 880,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "LAST WRITTEN BY",
        "top": 3309,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "WHEN",
        "top": 3323,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FAFAF8",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 248)",
    "count": 55,
    "contexts": [
      {
        "tag": "span",
        "text": "Talk to our team",
        "top": 40,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 41,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 44,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 4471,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 4522,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#4E4840",
    "alpha": 1,
    "cssValue": "rgb(78, 72, 64)",
    "count": 36,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5141,
        "property": "border"
      },
      {
        "tag": "g",
        "text": "",
        "top": 5141,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Access scoperead, call, and change",
        "top": 5225,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#DAD8CE",
    "alpha": 1,
    "cssValue": "rgb(218, 216, 206)",
    "count": 61,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 908,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "You have already bought the AI. It cannot read your business.01The data warehouse.Solved the numbers",
        "top": 1000,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Solved the numbers.Not the knowledge.It made structured data queryable. Most of what your company kn",
        "top": 1614,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#ECEBE5",
    "alpha": 1,
    "cssValue": "rgb(236, 235, 229)",
    "count": 9,
    "contexts": [
      {
        "tag": "body",
        "text": "Cookie preferencesConsentDetails[#IABV2SETTINGS#]AboutThis website uses cookiesWe use necessary cook",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "Knowledge GraphStaleA knowledge graph is built once.Accurate on the day it shipped.Still current:41%",
        "top": 2170,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "ChatSales Call UpdateWhy is this rep converting at half the team average?Follow-up lands outside the",
        "top": 2830,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#292521",
    "alpha": 1,
    "cssValue": "rgb(41, 37, 33)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Now",
        "top": 222,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Security & GovernanceGoverned from thelayer where AI works.Zaro protects the files, tools, apps, and",
        "top": 5046,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Find out how AI-readyyou actually are.Take the 5-minute assessmentTalk to our team",
        "top": 6874,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#130D0B",
    "alpha": 1,
    "cssValue": "rgb(19, 13, 11)",
    "count": 41,
    "contexts": [
      {
        "tag": "p",
        "text": "Solved the numbers.Not the knowledge.",
        "top": 1638,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Still current:",
        "top": 2412,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "",
        "top": 3681,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "Still current:41%pipeline-q3.mdJan 2026customer-tiers.yamlJan 2026objection-playbook.mdJan 2026team-",
        "top": 2361,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Still current:99%pipeline-q3.mdJust nowcustomer-tiers.yaml3s agoobjection-playbook.md6s agoteam-role",
        "top": 2361,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2332,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#60574C",
    "alpha": 1,
    "cssValue": "rgb(96, 87, 76)",
    "count": 5,
    "contexts": [
      {
        "tag": "section",
        "text": "Find out how AI-readyyou actually are.Take the 5-minute assessmentTalk to our team",
        "top": 6874,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "Find out how AI-readyyou actually are.Take the 5-minute assessmentTalk to our team",
        "top": 6874,
        "property": "::after-background"
      },
      {
        "tag": "div",
        "text": "Find out how AI-readyyou actually are.Take the 5-minute assessmentTalk to our team",
        "top": 6875,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#524742",
    "alpha": 1,
    "cssValue": "rgb(82, 71, 66)",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "Why Zaro",
        "top": 38,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 41,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 46,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#201613",
    "alpha": 1,
    "cssValue": "rgb(32, 22, 19)",
    "count": 85,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 34,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 43,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Talk to our teamTalk to our team",
        "top": 30,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.2980392156862745,
    "cssValue": "lab(100 -0.0000298023 0.0000119209 / 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Still current:41%pipeline-q3.mdJan 2026customer-tiers.yamlJan 2026objection-playbook.mdJan 2026team-",
        "top": 2348,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#DCD8FC",
    "alpha": 1,
    "cssValue": "rgb(220, 216, 252)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2524,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "ZaroLiveZaro updates dynamically.Updated by the work itself.Still current:99%pipeline-q3.mdJust nowc",
        "top": 2170,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#736761",
    "alpha": 1,
    "cssValue": "rgb(115, 103, 97)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "One current, attributable account of how your business actually runs, rewritten by the work itself a",
        "top": 513,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 928,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4522,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "lab(100 -0.0000298023 0.0000119209 / 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Still current:41%pipeline-q3.mdJan 2026customer-tiers.yamlJan 2026objection-playbook.mdJan 2026team-",
        "top": 2361,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#8566EC",
    "alpha": 1,
    "cssValue": "rgb(133, 102, 236)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4439,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4531,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4522,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#988F77",
    "alpha": 1,
    "cssValue": "rgb(152, 143, 119)",
    "count": 132,
    "contexts": [
      {
        "tag": "span",
        "text": "BUILT BY THE TEAM FROM",
        "top": 880,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Fabric",
        "top": 1755,
        "property": "border"
      },
      {
        "tag": "h3",
        "text": "Knowledge Graph",
        "top": 2194,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FAFAF8",
    "alpha": 0.6,
    "cssValue": "lab(98.2302 -0.26083 0.961208 / 0.6)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "layer where AI works.",
        "top": 5343,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Zaro protects the files, tools, apps, and actions your AI depends on from one shared work layer. Acc",
        "top": 5428,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#F9F9F8",
    "alpha": 0.7019607843137254,
    "cssValue": "lab(98.2302 -0.26083 0.961208 / 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "you",
        "top": 7157,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F7F6F5",
    "alpha": 1,
    "cssValue": "rgb(247, 246, 245)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Why is this rep converting at half the team average?",
        "top": 3019,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#EBEBE5",
    "alpha": 0.5019607843137255,
    "cssValue": "lab(93.001 -0.434637 3.04389 / 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Salesforce",
        "top": 3211,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#746A5A",
    "alpha": 1,
    "cssValue": "rgb(116, 106, 90)",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Fabric",
        "top": 1756,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Knowledge Graph",
        "top": 2194,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#A3D7DE",
    "alpha": 1,
    "cssValue": "rgb(163, 215, 222)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2568,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Explore Security",
        "top": 5549,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "oklab(0 0 0 / 0.05)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "ChatSales Call UpdateWhy is this rep converting at half the team average?Follow-up lands outside the",
        "top": 2894,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#93908B",
    "alpha": 1,
    "cssValue": "rgb(147, 144, 139)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2924,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Chat",
        "top": 2919,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#282522",
    "alpha": 0.3215686274509804,
    "cssValue": "color(srgb 0.160784 0.145098 0.129412 / 0.32)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "6 Months Ago",
        "top": 678,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#BDB4F8",
    "alpha": 1,
    "cssValue": "rgb(189, 180, 248)",
    "count": 30,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 458,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "99%",
        "top": 2407,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#ECEAFD",
    "alpha": 1,
    "cssValue": "rgb(236, 234, 253)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "99%",
        "top": 2402,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#F0EDEA",
    "alpha": 1,
    "cssValue": "rgb(240, 237, 234)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "01 Manage",
        "top": 5198,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#1D1414",
    "alpha": 0.10196078431372549,
    "cssValue": "lab(8.4466 4.81391 3.93579 / 0.1)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 860,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "BACKED BYCherryHugging Face",
        "top": 860,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#201614",
    "alpha": 0.5019607843137255,
    "cssValue": "lab(8.4466 4.81391 3.93579 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Sources:",
        "top": 3182,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#E4DFD9",
    "alpha": 1,
    "cssValue": "rgb(228, 223, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "read, call, and change",
        "top": 5248,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#A392F3",
    "alpha": 1,
    "cssValue": "rgb(163, 146, 243)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6171,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#CAE8CD",
    "alpha": 1,
    "cssValue": "rgb(202, 232, 205)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2480,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#8F827A",
    "alpha": 1,
    "cssValue": "rgb(143, 130, 122)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "See how it works",
        "top": 623,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#C2BFAF",
    "alpha": 1,
    "cssValue": "rgb(194, 191, 175)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "Talk to our team",
        "top": 7277,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#294550",
    "alpha": 1,
    "cssValue": "rgb(41, 69, 80)",
    "count": 4,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2572,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2574,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#234428",
    "alpha": 1,
    "cssValue": "rgb(35, 68, 40)",
    "count": 6,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2484,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2488,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#45248E",
    "alpha": 1,
    "cssValue": "rgb(69, 36, 142)",
    "count": 6,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2528,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2531,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#DBF0F2",
    "alpha": 1,
    "cssValue": "rgb(219, 240, 242)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3222,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#FF6A1A",
    "alpha": 1,
    "cssValue": "rgb(255, 106, 26)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2199,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2199,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#77BE7F",
    "alpha": 1,
    "cssValue": "rgb(119, 190, 127)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2199,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous macro-spacing between major thematic sections with tight, structured micro-spacing within data-heavy UI cards and comparison panels.
- Corner style: Sharp corners on primary buttons and structural borders, with subtle border-radii applied to inner UI components like simulated chat bubbles and source tags.
- Radius: Mixed: 0px for layout framing and primary buttons, small radii (approx 4-8px) for internal UI cards and badges.
- Borders: Extensive use of 1px solid borders (#DAD8CE) to delineate sections, create pseudo-grid layouts, and contain comparison panels.
- Buttons: Solid dark rectangles with sharp corners, light text, and no drop shadows for primary actions; outlined variants for secondary actions.
- Content width: Centered, constrained max-width layout that maintains legibility on large desktop viewports.
- Density: Low overall density characterized by ample white space, contrasted by higher density 'pockets' within simulated product UI graphics.
- Evidence: DOM analysis confirms use of #DAD8CE borders (61 instances), sharp rectangular button properties, and distinct groupings of typography for layout structure.

## Sections

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

1. **Hero — Perfect knowledge is here** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with brand navigation, bold value proposition, supporting copy, dual CTAs, distinctive layered knowledge visualization, and an integrated trust-logo strip.
   Capture: 1440×999px; page bounds 0–999px of 8018px; source section ID: `3b226155-5b28-4f7e-a56e-6236410bfdbc`; image: https://media.designdetails.io/library/57af0ecbbb1235287aebc6f04411bc41ff082187b0da02cbb5af70aaba32cb29/3b226155-5b28-4f7e-a56e-6236410bfdbc.webp
   SECTION.md v3.2: `3b226155-5b28-4f7e-a56e-6236410bfdbc` (deterministic evidence; editorial review pending)
2. **Features — A knowledge graph tells you what was true. Zaro tells you what is true.** (Home)
   Reusable feature composition from Home, organized around “A knowledge graph tells you what was true. Zaro tells you what is true.”.
   Capture: 1440×1764px; page bounds 1854–3618px of 8018px; source section ID: `728ccb88-f2e8-402a-a908-259f19097e4e`; image: https://media.designdetails.io/library/1ce4ff42080dff4422ef0aef8533bfa67c17d570e4a90d0e05164881febac1ca/section_crop-728ccb88-2026-10-16T21-22-23-439Z.webp
   SECTION.md v3.2: `728ccb88-f2e8-402a-a908-259f19097e4e` (deterministic evidence; editorial review pending)
3. **Product Demo — Product demo** (Home)
   Product Demo composition from Home, organized around “Product demo”.
   Capture: 1440×715px; page bounds 3617–4332px of 8018px; source section ID: `bff55f34-e5f7-4b83-bc7b-dab926831c35`; image: https://media.designdetails.io/library/ee2ce317794fedc5a2a36b7b1b846008fd61b3d572b8f19c3289053990c9d020/section-manual-bff55f34-e5f7-4b83-bc7b-dab926831c35-1792188668893.webp
   SECTION.md v3.2: `bff55f34-e5f7-4b83-bc7b-dab926831c35` (deterministic evidence; editorial review pending)
4. **Features — The first project pays for itself. The fifth is nearly free.** (Home)
   Reusable feature composition from Home, organized around “The first project pays for itself. The fifth is nearly free.”.
   Capture: 1440×636px; page bounds 4331–4967px of 8018px; source section ID: `e4d8776b-5ce2-4ccc-8bc5-5ecaf51080f5`; image: https://media.designdetails.io/library/fb7971e83334f5b4eeb2015e2f5077f8478e69b403e5097977eb3c5dbe0b1791/section_crop-e4d8776b-2026-10-16T21-22-25-401Z.webp
   SECTION.md v3.2: `e4d8776b-5ce2-4ccc-8bc5-5ecaf51080f5` (deterministic evidence; editorial review pending)
5. **Features — Governed from the layer where AI works.** (Home)
   Reusable feature composition from Home, organized around “Governed from the layer where AI works.”.
   Capture: 1440×871px; page bounds 4966–5837px of 8018px; source section ID: `49963f06-e076-4db8-a51f-d5fc417fac67`; image: https://media.designdetails.io/library/090ec58602a4a3b21e8d4c7ba391d409c305b75b74eeabaadd73108ef755fc98/section_crop-49963f06-2026-10-16T21-22-26-348Z.webp
   SECTION.md v3.2: `49963f06-e076-4db8-a51f-d5fc417fac67` (deterministic evidence; editorial review pending)
6. **Blog — Three things Zaro can do.** (Home)
   Blog composition from Home, organized around “Three things Zaro can do.”.
   Capture: 1440×1039px; page bounds 5836–6875px of 8018px; source section ID: `c8e800c2-78ae-41df-a13f-4aa07fbaada4`; image: https://media.designdetails.io/library/d0bc7c632e03721316f61d5552b7072bdbf1d884ac74cfb98260b8bbd9f296fc/section_crop-c8e800c2-2026-10-16T21-22-27-260Z.webp
   SECTION.md v3.2: `c8e800c2-78ae-41df-a13f-4aa07fbaada4` (deterministic evidence; editorial review pending)
7. **Feature Grid — Why existing AI cannot read your business** (Home)
   AI suggestion (97% confidence): Complete three-card comparison grid explaining limitations of the data warehouse, per-user AI licenses, and static knowledge graphs; includes its heading, imagery, supporting text, and product tags.
   Capture: 1440×828px; page bounds 1032–1860px of 8018px; source section ID: `14adc3e9-ee12-43c1-a2ef-c123089223ed`; image: https://media.designdetails.io/library/6465e940310fd3f5b898474701bb92b24ac1b39cb6165307953152b51a02df0a/14adc3e9-ee12-43c1-a2ef-c123089223ed.webp
   SECTION.md v3.2: `14adc3e9-ee12-43c1-a2ef-c123089223ed` (deterministic evidence; editorial review pending)
8. **CTA — AI-Readiness Assessment CTA** (Home)
   AI suggestion (98% confidence): Complete dark conversion panel with a prominent AI-readiness message, two clear actions, and distinctive dotted globe graphics.
   Capture: 1440×667px; page bounds 6880–7547px of 8018px; source section ID: `723c3e98-ffe4-4fcb-bcc5-dc416c12684f`; image: https://media.designdetails.io/library/c9b15429c5bb9047228fdf06e24a12c6f3f1cee2a2464254512f72a8595fdd61/723c3e98-ffe4-4fcb-bcc5-dc416c12684f.webp
   SECTION.md v3.2: `723c3e98-ffe4-4fcb-bcc5-dc416c12684f` (deterministic evidence; editorial review pending)
9. **Footer — Zaro Link-Rich Footer** (Home)
   AI suggestion (99% confidence): Complete substantial footer with brand mark, organized navigation columns, contact links, copyright, and legal utility links.
   Capture: 1440×471px; page bounds 7547–8018px of 8018px; source section ID: `c0d8dea1-6b41-45a8-bbf8-846f193451ea`; image: https://media.designdetails.io/library/5ad4b74301ddffbc881faf09853be7f050f71f87f55dc292f32f6433bc550f51/c0d8dea1-6b41-45a8-bbf8-846f193451ea.webp
   SECTION.md v3.2: `c0d8dea1-6b41-45a8-bbf8-846f193451ea` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/fd8f52e65b103b189f4f6acf731dcc3c3ad8b7bfd7b086e5b63dd73ef2428e06/desktop_full-46180e67-2026-10-16T21-22-13-079Z.webp
- Mobile screenshot: https://media.designdetails.io/library/857a2d3886978f75d5b11a9eb453dc02c22271ed6fd0453d947ccd5d784e802e/mobile_full-46180e67-2026-10-16T21-22-50-568Z.webp
- Open Graph image: https://media.designdetails.io/library/116010b6d83886875bb05a55e52e49148e6963ef0d2e9a23baaf1f1778e2d361/og_image-46180e67-2026-10-16T21-22-20-597Z.webp
- Full-page video: https://media.designdetails.io/library/4ea2c230c678f21ccf5da672b5955812c7a38996d7acdd5b23acd0119dc65359/motion-1792187707957.mp4
- Video poster: https://media.designdetails.io/library/865f147f2cbb827bf3804151b49d9369b72547e2135c894dfe12e0dd5885c85e/motion-poster-1792187707957.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Feature Card
- Chat Widget
- Tag
- Footer
- Side By Side Comparison Panel
- Inline Citation Pills

## Quality rubric

Overall: 61.8/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Zaro's marketing site is a competently executed, content-aware technical-SaaS design: a clean Saans/JetBrains Mono system, a disciplined warm palette, and a few well-conceived devices (the stale-vs-live comparison panel, the scramble-to-clear text effect, the particle padlock) that are genuinely tied to the product's 'perfect knowledge' narrative. It falls short of 'strong' or higher because most of its layout and motion vocabulary—fade-up cards, self-drawing lines, numbered feature panels—matches a widely used genre template for AI/data-platform marketing sites rather than building a fully differentiated system, and the handful of original ideas remain isolated moments rather than a page-wide motif.

- Typography (15%): 64 — A clear two-family system (Saans for display/body, JetBrains Mono for metadata/labels) is applied consistently from the 84px hero down through 56/48/42/36px section heads to 18px/14px body copy, giving a legible, well-ordered hierarchy appropriate to a technical/enterprise tone. However the scale relies on many one-off sizes (18px, 18.5px, 20.2px, 24.5px, 16.6px, etc.) rather than a tightly disciplined modular scale, and the pairing itself (geometric sans + mono) is now a common SaaS convention rather than a distinctive typographic voice.
- Color (10%): 65 — The palette is restrained and purposeful: warm off-white canvas (#FAFAF8), near-black ink (#130D0B) and near-black CTA/footer blocks (#201613/#292521), a single lavender accent (#8566EC) plus small decorative greens/teals/oranges confined to data-visualization chips. Borders consistently use one muted tone (#DAD8CE, 61 instances), giving cohesion. The accent and secondary hues (teal #A3D7DE, green #CAE8CD, orange #FF6A1A) function mainly as small highlight/status dots rather than a developed secondary system, limiting the palette's expressive range.
- Layout (20%): 64 — The page follows a coherent compositional logic: bordered grid panels, numbered feature cards, a side-by-side 'stale vs live' comparison panel, a simulated chat interface with citation pills, a dark governance block, and a three-card use-case grid before the footer CTA. The comparison panel is a genuinely useful structural device for the product narrative. Spacing is generous at the macro level and denser within UI-mockup 'pockets,' which reads as intentional. That said, the overall sequence of hero → logo strip → feature cards → comparison → chat → stats → use cases → CTA is a fairly standard enterprise-SaaS template or scaffolding rather than a layout that breaks new structural ground.
- Motion (20%): 58 — Gemini's observation describes mostly standard scroll-triggered fade/slide-up reveals for cards and sections, plus line-graph draw-ins. The one distinctive idea is the character-scramble-to-legible-text effect ('wransfor& y$ur c$mp<&y' → 'Transform your company'), which ties motion directly to the 'perfect knowledge from chaos' message and reportedly reverses on scroll-up. This single conceit is a nice content-motivated moment, but the rest of the motion vocabulary (fade-up cards, self-drawing lines, a faint background shift in the footer) is conventional and does not establish a differentiated system across the whole page. No evidence is given about easing quality, frame smoothness, or interactive (non-scroll) motion.
- Originality (25%): 58 — The site includes a few genuinely conceived devices — the stale-vs-live knowledge-graph comparison panel with matching live timestamps, the isometric data cube with a vertical 'Now/Last month/6 months ago' timeline, the pixel-built padlock graphic for governance, and the scramble-to-clear text motif — which show real conceptual effort tied to the product's 'perfect knowledge' pitch. However, the overall visual language (warm off-white canvas, thin #DAD8CE borders, mono-labeled metadata, dark CTA/footer blocks, numbered feature cards) closely matches an now-common 'technical Swiss SaaS' template seen across many AI/data-platform marketing sites, so the site is executing a familiar genre well rather than introducing a hard-to-substitute visual idea of its own.
- Content (10%): 68 — Copy and visuals are tightly coupled throughout: the stale/live comparison panel visually proves the written claim about data freshness with matching percentages and timestamps; the chat-interface mockup shows a real query with cited sources (Salesforce, Slack, Granola, Gmail, Files) that reinforces the 'attributable' messaging; the padlock-from-particles graphic sits directly beside the governance copy; and the scramble-to-clear text motif literalizes the 'transform your company' line. This is a strong, purposeful integration of content and visual system rather than decorative imagery bolted onto generic copy.

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

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

## Verification checklist

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

## Curator notes

A floating isometric cube of coloured dots turns an abstract data idea into a tangible object, while bold black headlines over an off-white background keep the heavy subject matter easy to read. Three-column photo cards and dark chat-style mockups break the long scroll into clear chapters, and small file names and version tags add a sense of proof.

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