# Icon feature grid Schema: Design Details SECTION.md v3.2 Website: Ardor Source: https://ardor.cloud/ Source section IDs: 0ddacfe7-ea90-43b7-b3b0-54208f48836c Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A centered heading sits above an even 3x2 grid, and every cell repeats the same icon, title and short body stack, so the section reads in one pass. - Copy is specific and short, with titles like 'Wherever you are' and 'Remembers everything' that state a benefit plainly instead of using buzzwords. - A near-monochrome palette of off-white canvas, white surface and black text, plus a tight 20px gap and a restrained type scale, keeps the whole grid calm and orderly. What a screenshot can't show: - The recording shows the grid only as static content visible for about three seconds, and no fade, stagger or hover animation was detected. - Measured type is Roboto Flex at 19px/22.8px for headings and about 12.4px/18.6px for body, both regular weight with default letter spacing; cells are separated by a 20px gap. Borrow: Keep every cell to the same icon, title and one-line body structure so a dense set of features stays scannable and calm. Leave alone: Do not copy the pixel-art icon style, the exact 'What it does. All of it.' wording or the Ardor palette; use your own icon set, and a free neutral sans such as Inter in place of Roboto Flex. ## Classification - Type: feature-grid - Layout: Centered heading followed by a 3x2 grid of text and icons. - Styles: minimal, corporate - Confidence: 95% ## Purpose and structure A clean, three-column grid presenting product features with small minimalist icons and short descriptions. Visual signature: Symmetrical grid of six small icons with brief descriptive text on a light background. ## Components - heading - icons - text descriptions ## Typography - Display: Doto — 32px 900 - Heading: Roboto Flex — 19px 400 - Body: Roboto Flex — 13px 400 ## Functional palette - Canvas: canvas #F2F3F1 - Text: text #000000 - Surface: surface #FFFFFF ## Motion evidence - 12.0–15.0s — A grid of features under 'What it does. All of it.', such as 'Wherever you are', 'Remembers everything', and 'Connects itself'. (88% confidence) ## Section quality Overall: 56.47/100 (Competent) Scored coverage: 85% - Typography: 58 — Clean centered serif-free heading at modest 19-22px scale paired with 13px body copy creates a legible, restrained hierarchy, but sizing contrast between heading and body is minimal and typographic choices are generic for SaaS marketing. Next tier: Needs more deliberate scale contrast or expressive type treatment to move beyond safe, default hierarchy. - Composition: 62 — Symmetrical 3x2 grid with consistent icon-title-body stacking and generous whitespace gives calm, orderly rhythm; alignment is precise and the centered heading anchors the grid well. Next tier: Grid is a standard three-column feature pattern with no asymmetry, scale variation, or compositional device that would make the layout feel distinctive rather than templated. - Motion: inconclusive — Gemini's motion_moments only describe static content being visible in a timeframe, not any specific animated change (fade, stagger, parallax) with timestamps. Next tier: Specific timestamped entrance or hover animation evidence is required to score motion. - Content: 55 — Each icon pairs with a tightly scoped benefit statement and concrete concrete detail (e.g., 'invite a colleague'), giving the grid some product specificity rather than vague buzzwords. Next tier: Icons are abstract pixel glyphs that don't visually reinforce their captions, weakening the integration between icon and message. - Originality: 45 — The three-column icon-plus-text feature grid is one of the most common SaaS marketing patterns; only the pixel-art icon style offers minor distinction. Next tier: Needs a structural or interaction idea beyond icon-title-body repetition to escape genre convention. - Adaptability: 60 — The grid structure, icon slot, title, and body copy are clearly separable roles that could be restyled with different icon sets, copy, and palette with minimal structural change. Next tier: Lack of deterministic spacing/radius tokens specific to this section limits certainty on how tightly the visual skin is coupled to layout. Strengths: - Clear, consistent icon-title-body repetition across six items - Generous whitespace and centered heading create calm pacing - Copy is specific and benefit-driven rather than vague marketing fluff Weaknesses: - Pattern is a generic three-column feature grid with no structural distinction - Pixel-style icons don't visually reinforce their adjacent captions - Typographic scale contrast between heading and body is minimal - No confirmed motion/interaction detail to assess dynamism Why it does not reach the next tier: The section executes a well-worn SaaS feature-grid pattern cleanly but offers no compositional surprise, icon-content cohesion, or typographic ambition that would distinguish it from thousands of similar sections. ## Adaptation guidance - Effort: Low - Guidance: Swap icon set and copy while preserving the grid spacing and heading-to-grid proportions; verify icon visual weight matches caption importance. What transfers: - 3x2 icon-title-body grid structure - Centered two-line heading above grid - Consistent card spacing rhythm Dependencies: - Pixel-art icon asset style - Specific product copy tied to features ## 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 could not be scored due to lack of specific animated change evidence - No deterministic spacing/radius values specific to this section's grid were supplied ## 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: centered single-column - Layout: Centered heading followed by a 3x2 grid of text and icons. - Styles: minimal, corporate - Components: heading, icons, text descriptions - Purpose: A clean, three-column grid presenting product features with small minimalist icons and short descriptions. - Visual signature: Symmetrical grid of six small icons with brief descriptive text on a light background. - Place on the page: 6 of 9, after Gallery (`ab397121-b02e-41ca-abe7-710a2f69cf21`), before Pricing (`22372d9f-206f-4733-ac2f-4811f93b8f6e`) ### Crop and composition - Crop: 1440×801px; aspect ratio 1.798:1 - Page bounds: 2741–3542px of 13889px - Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. ### 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": [ { "role": "UI/supporting text", "family": "Roboto Flex", "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif", "size": "19px", "weight": "400", "lineHeight": "22.8px", "letterSpacing": "normal", "sample": "What people build with Ardor", "element": "span", "occurrences": 34, "sourceId": "font-2" }, { "role": "UI/supporting text", "family": "Roboto Flex", "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\"", "size": "12.4px", "weight": "400", "lineHeight": "18.6px", "letterSpacing": "normal", "sample": "Two marketplaces", "element": "text", "occurrences": 20, "sourceId": "font-5" } ], "siteRoles": [ { "role": "display", "size": "32px", "family": "Doto", "source": "computed", "traits": "Regular", "weight": "900", "evidence": "font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.", "sampleId": "font-9", "confidence": 0.95, "lineHeight": "32px", "letterSpacing": "normal" }, { "role": "heading", "size": "19px", "family": "Roboto Flex", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.", "sampleId": "font-2", "confidence": 0.85, "lineHeight": "22.8px", "letterSpacing": "normal" }, { "role": "body", "size": "13px", "family": "Roboto Flex", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "15.6px", "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": [ { "value": "#000000", "cssValue": "oklab(0 0 0 / 0.06)", "alpha": 0.058823529411764705, "appliedAs": [ "background", "control-background" ], "occurrences": 14, "sourceId": "color-5" } ], "functionalPalette": [ { "hex": "#F2F3F1", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.", "sampleId": "color-6", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Calculated radii appear substantial on larger containers (e.g., the terminal cards) and fully circular on buttons and input fields.", "density": "Low density. The layout is airy, relying on negative space and large typography rather than packing information tightly.", "evidence": "The reliance on 'color-4' for the canvas and 'color-6' for cards creates a soft structure. Pill-shaped buttons are evident in the nav ('Start Free') and tabs. The generous spacing is visible in the gaps between 'Hero', 'What people build', and 'Made in Ardor' sections.", "borderStyle": "Most elements lack visible solid borders, relying instead on subtle backgrounds or shadows, except for very light, subtle borders on some UI elements (like color-9, a 10% black).", "buttonStyle": "Primary actions are solid black pill shapes with white text. Secondary toggles/tabs are unstyled text that gains a black pill background when active.", "cornerStyle": "Predominantly rounded. Feature cards, pricing cards, and terminal mockups have large, smooth border radii. Buttons and the main input field are fully rounded 'pill' shapes.", "contentWidth": "Content is generally centered in a constrained column, with some elements like the terminal carousel breaking out slightly wider, but keeping a generous margin from the viewport edges.", "spacingRhythm": "Generous use of vertical whitespace between major sections to isolate content and allow the background gradient to show. Within sections like pricing or feature cards, padding is consistent and moderate." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×801px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 20px. - Representative content widths: 953, 473px. - Layout containers: 1; cards/surfaces: 0; media elements: 12; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 2741, "bottom": 3542, "pageHeight": 13889 } }, "container": { "size": "1440×801px", "position": "x 0px, y 2741px", "display": "block", "positionMode": "static", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px solid rgb(0, 0, 0)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 20 ], "representativeContentWidthsPx": [ 953, 473 ] }, "columns": [ { "element": "article · Two marketplaces27 reportsDatabaseBoxes and labelsReview digestVPN1,000+ serversArdorTools$360K a ye", "size": "953×688px", "position": "x 244px, y 2819px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "2.68435e+07px", "19.218px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "svg · Two marketplaces27 reportsDatabaseBoxes and labelsReview digest", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/retro-computer.mp4" }, { "element": "svg · VPN1,000+ serversArdorTools$360K a year", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/logging-truck.mp4" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/say-something.mp4" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/biplane.mp4" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/living-room-aces.mp4" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/while-the-field-sleeps.mp4" }, { "element": "video · absolute inset-0 h-full w-full object-cover", "size": "953×577px", "position": "x 244px, y 2819px", "aspectRatio": 1.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://ardor.cloud/showcase/hearts-of-silicon.mp4" }, { "element": "svg · svg", "size": "11×11px", "position": "x 238px, y 3102px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "11×11px", "position": "x 1191px, y 3102px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "11×11px", "position": "x 1153px, y 3468px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### 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 { "root": { "id": "ld-825", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 2741, "width": 1440, "height": 801 }, "role": null, "label": "Made in Ardor.Two marketplaces27 reportsDatabaseBoxes and labelsReview digestVPN1,000+ serversArdorT", "border": "0px solid rgb(0, 0, 0)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "visible", "position": "static", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-836", "tag": "svg", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": "img", "label": "Two marketplaces27 reportsDatabaseBoxes and labelsReview digest", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1039", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/retro-computer.mp4", "poster": "https://ardor.cloud/showcase/retro-computer.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1043", "tag": "svg", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": "img", "label": "VPN1,000+ serversArdorTools$360K a year", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1261", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/logging-truck.mp4", "poster": "https://ardor.cloud/showcase/logging-truck.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1264", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/say-something.mp4", "poster": "https://ardor.cloud/showcase/say-something.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1267", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/biplane.mp4", "poster": "https://ardor.cloud/showcase/biplane.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1270", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/living-room-aces.mp4", "poster": "https://ardor.cloud/showcase/living-room-aces.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1273", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/while-the-field-sleeps.mp4", "poster": "https://ardor.cloud/showcase/while-the-field-sleeps.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1276", "tag": "video", "rect": { "x": 244, "y": 2819, "width": 953, "height": 577 }, "role": null, "label": "absolute inset-0 h-full w-full object-cover", "media": { "src": "https://ardor.cloud/showcase/hearts-of-silicon.mp4", "poster": "https://ardor.cloud/showcase/hearts-of-silicon.webp", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.7, "objectPosition": "50% 50%" }, { "id": "ld-1281", "tag": "svg", "rect": { "x": 238, "y": 3102, "width": 11, "height": 11 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1286", "tag": "svg", "rect": { "x": 1191, "y": 3102, "width": 11, "height": 11 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1319", "tag": "svg", "rect": { "x": 1153, "y": 3468, "width": 11, "height": 11 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 2741, "bottom": 3542, "pageHeight": 13889 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-831", "gap": "normal", "tag": "article", "rect": { "x": 244, "y": 2819, "width": 953, "height": 688 }, "role": null, "label": "Two marketplaces27 reportsDatabaseBoxes and labelsReview digestVPN1,000+ serversArdorTools$360K a ye", "columns": null, "display": "flex", "direction": "column" } ], "spacing": { "gapsPx": [ 20 ], "representativeContentWidthsPx": [ 953, 473 ] }, "coverage": { "cards": 0, "media": 12, "animations": 0, "elementsInSection": 42 }, "surfaces": { "radii": [ "2.68435e+07px", "19.218px" ], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-13T02:23:22.344Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **observed sequence** — A grid of features under 'What it does. All of it.', such as 'Wherever you are', 'Remembers everything', and 'Connects itself'. (12s–15s; 88% 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: 1440px 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: 3x2 icon-title-body grid structure; Centered two-line heading above grid; Consistent card spacing rhythm - Dependencies: Pixel-art icon asset style; Specific product copy tied to features - Guidance: Swap icon set and copy while preserving the grid spacing and heading-to-grid proportions; verify icon visual weight matches caption importance. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Icon feature grid”. Purpose: A clean, three-column grid presenting product features with small minimalist icons and short descriptions. Structure: centered single-column. Source layout label: Centered heading followed by a 3x2 grid of text and icons.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Symmetrical grid of six small icons with brief descriptive text on a light background. Components: heading, icons, text descriptions. Style direction: minimal, corporate. Observed crop: 1440×801px (1.798:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"32px","family":"Doto","source":"computed","traits":"Regular","weight":"900","evidence":"font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.","sampleId":"font-9","confidence":0.95,"lineHeight":"32px","letterSpacing":"normal"} {"role":"heading","size":"19px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.","sampleId":"font-2","confidence":0.85,"lineHeight":"22.8px","letterSpacing":"normal"} {"role":"body","size":"13px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.","sampleId":"font-1","confidence":0.9,"lineHeight":"15.6px","letterSpacing":"normal"} Color evidence: {"hex":"#F2F3F1","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).","sampleId":"color-4","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.","sampleId":"color-6","confidence":0.9} Typography measured inside this section: {"id":"font-2","size":"19px","count":34,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":1000,"text":"What people build with Ardor","property":"font"},{"tag":"span","top":1887,"text":"One prompt. A real app — not an MVP, not a prototype.","property":"font"},{"tag":"span","top":2741,"text":"Made in Ardor.","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif","lineHeight":"22.8px","letterSpacing":"normal"} {"id":"font-5","size":"12.4px","count":20,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"text","top":2902,"text":"Two marketplaces","property":"font"},{"tag":"text","top":2926,"text":"27 reports","property":"font"},{"tag":"text","top":3049,"text":"Database","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\"","lineHeight":"18.6px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-5","hex":"#000000","alpha":0.058823529411764705,"count":14,"contexts":[{"tag":"span","top":2022,"text":"3","property":"background"},{"tag":"div","top":2819,"text":"Two marketplaces27 reportsDatabaseBoxes and labelsReview digestVPN1,000+ serversArdorTools$360K a ye","property":"background"},{"tag":"a","top":3460,"text":"Read the storyRead the storyRead the story","property":"control-background"}],"cssValue":"oklab(0 0 0 / 0.06)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2741,"width":1440,"height":801},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[20],"representativeContentWidthsPx":[953,473]}; surfaces {"radii":["2.68435e+07px","19.218px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":244,"y":2819,"width":953,"height":577},"aspectRatio":1.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":244,"y":2819,"width":953,"height":577},"aspectRatio":1.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":244,"y":2819,"width":953,"height":577},"aspectRatio":1.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":244,"y":2819,"width":953,"height":577},"aspectRatio":1.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}] Motion evidence: observed sequence: A grid of features under 'What it does. All of it.', such as 'Wherever you are', 'Remembers everything', and 'Connects itself'. (88% confidence) Transfer these principles: 3x2 icon-title-body grid structure; Centered two-line heading above grid; Consistent card spacing rhythm. Dependencies: Pixel-art icon asset style; Specific product copy tied to features. Adaptation guidance: Swap icon set and copy while preserving the grid spacing and heading-to-grid proportions; verify icon visual weight matches caption importance. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.