# Benchmark statistics comparison Schema: Design Details SECTION.md v3.2 Website: Gradium Source: https://gradium.ai/ Source section IDs: gap-d95715f2-5204-6043 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A giant percentage stat anchored on the left gives an instant answer, while the labeled bars on the right supply the proof, so the asymmetry reads clearly. - Real competitor names and numeric WER values make the claim credible, and the lime accent on a near-black canvas sets Gradium's bar apart from the muted rivals. - Hierarchy comes from size contrast alone: a large headline, a small tab nav, the oversized stat, then small bar labels, with a progress-style tab indicator adding structure. What a screenshot can't show: - The recording shows only a generic reveal from 14 to 18 seconds, with no visible detail on bar fill, tab switching or counter timing. - No type sizes, letter spacing or section padding were measured, so exact scale and spacing are unknown. Borrow: Pair one oversized headline number with a short ranked bar list, and use a single bright accent to mark your own result against muted competitors. Leave alone: Don't copy Gradium's lime-on-charcoal palette, Favorit display type (try a clean geometric grotesque instead), or its radial dot graphic. ## Classification - Type: comparison - Layout: Split layout with headline and statistics - Styles: minimal, corporate - Confidence: 95% ## Purpose and structure A dark section displaying horizontal bar charts comparing Word Error Rates (WER) against other models. Visual signature: A sleek comparison panel with a large numerical stat and bright green highlighted bar charts. ## Components - bar charts - statistics - headline ## Typography - Display: favorit — 180px 700 - Heading: favorit — 56px 400 - Body: IBM Plex Sans — 18px 400 - Mono: IBM Plex Mono — 12px 400 ## Functional palette - Canvas: canvas #121314 - Text: text #FFFFFF - Muted-Text: muted text #7E7E7E - Accent: accent #DAFF52 - Surface: surface #AED2FF - Accent: accent #1CA0FF ## Motion evidence - 14.0–18.0s — Reveals a section comparing the Word Error Rate of Gradium against other models using horizontal bar charts. (95% confidence) ## Section quality Overall: 64.00/100 (Good) Scored coverage: 85% - Typography: 65 — Clear hierarchy from large display headline to tabbed subnav to the oversized stat figure and small bar labels. Favorit display type is distinctive, but body/label text is conventional and sizing contrast is the main driver of hierarchy. Next tier: Needs more typographic craft beyond scale contrast—e.g. varied weights, optical refinement in the stat/label pairing—to feel more considered than a standard dashboard layout. - Composition: 66 — Three-column tab structure with a left-anchored giant stat and right-aligned bar chart creates legible, purposeful asymmetry; the progress-bar tab indicator and radial dot graphic on the right balance the dark field well. Next tier: Layout is a fairly standard split stat/chart comparison; nothing in the spacing, alignment or grid choice feels bespoke enough to separate it from common SaaS benchmark sections. - Motion: inconclusive — Gemini only notes a generic reveal between 14-18s with no specific timestamped detail on bar fill, tab switching, or counter animation. Next tier: Needs specific timestamped evidence of how the bars animate, whether the active tab/stat changes on scroll or interaction, and timing/easing details. - Content: 62 — Content directly supports the comparison claim with real competitor names and numeric WER values, giving it functional credibility, but presentation is a straightforward labeled bar chart. Next tier: Would need richer contextualization (e.g. methodology callouts, visual differentiation of the winning bar beyond color) to move past a standard benchmark chart. - Originality: 58 — Neon-on-dark benchmark bar chart with a giant percentage stat is a now-common competitive pattern in AI/SaaS marketing sites; the tabbed subnav adds minor distinction but the core idiom is familiar. Next tier: Lacks a structural or visual device unique to this product; relies on a widely-seen comparison-bar template with palette swap. - Adaptability: 68 — Clear separable parts: headline, tab nav, stat block, bar chart list, CTA link—each a discrete deterministic component that could be reskinned or re-themed with different data/colors. Next tier: Full separation would require confirming tab-switch behavior and whether bar values are driven by a shared data model, which isn't specified. Strengths: - Legible three-part hierarchy: headline, stat, comparative bar chart - Direct competitor-named benchmark adds argumentative weight - Clean dark canvas with single accent color reserved for the winning bar Weaknesses: - Comparison bar chart pattern is common across AI/SaaS product sites - Motion detail insufficiently specified to assess animation craft - Typography relies mainly on scale contrast rather than deeper refinement Why it does not reach the next tier: The section executes a familiar benchmark-bar idiom cleanly but without a distinguishing structural or typographic idea; to reach strong/memorable it would need either a unique visual metaphor for the comparison or demonstrably crafted motion tying the stat, tabs, and bars together. ## Adaptation guidance - Effort: Low - Guidance: Swap data source and competitor labels, keep ranked-bar + stat layout and tab structure; recolor accent to match target brand palette while preserving dark canvas contrast. What transfers: - Tabbed category switcher driving a stat + bar list panel - Large numeric stat paired with small methodology caption - Horizontal ranked bar chart with single accent highlight for the leading entry Dependencies: - Specific WER benchmark dataset and competitor names - Favorit/IBM Plex Mono font pairing - Neon accent color against near-black canvas ## 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 unassessed due to lack of specific timestamped detail - Exact spacing, radius, and animation parameters not verifiable from static 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: comparison - Source type: comparison - Structure: two-column - Layout: Split layout with headline and statistics - Styles: minimal, corporate - Components: bar charts, statistics, headline - Purpose: A dark section displaying horizontal bar charts comparing Word Error Rates (WER) against other models. - Visual signature: A sleek comparison panel with a large numerical stat and bright green highlighted bar charts. - Place on the page: 6 of 11, after Founder (`gradium-ai:gradium-team`), before Feature collection (`gradium-ai:gradium-infrastructure`) ### 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": "180px", "family": "favorit", "source": "computed", "traits": "Regular", "weight": "700", "evidence": "font-30: computed CSS at 1440×1000; AI role: Favorit font rendered at an exceptionally large 180px with extremely tight -10.8px letter spacing for structural impact.", "sampleId": "font-30", "confidence": 1, "lineHeight": "180px", "letterSpacing": "-10.8px" }, { "role": "heading", "size": "56px", "family": "favorit", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Favorit 56px used for primary section titles like 'Built by the pioneers of voice AI'.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "56px", "letterSpacing": "normal" }, { "role": "body", "size": "18px", "family": "IBM Plex Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: IBM Plex Sans 18px used for descriptive paragraph copy below headings.", "sampleId": "font-5", "confidence": 0.9, "lineHeight": "29.3px", "letterSpacing": "normal" }, { "role": "mono", "size": "12px", "family": "IBM Plex Mono", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: IBM Plex Mono 12px uppercase used for technical or highly specific labels, such as job titles in testimonials.", "sampleId": "font-12", "confidence": 0.85, "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": "#121314", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(18, 19, 20); AI role: The dominant dark background color (rgb 18, 19, 20) applied to the body and major sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-8: computed rgb(255, 255, 255); AI role: Solid white used for high-contrast primary text, headings, and active buttons against the dark canvas.", "sampleId": "color-8", "confidence": 0.95 }, { "hex": "#7E7E7E", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed rgb(126, 126, 126); AI role: A mid-grey (#7E7E7E) used extensively for secondary text, inactive UI elements, and subtle labels.", "sampleId": "color-6", "confidence": 0.9 }, { "hex": "#DAFF52", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-15: computed rgb(218, 255, 82); AI role: A vibrant neon yellow/green (#DAFF52) used for the announcement bar and primary data visualization bars.", "sampleId": "color-15", "confidence": 0.9 }, { "hex": "#AED2FF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(174, 210, 255); AI role: A light blue (#AED2FF) used as a distinct, high-contrast background block for the infrastructure section.", "sampleId": "color-3", "confidence": 0.85 }, { "hex": "#1CA0FF", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-14: computed rgb(28, 160, 255); AI role: A bright blue (#1CA0FF) used as the background color for one of the prominent testimonial cards.", "sampleId": "color-14", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Medium border radii (likely 8px-16px) visible on buttons and nested UI elements, with slightly larger radii on the outer feature cards.", "density": "Variable density. Very sparse in hero and typographic transition zones to emphasize scale, but highly dense inside the product UI mockups.", "evidence": "Derived from CSS border-radius and spacing visible in the visual crops, the contrast between massive text and small UI details, and the structural grid layouts observed in the screenshots.", "borderStyle": "Subtle, highly transparent borders (e.g., rgba(255,255,255,0.1) or low-alpha greys) used to define edges of glassmorphic containers without visual heavy lines.", "buttonStyle": "Pill-shaped containers with distinct states: solid white for primary actions, and dark semi-transparent for secondary/ghost buttons.", "cornerStyle": "Consistent use of soft, rounded corners on container elements, including product interface mocks, feature cards, and buttons.", "contentWidth": "Variable; standard readable line lengths for paragraph copy, expanding to wide, multi-column grids for feature matrices and testimonials.", "spacingRhythm": "Generous vertical macro-spacing between sections to allow scroll animations to breathe; tighter, structured padding within grid cards and UI mockups." } ``` ### 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. **observed sequence** — Reveals a section comparing the Word Error Rate of Gradium against other models using horizontal bar charts. (14s–18s; 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: low - What transfers: Tabbed category switcher driving a stat + bar list panel; Large numeric stat paired with small methodology caption; Horizontal ranked bar chart with single accent highlight for the leading entry - Dependencies: Specific WER benchmark dataset and competitor names; Favorit/IBM Plex Mono font pairing; Neon accent color against near-black canvas - Guidance: Swap data source and competitor labels, keep ranked-bar + stat layout and tab structure; recolor accent to match target brand palette while preserving dark canvas contrast. ### 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 comparison section inspired by the design evidence titled “Benchmark statistics comparison”. Purpose: A dark section displaying horizontal bar charts comparing Word Error Rates (WER) against other models. Structure: two-column. Source layout label: Split layout with headline and statistics. 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: A sleek comparison panel with a large numerical stat and bright green highlighted bar charts. Components: bar charts, statistics, headline. Style direction: minimal, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"180px","family":"favorit","source":"computed","traits":"Regular","weight":"700","evidence":"font-30: computed CSS at 1440×1000; AI role: Favorit font rendered at an exceptionally large 180px with extremely tight -10.8px letter spacing for structural impact.","sampleId":"font-30","confidence":1,"lineHeight":"180px","letterSpacing":"-10.8px"} {"role":"heading","size":"56px","family":"favorit","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Favorit 56px used for primary section titles like 'Built by the pioneers of voice AI'.","sampleId":"font-2","confidence":0.95,"lineHeight":"56px","letterSpacing":"normal"} {"role":"body","size":"18px","family":"IBM Plex Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: IBM Plex Sans 18px used for descriptive paragraph copy below headings.","sampleId":"font-5","confidence":0.9,"lineHeight":"29.3px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"IBM Plex Mono","source":"computed","traits":"uppercase","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: IBM Plex Mono 12px uppercase used for technical or highly specific labels, such as job titles in testimonials.","sampleId":"font-12","confidence":0.85,"lineHeight":"16px","letterSpacing":"normal"} Color evidence: {"hex":"#121314","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(18, 19, 20); AI role: The dominant dark background color (rgb 18, 19, 20) applied to the body and major sections.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-8: computed rgb(255, 255, 255); AI role: Solid white used for high-contrast primary text, headings, and active buttons against the dark canvas.","sampleId":"color-8","confidence":0.95} {"hex":"#7E7E7E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(126, 126, 126); AI role: A mid-grey (#7E7E7E) used extensively for secondary text, inactive UI elements, and subtle labels.","sampleId":"color-6","confidence":0.9} {"hex":"#DAFF52","name":"accent","role":"accent","source":"computed","evidence":"color-15: computed rgb(218, 255, 82); AI role: A vibrant neon yellow/green (#DAFF52) used for the announcement bar and primary data visualization bars.","sampleId":"color-15","confidence":0.9} {"hex":"#AED2FF","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(174, 210, 255); AI role: A light blue (#AED2FF) used as a distinct, high-contrast background block for the infrastructure section.","sampleId":"color-3","confidence":0.85} {"hex":"#1CA0FF","name":"accent","role":"accent","source":"computed","evidence":"color-14: computed rgb(28, 160, 255); AI role: A bright blue (#1CA0FF) used as the background color for one of the prominent testimonial cards.","sampleId":"color-14","confidence":0.85} 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: observed sequence: Reveals a section comparing the Word Error Rate of Gradium against other models using horizontal bar charts. (95% confidence) Transfer these principles: Tabbed category switcher driving a stat + bar list panel; Large numeric stat paired with small methodology caption; Horizontal ranked bar chart with single accent highlight for the leading entry. Dependencies: Specific WER benchmark dataset and competitor names; Favorit/IBM Plex Mono font pairing; Neon accent color against near-black canvas. Adaptation guidance: Swap data source and competitor labels, keep ranked-bar + stat layout and tab structure; recolor accent to match target brand palette while preserving dark canvas contrast. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.