# Teal gradient banner CTA

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: 8809d7ae-3f51-4f86-bda6-dce4b233ca6a
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A full-width teal banner with a centered single-column stack makes the headline, email field and button read as one clear action.
- Focal order runs headline, then form, then disclaimer, and the small light legal text stays quiet so it doesn't compete with the button.
- Content widths step down from about 830px to 490px to 279px, which keeps the heading wide and the form compact and easy to scan.

What a screenshot can't show:
- A background video (about 6.68s loop) sits behind the content, but no specific motion changes were captured, so its pacing is unknown.
- The disclaimer is measured at 11px, weight 300, line height about 14.9px, with normal letter spacing; gaps between elements are 8px and 16px.

Borrow: Put one short headline and one input-plus-button pair on a saturated, textured background, then add a tiny disclaimer to finish the block.
Leave alone: Don't copy the teal geometric cube video background or the Twklausanne typeface; use a different brand colour and a free grotesque-style sans such as Inter instead.

## Classification

- Type: cta
- Layout: Centered content inside a full-width colored banner.
- Styles: gradient, corporate
- Confidence: 100%

## Purpose and structure

A prominent banner call-to-action featuring a teal geometric gradient background, centered heading, and an email capture form.

Visual signature: Bright teal banner with subtle geometric patterns behind a centered email input field.

## Components

- centered-heading
- email-capture-form
- disclaimer-text

## Typography

- Display: Twklausanne — 56px 400
- Heading: Twklausanne — 48px 400
- Body: Twklausanne — 16px 300

## Functional palette

- Text: text #1D1F20
- Canvas: canvas #FFFFFF
- Border: border #E4EBEC
- Surface: surface #1C1D1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 56.65/100 (Competent)
Scored coverage: 85%

- Typography: 56 — Single large, clean sans headline with good contrast against the teal background; body/input/button text is legible but conventional in scale and hierarchy, no distinctive type pairing or treatment beyond a standard CTA layout. Next tier: Needs a more deliberate type hierarchy or treatment (e.g. contrast in weight/size between headline and disclaimer, or custom styling) to move beyond competent.
- Composition: 58 — Centered, well-balanced single-column layout with clear focal hierarchy (headline > form > disclaimer) and a full-bleed background; however the composition is a very standard centered-CTA pattern with no unexpected spatial choices. Next tier: Lacks asymmetry, layering, or secondary visual interest to lift it from a generic centered banner to a memorable composition.
- Motion: inconclusive — A background video is present (CTAAnimation_v2, 6.68s loop) but no timestamped visible motion changes were supplied, so motion quality cannot be judged. Next tier: Specific timestamped descriptions of the animation's visible behavior are needed to score motion.
- Content: 55 — Headline, input, CTA button, and legal disclaimer are integrated into a clear single-purpose block; content types are functional but minimal and formulaic for a bottom-funnel CTA. Next tier: Needs richer content integration (e.g. trust signal, secondary proof point, or dynamic detail) to exceed a purely functional capture form.
- Originality: 54 — The geometric teal gradient background with abstract cube shapes adds some visual texture, but the overall CTA pattern (centered heading, email field, button, disclaimer) is a widely used template. Next tier: Requires a distinctive interaction, layout twist, or unique visual motif beyond a decorative background to feel hard to substitute.
- Adaptability: 60 — Structure (heading, email input, button, disclaimer) is clearly separable from the specific teal video background and could be re-skinned on other palettes/content fairly easily given the deterministic grid/column data. Next tier: Dependency on a bespoke background video for its primary visual identity limits how cleanly the skin separates from the structure.

Strengths:
- Clear single-purpose hierarchy guiding the eye from headline to action
- Legible contrast between white text/UI elements and the teal backdrop
- Subtle bordered input and button styling keep the form from feeling heavy against the busy background

Weaknesses:
- Layout is a generic centered CTA pattern seen across countless SaaS sites
- Motion cannot be verified due to lack of timestamped detail
- Background cubes add texture but don't create a unique visual signature
- Disclaimer and button text sizes are default with no distinguishing typographic choice

Why it does not reach the next tier: The section executes a competent, clean CTA with decent contrast and balance, but every element—the layout, type choices, and content block—follows a widely-used template without a distinguishing idea or detail that would make it memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Swap background video/gradient while keeping the centered text-form-disclaimer structure and spacing ratios intact; reusable as a generic bottom-page lead capture block.

What transfers:
- Centered single-column CTA structure with heading, input, button, disclaimer
- Grid-based form layout (two-column: input + button)
- Rounded corner and subtle border token for input/button

Dependencies:
- Specific background video asset for the geometric teal visual
- Teal gradient palette as primary brand color

## 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 timestamped motion evidence provided despite a background video being present
- Cannot verify exact animation behavior or pacing of the geometric background
- Deterministic facts limited to one breakpoint (1440px desktop)

## 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 content inside a full-width colored banner.
- Styles: gradient, corporate
- Components: centered-heading, email-capture-form, disclaimer-text
- Purpose: A prominent banner call-to-action featuring a teal geometric gradient background, centered heading, and an email capture form.
- Visual signature: Bright teal banner with subtle geometric patterns behind a centered email input field.
- Place on the page: 8 of 9, after Logo strip (`dualentry-com:C07`), before Footer (`dualentry-com:C09`)

### Crop and composition

- Crop: 1440×342px; aspect ratio 4.211:1
- Page bounds: 5480–5822px of 6763px
- 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": "body/supporting copy",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "11px",
      "weight": "300",
      "lineHeight": "14.9px",
      "letterSpacing": "normal",
      "sample": "By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-10"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "52.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "lineHeight": "24px",
      "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": "#609199",
      "cssValue": "rgb(96, 145, 153)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-6"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#1D1F20",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#E4EBEC",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#1C1D1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.",
      "sampleId": "color-18",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border radius appears common on cards and buttons.",
  "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.",
  "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.",
  "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.",
  "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.",
  "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.",
  "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components."
}
```

### Reconstruction specification

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

- Root: 1440×342px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(96, 145, 153); radius 0px.
- Observed gaps: 8, 16px.
- Representative content widths: 830, 490, 279px.
- Layout containers: 1; cards/surfaces: 0; media elements: 2; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5480,
      "bottom": 5822,
      "pageHeight": 6763
    }
  },
  "container": {
    "size": "1440×342px",
    "position": "x 0px, y 5480px",
    "display": "block",
    "positionMode": "relative",
    "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(96, 145, 153)",
    "radius": "0px",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      16
    ],
    "representativeContentWidthsPx": [
      830,
      490,
      279
    ]
  },
  "columns": [
    {
      "element": "form · Please enter a valid business email address.Schedule demo",
      "size": "490×56px",
      "position": "x 475px, y 5645px",
      "display": "grid",
      "template": "279.469px 202.516px",
      "direction": "row",
      "gap": "8px"
    }
  ]
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "video · lazy-video",
    "size": "1440×342px",
    "position": "x 0px, y 5480px",
    "aspectRatio": 4.2,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://res.cloudinary.com/dly6ckatf/video/upload/v1775467383/CTAAnimation_v2_compressed_bltpis.mp4"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 920px, y 5665px",
    "aspectRatio": 1,
    "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-3247",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5480,
      "width": 1440,
      "height": 342
    },
    "role": null,
    "label": "The last ERP decision you'll ever make.Please enter a valid business email address.Schedule demo Tha",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgb(96, 145, 153)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-3249",
      "tag": "video",
      "rect": {
        "x": 0,
        "y": 5480,
        "width": 1440,
        "height": 342
      },
      "role": null,
      "label": "lazy-video",
      "media": {
        "src": "https://res.cloudinary.com/dly6ckatf/video/upload/v1775467383/CTAAnimation_v2_compressed_bltpis.mp4",
        "poster": "",
        "duration": 6.68
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 4.2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3267",
      "tag": "svg",
      "rect": {
        "x": 920,
        "y": 5665,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 5480,
    "bottom": 5822,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-3260",
      "gap": "8px",
      "tag": "form",
      "rect": {
        "x": 475,
        "y": 5645,
        "width": 490,
        "height": 56
      },
      "role": null,
      "label": "Please enter a valid business email address.Schedule demo",
      "columns": "279.469px 202.516px",
      "display": "grid",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8,
      16
    ],
    "representativeContentWidthsPx": [
      830,
      490,
      279
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 2,
    "animations": 0,
    "elementsInSection": 10
  },
  "surfaces": {
    "radii": [
      "4px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.2)"
    ],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-29T16:48:55.968Z",
  "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: low
- What transfers: Centered single-column CTA structure with heading, input, button, disclaimer; Grid-based form layout (two-column: input + button); Rounded corner and subtle border token for input/button
- Dependencies: Specific background video asset for the geometric teal visual; Teal gradient palette as primary brand color
- Guidance: Swap background video/gradient while keeping the centered text-form-disclaimer structure and spacing ratios intact; reusable as a generic bottom-page lead capture block.

### 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 cta section inspired by the design evidence titled “Teal gradient banner CTA”.

Purpose: A prominent banner call-to-action featuring a teal geometric gradient background, centered heading, and an email capture form.

Structure: centered single-column. Source layout label: Centered content inside a full-width colored banner.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Bright teal banner with subtle geometric patterns behind a centered email input field.

Components: centered-heading, email-capture-form, disclaimer-text.

Style direction: gradient, corporate.

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

Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85}

Typography measured inside this section: {"id":"font-10","size":"11px","count":4,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":600,"text":"By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy","property":"font"},{"tag":"a","top":616,"text":"Privacy Notice","property":"font"},{"tag":"p","top":5713,"text":"By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"14.9px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-6","hex":"#609199","alpha":1,"count":1,"contexts":[{"tag":"section","top":5480,"text":"The last ERP decision you'll ever make.Please enter a valid business email address.Schedule demo Tha","property":"background"}],"cssValue":"rgb(96, 145, 153)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5480,"width":1440,"height":342},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8,16],"representativeContentWidthsPx":[830,490,279]}; surfaces {"radii":["4px"],"borders":["1px solid rgba(255, 255, 255, 0.2)"],"shadows":[]}; media [{"tag":"video","rect":{"x":0,"y":5480,"width":1440,"height":342},"aspectRatio":4.2,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":920,"y":5665,"width":16,"height":16},"aspectRatio":1,"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 single-column CTA structure with heading, input, button, disclaimer; Grid-based form layout (two-column: input + button); Rounded corner and subtle border token for input/button.

Dependencies: Specific background video asset for the geometric teal visual; Teal gradient palette as primary brand color.

Adaptation guidance: Swap background video/gradient while keeping the centered text-form-disclaimer structure and spacing ratios intact; reusable as a generic bottom-page lead capture block.

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