# Illustrative Hero

Schema: Design Details SECTION.md v3.2
Website: Different
Source: https://www.different.ai/
Source section IDs: 2c414fcb-c634-4993-9fce-498b032c4924
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: hero
- Layout: Full-bleed background illustration with centered text and dual calls to action.
- Styles: illustrative, editorial, colourful
- Confidence: 95%

## Purpose and structure

A full-screen hero section featuring a detailed illustration of hot air balloons in a canyon, with a large serif headline.

Visual signature: Rich, colorful illustration of hot air balloons setting the tone for the entire page.

## Components

- navigation bar
- headline
- subheadline
- primary button
- secondary button
- announcement badge

## Typography

- Display: Feature Display — 90px 300
- Heading: Feature Display — 30px 400
- Body: PP Neue Montreal Text — 20px 400
- Mono: PP Fraktion Mono — 15px 500

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #000000
- Primary-Action: primary action #121212
- Border: border #DEDEDE
- Surface: surface #FFE28B
- Muted-Text: muted text #4A4A4A

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 65.41/100 (Good)
Scored coverage: 85%

- Typography: 68 — Large serif display (90px, -0.9px tracking) with italic accent on 'world' paired against clean sans body text creates strong editorial contrast and clear hierarchy (badge, headline, subhead, CTAs). Pairing feels deliberate and legible against a busy illustrated background. Next tier: 
- Composition: 69 — Centered text block is well-balanced within an asymmetric illustration, with balloons placed to frame the copy and guide the eye without obstructing it. Negative space around text is controlled despite a visually dense background image. Next tier: Composition relies on a single centered template common to hero sections; no unconventional grid or layered depth beyond background/foreground image split keeps it from feeling more inventive.
- Motion: not_assessed — No motion_moments or animation data were supplied, so no timestamped visible motion exists to evaluate. Next tier: Provide timestamped evidence of any animated entrance, parallax, or balloon movement to assess this axis.
- Content: 65 — Headline, subheadline, and dual CTAs are tightly integrated with the illustration's narrative (ballooning = building a world), and the announcement badge adds credibility without crowding the message. Next tier: Content integration stays at a conventional hero formula; copy and illustration reinforce each other but don't introduce a distinctive interactive or structural device tying content to the visual.
- Originality: 63 — A bespoke, richly colored illustration with a canyon/balloon motif is a clear departure from generic abstract-gradient hero tropes, giving the section a distinct visual identity. Next tier: The underlying layout (centered text over hero image, pill CTAs, nav bar) is a standard template; original asset elevates mood but the structural idea itself is familiar.
- Adaptability: 60 — The deterministic token evidence (pill radius, pill buttons, pastel/earth palette values, font sizes) show a cleanly separable skin: illustration background can swap while headline/subhead/CTA/badge structure persists. Next tier: Dependency on a custom, specific illustration asset (not a generated/parametric background) limits how cleanly the visual skin can be decoupled from the brand-specific artwork.

Strengths:
- Bespoke, richly colored illustration creates an immediate unique visual identity
- Clear typographic hierarchy anchored by a large italicized accent word
- Effective layering of foreground/background balloon imagery framing centered text

Weaknesses:
- No motion evidence provided, so animation quality is unverifiable
- Underlying hero layout follows a conventional centered template
- Heavy reliance on a single bespoke illustration asset limits structural reusability

Why it does not reach the next tier: The section pairs a distinctive illustration with competent typographic and compositional choices, but the structural idea (centered copy over hero image, standard pill CTAs) remains a familiar hero formula, and no motion detail exists to push craft further toward memorability.

## Adaptation guidance

- Effort: Medium
- Guidance: Swap the illustration for any full-bleed custom artwork while preserving the centered text stack, pill CTA styling, and typographic scale; adjust palette tokens to match new art's dominant hues.

What transfers:
- Centered headline/subhead/CTA/badge structure
- Typographic scale and hierarchy (display serif + sans body)
- Pill-shaped button and badge styling

Dependencies:
- Custom hot air balloon illustration asset
- Specific warm canyon color palette tied to the artwork

## 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 animation or motion timestamps supplied, so motion axis is unassessed
- Cannot verify exact font files or rendering beyond provided computed values
- Single static crop may omit scroll-based or interactive behavior

## 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: Full-bleed background illustration with centered text and dual calls to action.
- Styles: illustrative, editorial, colourful
- Components: navigation bar, headline, subheadline, primary button, secondary button, announcement badge
- Purpose: A full-screen hero section featuring a detailed illustration of hot air balloons in a canyon, with a large serif headline.
- Visual signature: Rich, colorful illustration of hot air balloons setting the tone for the entire page.

### Crop and composition

- Crop: 1440×1002px; aspect ratio 1.437:1
- Page bounds: 0–1002px of 6910px
- 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": "card/subheading",
      "family": "PP Neue Montreal Text",
      "stack": "\"PP Neue Montreal Text\", sans-serif",
      "size": "20px",
      "weight": "400",
      "lineHeight": "25px",
      "letterSpacing": "-0.8px",
      "sample": "Different is the AI marketing system that lets lean B2B teams create, orchestrate and optimize deman",
      "element": "p",
      "occurrences": 27,
      "sourceId": "font-4"
    },
    {
      "role": "UI/supporting text",
      "family": "PP Neue Montreal Text",
      "stack": "\"PP Neue Montreal Text\", sans-serif",
      "size": "17px",
      "weight": "400",
      "lineHeight": "23.8px",
      "letterSpacing": "normal",
      "sample": "Product",
      "element": "div",
      "occurrences": 12,
      "sourceId": "font-15"
    },
    {
      "role": "section heading",
      "family": "Feature Display",
      "stack": "\"Feature Display\", sans-serif",
      "size": "90px",
      "weight": "300",
      "lineHeight": "99px",
      "letterSpacing": "-0.9px",
      "sample": "world",
      "element": "em",
      "occurrences": 10,
      "sourceId": "font-17"
    },
    {
      "role": "section heading",
      "family": "Feature Display",
      "stack": "\"Feature Display\", sans-serif",
      "size": "90px",
      "weight": "300",
      "lineHeight": "99px",
      "letterSpacing": "-0.9px",
      "sample": "Every",
      "element": "span",
      "occurrences": 9,
      "sourceId": "font-18"
    },
    {
      "role": "UI/supporting text",
      "family": "PP Neue Montreal Text",
      "stack": "\"PP Neue Montreal Text\", sans-serif",
      "size": "15px",
      "weight": "400",
      "lineHeight": "18.8px",
      "letterSpacing": "normal",
      "sample": "Book a demo",
      "element": "div",
      "occurrences": 4,
      "sourceId": "font-23"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "90px",
      "family": "Feature Display",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').",
      "sampleId": "font-18",
      "confidence": 1,
      "lineHeight": "99px",
      "letterSpacing": "-0.9px"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Feature Display",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "33px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "PP Neue Montreal Text",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "25px",
      "letterSpacing": "-0.8px"
    },
    {
      "role": "mono",
      "size": "15px",
      "family": "PP Fraktion Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.",
      "sampleId": "font-5",
      "confidence": 0.9,
      "lineHeight": "18.8px",
      "letterSpacing": "normal"
    }
  ]
}
```

### 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": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "svg-fill",
        "text"
      ],
      "occurrences": 83,
      "sourceId": "color-1"
    },
    {
      "value": "#191919",
      "cssValue": "rgba(25, 25, 25, 0.61)",
      "alpha": 0.611764705882353,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-3"
    },
    {
      "value": "#121212",
      "cssValue": "rgb(18, 18, 18)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "control-background",
        "background"
      ],
      "occurrences": 25,
      "sourceId": "color-13"
    },
    {
      "value": "#121212",
      "cssValue": "rgba(18, 18, 18, 0.22)",
      "alpha": 0.2196078431372549,
      "appliedAs": [
        "::before-background"
      ],
      "occurrences": 1,
      "sourceId": "color-14"
    },
    {
      "value": "#E9E9E9",
      "cssValue": "rgb(233, 233, 233)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-18"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.28)",
      "alpha": 0.2784313725490196,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 1,
      "sourceId": "color-19"
    },
    {
      "value": "#151515",
      "cssValue": "rgb(21, 21, 21)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 1,
      "sourceId": "color-28"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.45)",
      "alpha": 0.45098039215686275,
      "appliedAs": [
        "border"
      ],
      "occurrences": 4,
      "sourceId": "color-29"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the majority of the page sections below the hero.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black (#000000) is used extensively for headings, body text, and some button texts across the white canvas.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#121212",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.",
      "sampleId": "color-13",
      "confidence": 0.95
    },
    {
      "hex": "#DEDEDE",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.",
      "sampleId": "color-22",
      "confidence": 0.9
    },
    {
      "hex": "#FFE28B",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.",
      "sampleId": "color-5",
      "confidence": 0.85
    },
    {
      "hex": "#4A4A4A",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.",
      "sampleId": "color-12",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Primary buttons: full pill (approx 999px). Cards: medium rounding (approx 12-16px).",
  "density": "Low to medium density. The editorial approach relies on ample negative space to emphasize typography and illustrations.",
  "evidence": "Visual inspection of button radii (pill shape), card boundaries (visible borders on white canvas), and typographic layout (wide margins, centered blocks).",
  "borderStyle": "Subtle, solid borders (e.g., #DEDEDE) used to delineate white cards against the white background. Outlined buttons use a thin solid border.",
  "buttonStyle": "Solid fill with contrasting text (black on white, or white on black) in a fully rounded pill shape. Minimal padding.",
  "cornerStyle": "A mix of corner styles: primary buttons are fully pill-shaped, while feature and article cards have moderately rounded corners, and abstract UI elements within cards use varying smaller radii.",
  "contentWidth": "Content is generally centered and constrained to a standard max-width, maintaining readability across sections.",
  "spacingRhythm": "Sections are separated by large swaths of white space, creating a calm, deliberate reading pace. Internal card padding is generous."
}
```

### Reconstruction specification

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

- Root: 1440×1000px; flex; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 6, 10px.
- Representative content widths: 691, 595, 512, 313px.
- Layout containers: 3; cards/surfaces: 0; media elements: 5; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 1002,
      "pageHeight": 6910
    }
  },
  "container": {
    "size": "1440×1000px",
    "position": "x 0px, y 0px",
    "display": "flex",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(255, 255, 255)",
    "radius": "0px",
    "border": "0px none rgb(255, 255, 255)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      6,
      10
    ],
    "representativeContentWidthsPx": [
      691,
      595,
      512,
      313
    ]
  },
  "columns": [
    {
      "element": "section · Announcing our $48M seed roundMake your worldstand apart.Different is the AI marketing system that l",
      "size": "1440×1000px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Announcing our $48M seed round",
      "size": "313×41px",
      "position": "x 563px, y 260px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal 10px"
    },
    {
      "element": "div · 0:00",
      "size": "1440×1000px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.45)"
    ],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "canvas · canvas",
    "size": "1440×1852px",
    "position": "x 0px, y 0px",
    "aspectRatio": 0.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "img · hero_visual-image-bg",
    "size": "1440×1000px",
    "position": "x 0px, y 0px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad70251909698703381d926_different-ai-hot-air-balloons-red-mountains-hero-p-1600.webp"
  },
  {
    "element": "img · dfx-b",
    "size": "691×799px",
    "position": "x -189px, y 161px",
    "aspectRatio": 0.9,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7cd95922c399ba3a1cfec_hero-balloon-figma-900-v2.webp"
  },
  {
    "element": "svg · svg",
    "size": "200×31px",
    "position": "x 40px, y 29px",
    "aspectRatio": 6.5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · hero_announce-icon",
    "size": "16×16px",
    "position": "x 842px, y 273px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad58206b58902830390791b_icon-arrow-right.svg"
  }
]
```

#### 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-70",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 0,
      "width": 1440,
      "height": 1000
    },
    "role": null,
    "label": "Announcing our $48M seed roundMake your worldstand apart.Different is the AI marketing system that l",
    "border": "0px none rgb(255, 255, 255)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-679",
      "tag": "canvas",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1852
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-95",
      "tag": "img",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "role": null,
      "label": "hero_visual-image-bg",
      "media": {
        "alt": "Illustration of two people in a hot-air balloon floating over red mountains, with more balloons in the distance",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad70251909698703381d926_different-ai-hot-air-balloons-red-mountains-hero-p-1600.webp",
        "naturalWidth": 1440,
        "naturalHeight": 738
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-680",
      "tag": "img",
      "rect": {
        "x": -189,
        "y": 161,
        "width": 691,
        "height": 799
      },
      "role": null,
      "label": "dfx-b",
      "media": {
        "alt": "",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7cd95922c399ba3a1cfec_hero-balloon-figma-900-v2.webp",
        "naturalWidth": 619,
        "naturalHeight": 740
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 0.9,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-16",
      "tag": "svg",
      "rect": {
        "x": 40,
        "y": 29,
        "width": 200,
        "height": 31
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 6.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-77",
      "tag": "img",
      "rect": {
        "x": 842,
        "y": 273,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "hero_announce-icon",
      "media": {
        "alt": "Right-pointing arrow",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad58206b58902830390791b_icon-arrow-right.svg",
        "naturalWidth": 16,
        "naturalHeight": 16
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 1002,
    "pageHeight": 6910
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-70",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "role": null,
      "label": "Announcing our $48M seed roundMake your worldstand apart.Different is the AI marketing system that l",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-76",
      "gap": "normal 10px",
      "tag": "a",
      "rect": {
        "x": 563,
        "y": 260,
        "width": 313,
        "height": 41
      },
      "role": null,
      "label": "Announcing our $48M seed round",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-720",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "role": "dialog",
      "label": "0:00",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      10
    ],
    "representativeContentWidthsPx": [
      691,
      595,
      512,
      313
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 5,
    "animations": 0,
    "elementsInSection": 29
  },
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.45)"
    ],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-22T06:21:51.117Z",
  "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

No timestamped authored motion is attached. Use only restrained baseline transitions.

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 headline/subhead/CTA/badge structure; Typographic scale and hierarchy (display serif + sans body); Pill-shaped button and badge styling
- Dependencies: Custom hot air balloon illustration asset; Specific warm canyon color palette tied to the artwork
- Guidance: Swap the illustration for any full-bleed custom artwork while preserving the centered text stack, pill CTA styling, and typographic scale; adjust palette tokens to match new art's dominant hues.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Illustrative Hero”.

Purpose: A full-screen hero section featuring a detailed illustration of hot air balloons in a canyon, with a large serif headline.

Structure: centered single-column. Source layout label: Full-bleed background illustration with centered text and dual calls to action.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Rich, colorful illustration of hot air balloons setting the tone for the entire page.

Components: navigation bar, headline, subheadline, primary button, secondary button, announcement badge.

Style direction: illustrative, editorial, colourful.

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

Typography evidence: {"role":"display","size":"90px","family":"Feature Display","source":"computed","traits":"Regular","weight":"300","evidence":"font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').","sampleId":"font-18","confidence":1,"lineHeight":"99px","letterSpacing":"-0.9px"} {"role":"heading","size":"30px","family":"Feature Display","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'","sampleId":"font-1","confidence":0.9,"lineHeight":"33px","letterSpacing":"-0.3px"} {"role":"body","size":"20px","family":"PP Neue Montreal Text","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"25px","letterSpacing":"-0.8px"} {"role":"mono","size":"15px","family":"PP Fraktion Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.","sampleId":"font-5","confidence":0.9,"lineHeight":"18.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the majority of the page sections below the hero.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black (#000000) is used extensively for headings, body text, and some button texts across the white canvas.","sampleId":"color-2","confidence":1} {"hex":"#121212","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.","sampleId":"color-13","confidence":0.95} {"hex":"#DEDEDE","name":"border","role":"border","source":"computed","evidence":"color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.","sampleId":"color-22","confidence":0.9} {"hex":"#FFE28B","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.","sampleId":"color-5","confidence":0.85} {"hex":"#4A4A4A","name":"muted text","role":"muted-text","source":"computed","evidence":"color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.","sampleId":"color-12","confidence":0.85}

Typography measured inside this section: {"id":"font-4","size":"20px","count":27,"family":"PP Neue Montreal Text","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":595,"text":"Different is the AI marketing system that lets lean B2B teams create, orchestrate and optimize deman","property":"font"},{"tag":"p","top":1478,"text":"There are more channels to coordinate, more buyers to reach and less time to know if any of it is wo","property":"font"},{"tag":"p","top":1909,"text":"Marketers need one system that knows their strategy, executes reliably and gets better with every ca","property":"font"}],"fontStack":"\"PP Neue Montreal Text\", sans-serif","lineHeight":"25px","letterSpacing":"-0.8px"} {"id":"font-15","size":"17px","count":12,"family":"PP Neue Montreal Text","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":33,"text":"Product","property":"font"},{"tag":"div","top":33,"text":"Resources","property":"font"},{"tag":"div","top":33,"text":"Company","property":"font"}],"fontStack":"\"PP Neue Montreal Text\", sans-serif","lineHeight":"23.8px","letterSpacing":"normal"} {"id":"font-17","size":"90px","count":10,"family":"Feature Display","traits":"italic","weight":"300","contexts":[{"tag":"em","top":439,"text":"world","property":"font"},{"tag":"span","top":1759,"text":"d","property":"font"},{"tag":"span","top":1759,"text":"i","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"99px","letterSpacing":"-0.9px"} {"id":"font-18","size":"90px","count":9,"family":"Feature Display","traits":"Regular","weight":"300","contexts":[{"tag":"span","top":349,"text":"Every","property":"font"},{"tag":"span","top":349,"text":"marketer","property":"font"},{"tag":"span","top":349,"text":"is","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"99px","letterSpacing":"-0.9px"} {"id":"font-23","size":"15px","count":4,"family":"PP Neue Montreal Text","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":35,"text":"Book a demo","property":"font"},{"tag":"div","top":708,"text":"Book a demo →","property":"font"},{"tag":"div","top":2047,"text":"Book a demo","property":"font"}],"fontStack":"\"PP Neue Montreal Text\", sans-serif","lineHeight":"18.8px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#FFFFFF","alpha":1,"count":83,"contexts":[{"tag":"body","top":0,"text":"/* Ensure all elements inherit the color from its parent */ body * { color: inherit; } a, .w-input, ","property":"background"},{"tag":"path","top":29,"text":"","property":"svg-fill"},{"tag":"div","top":33,"text":"Product","property":"text"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-3","hex":"#191919","alpha":0.611764705882353,"count":1,"contexts":[{"tag":"div","top":0,"text":"","property":"background"}],"cssValue":"rgba(25, 25, 25, 0.61)"} {"id":"color-13","hex":"#121212","alpha":1,"count":25,"contexts":[{"tag":"div","top":708,"text":"Book a demo →","property":"text"},{"tag":"a","top":2033,"text":"Book a demo","property":"control-background"},{"tag":"div","top":3416,"text":"Approve","property":"background"}],"cssValue":"rgb(18, 18, 18)"} {"id":"color-14","hex":"#121212","alpha":0.2196078431372549,"count":1,"contexts":[{"tag":"nav","top":0,"text":"ProductOverviewHow Different runs your demand genUse casesEvery demand gen play, in one placeResourc","property":"::before-background"}],"cssValue":"rgba(18, 18, 18, 0.22)"} {"id":"color-18","hex":"#E9E9E9","alpha":1,"count":2,"contexts":[{"tag":"span","top":68,"text":"","property":"background"}],"cssValue":"rgb(233, 233, 233)"} {"id":"color-19","hex":"#000000","alpha":0.2784313725490196,"count":1,"contexts":[{"tag":"a","top":260,"text":"Announcing our $48M seed round","property":"control-background"}],"cssValue":"rgba(0, 0, 0, 0.28)"} {"id":"color-28","hex":"#151515","alpha":1,"count":1,"contexts":[{"tag":"div","top":35,"text":"Book a demo","property":"text"}],"cssValue":"rgb(21, 21, 21)"} {"id":"color-29","hex":"#FFFFFF","alpha":0.45098039215686275,"count":4,"contexts":[{"tag":"a","top":260,"text":"Announcing our $48M seed round","property":"border"}],"cssValue":"rgba(255, 255, 255, 0.45)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":0,"width":1440,"height":1000},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,10],"representativeContentWidthsPx":[691,595,512,313]}; surfaces {"radii":["999px"],"borders":["1px solid rgba(255, 255, 255, 0.45)"],"shadows":[]}; media [{"tag":"canvas","rect":{"x":0,"y":0,"width":1440,"height":1852},"aspectRatio":0.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":0,"y":0,"width":1440,"height":1000},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-189,"y":161,"width":691,"height":799},"aspectRatio":0.9,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":40,"y":29,"width":200,"height":31},"aspectRatio":6.5,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Centered headline/subhead/CTA/badge structure; Typographic scale and hierarchy (display serif + sans body); Pill-shaped button and badge styling.

Dependencies: Custom hot air balloon illustration asset; Specific warm canyon color palette tied to the artwork.

Adaptation guidance: Swap the illustration for any full-bleed custom artwork while preserving the centered text stack, pill CTA styling, and typographic scale; adjust palette tokens to match new art's dominant hues.

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