# Interactive models feature grid Schema: Design Details SECTION.md v3.2 Website: Gradium Source: https://gradium.ai/ Source section IDs: gap-d95715f2-1371-4205 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A disciplined two-column grid gives each of the six models an equal panel, so the page reads with a steady rhythm and nothing competes. - Every card repeats one template: a large visual, a mono uppercase eyebrow, a display headline, short body copy and a CTA, which makes the set quick to scan. - Each visual is a mockup of the feature it labels (chat bubble, translation panel, mobile app), set against a near-black canvas where white text and a lime accent stand out. What a screenshot can't show: - The recording shows only the page scrolling past the 2x2 grid, then a 2x1 row, from about 6s to 13s; no card-level micro-interactions were seen. - Measured font sizes, spacing and section padding were not captured, so exact scale and gaps are unknown. Borrow: Give every item in a grid the same card template, and let a product-specific mockup carry each one instead of generic imagery. Leave alone: Don't copy Gradium's particle-cloud art, lime and blue accent palette, or Favorit display type; use a free geometric sans and your own product visuals. ## Classification - Type: feature-grid - Layout: 2-column grid - Styles: illustrative, bold - Confidence: 95% ## Purpose and structure A dark two-column grid showcasing various AI models with detailed interactive UI mockups and graphics. Visual signature: A dark section containing a structured grid of feature cards, each with rich visual elements like abstract particle art or product interface mockups. ## Components - feature cards - UI mockups - graphics ## 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 - 6.0–13.0s — The page scrolls down to reveal a 2x2 grid of cards detailing different voice AI features, followed by a 2x1 grid. (95% confidence) ## Section quality Overall: 64.24/100 (Good) Scored coverage: 85% - Typography: 64 — Clear hierarchy using Favorit display headline, IBM Plex Sans body, and a mono uppercase eyebrow label gives organized contrast between scales, with consistent restrained use across all six cards. Next tier: Type choices are competent but do not show distinctive treatment beyond standard size/weight contrast; no unique kerning, scale play, or typographic device elevates it past polished. - Composition: 68 — A disciplined 2-column grid pairs a large illustrative/mockup panel with a consistent label+description+CTA block beneath each, giving strong rhythm and visual variety across six distinct product demos while keeping alignment and spacing uniform. Next tier: Despite variety in imagery, the underlying card template is fairly conventional (image top, text block bottom); nothing in the arrangement itself proposes a structural idea beyond a well-executed grid. - Motion: inconclusive — Gemini only notes a scroll reveal of the grid sections without timestamped detail on any specific animated micro-interactions within the cards. Next tier: Need explicit timestamped evidence of in-card motion (e.g., particle animation, hover states) to score motion confidently. - Content: 66 — Each card integrates a realistic product UI mockup (chat bubble, translation panel, mobile app) directly relevant to its labeled feature, making the imagery feel purpose-built rather than decorative stock art. Next tier: The particle/bust graphics, while thematically tied to 'voice,' read as generic abstract filler rather than something uniquely tied to the specific feature content, limiting integration depth. - Originality: 62 — The combination of particle-cloud textures with floating UI chips is a recognizable contemporary AI-product aesthetic rather than a novel structural or conceptual idea. Next tier: No distinctive mechanism, interaction concept, or layout twist that couldn't be swapped for any other AI SaaS feature grid. - Adaptability: 60 — The grid structure, card template (visual + label + copy + CTA), and dark canvas with accent color are clearly separable from the specific voice-AI imagery and copy. Next tier: Dependency on custom particle/mockup illustrations for each card means visual skin swap requires bespoke asset production, not a simple token change. Strengths: - Consistent repeatable card template with clear label/description/CTA rhythm across six features - Each card's UI mockup is contextually matched to its labeled capability - Clean typographic hierarchy (eyebrow label, large heading, subdued subhead) sets context efficiently Weaknesses: - Abstract particle-cloud backgrounds are decorative and interchangeable across cards, diluting specificity - No distinctive layout or interaction idea beyond a standard image-over-text feature grid - Motion cannot be verified beyond a basic scroll reveal Why it does not reach the next tier: The grid executes a familiar feature-card pattern with polish and consistency, but lacks a structural or conceptual device unique to this product that would make it memorable or hard to substitute; the particle visuals function as generic sci-fi texture rather than purposeful differentiation. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the grid/card skeleton and typographic hierarchy for any multi-feature showcase; replace particle art and mockups with new illustrative or product-specific visuals while keeping label-eyebrow, heading, and CTA pattern intact. What transfers: - 2-column card grid with image-top, text-bottom layout - Label + heading + description + CTA card template - Dark canvas with single accent color for data/UI highlights Dependencies: - Custom particle/abstract art assets per card - Specific UI mockup screenshots tailored to each feature ## 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 state inconclusive due to lack of timestamped in-card animation evidence - No exact color/spacing token values provided beyond general palette ## 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: features - Source type: feature-grid - Structure: two-column - Layout: 2-column grid - Styles: illustrative, bold - Components: feature cards, UI mockups, graphics - Purpose: A dark two-column grid showcasing various AI models with detailed interactive UI mockups and graphics. - Visual signature: A dark section containing a structured grid of feature cards, each with rich visual elements like abstract particle art or product interface mockups. - Place on the page: 4 of 11, after Logo strip (`gradium-ai:gradium-logo-cloud`), before Founder (`gradium-ai:gradium-team`) ### 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. **scroll** — The page scrolls down to reveal a 2x2 grid of cards detailing different voice AI features, followed by a 2x1 grid. (6s–13s; 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: 2-column card grid with image-top, text-bottom layout; Label + heading + description + CTA card template; Dark canvas with single accent color for data/UI highlights - Dependencies: Custom particle/abstract art assets per card; Specific UI mockup screenshots tailored to each feature - Guidance: Reuse the grid/card skeleton and typographic hierarchy for any multi-feature showcase; replace particle art and mockups with new illustrative or product-specific visuals while keeping label-eyebrow, heading, and CTA pattern intact. ### 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 features section inspired by the design evidence titled “Interactive models feature grid”. Purpose: A dark two-column grid showcasing various AI models with detailed interactive UI mockups and graphics. Structure: two-column. Source layout label: 2-column grid. 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 dark section containing a structured grid of feature cards, each with rich visual elements like abstract particle art or product interface mockups. Components: feature cards, UI mockups, graphics. Style direction: illustrative, bold. 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: scroll: The page scrolls down to reveal a 2x2 grid of cards detailing different voice AI features, followed by a 2x1 grid. (95% confidence) Transfer these principles: 2-column card grid with image-top, text-bottom layout; Label + heading + description + CTA card template; Dark canvas with single accent color for data/UI highlights. Dependencies: Custom particle/abstract art assets per card; Specific UI mockup screenshots tailored to each feature. Adaptation guidance: Reuse the grid/card skeleton and typographic hierarchy for any multi-feature showcase; replace particle art and mockups with new illustrative or product-specific visuals while keeping label-eyebrow, heading, and CTA pattern intact. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.