# Interactive video CTA

Schema: Design Details SECTION.md v3.2
Website: Cogent
Source: https://www.cogent.com/
Source section IDs: gap-7f49e2ea-14386-16399
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Centered eyebrow, pixel-style display headline, plain body line and buttons form a clear four-step hierarchy on a black canvas with generous negative space.
- A soft light aura at the top gives the dark page depth without adding clutter, so attention stays on the text and the video.
- The large dashboard-and-video-call player shows the product working, so the CTA has a concrete payoff instead of just a claim.

What a screenshot can't show:
- The video starts playing and scales up over about 2 seconds (37–39s in the recording), then scales back down over about 2 seconds as the user scrolls past (49–51s), so the scale is tied to scroll position.
- No font sizes, spacing or animation timings were measured, so exact values are unknown.

Borrow: Let one large media element grow as it enters view, so the product becomes the focal point right as the call to action appears.
Leave alone: Don't copy the pixel-circle display face (Geist Pixel Circle), the black-and-white palette with the aurora glow, or the dashboard mockup itself; a free pixel or mono-style display font would be a fair stand-in.

## Classification

- Type: cta
- Layout: Centered text above large video
- Styles: minimal, corporate, gradient
- Confidence: 95%

## Purpose and structure

A dark call-to-action section featuring a prominent video player showcasing a dashboard and a video call.

Visual signature: A dark background with a soft light aura at the top, centered text, and a large video element that scales on scroll.

## Components

- heading
- button-group
- video-player
- gradient-background

## Typography

- Display: Geist Pixel Circle — 55px 400
- Heading: Geist — 60px 400
- Body: Geist — 16px 400
- Mono: Geist Mono — 10px 500

## Functional palette

- Canvas: canvas #000000
- Text: text #FFFFFF
- Surface: surface #111112
- Muted-Text: muted text #768393

## Motion evidence

- 37.0–39.0s — A video begins playing and scales up in size (96% confidence)
- 49.0–51.0s — The video scales back down as the user scrolls past (96% confidence)

## Section quality

Overall: 57.75/100 (Competent)
Scored coverage: 100%

- Typography: 62 — Pixelated display headline (Geist Pixel Circle) gives a distinct character against a plain body copy and mono eyebrow label; strong hierarchy of eyebrow/display/body/buttons, but the supporting copy and buttons are generic stock patterns. Next tier: Needs more typographic interplay or scale contrast beyond one novelty display face to earn strong/memorable.
- Composition: 58 — Centered text stack over a large product screenshot with a soft gradient aura is a familiar CTA template; generous negative space is handled competently but the layout offers no unexpected structural choice. Next tier: Composition relies on a standard centered-stack-over-screenshot pattern with no distinguishing spatial idea to reach polished/strong tier.
- Motion: 55 — Gemini supplies two timestamped moments (video scaling up then down on scroll), a simple but coherent scroll-triggered scale effect; it's a single predictable interaction, not layered or distinctive. Next tier: Only one scale transform is described; no easing, staggering, or secondary motion detail to justify a higher score.
- Content: 56 — The video/dashboard mockup substantiates the 'see it in action' claim, giving the CTA a concrete payoff rather than pure text, but it's a standard product-screenshot-in-device-frame treatment. Next tier: Content integration needs a more tailored or narrative presentation (e.g., annotated callouts) to move beyond generic screenshot usage.
- Originality: 54 — The aurora-gradient top glow plus pixel-font headline add a bit of personality, but the overall CTA-with-video-scale pattern is widely used across SaaS sites. Next tier: Lacks a signature mechanic or compositional twist that would feel hard to substitute with a generic template.
- Adaptability: 60 — Clear separable layers: dark canvas, centered text block, button group, and a video/image panel that scales on scroll — tokens for color, type, and radius are deterministic and modular. Next tier: Dependence on the specific pixel-font asset and bespoke gradient aura ties the look to source assets, limiting pure structural reuse.

Strengths:
- Distinct pixelated display typeface lends a techy, memorable headline treatment
- Clear three-tier hierarchy: eyebrow tag, headline, subcopy, dual CTAs, then product visual
- Scroll-triggered scale on the video gives a simple but tangible sense of depth

Weaknesses:
- Overall layout is a common centered-CTA-with-screenshot template
- Gradient aura and composition don't introduce a unique structural idea
- Motion is limited to a single scale transform with no secondary detail
- Button and copy styling are generic SaaS defaults

Why it does not reach the next tier: The section executes a familiar CTA-with-video pattern cleanly but doesn't introduce a structural or interaction idea distinct enough to feel memorable; typography's novelty face is the only standout element, insufficient alone to push the section into 'strong' territory.

## Adaptation guidance

- Effort: Low
- Guidance: Swap in brand-appropriate display font and screenshot/video asset; keep the scroll-scale behavior and centered CTA hierarchy as the reusable skeleton.

What transfers:
- Centered CTA text stack with eyebrow label, heading, subcopy, button group
- Framed video/screenshot panel below CTA text
- Scroll-triggered scale interaction on media element

Dependencies:
- Custom pixel-font display typeface
- Specific gradient/aura background asset
- Product dashboard and video-call footage

## 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%)
- Motion scoring based only on two timestamped descriptions from Gemini, not direct video verification
- Exact gradient and video content details inferred from screenshot, not confirmed via source file
- No deterministic spacing/sizing data for the video panel itself

## 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: cta
- Source type: cta
- Structure: centered single-column
- Layout: Centered text above large video
- Styles: minimal, corporate, gradient
- Components: heading, button-group, video-player, gradient-background
- Purpose: A dark call-to-action section featuring a prominent video player showcasing a dashboard and a video call.
- Visual signature: A dark background with a soft light aura at the top, centered text, and a large video element that scales on scroll.
- Place on the page: 15 of 16, after Other (`ecc5ff91-043a-45a0-b0f4-a0b6f773202d`), before Footer (`cogent-com:C10`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- 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": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "55px",
      "family": "Geist Pixel Circle",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Geist Pixel Circle 55px used for the main hero headline.",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "60.5px",
      "letterSpacing": "-1.1px"
    },
    {
      "role": "heading",
      "size": "60px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Geist 60px used for standard section H2s.",
      "sampleId": "font-2",
      "confidence": 1,
      "lineHeight": "66px",
      "letterSpacing": "-1.8px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Geist 16px used for primary paragraph text and button labels.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "22.4px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "mono",
      "size": "10px",
      "family": "Geist Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: Geist Mono 10px used for technical labels, small caps, and UI elements.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "14px",
      "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": [],
  "functionalPalette": [
    {
      "hex": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Solid black (#000000) used as the primary background for the entire page.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: Solid white (#FFFFFF) used for primary headings and body text.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#111112",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-8: computed rgb(17, 17, 18); AI role: #111112 used for elevated cards and distinct sections.",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#768393",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-13: computed rgb(118, 131, 147); AI role: Grey (#768393) used for secondary descriptions and subtitles.",
      "sampleId": "color-13",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border-radius (likely 8-12px) on buttons and input fields; slightly larger on feature cards.",
  "density": "Spacious. The design relies on large negative space to let the typography and glowing gradients breathe.",
  "evidence": "Observed via screenshot layouts, button shapes in the nav and hero, padding around text blocks, and the containment of elements across different viewport heights.",
  "borderStyle": "Subtle, low-opacity 1px solid borders used to define cards against the dark background without adding visual noise.",
  "buttonStyle": "Primary buttons are solid, high-contrast (white background, black text). Secondary buttons use translucent dark fills with subtle borders.",
  "cornerStyle": "Rounded corners on interactive elements and structural cards, contrasting with the pixelated typography.",
  "contentWidth": "Centered max-width container, likely around 1200px to 1440px for primary content areas.",
  "spacingRhythm": "Generous vertical spacing between major sections (often 120px+). Internal card padding is tight but structured."
}
```

### Reconstruction specification

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

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### 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
null
```

### Observed motion

1. **observed sequence** — A video begins playing and scales up in size (37s–39s; 96% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **scroll** — The video scales back down as the user scrolls past (49s–51s; 96% 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: unknownpx 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: low
- What transfers: Centered CTA text stack with eyebrow label, heading, subcopy, button group; Framed video/screenshot panel below CTA text; Scroll-triggered scale interaction on media element
- Dependencies: Custom pixel-font display typeface; Specific gradient/aura background asset; Product dashboard and video-call footage
- Guidance: Swap in brand-appropriate display font and screenshot/video asset; keep the scroll-scale behavior and centered CTA hierarchy as the reusable skeleton.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original cta section inspired by the design evidence titled “Interactive video CTA”.

Purpose: A dark call-to-action section featuring a prominent video player showcasing a dashboard and a video call.

Structure: centered single-column. Source layout label: Centered text above large video. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A dark background with a soft light aura at the top, centered text, and a large video element that scales on scroll.

Components: heading, button-group, video-player, gradient-background.

Style direction: minimal, corporate, gradient.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"55px","family":"Geist Pixel Circle","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Geist Pixel Circle 55px used for the main hero headline.","sampleId":"font-6","confidence":1,"lineHeight":"60.5px","letterSpacing":"-1.1px"} {"role":"heading","size":"60px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Geist 60px used for standard section H2s.","sampleId":"font-2","confidence":1,"lineHeight":"66px","letterSpacing":"-1.8px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Geist 16px used for primary paragraph text and button labels.","sampleId":"font-9","confidence":0.95,"lineHeight":"22.4px","letterSpacing":"-0.3px"} {"role":"mono","size":"10px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: Geist Mono 10px used for technical labels, small caps, and UI elements.","sampleId":"font-10","confidence":0.9,"lineHeight":"14px","letterSpacing":"0.2px"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Solid black (#000000) used as the primary background for the entire page.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: Solid white (#FFFFFF) used for primary headings and body text.","sampleId":"color-2","confidence":1} {"hex":"#111112","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(17, 17, 18); AI role: #111112 used for elevated cards and distinct sections.","sampleId":"color-8","confidence":0.9} {"hex":"#768393","name":"muted text","role":"muted-text","source":"computed","evidence":"color-13: computed rgb(118, 131, 147); AI role: Grey (#768393) used for secondary descriptions and subtitles.","sampleId":"color-13","confidence":0.9}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: observed sequence: A video begins playing and scales up in size (96% confidence) scroll: The video scales back down as the user scrolls past (96% confidence)

Transfer these principles: Centered CTA text stack with eyebrow label, heading, subcopy, button group; Framed video/screenshot panel below CTA text; Scroll-triggered scale interaction on media element.

Dependencies: Custom pixel-font display typeface; Specific gradient/aura background asset; Product dashboard and video-call footage.

Adaptation guidance: Swap in brand-appropriate display font and screenshot/video asset; keep the scroll-scale behavior and centered CTA hierarchy as the reusable skeleton.

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