# Statistics with Particle Visual Schema: Design Details SECTION.md v3.2 Website: Exa Source: https://exa.ai/ Source section IDs: gap-92f0821a-4382-5588 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Oversized monospace numbers in bordered cards make each metric readable at a glance, and the plain labels tie them to real product facts. - A serif headline against mono data creates clear hierarchy, with the blue accent kept for the particle visual and key actions. - The offset particle cloud and uneven card grid break the rigid columns while still reading left to right. What a screenshot can't show: - The recording only shows a generic scroll reveal of the particle graphic and cards between 15 and 18 seconds, with no timing or easing detail. - No font sizes, spacing or padding were measured, so exact scale and rhythm are unknown. Borrow: Pair one large, soft illustrative visual with a loose grid of bordered, number-first cards so the data feels grounded and the layout stays dynamic. Leave alone: Don't copy the blue dot-cloud illustration, the serif and monospace pairing, or the exact #0035D0 blue; use your own imagery, and a free mono like JetBrains Mono if you need a similar feel. ## Classification - Type: stats - Layout: Asymmetrical layout with text and a prominent visual element on top, followed by an irregular masonry-style grid of statistic cards. - Styles: minimal, illustrative, typographic - Confidence: 95% ## Purpose and structure A large statistics presentation featuring large numbers and a dynamic particle visual. Visual signature: A sweeping blue particle cluster illustration contrasting with large, bold monospace numbers in bordered cards. ## Components - headline - particle graphic - large number typography - statistic cards - button ## Typography - Display: Arizona — 63.2px 400 - Heading: Arizona — 41.6px 400 - Body: ABCDiatype — 17px 400 - Mono: GeistMono — 12px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #111827 - Muted-Text: muted text #58544E - Accent: accent #0035D0 - Surface: surface #181815 - Primary-Action: primary action #0137E1 ## Motion evidence - 15.0–18.0s — Page scrolls to reveal a large particle animation and statistics cards. (95% confidence) ## Section quality Overall: 64.47/100 (Good) Scored coverage: 85% - Typography: 65 — Clear pairing of serif display headline with monospace statistic numbers creates strong contrast and hierarchy; number sizing and tabular alignment feel deliberate, but the pairing itself (serif heading + mono data) is a familiar SaaS pattern. Next tier: Needs more distinctive type-driven invention beyond the now-common serif/mono split to reach strong/memorable. - Composition: 68 — Asymmetrical layout with offset particle graphic bleeding behind the card grid, plus an irregular masonry of stat cards, builds a confident, non-grid-locked hierarchy that still reads cleanly left-to-right. Next tier: The underlying card grid itself is a fairly standard bordered-box stat layout; the asymmetry mainly comes from the particle graphic overlay, not from the card composition. - Motion: inconclusive — Gemini only reports a generic scroll reveal of the particle animation and cards between 15-18s with no specific param or motion-path detail, so no meaningful motion quality judgment can be made. Next tier: Needs timestamped detail on how the particles animate/settle and how individual cards enter to assess craft. - Content: 62 — Numbers are tied directly to real product metrics (vector DB size, URL counts, FLOPs) and labeled plainly, integrating content and visual well, though the particle graphic is decorative rather than data-driven. Next tier: Would need the particle visual to visibly encode or represent the actual data (e.g., density tied to index size) rather than function as atmospheric backdrop. - Originality: 66 — The sweeping diffuse particle cloud paired with oversized mono stat numbers feels distinct and on-brand rather than a generic icon+number stat block, giving it a specific visual signature. Next tier: Particle/dot cloud visuals are an established trope in data/AI marketing sites; without a more unique interaction or data-linkage, it stays short of a truly novel concept. - Adaptability: 60 — Structure (headline, CTA, particle visual, stat card grid) is modular and the skin (serif/mono type, blue accent, bordered cards) is clearly separable from the layout logic using the supplied tokens. Next tier: Irregular masonry card sizing and the particle asset's precise positioning relative to text are undocumented, limiting how confidently behavior can be decoupled from the specific asset. Strengths: - Strong numeric hierarchy via oversized monospace figures against small labels - Particle graphic creates an organic counterpoint to the rigid card grid - Stats are concrete, specific, and tied to real product metrics rather than generic claims Weaknesses: - Particle visual is purely decorative and doesn't visually encode the data it sits beside - Underlying stat-card grid pattern (bordered boxes, label + number) is a common SaaS convention - Motion cannot be verified beyond a generic scroll reveal, so craft of the particle animation is unknown Why it does not reach the next tier: The section's asymmetry and type pairing are polished but rely on now-familiar patterns (dot-cloud hero graphic, mono-number stat cards); without the particle visual meaningfully tying to the data or a more inventive card treatment, it stays at a good/polished level rather than strong/memorable. ## Adaptation guidance - Effort: Medium - Guidance: Retain the serif-headline-plus-mono-number hierarchy and irregular card grid; swap the particle illustration for any brand-appropriate atmospheric graphic, but verify animation timing and card breakpoints before reuse since they aren't fully documented. What transfers: - Serif headline + mono stat number pairing - Asymmetrical bordered stat-card grid layout - Oversized number with small caps unit label pattern Dependencies: - Particle cloud graphic/asset and its exact positioning - Specific accent blue tied to brand - Scroll-triggered reveal timing and particle animation behavior (unverified) ## 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 assessment limited to a single generic timestamp without animation detail - Exact card grid breakpoints and spacing values not provided - Precise positioning logic of particle graphic relative to text not documented ## 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: grid - Layout: Asymmetrical layout with text and a prominent visual element on top, followed by an irregular masonry-style grid of statistic cards. - Styles: minimal, illustrative, typographic - Components: headline, particle graphic, large number typography, statistic cards, button - Purpose: A large statistics presentation featuring large numbers and a dynamic particle visual. - Visual signature: A sweeping blue particle cluster illustration contrasting with large, bold monospace numbers in bordered cards. - Place on the page: 8 of 10, after Feature collection (`exa-ai:security-features-grid`), before Testimonials (`exa-ai:testimonials-video-grid`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": "63.2px", "family": "Arizona", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Large serif heading (Arizona, 63.2px) used for the main hero title.", "sampleId": "font-2", "confidence": 1, "lineHeight": "45.5px", "letterSpacing": "-1.9px" }, { "role": "heading", "size": "41.6px", "family": "Arizona", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: Secondary serif headings (Arizona, 41.6px) used to introduce main sections.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "45.8px", "letterSpacing": "-1px" }, { "role": "body", "size": "17px", "family": "ABCDiatype", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: Primary sans-serif body text (ABCDiatype, 17px) used for descriptions and explanatory paragraphs.", "sampleId": "font-10", "confidence": 0.9, "lineHeight": "24.7px", "letterSpacing": "-0.3px" }, { "role": "mono", "size": "12px", "family": "GeistMono", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-28: computed CSS at 1440×1000; AI role: Monospace font (GeistMono, 12px) used extensively for code snippets and data formatting.", "sampleId": "font-28", "confidence": 0.95, "lineHeight": "16.8px", "letterSpacing": "-0.2px" } ] } ``` ### 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: Predominant white background color across most sections of the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#111827", "name": "text", "role": "text", "source": "computed", "evidence": "color-8: computed rgb(17, 24, 39); AI role: Dark text color used for primary headings and important copy.", "sampleId": "color-8", "confidence": 0.9 }, { "hex": "#58544E", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed rgb(88, 84, 78); AI role: Lighter grey text used for secondary descriptions and support text.", "sampleId": "color-10", "confidence": 0.85 }, { "hex": "#0035D0", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-12: computed rgb(0, 53, 208); AI role: Blue color used for highlighting specific elements like the Exa bar in the charts.", "sampleId": "color-12", "confidence": 0.85 }, { "hex": "#181815", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(24, 24, 21); AI role: Dark grey/black background used for contrasting sections like 'Benchmarks' and 'Enterprise-grade security'.", "sampleId": "color-3", "confidence": 0.8 }, { "hex": "#0137E1", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-4: computed rgb(1, 55, 225); AI role: Vibrant blue background used for the large footer block.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Small to medium radii applied to UI components like the search bar, 'Try API for free' button, and individual data cards.", "density": "Balanced density; high density in data-heavy areas (charts, code snippets) contrasted with low density in hero and transitional sections.", "evidence": "Observation of component layouts, typography styles (fonts 1-40), and color applications (colors 1-48) across the provided viewport crops.", "borderStyle": "Thin, subtle borders (color-28, color-47) used to define cards and UI elements without overwhelming the minimal design.", "buttonStyle": "Solid fill for primary actions (black 'Sign up', 'Try API for free'), with lighter grey (color-36) or outline styles for secondary actions ('Contact sales', 'Read customer stories').", "cornerStyle": "Slightly rounded corners (border-radius visible on buttons, input fields, and feature cards), leaning towards a clean, modern aesthetic.", "contentWidth": "Centered content constrained within a comfortable reading width, with wide margins on larger viewports.", "spacingRhythm": "Generous vertical spacing between major sections, utilizing significant whitespace to separate dense data blocks and imagery." } ``` ### 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** — Page scrolls to reveal a large particle animation and statistics cards. (15s–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: medium - What transfers: Serif headline + mono stat number pairing; Asymmetrical bordered stat-card grid layout; Oversized number with small caps unit label pattern - Dependencies: Particle cloud graphic/asset and its exact positioning; Specific accent blue tied to brand; Scroll-triggered reveal timing and particle animation behavior (unverified) - Guidance: Retain the serif-headline-plus-mono-number hierarchy and irregular card grid; swap the particle illustration for any brand-appropriate atmospheric graphic, but verify animation timing and card breakpoints before reuse since they aren't fully documented. ### 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 “Statistics with Particle Visual”. Purpose: A large statistics presentation featuring large numbers and a dynamic particle visual. Structure: grid. Source layout label: Asymmetrical layout with text and a prominent visual element on top, followed by an irregular masonry-style grid of statistic cards.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: A sweeping blue particle cluster illustration contrasting with large, bold monospace numbers in bordered cards. Components: headline, particle graphic, large number typography, statistic cards, button. Style direction: minimal, illustrative, typographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"63.2px","family":"Arizona","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Large serif heading (Arizona, 63.2px) used for the main hero title.","sampleId":"font-2","confidence":1,"lineHeight":"45.5px","letterSpacing":"-1.9px"} {"role":"heading","size":"41.6px","family":"Arizona","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: Secondary serif headings (Arizona, 41.6px) used to introduce main sections.","sampleId":"font-5","confidence":0.95,"lineHeight":"45.8px","letterSpacing":"-1px"} {"role":"body","size":"17px","family":"ABCDiatype","source":"computed","traits":"Regular","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Primary sans-serif body text (ABCDiatype, 17px) used for descriptions and explanatory paragraphs.","sampleId":"font-10","confidence":0.9,"lineHeight":"24.7px","letterSpacing":"-0.3px"} {"role":"mono","size":"12px","family":"GeistMono","source":"computed","traits":"Regular","weight":"400","evidence":"font-28: computed CSS at 1440×1000; AI role: Monospace font (GeistMono, 12px) used extensively for code snippets and data formatting.","sampleId":"font-28","confidence":0.95,"lineHeight":"16.8px","letterSpacing":"-0.2px"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Predominant white background color across most sections of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#111827","name":"text","role":"text","source":"computed","evidence":"color-8: computed rgb(17, 24, 39); AI role: Dark text color used for primary headings and important copy.","sampleId":"color-8","confidence":0.9} {"hex":"#58544E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(88, 84, 78); AI role: Lighter grey text used for secondary descriptions and support text.","sampleId":"color-10","confidence":0.85} {"hex":"#0035D0","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(0, 53, 208); AI role: Blue color used for highlighting specific elements like the Exa bar in the charts.","sampleId":"color-12","confidence":0.85} {"hex":"#181815","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(24, 24, 21); AI role: Dark grey/black background used for contrasting sections like 'Benchmarks' and 'Enterprise-grade security'.","sampleId":"color-3","confidence":0.8} {"hex":"#0137E1","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(1, 55, 225); AI role: Vibrant blue background used for the large footer block.","sampleId":"color-4","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: Page scrolls to reveal a large particle animation and statistics cards. (95% confidence) Transfer these principles: Serif headline + mono stat number pairing; Asymmetrical bordered stat-card grid layout; Oversized number with small caps unit label pattern. Dependencies: Particle cloud graphic/asset and its exact positioning; Specific accent blue tied to brand; Scroll-triggered reveal timing and particle animation behavior (unverified). Adaptation guidance: Retain the serif-headline-plus-mono-number hierarchy and irregular card grid; swap the particle illustration for any brand-appropriate atmospheric graphic, but verify animation timing and card breakpoints before reuse since they aren't fully documented. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.