# Animated Results Chart Schema: Design Details SECTION.md v3.2 Website: Cofactr Source: https://www.cofactr.com/ Source section IDs: gap-7fe1947c-2382-3365 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The asymmetric split gives the copy and CTA a narrow left column, so the large dark green chart on the right carries the visual weight. - A floating '85% Less Line Stoppage' tag sits on the chart, and a stat card below repeats the figure with supporting copy, so the number and the visual read as one message. - Rounded-top bar columns, a dotted texture and a card overlapping the column boundary add depth while the white canvas stays minimal. What a screenshot can't show: - In the recording the chart draws itself as the user scrolls, over roughly 12 to 15 seconds of the clip. - The stat card has carousel dots, but no interaction or timing for them was captured, and no font sizes or spacing were measured. Borrow: Anchor one bold statistic as a callout directly on the graphic that illustrates it, then back it up with a small card of explanatory copy. Leave alone: Don't copy the dark green and bright green palette, the AntiqueLegacy display face (use a warm free serif instead) or the exact rounded-pill bar motif. ## Classification - Type: stats - Layout: Two-column layout with text and a secondary card on the left, and a large graphical element spanning the right. - Styles: minimal, illustrative - Confidence: 95% ## Purpose and structure A split-layout section featuring text and statistics on the left and a large animated graphic on the right. Visual signature: Large dark green graphical bars/chart taking up the right half of the white background. ## Components - Heading - Button - Data Visualization - Stat Card ## Typography - Display: fontAntiqueLegacy — 48px 100 - Heading: fontAntiqueLegacy — 40px 100 - Body: fontInter — 16px 400 ## Functional palette - Primary-Action: primary action #38D059 - Canvas: canvas #183028 - Surface: surface #FFFFFF - Accent: accent #0041DB - Border: border #E8E8E8 - Muted-Text: muted text #B5B5B5 ## Motion evidence - 12.0–15.0s — The user scrolls to a section with an animated chart that draws a curve as the user scrolls. (95% confidence) ## Section quality Overall: 60.95/100 (Good) Scored coverage: 100% - Typography: 58 — Uses the site's established display/body type pairing (AntiqueLegacy heading, Inter body) with clear size contrast between heading, stat card title, and body copy, but nothing in the crop shows typographic invention beyond the global system. Next tier: No distinctive scale, weight, or spacing treatment unique to this section that elevates it past a competent reuse of the type system. - Composition: 66 — Asymmetric split layout with a fixed narrow left text column against a full-bleed chart on the right, a floating stat card overlapping the boundary, a dotted texture background, and a callout tag anchored onto the chart create a layered, considered arrangement with real depth. Next tier: The bar chart bleeds off both edges of the frame in a way that reads as cropped rather than intentional, and the floating card/callout placement, while competent, is a fairly standard device. - Motion: 56 — Gemini documents one specific timestamped behavior: the chart draws/grows as the user scrolls (12–15s), which is a concrete, visible interaction. Next tier: Only a single coarse motion moment is described; no detail on easing, staggering of individual bars, or how the stat card/callout enter, so it cannot be judged beyond a basic scroll-triggered reveal. - Content: 62 — The floating '85% Less Line Stoppage' tag is directly anchored to the chart it describes, and the stat card below reinforces the same statistic with supporting copy, creating a tight link between data visualization and message. Next tier: The connection between number and chart shape is illustrative rather than a literal data encoding, so the visualization reads as decorative rather than meaningfully tied to the stated metric. - Originality: 59 — Rounded-top pill-shaped bar columns plus a floating labeled tag and a carousel-driven stat panel is a slightly fresher take on a stats/chart section than a flat bar chart, but the overall pattern (split stats layout with abstract chart) is a familiar SaaS convention. Next tier: The chart shapes and layout read as a stylistic variant of a common chart motif rather than an idea that feels hard to substitute with a generic alternative. - Adaptability: 64 — The structure cleanly separates into reusable parts: left text/CTA block, floating stat card with carousel dots, and right-side chart visual with an overlay tag, all of which could be retheme or resequenced independently. Next tier: Without clearer code-level separation of the chart as its own component (vs. background-bleed graphic), full assurance of modularity is not demonstrable from the crop alone. Strengths: - Floating stat card with icon, carousel dots, and index counter adds wayfinding and rhythm to the section - Callout tag is directly anchored to the chart location it labels - Dotted background texture adds subtle depth without competing with content Weaknesses: - Chart bleeds off both frame edges in a way that can read as unintentional cropping rather than a deliberate full-bleed choice - Single coarse motion moment documented, with no detail on per-bar stagger or easing - Bar-chart shape is illustrative rather than a literal encoding of the stated percentage, weakening the content-to-data link Why it does not reach the next tier: The layout and floating-card/callout pairing are well-handled but rely on a familiar stats-section convention; the chart's connection to the number it represents is decorative rather than data-true, and the single documented scroll-draw motion lacks the granularity needed to call the interaction distinctive. ## Adaptation guidance - Effort: Medium - Guidance: Keep the split structure, floating card, and callout-tag device; swap in any chart or illustrative graphic and retheme colors/typography to match a new brand system, while re-implementing the scroll-triggered drawing animation separately. What transfers: - Split layout with fixed text column and full-bleed visual on the opposite side - Floating overlapping stat card pattern with carousel indicator - Callout tag anchored to a graphic element Dependencies: - Specific bar/column chart artwork and its proportions - Exact color pairing of dark green chart against white canvas - Scroll-triggered draw animation implementation ## 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 data limited to a single coarse timestamped description without easing or stagger detail - No exact spacing, radius, or color values specific to this section's chart component were supplied - Cannot verify if the chart bleed is an intentional full-width design decision or a cropping artifact ## 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: two-column - Layout: Two-column layout with text and a secondary card on the left, and a large graphical element spanning the right. - Styles: minimal, illustrative - Components: Heading, Button, Data Visualization, Stat Card - Purpose: A split-layout section featuring text and statistics on the left and a large animated graphic on the right. - Visual signature: Large dark green graphical bars/chart taking up the right half of the white background. - Place on the page: 5 of 8, after Feature collection (`cofactr-com:feature-cards-stacked`), before Testimonials (`cofactr-com:editorial-case-studies-scroll`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "48px", "family": "fontAntiqueLegacy", "source": "computed", "traits": "Regular", "weight": "100", "evidence": "font-4: computed CSS at 1440×1000; AI role: 48px AntiqueLegacy, weight 100 used for the main hero headline 'From BOM to Build'.", "sampleId": "font-4", "confidence": 1, "lineHeight": "52.8px", "letterSpacing": "normal" }, { "role": "heading", "size": "40px", "family": "fontAntiqueLegacy", "source": "computed", "traits": "Regular", "weight": "100", "evidence": "font-3: computed CSS at 1440×1000; AI role: 40px AntiqueLegacy, weight 100 used for section titles like 'How Companies Improve Operations'.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "44px", "letterSpacing": "-1.2px" }, { "role": "body", "size": "16px", "family": "fontInter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px Inter used for standard descriptive body copy throughout the page.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "20.8px", "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": "#38D059", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-6: computed rgb(56, 208, 89); AI role: Bright green (#38D059) used for high-visibility call-to-action buttons.", "sampleId": "color-6", "confidence": 1 }, { "hex": "#183028", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(24, 48, 40); AI role: Dark green (#183028) used as the primary background color for large sections of the site and the footer.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the background of the navigation bar, logo strip, and floating feature cards.", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#0041DB", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-10: computed rgb(0, 65, 219); AI role: Vibrant blue (#0041DB) used exclusively in the footer interactive block to draw attention.", "sampleId": "color-10", "confidence": 0.9 }, { "hex": "#E8E8E8", "name": "border", "role": "border", "source": "computed", "evidence": "color-3: computed rgb(232, 232, 232); AI role: Light gray (#E8E8E8) used for borders around cards and UI elements.", "sampleId": "color-3", "confidence": 0.85 }, { "hex": "#B5B5B5", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-9: computed rgb(181, 181, 181); AI role: Gray (#B5B5B5) used for secondary text and unselected states.", "sampleId": "color-9", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons are fully rounded (pill shape), while feature cards have subtle rounding (approx 8-12px).", "density": "Spacious layout, utilizing negative space to emphasize large typography and key imagery.", "evidence": "Observed via screenshot inspection: pill-shaped 'Get Started' button, thin borders on white cards, full-bleed hero video, and distinct sections with dark green and white backgrounds.", "borderStyle": "Thin, solid 1px borders used to delineate cards and sections, primarily in light gray or translucent greens.", "buttonStyle": "Solid fill primary buttons with pill-shaped radii and high-contrast text. Ghost buttons used for secondary actions.", "cornerStyle": "Mix of sharp corners on structural blocks and rounded corners on floating panels and icons.", "contentWidth": "A constrained central container for text (approx 1200px), with background images and canvas colors breaking out to full width.", "spacingRhythm": "Generous vertical padding between sections (often 100px+), with tight, structured padding within grid-based cards." } ``` ### 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** — The user scrolls to a section with an animated chart that draws a curve as the user scrolls. (12s–15s; 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: medium - What transfers: Split layout with fixed text column and full-bleed visual on the opposite side; Floating overlapping stat card pattern with carousel indicator; Callout tag anchored to a graphic element - Dependencies: Specific bar/column chart artwork and its proportions; Exact color pairing of dark green chart against white canvas; Scroll-triggered draw animation implementation - Guidance: Keep the split structure, floating card, and callout-tag device; swap in any chart or illustrative graphic and retheme colors/typography to match a new brand system, while re-implementing the scroll-triggered drawing animation separately. ### 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 “Animated Results Chart”. Purpose: A split-layout section featuring text and statistics on the left and a large animated graphic on the right. Structure: two-column. Source layout label: Two-column layout with text and a secondary card on the left, and a large graphical element spanning the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: Large dark green graphical bars/chart taking up the right half of the white background. Components: Heading, Button, Data Visualization, Stat Card. Style direction: minimal, illustrative. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"48px","family":"fontAntiqueLegacy","source":"computed","traits":"Regular","weight":"100","evidence":"font-4: computed CSS at 1440×1000; AI role: 48px AntiqueLegacy, weight 100 used for the main hero headline 'From BOM to Build'.","sampleId":"font-4","confidence":1,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"heading","size":"40px","family":"fontAntiqueLegacy","source":"computed","traits":"Regular","weight":"100","evidence":"font-3: computed CSS at 1440×1000; AI role: 40px AntiqueLegacy, weight 100 used for section titles like 'How Companies Improve Operations'.","sampleId":"font-3","confidence":0.95,"lineHeight":"44px","letterSpacing":"-1.2px"} {"role":"body","size":"16px","family":"fontInter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 16px Inter used for standard descriptive body copy throughout the page.","sampleId":"font-6","confidence":0.9,"lineHeight":"20.8px","letterSpacing":"normal"} Color evidence: {"hex":"#38D059","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(56, 208, 89); AI role: Bright green (#38D059) used for high-visibility call-to-action buttons.","sampleId":"color-6","confidence":1} {"hex":"#183028","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(24, 48, 40); AI role: Dark green (#183028) used as the primary background color for large sections of the site and the footer.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the background of the navigation bar, logo strip, and floating feature cards.","sampleId":"color-5","confidence":0.9} {"hex":"#0041DB","name":"accent","role":"accent","source":"computed","evidence":"color-10: computed rgb(0, 65, 219); AI role: Vibrant blue (#0041DB) used exclusively in the footer interactive block to draw attention.","sampleId":"color-10","confidence":0.9} {"hex":"#E8E8E8","name":"border","role":"border","source":"computed","evidence":"color-3: computed rgb(232, 232, 232); AI role: Light gray (#E8E8E8) used for borders around cards and UI elements.","sampleId":"color-3","confidence":0.85} {"hex":"#B5B5B5","name":"muted text","role":"muted-text","source":"computed","evidence":"color-9: computed rgb(181, 181, 181); AI role: Gray (#B5B5B5) used for secondary text and unselected states.","sampleId":"color-9","confidence":0.8} 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: The user scrolls to a section with an animated chart that draws a curve as the user scrolls. (95% confidence) Transfer these principles: Split layout with fixed text column and full-bleed visual on the opposite side; Floating overlapping stat card pattern with carousel indicator; Callout tag anchored to a graphic element. Dependencies: Specific bar/column chart artwork and its proportions; Exact color pairing of dark green chart against white canvas; Scroll-triggered draw animation implementation. Adaptation guidance: Keep the split structure, floating card, and callout-tag device; swap in any chart or illustrative graphic and retheme colors/typography to match a new brand system, while re-implementing the scroll-triggered drawing animation separately. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.