# Scrolling stats reveal

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

## Builder's note

What makes it work:
- Numbers sit inside one flowing sentence ('1000+ payors across 50 states supporting 250k+ patients'), so the stats read as a story instead of a grid of widgets.
- Bold key figures against lighter connective text make the sentence easy to scan, and the centered column on pure white keeps attention on the words.
- A third-party G2 rating badge sits beside the claims as proof, and the dark plum text on white keeps contrast strong.

What a screenshot can't show:
- The recording shows the badge appearing first, then the stat text fading in line by line over about six seconds of scrolling; exact easing and per-line delays weren't captured.
- No font sizes, line heights or spacing were measured, so the empty vertical gaps between reveals can't be quantified.

Borrow: Write the key numbers into one plain-language sentence and reveal it line by line, so scrolling sets the reading pace.
Leave alone: Don't copy Silna's plum and violet palette, its serif-style type, or the G2 badge itself; use your own proof element and a free serif such as Source Serif.

## Classification

- Type: stats
- Layout: Centered sparse text layout with scroll-triggered line reveals.
- Styles: minimal, typographic
- Confidence: 95%

## Purpose and structure

A minimalist white section where key platform statistics fade in line by line as the user scrolls, accompanied by a G2 rating badge.

Visual signature: Sparse, large gray and black typography fading in sequentially on a solid white background.

## Components

- statistics text
- rating badge

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

- 6.0–12.0s — A row of partner logos fades in under the heading 'EMPOWERING LEADING HEALTHCARE PROVIDERS'. As the page scrolls down, a G2 rating badge appears, followed by statistics text ('Silna works with 1000+ payors across 50 states supporting 250k+ patients.') that fades in line by line. (90% confidence)

## Section quality

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

- Typography: 62 — Clean mixed-weight serif-ish body type with clear bold/light contrast differentiates key stats from connective text, giving good scannability, but it's a single statement set with no hierarchy beyond bold/regular weight swap; no display type or distinctive craft visible in this crop. Next tier: Needs more typographic variation (scale, color, or treatment) beyond weight toggling to feel distinctive rather than a standard stat-highlight pattern.
- Composition: 58 — Sparse centered layout with generous whitespace and a repeated G2 badge anchoring each scroll stage; functional but visually thin, with large empty vertical spans that read as filler rather than deliberate pacing. Next tier: Needs more compositional incident (secondary elements, asymmetry, or visual rhythm) in the long empty spans to earn higher marks than a plain centered text block.
- Motion: 56 — Gemini's timestamped description confirms line-by-line fade-in of stats and badge reveal, a straightforward progressive-reveal scroll animation; functional but a common pattern with no distinguishing timing or physicality described. Next tier: Would need more specific, unusual motion craft (easing, stagger variation, directional movement) to exceed a generic fade-in reveal.
- Content: 60 — Numbers are embedded naturally in a sentence rather than isolated big-number blocks, which is a reasonably integrated approach to stat presentation, paired with a third-party rating badge for credibility. Next tier: Needs tighter integration with supporting visuals (icons, charts, imagery) to move past plain sentence-based stat delivery.
- Originality: 55 — Scroll-revealed stat sentences with a rating badge is a familiar SaaS marketing pattern; the repeated badge across scroll stages is a minor variation but not a distinctive idea. Next tier: Lacks a unique structural or visual conceit beyond the common progressive-text-reveal-with-badge formula.
- Adaptability: 60 — Simple sentence-based layout with discrete text/badge components is easy to decouple from skin (color, font) and reusable across contexts given deterministic token evidence (palette, type roles). Next tier: No evidence of responsive/breakpoint behavior or componentized badge system to justify higher confidence in adaptability.

Strengths:
- Clear bold/regular weight contrast highlights key stats within sentence
- Repeated G2 rating badge reinforces credibility across scroll stages
- Generous whitespace keeps focus on the statistic sentence

Weaknesses:
- Large unused vertical space reads as padding rather than intentional pacing
- Motion is a standard line-by-line fade-in with no distinguishing craft
- Stat presentation is sentence-only, lacking supporting visual elements
- Overall pattern (scroll-reveal stats + badge) is a common SaaS convention

Why it does not reach the next tier: The section executes a familiar scroll-reveal stats pattern competently but lacks any distinguishing visual, motion, or structural idea that would make it memorable; the long empty vertical spans between reveals feel like scaffolding rather than designed rhythm.

## Adaptation guidance

- Effort: Low
- Guidance: Swap stat copy, badge brand, and type family; the underlying fade-in-on-scroll sentence structure and centered layout transfer directly to other contexts with minimal rework.

What transfers:
- Sentence-embedded stat highlighting via weight contrast
- Scroll-triggered line reveal structure
- Rating badge component pattern

Dependencies:
- Specific stat copy and numbers
- G2 badge asset/brand mark
- ABCArizonaFlare/EnduroWeb type pairing for voice

## 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 relies solely on Gemini's single timestamped description, not direct video inspection
- Only one source crop image provided, limiting judgment of full scroll sequence and end states
- No deterministic data on animation easing, duration, or exact spacing values

## 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: stats
- Source type: stats
- Structure: centered single-column
- Layout: Centered sparse text layout with scroll-triggered line reveals.
- Styles: minimal, typographic
- Components: statistics text, rating badge
- Purpose: A minimalist white section where key platform statistics fade in line by line as the user scrolls, accompanied by a G2 rating badge.
- Visual signature: Sparse, large gray and black typography fading in sequentially on a solid white background.
- Place on the page: 4 of 10, after Logo strip (`5c5441f0-3266-436c-947f-1bb05bacf349`), before Feature collection (`silnahealth-com:core_functions_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 row of partner logos fades in under the heading 'EMPOWERING LEADING HEALTHCARE PROVIDERS'. As the page scrolls down, a G2 rating badge appears, followed by statistics text ('Silna works with 1000+ payors across 50 states supporting 250k+ patients.') that fades in line by line. (6s–12s; 90% 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: Sentence-embedded stat highlighting via weight contrast; Scroll-triggered line reveal structure; Rating badge component pattern
- Dependencies: Specific stat copy and numbers; G2 badge asset/brand mark; ABCArizonaFlare/EnduroWeb type pairing for voice
- Guidance: Swap stat copy, badge brand, and type family; the underlying fade-in-on-scroll sentence structure and centered layout transfer directly to other contexts with minimal rework.

### 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 stats section inspired by the design evidence titled “Scrolling stats reveal”.

Purpose: A minimalist white section where key platform statistics fade in line by line as the user scrolls, accompanied by a G2 rating badge.

Structure: centered single-column. Source layout label: Centered sparse text layout with scroll-triggered line reveals.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Sparse, large gray and black typography fading in sequentially on a solid white background.

Components: statistics text, rating badge.

Style direction: minimal, typographic.

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 row of partner logos fades in under the heading 'EMPOWERING LEADING HEALTHCARE PROVIDERS'. As the page scrolls down, a G2 rating badge appears, followed by statistics text ('Silna works with 1000+ payors across 50 states supporting 250k+ patients.') that fades in line by line. (90% confidence)

Transfer these principles: Sentence-embedded stat highlighting via weight contrast; Scroll-triggered line reveal structure; Rating badge component pattern.

Dependencies: Specific stat copy and numbers; G2 badge asset/brand mark; ABCArizonaFlare/EnduroWeb type pairing for voice.

Adaptation guidance: Swap stat copy, badge brand, and type family; the underlying fade-in-on-scroll sentence structure and centered layout transfer directly to other contexts with minimal rework.

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