# Stats and press logo row Schema: Design Details SECTION.md v3.2 Website: pliability // #1 mobility, stretching + recovery app Source: https://pliability.com/ Source section IDs: ef095912-f608-4626-81b0-21a93e532be5 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Big yellow numerals sit in a single row against black, so the key claims read in a glance and the accent colour carries the emphasis. - Type roles are clear: oversized tight-tracked numbers, a white heading, and small muted gray labels give three distinct levels without extra decoration. - The gray press logos sit centered below with generous space, so they read as quiet proof and never compete with the stats. What a screenshot can't show: - The recording showed no motion, so there is no count-up or reveal to copy. - Measured body text is 18px FK Grotesk Regular with 27.9px line height and -0.2px letter spacing; no spacing gaps were captured. Borrow: Pair one saturated accent for the numbers with muted neutrals for labels and logos, so proof reads fast and the credibility row stays calm. Leave alone: Don't copy the exact yellow-on-black pairing or the FK Grotesk typeface; use your own accent and a free grotesque like Inter or Space Grotesk. ## Classification - Type: stats - Layout: Horizontal arrangement of large stat numbers above a centered row of gray partner logos. - Styles: minimal, typographic, bold - Confidence: 98% ## Purpose and structure A minimalist section presenting key performance statistics with highlighted numbers, followed by a row of trusted press logos. Visual signature: Bright yellow percentage numbers in a row contrasting against a dark background, paired with recognizable publisher logos. ## Components - heading - statistic-numbers - logo-row ## 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 - No section-specific authored motion was established. ## Section quality Overall: 57.47/100 (Competent) Scored coverage: 85% - Typography: 62 — Clear hierarchy between bold yellow numerals (large, tight tracking), white heading, and muted gray labels/logos row. Consistent with documented type system (FK Grotesk) and uses scale contrast effectively, but it's a familiar stat-block pattern with no distinctive typographic treatment beyond color and size. Next tier: Needs a more distinctive numeral treatment (custom ligatures, varied scale, kinetic counting) to exceed a polished-but-standard stat row. - Composition: 60 — Simple four-column stat grid with a divider line, followed by a separate centered logo row beneath generous whitespace; alignment is clean and legible, but the layout is a very conventional stacked pattern with plain horizontal dividers and no spatial tension or unique grid logic. Next tier: Lacks compositional ambition—would need asymmetry, scale variation, or connective visual logic between the two rows to feel more considered than a generic stats+logos template. - Motion: not_assessed — No motion_moments or animation data supplied; cannot assess. Next tier: Provide timestamped evidence of any counter animation, logo fade-in, or scroll reveal to assess motion. - Content: 58 — Numbers and labels are short, legible, and support a credibility narrative paired with press logos; content fits the section's purpose but statements are generic marketing claims without sourcing or context. Next tier: Add specificity (sourcing, context, or interactive detail) to make the content feel substantiated rather than a stock proof-point list. - Originality: 40 — This is an extremely common SaaS/marketing stat-bar-plus-logo-row pattern; the yellow-on-black color pairing is the only distinguishing trait, which is a palette choice rather than an original structural idea. Next tier: Needs a structural or interaction idea unique to the dataset (e.g., unconventional grouping, data visualization, or unexpected layout) to move beyond a generic template. - Adaptability: 65 — Structure (flex row, 64px gaps, repeated stat+label pairs, logo row) is clearly separable from the yellow/black skin; tokens for spacing, type roles, and colors are deterministically documented, making restyling straightforward. Next tier: Would benefit from documented responsive/breakpoint behavior to confirm adaptability beyond the captured desktop viewport. Strengths: - Clear visual hierarchy via color (yellow stats) against black background - Consistent spacing and alignment across stat columns and logo row - Clean separation of proof points from stats using a divider and label Weaknesses: - Highly generic stat-bar-plus-logo pattern seen across many SaaS marketing sites - No motion evidence provided to assess engagement or dynamism - Logos rendered in flat gray dilute brand recognition without clear purpose - Composition is a plain stacked layout with no spatial or structural tension Why it does not reach the next tier: The section executes a familiar stats+trust-logos template cleanly but offers no structural novelty, no confirmed motion/detail refinement, and no deeper content substantiation—these are needed to progress past a competent/polished tier. ## Adaptation guidance - Effort: Low - Guidance: Swap stat values, labels, and logo assets while preserving the flex layout, divider lines, and type-role hierarchy (large colored numeral, muted label, uppercase micro-copy). What transfers: - Four-column stat layout with label beneath numeral - Divider-separated two-row structure (stats, then logos) - Flex-based spacing system (64px gaps) and consistent svg logo sizing Dependencies: - FK Grotesk typeface for consistent proportions - Yellow-green accent color for stat emphasis - Specific press logo assets ## 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 data supplied, motion axis not assessed - Cannot verify responsive behavior outside captured desktop viewport - Exact letter-spacing/line-height for stat numerals not confirmed from typography tokens ## 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: Horizontal arrangement of large stat numbers above a centered row of gray partner logos. - Styles: minimal, typographic, bold - Components: heading, statistic-numbers, logo-row - Purpose: A minimalist section presenting key performance statistics with highlighted numbers, followed by a row of trusted press logos. - Visual signature: Bright yellow percentage numbers in a row contrasting against a dark background, paired with recognizable publisher logos. - Place on the page: 16 of 20, after Testimonials (`3bb6bdc5-fb9d-4dc3-9664-9415933160e9`), before Call to action (`pliability-com:C17`) ### Crop and composition - Crop: 1440×654px; aspect ratio 2.202:1 - Page bounds: 23247–23901px 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 Regular", "stack": "\"FK Grotesk Regular\", \"FK Grotesk Regular Placeholder\", sans-serif", "size": "18px", "weight": "400", "lineHeight": "27.9px", "letterSpacing": "-0.2px", "sample": "\"I've been with pliability since before the rebrand. I also have been a CrossFit instructor since 20", "element": "p", "occurrences": 7, "sourceId": "font-19" } ], "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: 325, 285px. - Layout containers: 0; cards/surfaces: 4; media elements: 9; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 23247, "bottom": 23901, "pageHeight": 26954 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 325, 285 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "video · video", "size": "325×578px", "position": "x 40px, y 23156px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "8px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "video · video", "size": "325×578px", "position": "x 385px, y 23493px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "8px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "video · video", "size": "325×578px", "position": "x 730px, y 22998px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "8px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "video · video", "size": "325×578px", "position": "x 1075px, y 23156px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "8px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" } ], "surfaces": { "radii": [ "8px", "100px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "video · video", "size": "325×578px", "position": "x 40px, y 23156px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "8px", "overflow": "clip", "source": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153441/site/video/social-nattiegolf.mp4" }, { "element": "video · video", "size": "325×578px", "position": "x 385px, y 23493px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "8px", "overflow": "clip", "source": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153445/site/video/social-pat-vellner.mp4" }, { "element": "video · video", "size": "325×578px", "position": "x 730px, y 22998px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "8px", "overflow": "clip", "source": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153422/site/video/social-diane.mp4" }, { "element": "video · video", "size": "325×578px", "position": "x 1075px, y 23156px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "8px", "overflow": "clip", "source": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153431/site/video/social-jeanlucdecoster.mp4" }, { "element": "img · img", "size": "325×263px", "position": "x 385px, y 23209px", "aspectRatio": 1.2, "objectFit": "cover", "objectPosition": "0% 0%", "radius": "0px", "overflow": "clip", "source": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648" }, { "element": "img · img", "size": "325×263px", "position": "x 730px, y 23595px", "aspectRatio": 1.2, "objectFit": "cover", "objectPosition": "0% 0%", "radius": "0px", "overflow": "clip", "source": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648" }, { "element": "img · img", "size": "325×208px", "position": "x 1075px, y 23754px", "aspectRatio": 1.6, "objectFit": "cover", "objectPosition": "0% 0%", "radius": "0px", "overflow": "clip", "source": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648" }, { "element": "img · img", "size": "32×32px", "position": "x 750px, y 23615px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "100px", "overflow": "clip", "source": "https://pliability.com/__cdn/framerusercontent.com/images/x24mZL5lHXAjaPc8RnyTIRsXq9A.png?width=130&height=121" }, { "element": "img · img", "size": "32×32px", "position": "x 1095px, y 23774px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "100px", "overflow": "clip", "source": "https://pliability.com/__cdn/framerusercontent.com/images/tC26fj8Adt7A5XqPeQ9n4bTnTeQ.png?width=130&height=122" } ] ``` #### 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": [ { "id": "ld-1215", "tag": "video", "rect": { "x": 40, "y": 23156, "width": 325, "height": 578 }, "role": null, "label": "video", "border": "0px none rgb(0, 0, 0)", "radius": "8px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-1253", "tag": "video", "rect": { "x": 385, "y": 23493, "width": 325, "height": 578 }, "role": null, "label": "video", "border": "0px none rgb(0, 0, 0)", "radius": "8px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-1275", "tag": "video", "rect": { "x": 730, "y": 22998, "width": 325, "height": 578 }, "role": null, "label": "video", "border": "0px none rgb(0, 0, 0)", "radius": "8px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-1313", "tag": "video", "rect": { "x": 1075, "y": 23156, "width": 325, "height": 578 }, "role": null, "label": "video", "border": "0px none rgb(0, 0, 0)", "radius": "8px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" } ], "media": [ { "id": "ld-1215", "tag": "video", "rect": { "x": 40, "y": 23156, "width": 325, "height": 578 }, "role": null, "label": "video", "media": { "src": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153441/site/video/social-nattiegolf.mp4", "poster": "", "duration": 27.1 }, "radius": "8px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "50% 50%" }, { "id": "ld-1253", "tag": "video", "rect": { "x": 385, "y": 23493, "width": 325, "height": 578 }, "role": null, "label": "video", "media": { "src": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153445/site/video/social-pat-vellner.mp4", "poster": "", "duration": 31.6 }, "radius": "8px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "50% 50%" }, { "id": "ld-1275", "tag": "video", "rect": { "x": 730, "y": 22998, "width": 325, "height": 578 }, "role": null, "label": "video", "media": { "src": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153422/site/video/social-diane.mp4", "poster": "", "duration": 22.166667 }, "radius": "8px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "50% 50%" }, { "id": "ld-1313", "tag": "video", "rect": { "x": 1075, "y": 23156, "width": 325, "height": 578 }, "role": null, "label": "video", "media": { "src": "https://media.pliability.com/video/upload/f_auto,q_auto:eco,ac_none,c_scale,w_720,h_1280/v1763153431/site/video/social-jeanlucdecoster.mp4", "poster": "", "duration": 35.033333 }, "radius": "8px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "50% 50%" }, { "id": "ld-1240", "tag": "img", "rect": { "x": 385, "y": 23209, "width": 325, "height": 263 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648", "naturalWidth": 325, "naturalHeight": 198 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.2, "objectPosition": "0% 0%" }, { "id": "ld-1280", "tag": "img", "rect": { "x": 730, "y": 23595, "width": 325, "height": 263 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648", "naturalWidth": 325, "naturalHeight": 198 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.2, "objectPosition": "0% 0%" }, { "id": "ld-1318", "tag": "img", "rect": { "x": 1075, "y": 23754, "width": 325, "height": 208 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://pliability.com/__cdn/framerusercontent.com/images/ex8aYNyNZwrM9hDvInfuwJGsgA.png?scale-down-to=512&width=1059&height=648", "naturalWidth": 325, "naturalHeight": 198 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.6, "objectPosition": "0% 0%" }, { "id": "ld-1287", "tag": "img", "rect": { "x": 750, "y": 23615, "width": 32, "height": 32 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://pliability.com/__cdn/framerusercontent.com/images/x24mZL5lHXAjaPc8RnyTIRsXq9A.png?width=130&height=121", "naturalWidth": 130, "naturalHeight": 121 }, "radius": "100px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1325", "tag": "img", "rect": { "x": 1095, "y": 23774, "width": 32, "height": 32 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://pliability.com/__cdn/framerusercontent.com/images/tC26fj8Adt7A5XqPeQ9n4bTnTeQ.png?width=130&height=122", "naturalWidth": 130, "naturalHeight": 122 }, "radius": "100px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 23247, "bottom": 23901, "pageHeight": 26954 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 325, 285 ] }, "coverage": { "cards": 4, "media": 9, "animations": 0, "elementsInSection": 14 }, "surfaces": { "radii": [ "8px", "100px" ], "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 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: Four-column stat layout with label beneath numeral; Divider-separated two-row structure (stats, then logos); Flex-based spacing system (64px gaps) and consistent svg logo sizing - Dependencies: FK Grotesk typeface for consistent proportions; Yellow-green accent color for stat emphasis; Specific press logo assets - Guidance: Swap stat values, labels, and logo assets while preserving the flex layout, divider lines, and type-role hierarchy (large colored numeral, muted label, uppercase micro-copy). ### 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 stats section inspired by the design evidence titled “Stats and press logo row”. Purpose: A minimalist section presenting key performance statistics with highlighted numbers, followed by a row of trusted press logos. Structure: centered single-column. Source layout label: Horizontal arrangement of large stat numbers above a centered row of gray partner logos.. 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 yellow percentage numbers in a row contrasting against a dark background, paired with recognizable publisher logos. Components: heading, statistic-numbers, logo-row. Style direction: minimal, typographic, bold. Observed crop: 1440×654px (2.202: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-19","size":"18px","count":7,"family":"FK Grotesk Regular","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":22893,"text":"\"I've been with pliability since before the rebrand. I also have been a CrossFit instructor since 20","property":"font"},{"tag":"p","top":22269,"text":"\"This blows everything and anything I've ever done for mobility out of the water! The subscription i","property":"font"},{"tag":"p","top":23285,"text":"\"The pliability app has been a game-changer for me—not just for the stretches, but for the quiet mom","property":"font"}],"fontStack":"\"FK Grotesk Regular\", \"FK Grotesk Regular Placeholder\", sans-serif","lineHeight":"27.9px","letterSpacing":"-0.2px"} No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[325,285]}; surfaces {"radii":["8px","100px"],"borders":[],"shadows":[]}; media [{"tag":"video","rect":{"x":40,"y":23156,"width":325,"height":578},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"},{"tag":"video","rect":{"x":385,"y":23493,"width":325,"height":578},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"},{"tag":"video","rect":{"x":730,"y":22998,"width":325,"height":578},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"},{"tag":"video","rect":{"x":1075,"y":23156,"width":325,"height":578},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"}] Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Four-column stat layout with label beneath numeral; Divider-separated two-row structure (stats, then logos); Flex-based spacing system (64px gaps) and consistent svg logo sizing. Dependencies: FK Grotesk typeface for consistent proportions; Yellow-green accent color for stat emphasis; Specific press logo assets. Adaptation guidance: Swap stat values, labels, and logo assets while preserving the flex layout, divider lines, and type-role hierarchy (large colored numeral, muted label, uppercase micro-copy). Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.