# Hero with 3D sphere card

Schema: Design Details SECTION.md v3.2
Website: Zoah
Source: https://zoah.com/
Source section IDs: d8b5317f-5167-4e22-8898-ad98d5ffd7fa
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: hero
- Layout: Top navigation above centered headline, followed by a large full-width embedded dark card.
- Styles: minimal, bold
- Confidence: 95%

## Purpose and structure

A clean hero section featuring a top navigation bar, large centered typography that animates, and a dark card containing a 3D animated sphere that expands on scroll.

Visual signature: Large animated typography leading into a high-contrast dark card with a metallic 3D orb.

## Components

- navbar
- headline
- dark-card
- 3d-graphic
- button

## Typography

- Display: Zalando Sans — 68px 700
- Heading: Zalando Sans — 44px 700
- Body: Zalando Sans — 18px 400

## Functional palette

- Canvas: canvas #F6F6F5
- Text: text #000000
- Muted-Text: muted text #868685
- Border: border #E4E1D8
- Surface: surface #FFFFFF

## Motion evidence

- 1.0–6.0s — The page scrolls down, and a section with a black background and a large 3D sphere expands to fill the viewport and becomes sticky. (95% confidence)
- 57.0–61.0s — As the user scrolls back to the very top, the large headline text animates, dissolving and replacing specific words. (85% confidence)

## Section quality

Overall: 64.70/100 (Good)
Scored coverage: 100%

- Typography: 65 — Large 68px bold display headline with tight negative tracking (-1.5px) creates clear hierarchy against muted 18px body copy; contrast between headline weight and gray subtext is handled with restraint, but the pairing itself (bold grotesque + muted gray paragraph) is a familiar SaaS pattern without distinctive typographic personality. Next tier: No unusual type treatment (scale contrast, mixed styles, unexpected rhythm) beyond standard big-headline-over-muted-subhead convention.
- Composition: 68 — Centered nav, headline, and CTA funnel cleanly into a full-width dark card that breaks the light canvas rhythm, with a large orb bleeding off the card edges for scale tension; generous spacing and a progress-tab row beneath give the card internal structure and purpose. Next tier: The headline-over-card stacking is a recognizable layout; nothing in the composition (asymmetry, unexpected grid break, layered depth) pushes past a polished but conventional SaaS hero structure.
- Motion: 68 — Gemini confirms specific timestamped behavior: sphere expands to fill viewport and goes sticky on scroll (1-6s), and headline text dissolves/replaces words on scroll-back (57-61s), indicating a scroll-driven sticky reveal with orb scaling and text morphing. Next tier: Motion is a single well-executed scroll-driven expansion/text-swap; it lacks additional layered or secondary motion detail that would elevate it beyond a now-common sticky-hero expand pattern.
- Content: 62 — Headline, subtext, CTA, and card label/progress-tabs are integrated with clear narrative sequence (claim, explanation, proof via product visual), and the orb anchors a labeled feature ('Design your product on the canvas') tying content to visual. Next tier: Content integration is functional and legible but does not demonstrate unusually tight visual-to-copy binding beyond standard label+headline+imagery convention.
- Originality: 64 — The metallic swirling 3D orb inside a dark expanding card is a somewhat distinctive asset-driven idea, giving the hero a memorable focal visual beyond typical screenshots or illustrations. Next tier: The orb-in-dark-card-with-sticky-expand pattern closely resembles a now-common 'AI/3D hero orb' trend seen across many SaaS sites; it doesn't introduce a structurally novel section idea.
- Adaptability: 60 — Deterministic tokens (pill buttons, radius values, spacing, canvas/text/border colors) are cleanly separable from structure (nav + headline + full-width card + progress tabs), and the orb/canvas element is isolated as its own media component. Next tier: Reliance on a bespoke WebGL/canvas 3D orb and its scroll-tied sticky behavior ties much of the section's identity to a non-trivial proprietary asset, limiting clean skin-swap without reproducing that specific effect.

Strengths:
- Clear scale contrast between oversized headline and compact nav/CTA creates immediate focus
- Full-width dark card breaking the light canvas gives the hero a strong focal anchor
- Scroll-driven sticky expansion of the 3D orb adds a dynamic, confirmed motion moment
- Clean pill-button and card radius vocabulary applied consistently

Weaknesses:
- Headline-subhead-CTA-card structure is a very common SaaS hero template
- Orb-in-dark-card visual is part of a now-widespread 3D hero trend
- Typography pairing (bold display + muted gray body) lacks distinctive personality
- Content integration between label/progress tabs and card is functional but conventional

Why it does not reach the next tier: The section is a well-executed, low-density hero with a confirmed sticky-scroll 3D centerpiece, but every element—headline scale, card break, orb visual, pill buttons—follows now-common SaaS hero conventions rather than introducing a structurally novel or surprising idea, capping it in the strong-but-familiar range rather than exceptional.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the layout skeleton and card-break composition freely; the 3D orb and its scroll-tied animation require either licensing/building a comparable WebGL asset or substituting a simpler static or video-based focal visual with similar scale contrast.

What transfers:
- Centered nav + oversized headline + subtext + CTA stack
- Full-width dark card breaking canvas color for a focal visual
- Progress-tab row beneath the card for sectioned narrative
- Pill-shaped button styling

Dependencies:
- Custom 3D/WebGL orb asset and its scroll-tied sticky expansion behavior
- Scroll-triggered headline text dissolve/replace animation

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No explicit animation easing, duration, or transform values supplied for the orb or headline text motion
- Cannot verify exact color grading or shader behavior of the orb beyond static screenshot
- Site-level comparison is out of scope; section judged independently

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: hero
- Source type: hero
- Structure: centered single-column
- Layout: Top navigation above centered headline, followed by a large full-width embedded dark card.
- Styles: minimal, bold
- Components: navbar, headline, dark-card, 3d-graphic, button
- Purpose: A clean hero section featuring a top navigation bar, large centered typography that animates, and a dark card containing a 3D animated sphere that expands on scroll.
- Visual signature: Large animated typography leading into a high-contrast dark card with a metallic 3D orb.

### Crop and composition

- Crop: 1440×1533px; aspect ratio 0.939:1
- Page bounds: 0–1533px of 6686px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "48px",
      "weight": "700",
      "lineHeight": "55.2px",
      "letterSpacing": "-1.4px",
      "sample": "Design your product on the canvas.",
      "element": "h3",
      "occurrences": 2,
      "sourceId": "font-6"
    },
    {
      "role": "card/subheading",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "20px",
      "weight": "400",
      "lineHeight": "26px",
      "letterSpacing": "-0.2px",
      "sample": "Zoah is a full-stack development platform for designing, building, and deploying software. Collabora",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-9"
    },
    {
      "role": "section heading",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "68px",
      "weight": "700",
      "lineHeight": "68px",
      "letterSpacing": "-1.5px",
      "sample": "Build software",
      "element": "span",
      "occurrences": 26,
      "sourceId": "font-11"
    },
    {
      "role": "UI/supporting text",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "14px",
      "weight": "400",
      "lineHeight": "19.6px",
      "letterSpacing": "normal",
      "sample": "Features",
      "element": "span",
      "occurrences": 25,
      "sourceId": "font-12"
    },
    {
      "role": "UI/supporting text",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "16px",
      "weight": "400",
      "lineHeight": "22.4px",
      "letterSpacing": "normal",
      "sample": "Start building",
      "element": "a",
      "occurrences": 8,
      "sourceId": "font-15"
    },
    {
      "role": "UI/supporting text",
      "family": "Zalando Sans",
      "stack": "\"Zalando Sans\", Helvetica, Arial, sans-serif",
      "size": "18px",
      "weight": "400",
      "lineHeight": "25.2px",
      "letterSpacing": "normal",
      "sample": "Design",
      "element": "div",
      "occurrences": 3,
      "sourceId": "font-17"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "68px",
      "family": "Zalando Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "700",
      "evidence": "font-11: computed CSS at 1440×1000; AI role: 68px Zalando Sans, bold, used for the main dynamic hero headline.",
      "sampleId": "font-11",
      "confidence": 0.95,
      "lineHeight": "68px",
      "letterSpacing": "-1.5px"
    },
    {
      "role": "heading",
      "size": "44px",
      "family": "Zalando Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "700",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 44px Zalando Sans, bold, used for major section titles.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "44px",
      "letterSpacing": "-1.3px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "Zalando Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 18px Zalando Sans, regular, used for introductory paragraph text.",
      "sampleId": "font-8",
      "confidence": 0.85,
      "lineHeight": "23.4px",
      "letterSpacing": "-0.2px"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#0B0B0A",
      "cssValue": "rgb(11, 11, 10)",
      "alpha": 1,
      "appliedAs": [
        "::before-background",
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-1"
    },
    {
      "value": "#F6F6F5",
      "cssValue": "rgb(246, 246, 245)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text",
        "::after-background"
      ],
      "occurrences": 26,
      "sourceId": "color-2"
    },
    {
      "value": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "text"
      ],
      "occurrences": 162,
      "sourceId": "color-4"
    },
    {
      "value": "#868685",
      "cssValue": "rgb(134, 134, 133)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 56,
      "sourceId": "color-6"
    },
    {
      "value": "#8F8F8D",
      "cssValue": "rgb(143, 143, 141)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 2,
      "sourceId": "color-7"
    },
    {
      "value": "#2A2A28",
      "cssValue": "rgb(42, 42, 40)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 4,
      "sourceId": "color-11"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#F6F6F5",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(246, 246, 245); AI role: #F6F6F5 off-white used as the primary background for the page.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(0, 0, 0); AI role: #000000 black used for primary headings and important text.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#868685",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-6: computed rgb(134, 134, 133); AI role: #868685 gray used for secondary paragraphs and supporting text.",
      "sampleId": "color-6",
      "confidence": 0.9
    },
    {
      "hex": "#E4E1D8",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-8: computed rgb(228, 225, 216); AI role: #E4E1D8 light gray used for the subtle borders on feature cards.",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(255, 255, 255); AI role: #FFFFFF white used for specific card backgrounds like the agent activity feed.",
      "sampleId": "color-5",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons use maximum border-radius (pill), while feature cards and the expanding hero container use medium to large fixed border-radii.",
  "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.",
  "borderStyle": "Very subtle, thin 1px solid borders are used to define feature cards and grid items against the canvas without adding visual noise.",
  "buttonStyle": "Pill-shaped, filled buttons primarily using a dark background with light text to stand out against the light canvas.",
  "cornerStyle": "Mixed approach: fully rounded pill shapes for interactive elements, and moderately rounded corners for larger containers.",
  "contentWidth": "Content is generally centered within a constrained max-width container, typical of modern SaaS marketing pages.",
  "spacingRhythm": "Generous vertical and horizontal padding, creating distinct, isolated sections that allow the large typography to breathe."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1037×620px; grid; padding {"top":"56px","left":"72px","right":"72px","bottom":"56px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 6, 14, 16, 38px.
- Representative content widths: 1100, 1037, 893, 820, 700, 556, 439, 429px.
- Layout containers: 3; cards/surfaces: 0; media elements: 2; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 1533,
      "pageHeight": 6686
    }
  },
  "container": {
    "size": "1037×620px",
    "position": "x 202px, y 728px",
    "display": "grid",
    "positionMode": "absolute",
    "padding": {
      "top": "56px",
      "left": "72px",
      "right": "72px",
      "bottom": "56px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "892.797px",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      6,
      14,
      16,
      38
    ],
    "representativeContentWidthsPx": [
      1100,
      1037,
      893,
      820,
      700,
      556,
      439,
      429
    ]
  },
  "columns": [
    {
      "element": "div · Design Design your product on the canvas.",
      "size": "1037×620px",
      "position": "x 202px, y 728px",
      "display": "grid",
      "template": "892.797px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · scroll-progress",
      "size": "893×2px",
      "position": "x 274px, y 1314px",
      "display": "grid",
      "template": "211.188px 211.203px 211.203px 211.203px",
      "direction": "row",
      "gap": "16px"
    },
    {
      "element": "nav · Features Builder Build your product visually, with AI grounded by your brand. Canvas Design real com",
      "size": "556×20px",
      "position": "x 442px, y 22px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "38px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "60px",
      "50%",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.25) 0px 10px 30px 0px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "canvas · hg scroll-orb",
    "size": "1100×1100px",
    "position": "x 314px, y 948px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "50%",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "90×21px",
    "position": "x 20px, y 22px",
    "aspectRatio": 4.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-452",
    "gap": "normal",
    "tag": "div",
    "rect": {
      "x": 202,
      "y": 728,
      "width": 1037,
      "height": 620
    },
    "role": "group",
    "label": "Design Design your product on the canvas.",
    "border": "0px none rgb(0, 0, 0)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": "892.797px",
    "display": "grid",
    "padding": {
      "top": "56px",
      "left": "72px",
      "right": "72px",
      "bottom": "56px"
    },
    "overflow": "visible",
    "position": "absolute",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-450",
      "tag": "canvas",
      "rect": {
        "x": 314,
        "y": 948,
        "width": 1100,
        "height": 1100
      },
      "role": null,
      "label": "hg scroll-orb",
      "media": null,
      "radius": "50%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-15",
      "tag": "svg",
      "rect": {
        "x": 20,
        "y": 22,
        "width": 90,
        "height": 21
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 4.3,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 1533,
    "pageHeight": 6686
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-452",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 202,
        "y": 728,
        "width": 1037,
        "height": 620
      },
      "role": "group",
      "label": "Design Design your product on the canvas.",
      "columns": "892.797px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-468",
      "gap": "16px",
      "tag": "div",
      "rect": {
        "x": 274,
        "y": 1314,
        "width": 893,
        "height": 2
      },
      "role": "tablist",
      "label": "scroll-progress",
      "columns": "211.188px 211.203px 211.203px 211.203px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-22",
      "gap": "38px",
      "tag": "nav",
      "rect": {
        "x": 442,
        "y": 22,
        "width": 556,
        "height": 20
      },
      "role": null,
      "label": "Features Builder Build your product visually, with AI grounded by your brand. Canvas Design real com",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      14,
      16,
      38
    ],
    "representativeContentWidthsPx": [
      1100,
      1037,
      893,
      820,
      700,
      556,
      439,
      429
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 2,
    "animations": 0,
    "elementsInSection": 40
  },
  "surfaces": {
    "radii": [
      "60px",
      "50%",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.25) 0px 10px 30px 0px"
    ]
  },
  "animations": [],
  "capturedAt": "2026-10-21T03:47:41.717Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — The page scrolls down, and a section with a black background and a large 3D sphere expands to fill the viewport and becomes sticky. (1s–6s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **scroll** — As the user scrolls back to the very top, the large headline text animates, dissolving and replacing specific words. (57s–61s; 85% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Centered nav + oversized headline + subtext + CTA stack; Full-width dark card breaking canvas color for a focal visual; Progress-tab row beneath the card for sectioned narrative; Pill-shaped button styling
- Dependencies: Custom 3D/WebGL orb asset and its scroll-tied sticky expansion behavior; Scroll-triggered headline text dissolve/replace animation
- Guidance: Reuse the layout skeleton and card-break composition freely; the 3D orb and its scroll-tied animation require either licensing/building a comparable WebGL asset or substituting a simpler static or video-based focal visual with similar scale contrast.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Hero with 3D sphere card”.

Purpose: A clean hero section featuring a top navigation bar, large centered typography that animates, and a dark card containing a 3D animated sphere that expands on scroll.

Structure: centered single-column. Source layout label: Top navigation above centered headline, followed by a large full-width embedded dark card.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Large animated typography leading into a high-contrast dark card with a metallic 3D orb.

Components: navbar, headline, dark-card, 3d-graphic, button.

Style direction: minimal, bold.

Observed crop: 1440×1533px (0.939:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"68px","family":"Zalando Sans","source":"computed","traits":"Regular","weight":"700","evidence":"font-11: computed CSS at 1440×1000; AI role: 68px Zalando Sans, bold, used for the main dynamic hero headline.","sampleId":"font-11","confidence":0.95,"lineHeight":"68px","letterSpacing":"-1.5px"} {"role":"heading","size":"44px","family":"Zalando Sans","source":"computed","traits":"Regular","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: 44px Zalando Sans, bold, used for major section titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"44px","letterSpacing":"-1.3px"} {"role":"body","size":"18px","family":"Zalando Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: 18px Zalando Sans, regular, used for introductory paragraph text.","sampleId":"font-8","confidence":0.85,"lineHeight":"23.4px","letterSpacing":"-0.2px"}

Color evidence: {"hex":"#F6F6F5","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(246, 246, 245); AI role: #F6F6F5 off-white used as the primary background for the page.","sampleId":"color-2","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: #000000 black used for primary headings and important text.","sampleId":"color-4","confidence":0.95} {"hex":"#868685","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(134, 134, 133); AI role: #868685 gray used for secondary paragraphs and supporting text.","sampleId":"color-6","confidence":0.9} {"hex":"#E4E1D8","name":"border","role":"border","source":"computed","evidence":"color-8: computed rgb(228, 225, 216); AI role: #E4E1D8 light gray used for the subtle borders on feature cards.","sampleId":"color-8","confidence":0.9} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: #FFFFFF white used for specific card backgrounds like the agent activity feed.","sampleId":"color-5","confidence":0.85}

Typography measured inside this section: {"id":"font-6","size":"48px","count":2,"family":"Zalando Sans","traits":"Regular","weight":"700","contexts":[{"tag":"h3","top":1003,"text":"Design your product on the canvas.","property":"font"},{"tag":"h3","top":1003,"text":"AI continuously scales it for you.","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"55.2px","letterSpacing":"-1.4px"} {"id":"font-9","size":"20px","count":1,"family":"Zalando Sans","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":346,"text":"Zoah is a full-stack development platform for designing, building, and deploying software. Collabora","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"26px","letterSpacing":"-0.2px"} {"id":"font-11","size":"68px","count":26,"family":"Zalando Sans","traits":"Regular","weight":"700","contexts":[{"tag":"span","top":184,"text":"Build software","property":"font"},{"tag":"span","top":176,"text":"i","property":"font"},{"tag":"span","top":176,"text":"n","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"68px","letterSpacing":"-1.5px"} {"id":"font-12","size":"14px","count":25,"family":"Zalando Sans","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":22,"text":"Features","property":"font"},{"tag":"span","top":22,"text":"Solutions","property":"font"},{"tag":"span","top":22,"text":"Technologies","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"19.6px","letterSpacing":"normal"} {"id":"font-15","size":"16px","count":8,"family":"Zalando Sans","traits":"Regular","weight":"400","contexts":[{"tag":"a","top":460,"text":"Start building","property":"font"},{"tag":"span","top":6706,"text":"Operators","property":"font"},{"tag":"a","top":8138,"text":"Explore Builder","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"22.4px","letterSpacing":"normal"} {"id":"font-17","size":"18px","count":3,"family":"Zalando Sans","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":964,"text":"Design","property":"font"},{"tag":"div","top":964,"text":"Grow","property":"font"},{"tag":"a","top":8743,"text":"Start building","property":"font"}],"fontStack":"\"Zalando Sans\", Helvetica, Arial, sans-serif","lineHeight":"25.2px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#0B0B0A","alpha":1,"count":2,"contexts":[{"tag":"div","top":538,"text":"Design Design your product on the canvas. Build Visually build with AI or manually. Ship Push to pro","property":"::before-background"},{"tag":"div","top":728,"text":"Design Design your product on the canvas. Build Visually build with AI or manually. Ship Push to pro","property":"background"}],"cssValue":"rgb(11, 11, 10)"} {"id":"color-2","hex":"#F6F6F5","alpha":1,"count":26,"contexts":[{"tag":"body","top":0,"text":"if (location.pathname.replace(/\\/$/, \"\") || location.hash) { document.documentElement.setAttribute(\"","property":"background"},{"tag":"a","top":14,"text":"Start building","property":"text"},{"tag":"a","top":14,"text":"Start building","property":"::after-background"}],"cssValue":"rgb(246, 246, 245)"} {"id":"color-4","hex":"#000000","alpha":1,"count":162,"contexts":[{"tag":"path","top":22,"text":"","property":"svg-fill"},{"tag":"circle","top":22,"text":"","property":"svg-fill"},{"tag":"span","top":22,"text":"Features","property":"text"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-6","hex":"#868685","alpha":1,"count":56,"contexts":[{"tag":"p","top":346,"text":"Zoah is a full-stack development platform for designing, building, and deploying software. Collabora","property":"text"},{"tag":"div","top":5290,"text":"Teams already signed up for early access","property":"text"},{"tag":"span","top":6741,"text":"Operators working","property":"text"}],"cssValue":"rgb(134, 134, 133)"} {"id":"color-7","hex":"#8F8F8D","alpha":1,"count":2,"contexts":[{"tag":"div","top":964,"text":"Design","property":"text"}],"cssValue":"rgb(143, 143, 141)"} {"id":"color-11","hex":"#2A2A28","alpha":1,"count":4,"contexts":[{"tag":"span","top":1314,"text":"","property":"background"}],"cssValue":"rgb(42, 42, 40)"}

Exact section measurements from the saved element map: root {"rect":{"x":202,"y":728,"width":1037,"height":620},"padding":{"top":"56px","left":"72px","right":"72px","bottom":"56px"},"gap":"normal","columns":"892.797px","overflow":"visible"}; spacing {"gapsPx":[6,14,16,38],"representativeContentWidthsPx":[1100,1037,893,820,700,556,439,429]}; surfaces {"radii":["60px","50%","999px"],"borders":[],"shadows":["rgba(0, 0, 0, 0.25) 0px 10px 30px 0px"]}; media [{"tag":"canvas","rect":{"x":314,"y":948,"width":1100,"height":1100},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"50%"},{"tag":"svg","rect":{"x":20,"y":22,"width":90,"height":21},"aspectRatio":4.3,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: The page scrolls down, and a section with a black background and a large 3D sphere expands to fill the viewport and becomes sticky. (95% confidence) scroll: As the user scrolls back to the very top, the large headline text animates, dissolving and replacing specific words. (85% confidence)

Transfer these principles: Centered nav + oversized headline + subtext + CTA stack; Full-width dark card breaking canvas color for a focal visual; Progress-tab row beneath the card for sectioned narrative; Pill-shaped button styling.

Dependencies: Custom 3D/WebGL orb asset and its scroll-tied sticky expansion behavior; Scroll-triggered headline text dissolve/replace animation.

Adaptation guidance: Reuse the layout skeleton and card-break composition freely; the 3D orb and its scroll-tied animation require either licensing/building a comparable WebGL asset or substituting a simpler static or video-based focal visual with similar scale contrast.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.