# Zoah — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://zoah.com/
Captured: 2026-10-21
CSS measured: 2026-10-21T03:47:37.743Z at 1440×1000 — https://zoah.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

Zoah features a highly minimal, typography-driven design that balances stark monochrome palettes with a highly dynamic, colorful 3D interactive hero element. The layout relies on generous whitespace, clean sans-serif typography, and subtle borders to structure information, primarily utilizing rounded rectangles and pill shapes for components.

## Classification

- Industry: developer-tools
- Site type: Waitlist, Landing
- Business model: Software
- Styles: minimal, typographic, bold, corporate, monochrome-with-vibrant-accents, tech-forward
- Platform: Custom code
- Technology: Not identified

## Typography

- Display: Zalando Sans — weight 700; size 68px; line-height 68px; tracking -1.5px; Regular (95% role confidence, computed values)
- Heading: Zalando Sans — weight 700; size 44px; line-height 44px; tracking -1.3px; Regular (90% role confidence, computed values)
- Body: Zalando Sans — weight 400; size 18px; line-height 23.4px; tracking -0.2px; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #F6F6F5: color-2: computed rgb(246, 246, 245); AI role: #F6F6F5 off-white used as the primary background for the page. (95% role confidence, computed values)
- Text — text #000000: color-4: computed rgb(0, 0, 0); AI role: #000000 black used for primary headings and important text. (95% role confidence, computed values)
- Muted Text — muted text #868685: color-6: computed rgb(134, 134, 133); AI role: #868685 gray used for secondary paragraphs and supporting text. (90% role confidence, computed values)
- Border — border #E4E1D8: color-8: computed rgb(228, 225, 216); AI role: #E4E1D8 light gray used for the subtle borders on feature cards. (90% role confidence, computed values)
- Surface — surface #FFFFFF: color-5: computed rgb(255, 255, 255); AI role: #FFFFFF white used for specific card backgrounds like the agent activity feed. (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": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Builder",
        "top": 8027,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Canvas",
        "top": 8027,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Vector",
        "top": 8027,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "44px",
    "lineHeight": "44px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "Built for software businesses.",
        "top": 5655,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Operators that work continuously to grow your business.",
        "top": 6488,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "What makes Zoah different.",
        "top": 7247,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Our AI harness that makes it easy to design and build software.",
        "top": 5856,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Full manual control when you want it. What you see is what you get.",
        "top": 5856,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Our own development framework, custom built for your apps.",
        "top": 5856,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h4",
        "text": "Full-stack",
        "top": 7499,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Visual-first",
        "top": 7499,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Autonomous",
        "top": 7499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h4",
        "text": "Product",
        "top": 8988,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Resources",
        "top": 8988,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Follow",
        "top": 8988,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "48px",
    "lineHeight": "55.2px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Design your product on the canvas.",
        "top": 1003,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "AI continuously scales it for you.",
        "top": 1003,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "One platform from blank slate to massive scale. Collaboratively design, build, deploy, and support y",
        "top": 7530,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Other platforms are building code-first tools. Zoah takes a visual-first approach, letting you build",
        "top": 7530,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Zoah's agents don't wait for prompts. They work continuously to grow your business, fix issues, and ",
        "top": 7530,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Every part of Zoah was built specifically to make it easy to turn an idea into something real that p",
        "top": 5709,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Operators are long running AI agents that are continuously improving your product and growing your b",
        "top": 6586,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Zoah is a full-stack development platform for designing, building, and deploying software. Collabora",
        "top": 346,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "19px",
    "lineHeight": "24.7px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Start with an idea. Build with a workforce.",
        "top": 8686,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "68px",
    "lineHeight": "68px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "span",
        "text": "Build software",
        "top": 184,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "i",
        "top": 176,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "n",
        "top": 176,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 25,
    "contexts": [
      {
        "tag": "span",
        "text": "Features",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Solutions",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Technologies",
        "top": 22,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14.5px",
    "lineHeight": "20.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Engineer",
        "top": 6761,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "opened a pull request",
        "top": 6761,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Bug Monitor",
        "top": 6813,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "Interfacer",
        "top": 5828,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Canvas",
        "top": 5828,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Operand",
        "top": 5828,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Start building",
        "top": 460,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Operators",
        "top": 6706,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Explore Builder",
        "top": 8138,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "1,247",
        "top": 6689,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "318",
        "top": 6794,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2,094",
        "top": 6899,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "25.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Design",
        "top": 964,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Grow",
        "top": 964,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Start building",
        "top": 8743,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Zalando Sans",
    "fontStack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Operators working",
        "top": 6741,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pull requests merged today",
        "top": 6846,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tickets closed today",
        "top": 6951,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#0B0B0A",
    "alpha": 1,
    "cssValue": "rgb(11, 11, 10)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Design Design your product on the canvas. Build Visually build with AI or manually. Ship Push to pro",
        "top": 538,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Design Design your product on the canvas. Build Visually build with AI or manually. Ship Push to pro",
        "top": 728,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F6F6F5",
    "alpha": 1,
    "cssValue": "rgb(246, 246, 245)",
    "count": 26,
    "contexts": [
      {
        "tag": "body",
        "text": "if (location.pathname.replace(/\\/$/, \"\") || location.hash) { document.documentElement.setAttribute(\"",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Start building",
        "top": 14,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start building",
        "top": 14,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#EFEEEB",
    "alpha": 1,
    "cssValue": "rgb(239, 238, 235)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Coming soon Operators that work continuously to grow your business. Operators are long running AI ag",
        "top": 6344,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 162,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 22,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 22,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Features",
        "top": 22,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 8,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6215,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Operators Engineeropened a pull requestnowBug Monitorfiled a regression in checkout1mCustomer Suppor",
        "top": 6689,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#868685",
    "alpha": 1,
    "cssValue": "rgb(134, 134, 133)",
    "count": 56,
    "contexts": [
      {
        "tag": "p",
        "text": "Zoah is a full-stack development platform for designing, building, and deploying software. Collabora",
        "top": 346,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Teams already signed up for early access",
        "top": 5290,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Operators working",
        "top": 6741,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#8F8F8D",
    "alpha": 1,
    "cssValue": "rgb(143, 143, 141)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Design",
        "top": 964,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#E4E1D8",
    "alpha": 1,
    "cssValue": "rgb(228, 225, 216)",
    "count": 32,
    "contexts": [
      {
        "tag": "section",
        "text": "Teams already signed up for early access",
        "top": 5226,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Canvas Full manual control when you want it. What you see is what you get. @media (prefers-reduced-m",
        "top": 5828,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8027,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 0.03137254901960784,
    "cssValue": "color(srgb 0 0 0 / 0.03)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Teams already signed up for early access",
        "top": 5290,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#F6F6F6",
    "alpha": 0.5490196078431373,
    "cssValue": "color(srgb 0.964706 0.964706 0.960784 / 0.55)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Download for macOS",
        "top": 9049,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#2A2A28",
    "alpha": 1,
    "cssValue": "rgb(42, 42, 40)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1314,
        "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 vertical and horizontal padding, creating distinct, isolated sections that allow the large typography to breathe.
- Corner style: Mixed approach: fully rounded pill shapes for interactive elements, and moderately rounded corners for larger containers.
- Radius: Buttons use maximum border-radius (pill), while feature cards and the expanding hero container use medium to large fixed border-radii.
- Borders: Very subtle, thin 1px solid borders are used to define feature cards and grid items against the canvas without adding visual noise.
- Buttons: Pill-shaped, filled buttons primarily using a dark background with light text to stand out against the light canvas.
- Content width: Content is generally centered within a constrained max-width container, typical of modern SaaS marketing pages.
- Density: Low density. The layout favors large open spaces, large font sizes, and minimal UI clutter to focus attention on key messages and visuals.
- Evidence: Observed via the structural layout of standard DOM elements, spacing between sections like the hero and logo strip, and the consistent styling of buttons and feature cards.

## Sections

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

1. **Hero — Real-time software building hero** (Home)
   AI suggestion (96% confidence): Complete page-opening hero with navigation, a clear value proposition, supporting copy, primary CTA, and a substantial product-design visual.
   Capture: 1440×1533px; page bounds 0–1533px of 6686px; source section ID: `d8b5317f-5167-4e22-8898-ad98d5ffd7fa`; image: https://media.designdetails.io/library/7228ec4ab357feda435ac913fb78e64c72f407e4337f77890088aae418845c34/d8b5317f-5167-4e22-8898-ad98d5ffd7fa.webp
   SECTION.md v3.2: `d8b5317f-5167-4e22-8898-ad98d5ffd7fa` (deterministic evidence; editorial review pending)
2. **Features — Zoah Features** (Home)
   Reusable feature composition from Home, organized around “Zoah Features”.
   Capture: 1440×333px; page bounds 2626–2959px of 6686px; source section ID: `6811faef-4bac-4304-9cfe-6e13feb48618`; image: https://media.designdetails.io/library/52306761536e78d57fcf536fe5febefd1c1210ec28b54add7623516e5b0326c2/section_crop-6811faef-2026-10-21T03-47-47-268Z.webp
   SECTION.md v3.2: `6811faef-4bac-4304-9cfe-6e13feb48618` (deterministic evidence; editorial review pending)
3. **Features — What makes Zoah different.** (Home)
   Reusable feature composition from Home, organized around “What makes Zoah different.”.
   Capture: 1440×659px; page bounds 4504–5163px of 6686px; source section ID: `2e766735-d682-4f21-a23c-31afdeddc88f`; image: https://media.designdetails.io/library/333abc2c717f4e7aeb5a92d7a925178e46c55fed78d63fdbc0897a5a15491198/section_crop-2e766735-2026-10-21T03-47-50-230Z.webp
   SECTION.md v3.2: `2e766735-d682-4f21-a23c-31afdeddc88f` (deterministic evidence; editorial review pending)
4. **Features — Start building your company.** (Home)
   Reusable feature composition from Home, organized around “Start building your company.”.
   Capture: 1440×413px; page bounds 5895–6308px of 6686px; source section ID: `81edc133-c9b7-411b-ae10-535a76f2ec25`; image: https://media.designdetails.io/library/0b19276d905fad03d20b8e7bf0d23e1b2aa875012af8fc21c746525a26aea32f/section_crop-81edc133-2026-10-21T03-47-52-323Z.webp
   SECTION.md v3.2: `81edc133-c9b7-411b-ae10-535a76f2ec25` (deterministic evidence; editorial review pending)
5. **Features — AI-powered scaling showcase** (Home)
   AI suggestion (92% confidence): Self-contained dark feature panel pairing the message “AI continuously scales it for you” with a distinctive iridescent product visual and a clearly bounded ending.
   Capture: 1440×1014px; page bounds 1536–2550px of 6686px; source section ID: `4b2477e5-bf95-44a7-95a2-765f8f000c7a`; image: https://media.designdetails.io/library/941f3bfd69fce71e13fdf43587947748bb20b47db0344c6e8278933099edd974/4b2477e5-bf95-44a7-95a2-765f8f000c7a.webp
   SECTION.md v3.2: `4b2477e5-bf95-44a7-95a2-765f8f000c7a` (deterministic evidence; editorial review pending)
6. **Feature Grid — Built for Software Businesses** (Home)
   AI suggestion (96% confidence): Complete four-column capability grid with a clear heading, supporting introduction, concise feature copy, and coordinated line illustrations.
   Capture: 1440×780px; page bounds 2966–3746px of 6686px; source section ID: `3455be9d-53b1-463d-a515-ff0a8e23c154`; image: https://media.designdetails.io/library/dd3800bcfac7049dea28f8194a89ebc8cb7d1a066264f46bcb1ecdf39a4aba8f/3455be9d-53b1-463d-a515-ff0a8e23c154.webp
   SECTION.md v3.2: `3455be9d-53b1-463d-a515-ff0a8e23c154` (deterministic evidence; editorial review pending)
7. **Stats — Operators That Grow Your Business** (Home)
   AI suggestion (93% confidence): Self-contained product-benefit section pairing prominent live operating metrics with an operator activity dashboard, giving the concept strong visual context.
   Capture: 1440×765px; page bounds 3749–4514px of 6686px; source section ID: `e6580b07-8268-44e6-bf49-b8c062c6e1e5`; image: https://media.designdetails.io/library/39d8092b0f7b5f4cfde98a802aa109d56648ec806536bb535955b0efe45584cd/e6580b07-8268-44e6-bf49-b8c062c6e1e5.webp
   SECTION.md v3.2: `e6580b07-8268-44e6-bf49-b8c062c6e1e5` (deterministic evidence; editorial review pending)
8. **Feature Grid — Build Everything Platform Grid** (Home)
   AI suggestion (98% confidence): Complete six-item platform overview with its label, headline, descriptions, and individual exploration actions in a cohesive bordered grid.
   Capture: 1440×562px; page bounds 5256–5818px of 6686px; source section ID: `383d1b4c-6194-4383-987a-287164897804`; image: https://media.designdetails.io/library/46d8931cefd52c8dceabfcff225aca209276ecffe9a84931555622e9d9b86362/383d1b4c-6194-4383-987a-287164897804.webp
   SECTION.md v3.2: `383d1b4c-6194-4383-987a-287164897804` (deterministic evidence; editorial review pending)
9. **Footer — Zoah Product and Resource Footer** (Home)
   AI suggestion (96% confidence): Complete branded footer with company description, legal details, product links, resources, and social channels visible through the page bottom.
   Capture: 1440×330px; page bounds 6356–6686px of 6686px; source section ID: `64642849-8506-4028-bdaa-43ab2d098f4a`; image: https://media.designdetails.io/library/fb48fe86278b219fcd19d0b06847796c34366c222bb608bdc1c475a68fd59197/64642849-8506-4028-bdaa-43ab2d098f4a.webp
   SECTION.md v3.2: `64642849-8506-4028-bdaa-43ab2d098f4a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/459b5ee16f2ddb5c2cee15dc26e3a5c83ffed6d68457365db9b7c090fb5f5ea0/desktop_full-cd48295e-2026-10-21T03-47-37-782Z.webp
- Mobile screenshot: https://media.designdetails.io/library/7c1acece4bf3cc7b134e7ba5e2e1933bbc4d79f408adcdcb4982507e4a430bef/mobile_full-cd48295e-2026-10-21T03-48-19-260Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/5966f4b8a4f17de6ec4d4760149f70e7ecbf33287be078c8abd3dd6f4e736c09/motion-1792555645049.mp4
- Video poster: https://media.designdetails.io/library/bdc3fd41ca8d07031307b46f659a522198a8cec4242138e8787405c4148d0f83/motion-poster-1792555645049.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
- Primary Button
- Logo Strip
- Feature Card
- Stat Block
- Footer
- Interactive Expanding 3D Viewport
- Live Agent Activity Feed

## Quality rubric

Overall: 60.9/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Zoah executes a clean, typographically disciplined SaaS marketing site whose standout feature is a well-coordinated, bidirectional scroll narrative tying an expanding black viewport, a morphing iridescent sphere, and feature copy together. This motion system is the clear highlight, but the rest of the page — logo marquee, feature cards, stat block, footer — relies on conventional template patterns, and the sphere motif itself echoes a familiar trend in AI/dev-tool branding, which keeps originality and overall craft in the 'good' rather than 'strong' range.

- Typography (15%): 62 — A single family (Zalando Sans) is used across a wide, disciplined weight/size range (68px/44px/20px/18px/14px) with consistent negative tracking, giving a clear hierarchy typical of competent SaaS marketing type. However the system relies entirely on size/weight scaling of one grotesque; there is no optical variation, pairing, or expressive typographic craft that would distinguish it beyond a well-executed but conventional display/body hierarchy.
- Color (10%): 59 — The near-monochrome canvas (off-white #F6F6F5, black text, #868685 muted gray, #E4E1D8 borders) is restrained and consistent, and the vivid, prismatic sphere is used as a deliberate single accent against the neutral field. This is a competent, legible system, but the black-canvas-plus-colorful-gradient-orb formula is a very common contemporary SaaS/AI motif rather than a distinctive palette decision, and outside the sphere the palette offers little additional color interest.
- Layout (20%): 64 — Sections follow a disciplined, centered, generously spaced SaaS template (hero, logo marquee, feature grid, stat block, capability cards, platform grid, footer) with consistent card borders and radii. The expanding black hero container is a genuine structural device tying two sections together. However most of the remaining page is a standard, low-density marketing grid without much structural variation or risk beyond that one device.
- Motion (20%): 67 — Motion is the strongest axis: the hero container's scroll-driven expansion/collapse is mirrored symmetrically on scroll-up, the sphere's morph and color-shift are synchronized with a progress bar and successive feature copy, and the headline text cycles with a transition effect. This is a coordinated, bidirectional scroll narrative spanning multiple moments rather than an isolated gimmick, which elevates it above typical scroll-reveal sites. Claims about easing quality, frame rate, or smoothness cannot be verified from the evidence, keeping this short of 'strong' territory.
- Originality (25%): 52 — The scroll-synced morphing sphere narrative and expanding black viewport show real design effort and some hard-to-substitute choreography, but the core visual language — a fluid iridescent 3D blob tied to 'AI/building' messaging against a black panel — has become a familiar trope among AI/dev-tool marketing sites, and the rest of the page (logo marquee, bordered feature cards, stat counters, agent activity feed, standard footer) is assembled from highly conventional SaaS patterns. The site is well-crafted within a well-worn idiom rather than introducing several hard-to-substitute ideas.
- Content (10%): 65 — Motion is purposefully mapped to content: sphere color/texture changes correspond to the 'Design/Build/Ship/Grow' narrative, the progress bar visualizes scroll position within that story, and the live agent feed/stat counters directly illustrate the product's claimed behavior (autonomous operators). This is a meaningful integration of animation and messaging rather than decorative motion layered on top of 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
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Large black panels with swirling chrome and liquid-glass spheres break up a light grey page, giving each feature its own visual beat as you scroll. A four-column grid of plain line icons and short labels further down keeps dense technical claims easy to scan 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.