# Benchmarks chart and FAQ Schema: Design Details SECTION.md v3.2 Website: Offloop Source: https://offloop.org/ Source section IDs: gap-51d54e99-2867-4751 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Paired score-over-cost bar groups let a reader check the 'best and cheaper' claim at a glance, using real benchmark names as proof. - A neon green accent against black cost bars and a white canvas keeps the chart readable, and the legend and left-aligned headline anchor it. - The FAQ sits below in a centered list with numbered rows, category labels, generous spacing and a contact fallback, so the dense chart gives way to calm. What a screenshot can't show: - The recording shows only page scrolling, with no designed animation, so chart entrance and accordion open timing are unknown. - No font sizes, letter spacing, line heights or paddings were measured. Borrow: Pair each headline metric with its cost in a matched grid, then follow the dense data with a quiet, well-spaced FAQ to resolve doubts. Leave alone: Don't copy the neon green and black chart colouring, the Denton serif display face (use a similar free editorial serif), or the competitor icon avatars. ## Classification - Type: stats - Layout: Stacked vertical layout with a full-width data visualization block above a centered FAQ list. - Styles: minimal, corporate, colourful - Confidence: 95% ## Purpose and structure A combined content block containing a bar chart for performance/cost comparisons at the top, and an accordion-style Questions & Answers section below. Visual signature: Prominent use of neon green and chart graphics contrasting with clean, minimalist white-space and soft accordion rows. ## Components - heading - bar-chart - accordion - faq-list ## Typography - Display: Denton — 66px 400 - Heading: Denton — 64px 400 - Body: Inter — 13px 400 - Mono: JetBrains Mono — 13px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #1A1A1A - Muted-Text: muted text #6C737C - Accent: accent #008130 - Primary-Action: primary action #000000 ## Motion evidence - 0.0–15.0s — Viewport scrolls down to reveal the benchmark graph and reaches the FAQ. (95% confidence) - 23.0–38.0s — Viewport scrolls up to land on the benchmark charts. (95% confidence) ## Section quality Overall: 62.24/100 (Good) Scored coverage: 85% - Typography: 62 — Clear serif display (Denton) paired with sans/mono data labels gives good hierarchy; numbered FAQ rows and small-caps category labels show care, but sizes/weights are conventional and not pushed further. Next tier: Needs more distinctive typographic treatment in the data labels or chart annotations to move beyond standard dashboard/FAQ conventions. - Composition: 66 — Three paired bar-chart groups (score above, cost below) create a clean comparative grid, with a legend and strong left-aligned headline anchoring the block; FAQ section below is well-spaced and logically grouped by category. The combination of chart density and generous negative space works, though the inverted cost axis convention is a bit unusual and the two sub-sections feel loosely tied together. Next tier: The stats and FAQ feel like two separate modules stacked rather than a single unified composition; tighter visual bridging (e.g., shared rhythm, transition element) would raise this. - Motion: not_assessed — Only scroll motion was reported, which is viewport navigation rather than designed animation of this section's elements. Next tier: Need timestamped evidence of specific in-section animations (e.g., bar chart fill-in, accordion expand) to score motion. - Content: 64 — Charts directly support the 'best-in-class, cheaper' claim with concrete benchmark data (GDPval, GDP.pdf, JobBench) and cost comparisons, and the FAQ content is organized by topical category with a clear contact fallback. Next tier: Content is informative but presented in a fairly standard benchmark-bar-chart format; no distinctive storytelling device elevates it past competent data communication. - Originality: 58 — Paired score/cost bar chart groups with icon avatars for competitors is a reasonably specific idea, but the underlying pattern (bar chart comparison + accordion FAQ) is a common SaaS landing-page convention. Next tier: Would need a more unexpected visualization approach or interaction model unique to this brand to be considered genuinely original. - Adaptability: 60 — The chart/legend/FAQ structure is modular and reusable; colors (neon green accent, black cost bars) and fonts are swappable without breaking layout logic. Next tier: Dependence on specific competitor icon assets and exact chart proportions ties the visual skin somewhat to this dataset, limiting clean separation. Strengths: - Clear paired score/cost bar-chart pattern repeated consistently across three benchmarks - Legible numbered, categorized FAQ list with plus-icon affordance - Strong serif headline anchors the data section with a clear value proposition Weaknesses: - Stats and FAQ feel like two loosely joined modules rather than one cohesive section - Chart format follows a conventional dashboard/benchmark pattern without a distinctive visual signature - Inverted cost-axis convention (descending $ scale) could confuse readers unfamiliar with it - No motion evidence beyond scrolling to support the section's dynamism Why it does not reach the next tier: The section is well-organized and functional but relies on familiar bar-chart and accordion patterns without a unifying visual idea or interaction detail that would make it feel distinctive or hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the paired chart-above/cost-below structure and FAQ category grouping; swap in new benchmark data, replace competitor icons with generic avatars, and restyle accent color and type to match a new brand while preserving the comparative chart logic. What transfers: - Paired score/cost bar chart grouping pattern - Numbered, categorized FAQ accordion layout - Legend-based color coding for comparative data Dependencies: - Competitor icon/avatar assets - Specific benchmark dataset and axis scaling - Neon green accent color tied to brand identity ## 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 visible motion data for in-section animation, so motion axis not scored - Cannot verify deterministic styling details like exact chart stroke widths, corner radii, or spacing not included in provided facts ## 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: Stacked vertical layout with a full-width data visualization block above a centered FAQ list. - Styles: minimal, corporate, colourful - Components: heading, bar-chart, accordion, faq-list - Purpose: A combined content block containing a bar chart for performance/cost comparisons at the top, and an accordion-style Questions & Answers section below. - Visual signature: Prominent use of neon green and chart graphics contrasting with clean, minimalist white-space and soft accordion rows. - Place on the page: 6 of 11, after Feature collection (`offloop-org:Feature_Node_Mockup`), before FAQ (`19c8916c-52ed-488d-b065-908d14395cfc`) ### 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": "66px", "family": "Denton", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-19: computed CSS at 1440×1000; AI role: Used for the large standout text 'You set the direction. Your agent team keeps the work moving.'.", "sampleId": "font-19", "confidence": 0.9, "lineHeight": "72.6px", "letterSpacing": "0.7px" }, { "role": "heading", "size": "64px", "family": "Denton", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Used for major section headings like 'There’s more work than your team has time for.'.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "66.5px", "letterSpacing": "-1.3px" }, { "role": "body", "size": "13px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Used for standard body text and explanatory paragraphs throughout the page.", "sampleId": "font-6", "confidence": 0.85, "lineHeight": "20px", "letterSpacing": "normal" }, { "role": "mono", "size": "13px", "family": "JetBrains Mono", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-15: computed CSS at 1440×1000; AI role: JetBrains Mono used in specific UI contexts like 'Audience fit: 88', suggesting data or technical details.", "sampleId": "font-15", "confidence": 0.9, "lineHeight": "16px", "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: White background dominates the majority of the page sections.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#1A1A1A", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(26, 26, 26); AI role: Dark gray/black used for main headings and body text for high contrast.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#6C737C", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-7: computed oklch(0.552 0.016 258); AI role: Lighter gray used for secondary text and descriptions.", "sampleId": "color-7", "confidence": 0.9 }, { "hex": "#008130", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-18: computed rgb(0, 129, 48); AI role: Green used for positive indicators like '+12' or 'Evaluate fit' tags.", "sampleId": "color-18", "confidence": 0.85 }, { "hex": "#000000", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black used for primary buttons like 'Sign in' and icons.", "sampleId": "color-2", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Varies; buttons and smaller UI elements have tighter radii, while large UI mockups have softer, more pronounced rounded corners.", "density": "Low density; the design favors whitespace and clear hierarchy over packing information tightly.", "evidence": "Observations based on visual inspection of the page layout, spacing around text blocks, rounded edges on images and form fields, and the overall uncluttered appearance.", "borderStyle": "Subtle borders are used occasionally to define cards or inputs, but many elements rely on spacing or light backgrounds for separation.", "buttonStyle": "Buttons are typically solid with rounded corners. The primary call-to-action in the hero is prominent, while secondary actions are more subdued.", "cornerStyle": "Rounded corners are prevalent on UI mockups, buttons, and cards, suggesting a modern and approachable feel.", "contentWidth": "Content is generally centered and constrained to a readable width, though UI mockups may break out wider for emphasis.", "spacingRhythm": "Generous spacing between sections and elements, creating a breathable layout. Padding inside cards and UI elements is consistent." } ``` ### 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** — Viewport scrolls down to reveal the benchmark graph and reaches the FAQ. (0s–15s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Viewport scrolls up to land on the benchmark charts. (23s–38s; 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: Paired score/cost bar chart grouping pattern; Numbered, categorized FAQ accordion layout; Legend-based color coding for comparative data - Dependencies: Competitor icon/avatar assets; Specific benchmark dataset and axis scaling; Neon green accent color tied to brand identity - Guidance: Reuse the paired chart-above/cost-below structure and FAQ category grouping; swap in new benchmark data, replace competitor icons with generic avatars, and restyle accent color and type to match a new brand while preserving the comparative chart logic. ### 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 “Benchmarks chart and FAQ”. Purpose: A combined content block containing a bar chart for performance/cost comparisons at the top, and an accordion-style Questions & Answers section below. Structure: centered single-column. Source layout label: Stacked vertical layout with a full-width data visualization block above a centered FAQ list.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Prominent use of neon green and chart graphics contrasting with clean, minimalist white-space and soft accordion rows. Components: heading, bar-chart, accordion, faq-list. Style direction: minimal, corporate, colourful. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"66px","family":"Denton","source":"computed","traits":"Regular","weight":"400","evidence":"font-19: computed CSS at 1440×1000; AI role: Used for the large standout text 'You set the direction. Your agent team keeps the work moving.'.","sampleId":"font-19","confidence":0.9,"lineHeight":"72.6px","letterSpacing":"0.7px"} {"role":"heading","size":"64px","family":"Denton","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Used for major section headings like 'There’s more work than your team has time for.'.","sampleId":"font-2","confidence":0.95,"lineHeight":"66.5px","letterSpacing":"-1.3px"} {"role":"body","size":"13px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Used for standard body text and explanatory paragraphs throughout the page.","sampleId":"font-6","confidence":0.85,"lineHeight":"20px","letterSpacing":"normal"} {"role":"mono","size":"13px","family":"JetBrains Mono","source":"computed","traits":"Regular","weight":"400","evidence":"font-15: computed CSS at 1440×1000; AI role: JetBrains Mono used in specific UI contexts like 'Audience fit: 88', suggesting data or technical details.","sampleId":"font-15","confidence":0.9,"lineHeight":"16px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White background dominates the majority of the page sections.","sampleId":"color-1","confidence":0.95} {"hex":"#1A1A1A","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(26, 26, 26); AI role: Dark gray/black used for main headings and body text for high contrast.","sampleId":"color-4","confidence":0.95} {"hex":"#6C737C","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed oklch(0.552 0.016 258); AI role: Lighter gray used for secondary text and descriptions.","sampleId":"color-7","confidence":0.9} {"hex":"#008130","name":"accent","role":"accent","source":"computed","evidence":"color-18: computed rgb(0, 129, 48); AI role: Green used for positive indicators like '+12' or 'Evaluate fit' tags.","sampleId":"color-18","confidence":0.85} {"hex":"#000000","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black used for primary buttons like 'Sign in' and icons.","sampleId":"color-2","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: Viewport scrolls down to reveal the benchmark graph and reaches the FAQ. (95% confidence) scroll: Viewport scrolls up to land on the benchmark charts. (95% confidence) Transfer these principles: Paired score/cost bar chart grouping pattern; Numbered, categorized FAQ accordion layout; Legend-based color coding for comparative data. Dependencies: Competitor icon/avatar assets; Specific benchmark dataset and axis scaling; Neon green accent color tied to brand identity. Adaptation guidance: Reuse the paired chart-above/cost-below structure and FAQ category grouping; swap in new benchmark data, replace competitor icons with generic avatars, and restyle accent color and type to match a new brand while preserving the comparative chart logic. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.