# Dark Feature Image Grid Schema: Design Details SECTION.md v3.2 Website: Clarion Source: https://www.clarionhealth.com/ Source section IDs: gap-c5d51256-4457-6304 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Photographic cards with a small UI or data overlay tie each product benefit to a real scene, so the images carry meaning instead of decorating. - A centered serif heading over clean sans captions gives a clear editorial hierarchy, and the dark brown ground makes the photos glow. - Staggered card rows with edges that bleed off the sides suggest a continuous strip and add rhythm to a simple grid. What a screenshot can't show: - The recording shows only a page scroll to this section between 15s and 18s, so hover states, card transitions and any horizontal scrolling are unknown. - No font sizes, spacing or padding were measured. Borrow: Pair each feature image with a small product-UI overlay and a one-line benefit, so every card explains the product as well as showing a mood. Leave alone: Don't copy Clarion's dark brown and cream palette, its serif heading style or its specific photo-and-overlay imagery; use your own type and brand scenes. ## Classification - Type: feature-grid - Layout: Centered heading followed by a horizontal row of image cards with captions. - Styles: photographic, editorial - Confidence: 100% ## Purpose and structure A dark brown section showing a horizontal arrangement of image cards, each with text underneath detailing implementation steps. Visual signature: Rich dark background populated with a row of square images demonstrating platform usage. ## Components - Section heading - Image cards - Descriptive text ## Typography - Display: Bpmf Zihi Kai Std — 61.7px 500 - Heading: Moderat Serif Trial — 48px 300 - Body: Geist — 16px 400 ## Functional palette - Canvas: canvas #FBFAF8 - Text: text #361700 - Surface: surface #072D35 - Primary-Action: primary action #3C210C - Border: border #E7E4DA ## Motion evidence - 15.0–18.0s — The page scrolls to a section explaining the implementation process. (95% confidence) ## Section quality Overall: 62.88/100 (Good) Scored coverage: 85% - Typography: 62 — Serif heading paired with clean sans body and captions creates clear editorial hierarchy; consistent with brand type system, but the caption/body pairing is a fairly standard two-tier approach without distinctive refinement at this scale. Next tier: Needs more deliberate scale contrast or type-driven detail (e.g., varied weights, numerals, kicker labels) to read as more than a competent heading+body pattern. - Composition: 68 — Two staggered rows of image cards with offset vertical alignment and bleed-off edges create rhythm and a sense of continuous scroll; overlay UI graphics inside photos integrate product context into imagery effectively, giving the grid real compositional purpose beyond generic photo tiles. Next tier: Grid is still a fairly conventional repeating card pattern; spacing/offset variety is present but card sizing and alignment don't push into a more unexpected or asymmetric structure to earn higher marks. - Motion: inconclusive — Only a generic scroll-into-view motion moment is supplied with no specific timestamped interaction (e.g., hover states, card transitions, horizontal scroll behavior) to assess quality of movement. Next tier: Need timestamped evidence of specific in-section motion (hover reveals, carousel advance, parallax) to score this axis. - Content: 65 — Each card pairs a photographic scene with an abstract UI/data overlay and a short benefit statement, tightly binding product narrative to imagery rather than using generic stock photos alone. Next tier: Captions are serviceable marketing copy but don't show deeper content-driven layout variation (e.g., differing card treatments per message); overlays are illustrative rather than substantive product UI. - Originality: 58 — The dark-background horizontal card grid with photo+overlay+caption is a recognizable SaaS feature-section pattern; the overlay graphics add some flavor but the base structure is a common template. Next tier: Would need a structural or interaction idea not seen elsewhere (e.g., unconventional grid logic, unique card behavior) to move past a familiar pattern. - Adaptability: 60 — Card-based grid with heading/body text is cleanly separable into a reusable component (image + overlay graphic + caption + description) with token-driven colors and spacing already established in the site's design tokens. Next tier: Reliance on bespoke overlay graphics per card ties the pattern closely to specific illustration assets, limiting generic reusability without replacement artwork. Strengths: - Staggered two-row card grid creates a continuous horizontal rhythm that avoids a flat single grid - Each image is paired with a relevant abstract UI/data overlay that reinforces the implementation narrative visually - Dark warm-brown background keeps focus on light photographic cards and white text Weaknesses: - Base pattern is a familiar photo-card-plus-caption feature grid common across SaaS marketing sites - Caption typography pairing (serif heading, sans body) doesn't show extra refinement at this scale - No specific timestamped motion evidence to assess animation quality of card reveals or scroll behavior - Overlay illustrations are bespoke assets that make the pattern harder to generalize without replacement art Why it does not reach the next tier: The section is well-executed and purposeful but relies on a conventional grid-of-photo-cards structure; to reach strong/memorable it would need a more distinctive compositional idea, richer motion evidence, or an interaction mechanic that isn't substitutable with any other SaaS card grid. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card skeleton and staggered grid rhythm, but replace overlay graphics and photography with assets matching new content while preserving the heading/caption hierarchy and color roles. What transfers: - Card component structure (image + overlay + heading + body) - Staggered two-row grid layout with horizontal offset - Dark background with light card treatment for contrast Dependencies: - Bespoke overlay illustrations/UI graphics per card - Specific photographic imagery matched to each caption's narrative ## 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 axis inconclusive due to lack of specific timestamped interaction evidence - Cannot verify exact spacing, radius, or animation parameters beyond token-level descriptions ## 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 horizontal row of image cards with captions. - Styles: photographic, editorial - Components: Section heading, Image cards, Descriptive text - Purpose: A dark brown section showing a horizontal arrangement of image cards, each with text underneath detailing implementation steps. - Visual signature: Rich dark background populated with a row of square images demonstrating platform usage. - Place on the page: 7 of 10, after Logo strip (`clarionhealth-com:C04`), before Feature collection (`clarionhealth-com:C05`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": [], "siteRoles": [ { "role": "display", "size": "61.7px", "family": "Bpmf Zihi Kai Std", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-4: computed CSS at 1440×1000; AI role: Used for the massive 61.7px hero headline 'The front office that runs itself.'", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "67.9px", "letterSpacing": "-1.9px" }, { "role": "heading", "size": "48px", "family": "Moderat Serif Trial", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-3: computed CSS at 1440×1000; AI role: Moderat Serif Trial used for 48px major section headings like 'Scale your practice'.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "52.8px", "letterSpacing": "-1px" }, { "role": "body", "size": "16px", "family": "Geist", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: Geist 16px sans-serif used extensively for descriptive paragraph text.", "sampleId": "font-7", "confidence": 0.95, "lineHeight": "24px", "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": "#FBFAF8", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(251, 250, 248); AI role: #FBFAF8 used as the primary light background across most of the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#361700", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(54, 23, 0); AI role: #361700 dark brown used for primary typography, softer than pure black.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#072D35", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(7, 45, 53); AI role: #072D35 deep teal used for the hero background and security callout banner.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#3C210C", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(60, 33, 12); AI role: #3C210C used for primary filled buttons and button borders.", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#E7E4DA", "name": "border", "role": "border", "source": "computed", "evidence": "color-9: computed rgb(231, 228, 218); AI role: #E7E4DA used for subtle borders dividing the integration logo grid.", "sampleId": "color-9", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons use border-radius that creates a perfect pill shape; image masks and cards have distinct but soft rounded corners.", "density": "Low density. The layout is highly breathable, favoring large typography and large imagery over dense text packing.", "evidence": "Derived from visual observation of button shapes, card boundaries, grid alignments, and the DOM/CSS metrics provided for fonts and colors.", "borderStyle": "Mostly borderless design relying on background color contrast (canvas vs surface). Thin 1px borders used sparingly for structural grids like the integration logos.", "buttonStyle": "Pill-shaped containers. Primary buttons use a solid dark fill with light text; secondary/hero buttons use outlines or semi-transparent fills.", "cornerStyle": "Fully rounded (pill-shaped) for interactive elements like buttons and tags, moderately rounded (approx 16-24px) for cards and images.", "contentWidth": "Content is constrained to a central column, likely around 1200px max-width, while backgrounds stretch full viewport width.", "spacingRhythm": "Generous macro-spacing between sections (typically 100px+), with tight micro-spacing within text groups and cards." } ``` ### 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 to a section explaining the implementation process. (15s–18s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Card component structure (image + overlay + heading + body); Staggered two-row grid layout with horizontal offset; Dark background with light card treatment for contrast - Dependencies: Bespoke overlay illustrations/UI graphics per card; Specific photographic imagery matched to each caption's narrative - Guidance: Reuse the card skeleton and staggered grid rhythm, but replace overlay graphics and photography with assets matching new content while preserving the heading/caption hierarchy and color roles. ### 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 “Dark Feature Image Grid”. Purpose: A dark brown section showing a horizontal arrangement of image cards, each with text underneath detailing implementation steps. Structure: centered single-column. Source layout label: Centered heading followed by a horizontal row of image cards with captions.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Rich dark background populated with a row of square images demonstrating platform usage. Components: Section heading, Image cards, Descriptive text. Style direction: photographic, editorial. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"61.7px","family":"Bpmf Zihi Kai Std","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: Used for the massive 61.7px hero headline 'The front office that runs itself.'","sampleId":"font-4","confidence":0.9,"lineHeight":"67.9px","letterSpacing":"-1.9px"} {"role":"heading","size":"48px","family":"Moderat Serif Trial","source":"computed","traits":"Regular","weight":"300","evidence":"font-3: computed CSS at 1440×1000; AI role: Moderat Serif Trial used for 48px major section headings like 'Scale your practice'.","sampleId":"font-3","confidence":0.95,"lineHeight":"52.8px","letterSpacing":"-1px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Geist 16px sans-serif used extensively for descriptive paragraph text.","sampleId":"font-7","confidence":0.95,"lineHeight":"24px","letterSpacing":"-0.2px"} Color evidence: {"hex":"#FBFAF8","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(251, 250, 248); AI role: #FBFAF8 used as the primary light background across most of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#361700","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(54, 23, 0); AI role: #361700 dark brown used for primary typography, softer than pure black.","sampleId":"color-4","confidence":0.95} {"hex":"#072D35","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(7, 45, 53); AI role: #072D35 deep teal used for the hero background and security callout banner.","sampleId":"color-3","confidence":0.9} {"hex":"#3C210C","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(60, 33, 12); AI role: #3C210C used for primary filled buttons and button borders.","sampleId":"color-5","confidence":0.9} {"hex":"#E7E4DA","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(231, 228, 218); AI role: #E7E4DA used for subtle borders dividing the integration logo grid.","sampleId":"color-9","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 to a section explaining the implementation process. (95% confidence) Transfer these principles: Card component structure (image + overlay + heading + body); Staggered two-row grid layout with horizontal offset; Dark background with light card treatment for contrast. Dependencies: Bespoke overlay illustrations/UI graphics per card; Specific photographic imagery matched to each caption's narrative. Adaptation guidance: Reuse the card skeleton and staggered grid rhythm, but replace overlay graphics and photography with assets matching new content while preserving the heading/caption hierarchy and color roles. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.