# Gradient dawn CTA

Schema: Design Details SECTION.md v3.2
Website: Silna Health
Source: https://www.silnahealth.com/
Source section IDs: gap-78c55c86-9834-10810
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The deep purple horizon blurs upward into a soft pink glow, so the gradient reads as a sunrise and gives the text a calm, bright area to sit in.
- A large serif heading, a short subheading and one pill button stack in a centered column with generous empty space, so the eye lands on the action.
- The copy 'Discover a new dawn for healthcare' matches the sunrise visual, which ties the message and the image together.

What a screenshot can't show:
- The recording shows the section only as static while the page scrolls on into the footer; no animation of the gradient, text or button was seen.
- No font sizes, tracking or spacing were measured, so exact type scale and padding are unknown.

Borrow: Let the background image carry the metaphor of the headline, and keep the content to one heading, one line of support and one button.
Leave alone: Don't copy the purple-to-pink dawn palette, the ABCArizonaFlare serif (a commercial font; use a free soft display serif instead) or the 'new dawn' wording.

## Classification

- Type: cta
- Layout: Centered text and button placed over a full-width immersive gradient background.
- Styles: gradient, bold
- Confidence: 98%

## Purpose and structure

A prominent call-to-action section featuring a deep purple-to-pink gradient that resembles a sunrise, with a centered heading and a button.

Visual signature: A heavy, blurred purple horizon that fades upward into a soft pink glow behind centered text.

## Components

- heading
- subheading
- call-to-action button

## Typography

- Display: ABCArizonaFlare — 88px 400
- Heading: ABCArizonaFlare — 56px 400
- Body: EnduroWeb — 20px 400

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #1E0525
- Primary-Action: primary action #32073E
- Accent: accent #895BE7

## Motion evidence

- 30.0–44.0s — A final call-to-action section with the heading 'Discover a new dawn for healthcare.' and a 'Get started' button is shown. The page then scrolls down to reveal the footer containing links for Solutions, Company, Get In Touch, and social media icons. (95% confidence)

## Section quality

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

- Typography: 62 — Large serif display type (ABCArizonaFlare) with tight tracking provides clear hierarchy against the gradient; subheading and button text are legible and well-sized, but pairing is the same system used sitewide with no unique treatment for this section. Next tier: No distinct typographic flourish or scale contrast beyond the standard display/body pairing used elsewhere on the site.
- Composition: 63 — Centered, symmetrical composition with generous whitespace and a clean vertical stack of heading, subheading, and pill button sits well within the gradient field, but the layout is a conventional centered CTA pattern with no unusual spatial choices. Next tier: Lacks any asymmetry, layering, or secondary visual element that would elevate it beyond a standard centered CTA block.
- Motion: inconclusive — Gemini's motion note only describes scroll progression into the footer, not any specific timestamped animation of this section's gradient, text, or button. Next tier: Need explicit timestamped evidence of in-section motion (e.g., gradient shift, text reveal, button hover) to score this axis.
- Content: 60 — Heading, subheading, and button are tightly matched to the healthcare messaging and the sunrise metaphor, giving the copy and visual theme coherence, but the content itself is a standard CTA formula. Next tier: No additional content element (stat, testimonial, visual motif) that would deepen integration beyond headline+subhead+button.
- Originality: 58 — The sunrise-gradient metaphor tied to 'new dawn' copy is a nice conceptual touch, but gradient-background CTA sections are a common pattern and the execution here doesn't push beyond a tasteful blurred color field. Next tier: Needs a distinctive visual or interactive device beyond the gradient-to-copy metaphor to feel hard to substitute.
- Adaptability: 55 — The structure (centered text block over full-bleed gradient) is clearly separable from the skin (specific purple-to-pink colors, font), making it reusable, but the pill button and gradient blend rely on specific color tokens that would need recreation. Next tier: No evidence of independent theming controls (e.g., CSS variables for gradient stops) to confirm effortless decoupling.

Strengths:
- Clear centered hierarchy with ample whitespace
- Gradient color metaphor reinforces the 'new dawn' copy
- Consistent use of established type and button tokens

Weaknesses:
- Conventional centered CTA layout with no unusual structure
- Gradient effect, while thematically apt, is a common device
- No distinct secondary visual element to support the message

Why it does not reach the next tier: The section executes a clean, thematically coherent centered CTA but doesn't introduce any structural, typographic, or interactive element beyond the familiar gradient-background pattern, keeping it at a good-but-unremarkable level.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the centered flex layout and swap gradient color tokens and copy; typography can be substituted with any display/body pair while keeping the pill button shape.

What transfers:
- Centered text-over-gradient layout pattern
- Pill-shaped button style
- Heading/subheading/button content structure

Dependencies:
- Specific purple-to-pink gradient stops
- ABCArizonaFlare display typeface
- EnduroWeb body typeface

## 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 deterministic motion data for this specific section
- No layered or secondary visual asset data beyond the crop

## 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 and button placed over a full-width immersive gradient background.
- Styles: gradient, bold
- Components: heading, subheading, call-to-action button
- Purpose: A prominent call-to-action section featuring a deep purple-to-pink gradient that resembles a sunrise, with a centered heading and a button.
- Visual signature: A heavy, blurred purple horizon that fades upward into a soft pink glow behind centered text.
- Place on the page: 10 of 10, after Editorial (`silnahealth-com:resources_and_blog_grid`)

### 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": "88px",
      "family": "ABCArizonaFlare",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-25: computed CSS at 1440×1000; AI role: 88px ABCArizonaFlare used for the primary hero headline.",
      "sampleId": "font-25",
      "confidence": 1,
      "lineHeight": "88px",
      "letterSpacing": "-2.2px"
    },
    {
      "role": "heading",
      "size": "56px",
      "family": "ABCArizonaFlare",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 56px ABCArizonaFlare used for section headings like 'One Care Readiness Platform...' and 'Taking care of healthcare.'",
      "sampleId": "font-1",
      "confidence": 1,
      "lineHeight": "58.8px",
      "letterSpacing": "-1.4px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "EnduroWeb",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-26: computed CSS at 1440×1000; AI role: 20px EnduroWeb used for lead paragraphs and introductory copy.",
      "sampleId": "font-26",
      "confidence": 0.9,
      "lineHeight": "29px",
      "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": [],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: Primary white background used across the majority of the page.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#1E0525",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed oklch(0.1819 0.0689 318.27); AI role: Deep dark purple (#1E0525) used for headings and primary text.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#32073E",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-7: computed oklch(0.2409 0.1021 317.56); AI role: Solid dark purple (#32073E) used for the background of primary 'Get started' buttons.",
      "sampleId": "color-7",
      "confidence": 0.95
    },
    {
      "hex": "#895BE7",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-16: computed rgb(137, 91, 231); AI role: Vibrant purple (#895BE7) used for icons and small text accents like 'ABA Therapy'.",
      "sampleId": "color-16",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear to have a border-radius of 999px (pill), while UI cards have an estimated 12px-16px radius.",
  "density": "Low density, leveraging ample whitespace to focus attention on typography and UI mockups.",
  "evidence": "Observed from the spacious layout, pill-shaped 'Get started' buttons, rounded product UI images, and constrained text widths.",
  "borderStyle": "Mostly borderless UI relying on shadows, with subtle 1px solid borders on specific elements like the 'guide' tag.",
  "buttonStyle": "Pill-shaped, solid fill with high contrast text.",
  "cornerStyle": "Fully rounded (pill) corners for buttons, and gently rounded corners for UI cards and images.",
  "contentWidth": "Max-width constrained, center-aligned content blocks.",
  "spacingRhythm": "Generous vertical rhythm with large paddings between major sections to maintain a clean, breathable layout."
}
```

### 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. **scroll** — A final call-to-action section with the heading 'Discover a new dawn for healthcare.' and a 'Get started' button is shown. The page then scrolls down to reveal the footer containing links for Solutions, Company, Get In Touch, and social media icons. (30s–44s; 95% 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 text-over-gradient layout pattern; Pill-shaped button style; Heading/subheading/button content structure
- Dependencies: Specific purple-to-pink gradient stops; ABCArizonaFlare display typeface; EnduroWeb body typeface
- Guidance: Reuse the centered flex layout and swap gradient color tokens and copy; typography can be substituted with any display/body pair while keeping the pill button shape.

### 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 “Gradient dawn CTA”.

Purpose: A prominent call-to-action section featuring a deep purple-to-pink gradient that resembles a sunrise, with a centered heading and a button.

Structure: centered single-column. Source layout label: Centered text and button placed over a full-width immersive gradient background.. 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 heavy, blurred purple horizon that fades upward into a soft pink glow behind centered text.

Components: heading, subheading, call-to-action button.

Style direction: gradient, bold.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"88px","family":"ABCArizonaFlare","source":"computed","traits":"Regular","weight":"400","evidence":"font-25: computed CSS at 1440×1000; AI role: 88px ABCArizonaFlare used for the primary hero headline.","sampleId":"font-25","confidence":1,"lineHeight":"88px","letterSpacing":"-2.2px"} {"role":"heading","size":"56px","family":"ABCArizonaFlare","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 56px ABCArizonaFlare used for section headings like 'One Care Readiness Platform...' and 'Taking care of healthcare.'","sampleId":"font-1","confidence":1,"lineHeight":"58.8px","letterSpacing":"-1.4px"} {"role":"body","size":"20px","family":"EnduroWeb","source":"computed","traits":"Regular","weight":"400","evidence":"font-26: computed CSS at 1440×1000; AI role: 20px EnduroWeb used for lead paragraphs and introductory copy.","sampleId":"font-26","confidence":0.9,"lineHeight":"29px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Primary white background used across the majority of the page.","sampleId":"color-1","confidence":1} {"hex":"#1E0525","name":"text","role":"text","source":"computed","evidence":"color-2: computed oklch(0.1819 0.0689 318.27); AI role: Deep dark purple (#1E0525) used for headings and primary text.","sampleId":"color-2","confidence":1} {"hex":"#32073E","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed oklch(0.2409 0.1021 317.56); AI role: Solid dark purple (#32073E) used for the background of primary 'Get started' buttons.","sampleId":"color-7","confidence":0.95} {"hex":"#895BE7","name":"accent","role":"accent","source":"computed","evidence":"color-16: computed rgb(137, 91, 231); AI role: Vibrant purple (#895BE7) used for icons and small text accents like 'ABA Therapy'.","sampleId":"color-16","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: scroll: A final call-to-action section with the heading 'Discover a new dawn for healthcare.' and a 'Get started' button is shown. The page then scrolls down to reveal the footer containing links for Solutions, Company, Get In Touch, and social media icons. (95% confidence)

Transfer these principles: Centered text-over-gradient layout pattern; Pill-shaped button style; Heading/subheading/button content structure.

Dependencies: Specific purple-to-pink gradient stops; ABCArizonaFlare display typeface; EnduroWeb body typeface.

Adaptation guidance: Reuse the centered flex layout and swap gradient color tokens and copy; typography can be substituted with any display/body pair while keeping the pill button shape.

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