# Scroll-animated circular dial dashboard

Schema: Design Details SECTION.md v3.2
Website: pliability // #1 mobility, stretching + recovery app
Source: https://pliability.com/
Source section IDs: 93d3c95e-adf5-460d-b9c4-710f91ed8f62
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A single centered dashed ring stays sticky while its contents swap, so the viewer's attention never leaves one focal point as the story moves on.
- The ring doubles as photo frame and progress meter, and it shows real product data such as scores and deltas, so the visual proves the copy above it.
- A restrained palette of black canvas, white text and one acid-yellow accent keeps the ring the loudest element, with grey surfaces and muted labels in support.

What a screenshot can't show:
- In the recording (about 22–26s) the dashed ring fills clockwise in step with scroll, and the text inside changes between states like 'Measure your mobility' and 'Track your progress'.
- Headings measure 40px with 46px line height and -1.2px tracking, while small labels are 12px on 16px; no CSS animations were detected, so the motion is likely scroll-driven.

Borrow: Tie one repeated shape to scroll progress, so it works as frame, progress indicator and data display while the content inside it changes.
Leave alone: Don't copy the acid-yellow dashed ring on black, the FK Grotesk italic pairing or the pose-tracking phone mockups; a free grotesque sans like Inter would serve as a stand-in.

## Classification

- Type: dashboard
- Layout: Centered interactive graphic that changes states while sticky on scroll.
- Styles: bold, geometric, photographic
- Confidence: 95%

## Purpose and structure

A large, scroll-driven interactive section where a circular dial graphic updates with different app metrics and imagery as the user scrolls.

Visual signature: A dashed yellow circular ring that frames changing photos and numerical score interfaces.

## Components

- sticky-container
- circular-dial
- dynamic-imagery
- metric-displays
- heading

## Typography

- Display: FK Grotesk Regular — 60px 400
- Heading: FK Grotesk Regular — 40px 400
- Body: FK Grotesk Regular — 16px 400
- Mono: FK Grotesk Mono Medium — 12px 500

## Functional palette

- Canvas: canvas #000000
- Text: text #FFFFFF
- Primary-Action: primary action #EDFD3A
- Muted-Text: muted text #8F8F92
- Surface: surface #1C1C1E

## Motion evidence

- 22.0–26.0s — As the user scrolls, a yellow circular dial graphic fills up clockwise, and the text within it changes, showcasing different app features like 'Measure your mobility' and 'Track your progress'. (97% confidence)

## Section quality

Overall: 63.95/100 (Good)
Scored coverage: 100%

- Typography: 62 — Clean hierarchy with regular/italic weight contrast on headings (FK Grotesk) and uppercase mono labels for metric tags. Legible and consistent but a fairly standard two-tier heading treatment with no distinctive typographic craft beyond the italic pairing. Next tier: No unique type-driven moment (e.g., kinetic numerals, custom scale) that elevates it beyond a competent heading/label pairing.
- Composition: 68 — Strong central-axis composition: dashed circular ring frames a photo/phone cutout, with satellite score dials balanced symmetrically around a central phone mockup in the second state. Good use of negative space and radial symmetry to focus attention. Next tier: Layout relies on a single centered-circle motif repeated twice; lacks asymmetry or layered depth that would push it into a more distinctive/memorable composition tier.
- Motion: 66 — Gemini confirms a clockwise-filling dashed dial synced to scroll with text/content swapping inside the ring (22-26s), a well-executed scroll-linked reveal that ties motion directly to content state changes. Next tier: Single confirmed motion beat (fill + text swap); no evidence of secondary motion layers (easing nuance, staggered metric reveals) that would justify a stronger score.
- Content: 65 — Dial directly visualizes real product data (mobility scores, shoulder/hip metrics with deltas), tightly integrating UI chrome (phone mockup, pose-tracking dots) with the narrative copy above it. Next tier: Content integration is clear but conventional dashboard-metric display; no interpretive or narrative layer beyond showing numbers against a photo.
- Originality: 64 — The dashed-ring dial-as-progress-and-content-frame device feels distinct from typical stat-grid or carousel patterns, and doubling it as both photo frame and metric radial display is a clever reuse of one visual motif. Next tier: The core idea (circular progress ring with centered content) is a known UI pattern; execution is polished but doesn't introduce a truly novel interaction beyond scroll-triggered fill.
- Adaptability: 58 — The dial/ring + centered-image structure and metric-badge satellite layout are clearly separable from the specific yellow/black skin and photography, given documented SVG dial, img/svg layering, and token palette. Next tier: Deterministic animation parameters are absent (no animationIds captured), limiting confidence in exactly replicating the scroll-fill timing/easing.

Strengths:
- Scroll-synced dial fill convincingly doubles as both a content frame and a literal progress/score visualization, reinforcing the 'measure in 3 minutes' message
- Symmetrical radial layout of satellite metric circles around a central phone creates a balanced, dashboard-like reading pattern
- Consistent dashed-yellow ring motif ties the two scroll states together into one coherent visual system

Weaknesses:
- Underlying interaction (radial progress ring) is a familiar UI pattern applied to marketing copy rather than a novel structural idea
- Typography treatment is serviceable but not distinctive beyond the heading/italic pairing
- No deterministic animation timing/easing data provided, limiting certainty about motion polish

Why it does not reach the next tier: The section executes a scroll-linked radial dial well and ties it convincingly to real metrics, but the core visual device is a known dashboard/progress-ring pattern without a structural or typographic innovation that would make it feel irreplaceable; motion evidence is limited to a single confirmed beat.

## Adaptation guidance

- Effort: Medium
- Guidance: Rebuild as a sticky section with an SVG dashed-ring component whose stroke-dasharray animates on scroll progress; swap in generic metric data and photography while keeping the radial satellite-badge layout and heading-pair typography structure.

What transfers:
- Centered circular dial/ring as a scroll-state container
- Satellite metric-badge layout radiating from a central focal image
- Dashed progress-ring motif tied to scroll progress
- Heading pair with regular/italic weight contrast

Dependencies:
- Custom photography/pose-tracking overlay assets
- Specific SVG dial geometry and dash spacing
- Scroll-linked animation engine (e.g., Framer-style scroll triggers)
- Yellow-on-black brand palette for ring and accents

## 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 timing/easing parameters captured in deterministic data, so motion scoring relies on Gemini's single timestamped observation
- Font-size/letter-spacing values are approximate computed CSS at one breakpoint only
- Cannot confirm full range of scroll states beyond the two instances shown in 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: dashboard
- Source type: dashboard
- Structure: centered single-column
- Layout: Centered interactive graphic that changes states while sticky on scroll.
- Styles: bold, geometric, photographic
- Components: sticky-container, circular-dial, dynamic-imagery, metric-displays, heading
- Purpose: A large, scroll-driven interactive section where a circular dial graphic updates with different app metrics and imagery as the user scrolls.
- Visual signature: A dashed yellow circular ring that frames changing photos and numerical score interfaces.
- Place on the page: 11 of 20, after Feature collection (`pliability-com:C10`), before Product UI (`0ecb8dc0-356d-4431-bb5a-43aacffadb45`)

### Crop and composition

- Crop: 1440×1935px; aspect ratio 0.744:1
- Page bounds: 14238–16173px of 26954px
- 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": "FK Grotesk",
      "stack": "\"FK Grotesk\", \"FK Grotesk Placeholder\", sans-serif",
      "size": "12px",
      "weight": "400",
      "lineHeight": "16px",
      "letterSpacing": "-0.1px",
      "sample": "Currently available on iOS.",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-32"
    },
    {
      "role": "section heading",
      "family": "FK Grotesk Regular",
      "stack": "\"FK Grotesk Regular\", \"FK Grotesk Regular Placeholder\", sans-serif",
      "size": "40px",
      "weight": "400",
      "lineHeight": "46px",
      "letterSpacing": "-1.2px",
      "sample": "targeted routines",
      "element": "span",
      "occurrences": 5,
      "sourceId": "font-36"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "60px",
      "family": "FK Grotesk Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 60px, -1.8px tracking. Used for prominent headings like 'Daily mobility for everyone.'",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "60px",
      "letterSpacing": "-1.8px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "FK Grotesk Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 40px, -1.2px tracking. Used for section headings and large statements.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "46px",
      "letterSpacing": "-1.2px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "FK Grotesk Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 16px. Used for primary descriptive text and paragraphs.",
      "sampleId": "font-12",
      "confidence": 0.9,
      "lineHeight": "24px",
      "letterSpacing": "-0.2px"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "FK Grotesk Mono Medium",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-13: computed CSS at 1440×1000; AI role: FK Grotesk Mono Medium, 12px, 1.9px tracking, uppercase. Used for labels, tags, and secondary metadata.",
      "sampleId": "font-13",
      "confidence": 0.9,
      "lineHeight": "12px",
      "letterSpacing": "1.9px"
    }
  ]
}
```

### 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 rgb(0, 0, 0) used as the primary background color across most sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(255, 255, 255); AI role: White rgb(255, 255, 255) used for primary headings and body copy.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#EDFD3A",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-3: computed rgb(237, 253, 58); AI role: Vivid yellow-green rgb(237, 253, 58) used for 'Start Free' buttons and highlights.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#8F8F92",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-2: computed rgb(143, 143, 146); AI role: Gray rgb(143, 143, 146) used for secondary text and placeholders.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#1C1C1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-16: computed rgb(28, 28, 30); AI role: Dark gray rgb(28, 28, 30) used for floating bars and some button backgrounds.",
      "sampleId": "color-16",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear fully rounded (pill-shaped). Cards have medium border radii (e.g., product cards, testimonials).",
  "density": "Low density. High reliance on negative space to draw focus to central animations and large typography.",
  "evidence": "Visual inspection of the crops shows pill buttons, full-width dark backgrounds, and centered alignments.",
  "borderStyle": "Mostly borderless designs relying on background contrast. Occasional subtle semi-transparent white borders (color-24) on inputs or cards.",
  "buttonStyle": "Solid fill (color-3) with contrasting dark text for primary actions. Pill shape.",
  "cornerStyle": "Rounded corners are prominent on interactive elements (buttons, inputs) and product cards.",
  "contentWidth": "Centered layouts with constrained widths for text readability, expanding to full-width for media and grids.",
  "spacingRhythm": "Generous vertical padding between main sections, often leveraging full-viewport heights to accommodate scroll-linked narratives."
}
```

### 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.
- Representative content widths: 900, 883, 657, 531, 396, 315, 305px.
- Layout containers: 0; cards/surfaces: 0; media elements: 7; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 14238,
      "bottom": 16173,
      "pageHeight": 26954
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      900,
      883,
      657,
      531,
      396,
      315,
      305
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "900×594px",
    "position": "x 270px, y 14468px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://pliability.com/__cdn/framerusercontent.com/images/nUpizMDoQoyHNGGV2prukb1qwUk.png?width=838&height=553"
  },
  {
    "element": "img · img",
    "size": "883×582px",
    "position": "x 279px, y 14474px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://pliability.com/__cdn/framerusercontent.com/images/NiEFVDmgHrJDzK1VnW28VA9z2M.webp?width=1676&height=1066"
  },
  {
    "element": "svg · svg",
    "size": "657×657px",
    "position": "x 391px, y 14437px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "657×657px",
    "position": "x 391px, y 14437px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "657×657px",
    "position": "x 391px, y 14437px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · img",
    "size": "531×531px",
    "position": "x 454px, y 14500px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://pliability.com/__cdn/framerusercontent.com/images/eEwWY8kcdNf9nSO1DVyIxStbBC8.svg?width=542&height=542"
  },
  {
    "element": "img · img",
    "size": "211×394px",
    "position": "x 626px, y 14531px",
    "aspectRatio": 0.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://pliability.com/__cdn/framerusercontent.com/images/GqhKkPM4EIHdKOpX0iVVr38oWOI.svg?width=200&height=373"
  }
]
```

#### 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": null,
  "cards": [],
  "media": [
    {
      "id": "ld-1087",
      "tag": "img",
      "rect": {
        "x": 270,
        "y": 14468,
        "width": 900,
        "height": 594
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://pliability.com/__cdn/framerusercontent.com/images/nUpizMDoQoyHNGGV2prukb1qwUk.png?width=838&height=553",
        "naturalWidth": 1439,
        "naturalHeight": 950
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1101",
      "tag": "img",
      "rect": {
        "x": 279,
        "y": 14474,
        "width": 883,
        "height": 582
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://pliability.com/__cdn/framerusercontent.com/images/NiEFVDmgHrJDzK1VnW28VA9z2M.webp?width=1676&height=1066",
        "naturalWidth": 1439,
        "naturalHeight": 915
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1090",
      "tag": "svg",
      "rect": {
        "x": 391,
        "y": 14437,
        "width": 657,
        "height": 657
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1094",
      "tag": "svg",
      "rect": {
        "x": 391,
        "y": 14437,
        "width": 657,
        "height": 657
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1096",
      "tag": "svg",
      "rect": {
        "x": 391,
        "y": 14437,
        "width": 657,
        "height": 657
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1084",
      "tag": "img",
      "rect": {
        "x": 454,
        "y": 14500,
        "width": 531,
        "height": 531
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://pliability.com/__cdn/framerusercontent.com/images/eEwWY8kcdNf9nSO1DVyIxStbBC8.svg?width=542&height=542",
        "naturalWidth": 1440,
        "naturalHeight": 1440
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1104",
      "tag": "img",
      "rect": {
        "x": 626,
        "y": 14531,
        "width": 211,
        "height": 394
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://pliability.com/__cdn/framerusercontent.com/images/GqhKkPM4EIHdKOpX0iVVr38oWOI.svg?width=200&height=373",
        "naturalWidth": 200,
        "naturalHeight": 373
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.5,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 14238,
    "bottom": 16173,
    "pageHeight": 26954
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      900,
      883,
      657,
      531,
      396,
      315,
      305
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 7,
    "animations": 0,
    "elementsInSection": 29
  },
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-24T08:09:11.680Z",
  "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

1. **scroll** — As the user scrolls, a yellow circular dial graphic fills up clockwise, and the text within it changes, showcasing different app features like 'Measure your mobility' and 'Track your progress'. (22s–26s; 97% 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: 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 circular dial/ring as a scroll-state container; Satellite metric-badge layout radiating from a central focal image; Dashed progress-ring motif tied to scroll progress; Heading pair with regular/italic weight contrast
- Dependencies: Custom photography/pose-tracking overlay assets; Specific SVG dial geometry and dash spacing; Scroll-linked animation engine (e.g., Framer-style scroll triggers); Yellow-on-black brand palette for ring and accents
- Guidance: Rebuild as a sticky section with an SVG dashed-ring component whose stroke-dasharray animates on scroll progress; swap in generic metric data and photography while keeping the radial satellite-badge layout and heading-pair typography structure.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original dashboard section inspired by the design evidence titled “Scroll-animated circular dial dashboard”.

Purpose: A large, scroll-driven interactive section where a circular dial graphic updates with different app metrics and imagery as the user scrolls.

Structure: centered single-column. Source layout label: Centered interactive graphic that changes states while sticky on scroll.. 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 dashed yellow circular ring that frames changing photos and numerical score interfaces.

Components: sticky-container, circular-dial, dynamic-imagery, metric-displays, heading.

Style direction: bold, geometric, photographic.

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

Typography evidence: {"role":"display","size":"60px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 60px, -1.8px tracking. Used for prominent headings like 'Daily mobility for everyone.'","sampleId":"font-3","confidence":0.95,"lineHeight":"60px","letterSpacing":"-1.8px"} {"role":"heading","size":"40px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 40px, -1.2px tracking. Used for section headings and large statements.","sampleId":"font-1","confidence":0.9,"lineHeight":"46px","letterSpacing":"-1.2px"} {"role":"body","size":"16px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 16px. Used for primary descriptive text and paragraphs.","sampleId":"font-12","confidence":0.9,"lineHeight":"24px","letterSpacing":"-0.2px"} {"role":"mono","size":"12px","family":"FK Grotesk Mono Medium","source":"computed","traits":"uppercase","weight":"500","evidence":"font-13: computed CSS at 1440×1000; AI role: FK Grotesk Mono Medium, 12px, 1.9px tracking, uppercase. Used for labels, tags, and secondary metadata.","sampleId":"font-13","confidence":0.9,"lineHeight":"12px","letterSpacing":"1.9px"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Solid black rgb(0, 0, 0) used as the primary background color across most sections.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White rgb(255, 255, 255) used for primary headings and body copy.","sampleId":"color-4","confidence":0.95} {"hex":"#EDFD3A","name":"primary action","role":"primary-action","source":"computed","evidence":"color-3: computed rgb(237, 253, 58); AI role: Vivid yellow-green rgb(237, 253, 58) used for 'Start Free' buttons and highlights.","sampleId":"color-3","confidence":0.95} {"hex":"#8F8F92","name":"muted text","role":"muted-text","source":"computed","evidence":"color-2: computed rgb(143, 143, 146); AI role: Gray rgb(143, 143, 146) used for secondary text and placeholders.","sampleId":"color-2","confidence":0.9} {"hex":"#1C1C1E","name":"surface","role":"surface","source":"computed","evidence":"color-16: computed rgb(28, 28, 30); AI role: Dark gray rgb(28, 28, 30) used for floating bars and some button backgrounds.","sampleId":"color-16","confidence":0.85}

Typography measured inside this section: {"id":"font-32","size":"12px","count":1,"family":"FK Grotesk","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":15137,"text":"Currently available on iOS.","property":"font"}],"fontStack":"\"FK Grotesk\", \"FK Grotesk Placeholder\", sans-serif","lineHeight":"16px","letterSpacing":"-0.1px"} {"id":"font-36","size":"40px","count":5,"family":"FK Grotesk Regular","traits":"italic","weight":"400","contexts":[{"tag":"span","top":14346,"text":"targeted routines","property":"font"},{"tag":"span","top":14346,"text":"over time","property":"font"},{"tag":"span","top":14346,"text":"instant feedback","property":"font"}],"fontStack":"\"FK Grotesk Regular\", \"FK Grotesk Regular Placeholder\", sans-serif","lineHeight":"46px","letterSpacing":"-1.2px"}

No section-bounded color samples were measured.

Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[900,883,657,531,396,315,305]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":270,"y":14468,"width":900,"height":594},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":279,"y":14474,"width":883,"height":582},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":391,"y":14437,"width":657,"height":657},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":391,"y":14437,"width":657,"height":657},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: As the user scrolls, a yellow circular dial graphic fills up clockwise, and the text within it changes, showcasing different app features like 'Measure your mobility' and 'Track your progress'. (97% confidence)

Transfer these principles: Centered circular dial/ring as a scroll-state container; Satellite metric-badge layout radiating from a central focal image; Dashed progress-ring motif tied to scroll progress; Heading pair with regular/italic weight contrast.

Dependencies: Custom photography/pose-tracking overlay assets; Specific SVG dial geometry and dash spacing; Scroll-linked animation engine (e.g., Framer-style scroll triggers); Yellow-on-black brand palette for ring and accents.

Adaptation guidance: Rebuild as a sticky section with an SVG dashed-ring component whose stroke-dasharray animates on scroll progress; swap in generic metric data and photography while keeping the radial satellite-badge layout and heading-pair typography structure.

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