# Masonry testimonial cards Schema: Design Details SECTION.md v3.2 Website: Gradium Source: https://gradium.ai/ Source section IDs: gap-d95715f2-7036-8206 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Cards of varied width, height and fill colour sit in staggered columns, so the grid feels composed rather than uniform, and one white image card breaks the colour rhythm. - Bright colour-blocked cards pop against the near-black canvas, and white headline text stays highly legible. - Each quote is specific (latency, accents, enterprise scale) and comes with a company logo, a named speaker and a mono uppercase title, which makes the proof credible. What a screenshot can't show: - The recording shows only a general reveal of the section between 19 and 23 seconds, with no detail on how individual cards stagger or ease in. - No font sizes, line heights or gaps were measured, so the exact type scale and card spacing are unknown. Borrow: Build a testimonial wall from one reusable card unit (logo, colour fill, quote, name and title), then vary widths, heights and fills so the layout carries the interest. Leave alone: Don't copy Gradium's lime, sky-blue and dark palette or its Favorit headline and mono label pairing; use your own colour set and a free geometric sans such as Inter or DM Sans. ## Classification - Type: testimonials - Layout: Masonry grid - Styles: colourful, bold, editorial - Confidence: 95% ## Purpose and structure A section featuring colorful testimonial cards arranged in an asymmetric masonry layout on a dark background. Visual signature: A staggered arrangement of brightly colored rectangular cards with text quotes, floating on a dark canvas. ## Components - testimonial cards - 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 - 19.0–23.0s — Reveals a dark section containing testimonial cards arranged in a masonry-style layout. (95% confidence) ## Section quality Overall: 62.82/100 (Good) Scored coverage: 85% - Typography: 64 — Clear hierarchy between the large Favorit headline, mono eyebrow label, and body copy inside cards. Card typography is consistent and legible, with mono uppercase job titles adding a technical texture, but the overall type palette is fairly conventional sans-serif pairing without distinctive craft inside the cards themselves. Next tier: Needs more deliberate typographic variation or scale contrast within the card content itself, not just the headline, to move past polished-but-standard. - Composition: 68 — Asymmetric masonry grid with varied card widths, heights, and colors creates genuine visual interest against the dark canvas; the staggered column heights and the white image-card breaking the color pattern show real compositional intent rather than a uniform grid. Next tier: Layout reads as a well-executed masonry pattern seen elsewhere; a next tier would need an unexpected structural move (overlap, scale shift, non-rectangular shapes) to feel singular rather than a well-done version of a familiar grid. - Motion: inconclusive — Gemini only reports a generic reveal of the section between 19-23s with no specifics on how individual cards animate, stagger, or transition in. Next tier: Specific timestamped evidence of per-card entrance behavior (stagger timing, direction, easing) is required before motion can be scored. - Content: 62 — Quotes are substantive and specific to the product (latency, accents, enterprise scale), paired with real company names/logos and named speakers with titles, giving genuine credibility signal rather than generic praise. Next tier: Content integration is competent but the pairing of color-block cards to quotes feels arbitrary rather than purposefully tied to each brand's identity, limiting perceived intentionality. - Originality: 58 — Colorful masonry testimonial grids on dark backgrounds are a recognizable contemporary pattern; the bright color-blocked cards are a familiar differentiation device rather than a novel structural idea. Next tier: Lacks a distinguishing mechanic (e.g. unusual card shapes, interactive reveal, unconventional quote treatment) that would make this hard to mentally substitute with other masonry testimonial sections. - Adaptability: 60 — The card component (logo, color fill, quote, name/title) is a clearly separable, reusable unit, and the masonry positioning logic could transfer to other datasets with different card counts. Next tier: Reliance on specific brand colors per card and a single headline anchor reduces clean separation of skin from structure without additional rules for color assignment and grid rebalancing. Strengths: - Genuine asymmetric masonry arrangement with varied card dimensions and an image-based card breaking monotony - Strong color contrast against dark canvas makes each testimonial card instantly scannable - Quotes are specific and technically credible rather than generic praise Weaknesses: - Masonry testimonial pattern is a common contemporary convention, limiting distinctiveness - Color-to-brand mapping on cards appears arbitrary rather than intentional - Motion behavior is unverified beyond a generic section reveal - Typography within cards is conventional and doesn't add much hierarchy beyond the headline Why it does not reach the next tier: The section executes a familiar masonry testimonial idea cleanly and with good color energy, but lacks a singular structural or interactive idea, distinctive internal typography, or verified motion craft that would push it into memorable or wow territory. ## Adaptation guidance - Effort: Medium - Guidance: Separate the card template (logo slot, color fill, quote text block, name/title) from the masonry placement algorithm; color values and copy length constraints should be parameterized to adapt to new testimonial sets while preserving the staggered layout rhythm. What transfers: - Masonry grid logic with variable card sizes - Card component structure: logo, color fill, quote, name/title - Mono uppercase label pattern for metadata Dependencies: - Specific brand color assignments per card - Available logo marks and headshictless layout accommodating variable quote lengths - Underlying grid/column system that supports asymmetric placement ## 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 scoring blocked by lack of specific timestamped card-level animation detail - No visible evidence of hover or interactive states on cards - Exact font files, precise color hex matches on cards beyond named palette, and spacing values not independently verifiable from crop alone ## 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: testimonials - Source type: testimonials - Structure: grid - Layout: Masonry grid - Styles: colourful, bold, editorial - Components: testimonial cards, headline - Purpose: A section featuring colorful testimonial cards arranged in an asymmetric masonry layout on a dark background. - Visual signature: A staggered arrangement of brightly colored rectangular cards with text quotes, floating on a dark canvas. - Place on the page: 8 of 11, after Feature collection (`gradium-ai:gradium-infrastructure`), before Call to action (`gradium-ai:gradium-cta`) ### 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": "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 dark section containing testimonial cards arranged in a masonry-style layout. (19s–23s; 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: Masonry grid logic with variable card sizes; Card component structure: logo, color fill, quote, name/title; Mono uppercase label pattern for metadata - Dependencies: Specific brand color assignments per card; Available logo marks and headshictless layout accommodating variable quote lengths; Underlying grid/column system that supports asymmetric placement - Guidance: Separate the card template (logo slot, color fill, quote text block, name/title) from the masonry placement algorithm; color values and copy length constraints should be parameterized to adapt to new testimonial sets while preserving the staggered layout rhythm. ### 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 testimonials section inspired by the design evidence titled “Masonry testimonial cards”. Purpose: A section featuring colorful testimonial cards arranged in an asymmetric masonry layout on a dark background. Structure: grid. Source layout label: Masonry grid. 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 staggered arrangement of brightly colored rectangular cards with text quotes, floating on a dark canvas. Components: testimonial cards, headline. Style direction: colourful, bold, editorial. 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 dark section containing testimonial cards arranged in a masonry-style layout. (95% confidence) Transfer these principles: Masonry grid logic with variable card sizes; Card component structure: logo, color fill, quote, name/title; Mono uppercase label pattern for metadata. Dependencies: Specific brand color assignments per card; Available logo marks and headshictless layout accommodating variable quote lengths; Underlying grid/column system that supports asymmetric placement. Adaptation guidance: Separate the card template (logo slot, color fill, quote text block, name/title) from the masonry placement algorithm; color values and copy length constraints should be parameterized to adapt to new testimonial sets while preserving the staggered layout rhythm. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.