# Customer Logo Grid Schema: Design Details SECTION.md v3.2 Website: Exa Source: https://exa.ai/ Source section IDs: gap-92f0821a-906-1680 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A left-aligned serif headline with a pill-style link sits above a tidy two-row, six-column grid, so the claim reads first and the proof follows. - Thin borders divide uniform cells, which gives the logos equal weight and an orderly rhythm against generous white space. - Small arrow icons on some cells hint at linkable case studies, and the near-black text on a white canvas keeps the section calm and credible. What a screenshot can't show: - The recording only shows the page scrolling down to the grid over about 6 seconds, with no hover states, staggering or logo transitions visible. - No font sizes, letter spacing or spacing values were measured, so exact scale and padding are unknown. Borrow: Pair one credibility headline with a ruled grid of equal-sized cells so the proof looks organized and the logos carry the message. Leave alone: Don't copy Exa's serif display face, its blue link accent or its actual customer logos; use your own type pairing and brand colour. ## Classification - Type: logo-cloud - Layout: Two-column split with text on top left and a uniform grid of logos occupying the bottom. - Styles: minimal, corporate - Confidence: 95% ## Purpose and structure A clean grid of customer logos next to an introductory headline. Visual signature: A structured, bordered grid displaying various brand logos in monochrome and color. ## Components - headline - text link - logo grid - brand logos ## 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 - 0.0–6.0s — The page scrolls down to reveal a grid of customer logos. (90% confidence) ## Section quality Overall: 57.00/100 (Competent) Scored coverage: 85% - Typography: 58 — Headline uses the site's serif display face with tight letter-spacing against a plain sans label and mono-ish grid captions, giving clear hierarchy, but it's a single standard headline treatment with no distinctive type pairing or scale play beyond what's expected. Next tier: Needs a more deliberate type contrast or scale shift between headline and grid labels to feel considered rather than default. - Composition: 62 — Clean two-row, six-column bordered grid under a left-aligned headline and pill-style link creates orderly hierarchy and generous whitespace, but the layout is a fairly standard logo-wall template with uniform cell sizing and no compositional surprise. Next tier: Lacks asymmetry, scale variation, or a focal device that would elevate it beyond a conventional bordered grid. - Motion: inconclusive — Only a generic scroll-reveal is noted with no specific timestamped behavior (stagger, hover states, logo transitions) to assess. Next tier: Needs concrete timestamped motion detail (e.g., staggered logo fade-ins, hover arrow reveal) to score. - Content: 55 — Headline copy ties a credibility stat to the grid, and arrow icons on some cells suggest linkable case studies, integrating content and proof reasonably well, but the logos themselves are generic placeholders with no supporting metrics or context per brand. Next tier: Could integrate brief per-logo context (industry, metric, quote link) to make the grid feel more content-rich than decorative. - Originality: 48 — This is a near-ubiquitous bordered logo-cloud pattern seen across countless SaaS sites; the only distinguishing touch is the subtle arrow affordance on some cells. Next tier: Needs a distinctive structural or interactive idea (e.g., varied cell logic, dynamic swapping, grouping by category) to move past a stock pattern. - Adaptability: 60 — The grid structure, border treatment, and headline/link pairing are clearly separable from the specific brand logos, making the skeleton easy to reuse with different logo sets. Next tier: Would benefit from explicit documentation of grid responsive behavior (column collapse rules) to be fully portable with confidence. Strengths: - Clear left-aligned headline-to-grid hierarchy with ample whitespace - Consistent bordered cell treatment keeps uneven logo shapes visually aligned - Subtle arrow affordance hints at interactive depth without clutter Weaknesses: - Highly conventional bordered logo-grid pattern with no distinguishing structural idea - Logos lack any supporting content (stats, case study snippets) beyond the grid itself - Motion evidence too generic to confirm any meaningful choreography - Pill-shaped secondary link is a common, unremarkable component Why it does not reach the next tier: The section executes a standard logo-cloud template cleanly but introduces no compositional surprise, no distinctive interaction, and no content depth beyond logos and a single credibility line, keeping it at a competent/polished rather than memorable level. ## Adaptation guidance - Effort: Low - Guidance: Reuse the bordered grid skeleton and headline/link pairing with any logo set; swap logos while preserving cell padding and border weight for consistency. What transfers: - Two-row bordered grid structure - Headline + secondary link pairing above the grid - Uniform cell border and spacing system Dependencies: - Actual brand logo assets and their varying aspect ratios - Arrow icon affordance tied to linked case studies ## 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 vague scroll-reveal description with no timestamped detail - No hover or interaction states visible in the static crop - Cannot confirm responsive grid collapse behavior from this evidence ## 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: logo-cloud - Source type: logo-cloud - Structure: two-column - Layout: Two-column split with text on top left and a uniform grid of logos occupying the bottom. - Styles: minimal, corporate - Components: headline, text link, logo grid, brand logos - Purpose: A clean grid of customer logos next to an introductory headline. - Visual signature: A structured, bordered grid displaying various brand logos in monochrome and color. - Place on the page: 3 of 10, after Hero (`exa-ai:hero-search-mockup`), before Comparison (`exa-ai:comparison-benchmarks`) ### 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": "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** — The page scrolls down to reveal a grid of customer logos. (0s–6s; 90% 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: Two-row bordered grid structure; Headline + secondary link pairing above the grid; Uniform cell border and spacing system - Dependencies: Actual brand logo assets and their varying aspect ratios; Arrow icon affordance tied to linked case studies - Guidance: Reuse the bordered grid skeleton and headline/link pairing with any logo set; swap logos while preserving cell padding and border weight for consistency. ### 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 logo-cloud section inspired by the design evidence titled “Customer Logo Grid”. Purpose: A clean grid of customer logos next to an introductory headline. Structure: two-column. Source layout label: Two-column split with text on top left and a uniform grid of logos occupying the bottom.. 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 structured, bordered grid displaying various brand logos in monochrome and color. Components: headline, text link, logo grid, brand logos. Style direction: minimal, corporate. 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: The page scrolls down to reveal a grid of customer logos. (90% confidence) Transfer these principles: Two-row bordered grid structure; Headline + secondary link pairing above the grid; Uniform cell border and spacing system. Dependencies: Actual brand logo assets and their varying aspect ratios; Arrow icon affordance tied to linked case studies. Adaptation guidance: Reuse the bordered grid skeleton and headline/link pairing with any logo set; swap logos while preserving cell padding and border weight for consistency. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.