# Product Catalog Grid Schema: Design Details SECTION.md v3.2 Website: EADEM Source: https://eadem.co/ Source section IDs: gap-1781013b-1824-2762 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The even three-column grid gives every bottle the same card size and background, so shoppers can compare products at a glance. - Generous negative space around each isolated bottle keeps the photography as the focus, and the title and price share consistent baselines. - Serif product titles paired with small uppercase sans labels and arrow icons create a light hierarchy, while badges and benefit tags add context without clutter. What a screenshot can't show: - The recording showed no specific motion, so hover or load behavior is unknown. - No font sizes, letter spacing or spacing values were measured, so exact type scale and gaps can't be confirmed. Borrow: Keep product cards uniform, with isolated images on a consistent background and aligned text baselines, so the products carry the page. Leave alone: Don't copy EADEM's warm gold-brown text, cream canvas, coral action color or its bottle photography; use your own palette and imagery. ## Classification - Type: gallery - Layout: Three-column equal-width grid layout. - Styles: minimal, photographic - Confidence: 95% ## Purpose and structure A three-column grid displaying individual product bottles with names and prices. Visual signature: Clean, minimal presentation of product bottles isolated on a solid background. ## Components - product card - product image - product title - price label ## Typography - Heading: Mabry — 36px 400 - Body: Mabry — 20px 400 ## Functional palette - Text: text #7D5D24 - Canvas: canvas #EBE9DA - Primary-Action: primary action #FF7775 - Surface: surface #FFFFFF ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 56.35/100 (Competent) Scored coverage: 85% - Typography: 58 — Clean serif product titles paired with uppercase sans labels and small arrow icons create light hierarchy, but sizing/contrast is modest and typographic choices are standard ecommerce practice rather than distinctive. Next tier: Needs more deliberate scale contrast or type pairing that feels considered rather than default product-card styling. - Composition: 60 — Even three-column grid with consistent card backgrounds, aligned baselines for price/title, and generous negative space around bottles gives a tidy, legible layout, but the arrangement is a conventional e-commerce grid with no distinguishing structural idea. Next tier: Lacks an asymmetry, scale variation, or framing device that would elevate it beyond a standard product grid. - Motion: not_assessed — No timestamped motion evidence supplied for this section. Next tier: Provide specific visible motion changes with timestamps to assess. - Content: 55 — Product photography is clean and consistent, with badges and benefit tags adding light context, but the integration is purely functional catalog display without narrative or editorial layering. Next tier: Would need tighter visual-copy integration or storytelling elements beyond bottle + price + tagline to progress. - Originality: 45 — This is a textbook three-column product grid pattern seen across countless ecommerce sites; nothing here departs from the expected template. Next tier: Requires a distinctive structural or visual twist that isn't interchangeable with any other shop grid. - Adaptability: 62 — Grid structure, card component, and text/price placement are clearly separable from skin (palette, photography, fonts), making it straightforward to reskin as a generic product grid template. Next tier: Score is capped because the pattern itself is generic, limiting how much adaptability can matter stylistically. Strengths: - Consistent card proportions and spacing across all three columns - Clear price/title alignment supporting quick scanning - Subtle badge and benefit-tag details add minor visual interest Weaknesses: - Highly conventional three-column product grid with no unique structural idea - Typography pairing is serviceable but unremarkable - No visible motion or interaction evidence to assess dynamism - Overlapping floating 'GET 10% OFF' button and chat widget clutter the crop, reducing visual cleanliness Why it does not reach the next tier: The section executes a standard ecommerce catalog grid competently but without any structural, typographic, or compositional idea that distinguishes it from innumerable similar product grids; motion cannot be assessed due to lack of evidence, and originality is low. ## Adaptation guidance - Effort: Low - Guidance: Reuse the grid and card hierarchy for any product catalog; swap palette, photography, and type family as needed without altering structural logic. What transfers: - Three-column equal-width card grid structure - Card layout order: image, title, price, tagline Dependencies: - Product photography style (isolated bottles on solid color) - Specific serif/sans type pairing and beige palette ## 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%) - No motion timestamps provided, so motion axis is unscored - Floating promotional elements overlap the crop, obscuring full section context ## 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: gallery - Source type: gallery - Structure: grid - Layout: Three-column equal-width grid layout. - Styles: minimal, photographic - Components: product card, product image, product title, price label - Purpose: A three-column grid displaying individual product bottles with names and prices. - Visual signature: Clean, minimal presentation of product bottles isolated on a solid background. - Place on the page: 4 of 8, after Other (`eadem-co:C02`), before Feature collection (`eadem-co:C03`) ### 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": "heading", "size": "36px", "family": "Mabry", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-18: computed CSS at 1440×1000; AI role: Mabry sans-serif at 36px used for strong section headings like 'SCIENCE MEETS SOUL.'", "sampleId": "font-18", "confidence": 0.9, "lineHeight": "40px", "letterSpacing": "normal" }, { "role": "body", "size": "20px", "family": "Mabry", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Mabry sans-serif at 20px used for standard navigation links and prominent UI labels.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "28px", "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": "#7D5D24", "name": "text", "role": "text", "source": "computed", "evidence": "color-5: computed rgb(125, 93, 36); AI role: #7D5D24 (brown) is the primary text color used for most readable content on the light canvas.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#EBE9DA", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(235, 233, 218); AI role: #EBE9DA (beige) used extensively as the main background color across multiple sections.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#FF7775", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-6: computed rgb(255, 119, 117); AI role: #FF7775 (coral) used for the announcement bar and interactive hover badges to draw attention.", "sampleId": "color-6", "confidence": 0.8 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: #FFFFFF (white) used for button backgrounds like 'SHOP THE SET'.", "sampleId": "color-3", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Minimal to zero border radius on primary content blocks and images. Fully rounded (border-radius: 50%) for floating UI elements like the chat widget and custom cursor.", "density": "Low to medium density. The design leans heavily on negative space (minimalist trait) to highlight editorial imagery and large typography.", "evidence": "Observed from the full-page screenshots: sharp corners on product images and article cards, large padding around the 'SCIENCE MEETS SOUL' text block, circular chat icon, and edge-to-edge split hero.", "borderStyle": "Mostly borderless design. Occasional use of thin, subtle borders (e.g., #EEEEEE) for separation, but reliance is on background color blocks.", "buttonStyle": "Buttons are typically rectangular with sharp edges, solid white or light backgrounds, and bold, uppercase text. Some secondary buttons or tags might use colored backgrounds with contrasting text.", "cornerStyle": "Sharp, right-angled corners are dominant on product cards and images, contrasting with the circular floating buttons.", "contentWidth": "Wide, stretching across most of the viewport, particularly in hero and split-screen sections, but text blocks are often constrained to maintain readability.", "spacingRhythm": "Generous vertical spacing between major sections, utilizing the light canvas color to create breathing room. Horizontal padding is substantial, especially around text blocks." } ``` ### 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 No timestamped authored motion is attached. Use only restrained baseline transitions. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: low - What transfers: Three-column equal-width card grid structure; Card layout order: image, title, price, tagline - Dependencies: Product photography style (isolated bottles on solid color); Specific serif/sans type pairing and beige palette - Guidance: Reuse the grid and card hierarchy for any product catalog; swap palette, photography, and type family as needed without altering structural logic. ### 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; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Product Catalog Grid”. Purpose: A three-column grid displaying individual product bottles with names and prices. Structure: grid. Source layout label: Three-column equal-width grid layout.. 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: Clean, minimal presentation of product bottles isolated on a solid background. Components: product card, product image, product title, price label. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"heading","size":"36px","family":"Mabry","source":"computed","traits":"Regular","weight":"400","evidence":"font-18: computed CSS at 1440×1000; AI role: Mabry sans-serif at 36px used for strong section headings like 'SCIENCE MEETS SOUL.'","sampleId":"font-18","confidence":0.9,"lineHeight":"40px","letterSpacing":"normal"} {"role":"body","size":"20px","family":"Mabry","source":"computed","traits":"uppercase","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Mabry sans-serif at 20px used for standard navigation links and prominent UI labels.","sampleId":"font-1","confidence":0.95,"lineHeight":"28px","letterSpacing":"normal"} Color evidence: {"hex":"#7D5D24","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(125, 93, 36); AI role: #7D5D24 (brown) is the primary text color used for most readable content on the light canvas.","sampleId":"color-5","confidence":0.95} {"hex":"#EBE9DA","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(235, 233, 218); AI role: #EBE9DA (beige) used extensively as the main background color across multiple sections.","sampleId":"color-1","confidence":0.9} {"hex":"#FF7775","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(255, 119, 117); AI role: #FF7775 (coral) used for the announcement bar and interactive hover badges to draw attention.","sampleId":"color-6","confidence":0.8} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: #FFFFFF (white) used for button backgrounds like 'SHOP THE SET'.","sampleId":"color-3","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. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Three-column equal-width card grid structure; Card layout order: image, title, price, tagline. Dependencies: Product photography style (isolated bottles on solid color); Specific serif/sans type pairing and beige palette. Adaptation guidance: Reuse the grid and card hierarchy for any product catalog; swap palette, photography, and type family as needed without altering structural logic. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.