# Feature Expandable Cards Schema: Design Details SECTION.md v3.2 Website: Base Power Source: https://www.basepowercompany.com/ Source section IDs: gap-f89b84fb-10320-11294 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Two equal square photo cards sit side by side, so each compatibility claim gets the same weight and the pair is read at a glance. - Photos show real, on-topic scenes (a roof at dusk, a generator being towed), which prove each claim without extra copy. - White pill labels with plus icons sit on the photo bottoms and contrast well against the images, signalling expandable detail while the surrounding canvas stays calm. What a screenshot can't show: - The recording showed no motion, so the expand timing and animation are unknown. - No measured type sizes or spacing were captured, so exact gaps, padding and label sizes can't be confirmed. Borrow: Let full-bleed photos carry the message and keep the text to one small, clearly tappable label that hints at more detail. Leave alone: Don't copy the site's lime-green and deep-green palette, its PP Neue Montreal typeface (use a clean neo-grotesque free alternative), or its specific solar-roof and generator photography. ## Classification - Type: features - Layout: Two-column grid of large square photographic cards with bottom labels. - Styles: photographic - Confidence: 90% ## Purpose and structure Two large side-by-side photographic cards highlighting additional system compatibility, featuring expandable bottom panels. Visual signature: Two prominent photos (solar roof, portable generator) with white pill-shaped expandable labels at the bottom. ## Components - large image cards - expandable bottom panel - plus icon - feature titles ## Typography - Display: PP Neue Montreal — 48px 600 - Heading: PP Neue Montreal — 40px 600 - Body: PP Neue Montreal — 16px 400 - Mono: Clarendon Wide — 12px 700 ## Functional palette - Text: text #292826 - Primary-Action: primary action #B2DD79 - Canvas: canvas #F0EEEB - Surface: surface #FFFFFF - Muted-Text: muted text #54524F - Accent: accent #1E4D2B - Border: border #D8D7D5 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 57.00/100 (Competent) Scored coverage: 85% - Typography: 58 — Standard display heading (PP Neue Montreal 600/40px) paired with a muted body line follows the site's established type system cleanly, with clear hierarchy between headline, subtext, and card labels, but no distinctive typographic treatment specific to this section. Next tier: Needs a typographic choice (scale contrast, custom treatment, or pairing) that feels specific to this content rather than reused default heading/body styles. - Composition: 62 — Clean two-column grid of large square photographic cards with consistent pill-shaped label bars creates good balance and breathing room, and the asymmetric photo content (dusk roofline vs. daylight yard) adds some visual variety within a rigid grid. Next tier: Layout is a straightforward even split with no overlap, scale variation, or framing device beyond the grid; needs a structural idea that goes beyond two equal rectangles to earn higher marks. - Motion: not_assessed — No motion_moments or timestamped behavior were supplied for this section despite visible plus icons suggesting expandability. Next tier: Needs timestamped evidence of the expand interaction (panel reveal, icon rotation, hover state) to assess motion quality. - Content: 55 — Photography is purposeful and on-topic (solar roof at dusk, generator being towed), directly illustrating the two compatibility claims, and the pill labels with plus icons clearly signal expandable detail without clutter. Next tier: Content integration is functional but generic stock-style lifestyle photography; lacks a distinctive art direction or copy detail that would make the pairing feel singular rather than a standard feature-card pattern. - Originality: 48 — Two equal-width photo cards with bottom label pills and plus icons is a very common feature-card pattern seen across many product marketing sites; nothing here reads as a novel structural or interaction idea. Next tier: Would need a distinguishing compositional or interaction twist (e.g., unconventional framing, unique expand mechanic, asymmetric grid) to move beyond a familiar template. - Adaptability: 60 — Structure separates cleanly: two photo slots, two label strings, consistent pill/icon treatment, and the grid is easily reusable with swapped imagery and copy. Next tier: Only two deterministic style tokens (radius, color) are supplied for this specific component; without confirmed shadow, exact radius, and panel-expansion specs, full skin/behavior separation can't be verified. Strengths: - Clear two-up photographic grid with consistent pill-label treatment - Imagery directly supports the stated feature claims (solar, generator) - Readable hierarchy from headline to subtext to card labels Weaknesses: - Generic two-column feature-card pattern common across marketing sites - No distinctive typographic or layout idea specific to this content - Expand/plus interaction not evidenced with motion detail - Composition is a plain even split lacking scale or framing variation Why it does not reach the next tier: The section executes a familiar feature-card template competently with good photography and hierarchy, but lacks any structural, typographic, or interaction idea distinct enough to feel memorable or hard to substitute; motion cannot be verified due to missing timestamps. ## Adaptation guidance - Effort: Low - Guidance: Reuse the grid and pill-label pattern with new imagery and copy; confirm expand animation timing and panel content before treating motion as a differentiator. What transfers: - Two-column equal photo card grid - Bottom pill label with plus icon affordance - Heading + subtext intro block above cards Dependencies: - Photographic assets specific to the brand's product use-cases - Confirmed expand panel behavior and spacing/radius tokens for the pill label ## 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 timestamped motion evidence for the expand interaction despite visible plus icons - Only two palette/radius tokens apply directly to this component - Cannot confirm exact card dimensions, shadow, or expansion mechanics ## 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: features - Structure: two-column - Layout: Two-column grid of large square photographic cards with bottom labels. - Styles: photographic - Components: large image cards, expandable bottom panel, plus icon, feature titles - Purpose: Two large side-by-side photographic cards highlighting additional system compatibility, featuring expandable bottom panels. - Visual signature: Two prominent photos (solar roof, portable generator) with white pill-shaped expandable labels at the bottom. - Place on the page: 11 of 15, after Process (`basepowercompany-com:Process_Steps`), before Call to action (`basepowercompany-com:Photographic_CTA`) ### 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": "48px", "family": "PP Neue Montreal", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-8: computed CSS at 1440×1000; AI role: PP Neue Montreal 600 weight, 48px size, used for the main hero headline 'Save money. Stay powered.'.", "sampleId": "font-8", "confidence": 0.9, "lineHeight": "52.8px", "letterSpacing": "normal" }, { "role": "heading", "size": "40px", "family": "PP Neue Montreal", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-3: computed CSS at 1440×1000; AI role: PP Neue Montreal 600 weight, 40px size, used for primary section headings like 'A better way to power your home.'.", "sampleId": "font-3", "confidence": 0.85, "lineHeight": "44px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "PP Neue Montreal", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-17: computed CSS at 1440×1000; AI role: PP Neue Montreal 400 weight, 16px size, used for standard paragraph text explaining features.", "sampleId": "font-17", "confidence": 0.85, "lineHeight": "24px", "letterSpacing": "0.2px" }, { "role": "mono", "size": "12px", "family": "Clarendon Wide", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-19: computed CSS at 1440×1000; AI role: Clarendon Wide 700 weight, 12px uppercase, used sparingly, e.g., 'Built in Austin, TX' in footer. Not strictly monospace but serves a distinct, structured role.", "sampleId": "font-19", "confidence": 0.4, "lineHeight": "18px", "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": "#292826", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(41, 40, 38); AI role: rgb(41, 40, 38) - Dark gray/black used for primary heading and body text.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#B2DD79", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-14: computed rgb(178, 221, 121); AI role: rgb(178, 221, 121) - Light green used for primary buttons ('Get started', 'See available plans').", "sampleId": "color-14", "confidence": 0.95 }, { "hex": "#F0EEEB", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(240, 238, 235); AI role: rgb(240, 238, 235) - Off-white color used extensively as the background for main page sections.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: rgb(255, 255, 255) - White used for specific component surfaces, input fields, or as text color on dark backgrounds.", "sampleId": "color-2", "confidence": 0.8 }, { "hex": "#54524F", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-9: computed rgb(84, 82, 79); AI role: rgb(84, 82, 79) - Lighter gray used for secondary text and descriptions.", "sampleId": "color-9", "confidence": 0.8 }, { "hex": "#1E4D2B", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-6: computed rgb(30, 77, 43); AI role: rgb(30, 77, 43) - Dark green used for specific headings and textual accents (e.g., 'Better power').", "sampleId": "color-6", "confidence": 0.8 }, { "hex": "#D8D7D5", "name": "border", "role": "border", "source": "computed", "evidence": "color-7: computed rgb(216, 215, 213); AI role: rgb(216, 215, 213) - Light gray used for subtle borders and structural lines.", "sampleId": "color-7", "confidence": 0.75 } ] } ``` ### Design tokens ```json { "radius": "Medium to large border radii used on product cards, testimonial cards, input fields, and buttons, contributing to a soft look.", "density": "Comfortable density, utilizing whitespace to separate concepts and avoid overwhelming the user with text.", "evidence": "Visual inspection of the UI components, padding around the 'Better power starts with Core' section, rounded corners on the 'Get started' button and feature images.", "borderStyle": "Subtle, thin borders (color-7) used occasionally to define structural elements or secondary button outlines.", "buttonStyle": "Solid fill (color-14) with dark text for primary actions; outline or ghost styles for secondary actions, all featuring rounded corners.", "cornerStyle": "Predominantly rounded corners across most elements.", "contentWidth": "A max-width container keeps content centered, though some background elements (like the hero video or footer) stretch full width.", "spacingRhythm": "Generous vertical spacing between major sections, with tighter, consistent padding within cards and interactive components." } ``` ### 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: Two-column equal photo card grid; Bottom pill label with plus icon affordance; Heading + subtext intro block above cards - Dependencies: Photographic assets specific to the brand's product use-cases; Confirmed expand panel behavior and spacing/radius tokens for the pill label - Guidance: Reuse the grid and pill-label pattern with new imagery and copy; confirm expand animation timing and panel content before treating motion as a differentiator. ### 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 features section inspired by the design evidence titled “Feature Expandable Cards”. Purpose: Two large side-by-side photographic cards highlighting additional system compatibility, featuring expandable bottom panels. Structure: two-column. Source layout label: Two-column grid of large square photographic cards with bottom labels.. 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: Two prominent photos (solar roof, portable generator) with white pill-shaped expandable labels at the bottom. Components: large image cards, expandable bottom panel, plus icon, feature titles. Style direction: photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"48px","family":"PP Neue Montreal","source":"computed","traits":"Regular","weight":"600","evidence":"font-8: computed CSS at 1440×1000; AI role: PP Neue Montreal 600 weight, 48px size, used for the main hero headline 'Save money. Stay powered.'.","sampleId":"font-8","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"heading","size":"40px","family":"PP Neue Montreal","source":"computed","traits":"Regular","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: PP Neue Montreal 600 weight, 40px size, used for primary section headings like 'A better way to power your home.'.","sampleId":"font-3","confidence":0.85,"lineHeight":"44px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"PP Neue Montreal","source":"computed","traits":"Regular","weight":"400","evidence":"font-17: computed CSS at 1440×1000; AI role: PP Neue Montreal 400 weight, 16px size, used for standard paragraph text explaining features.","sampleId":"font-17","confidence":0.85,"lineHeight":"24px","letterSpacing":"0.2px"} {"role":"mono","size":"12px","family":"Clarendon Wide","source":"computed","traits":"uppercase","weight":"700","evidence":"font-19: computed CSS at 1440×1000; AI role: Clarendon Wide 700 weight, 12px uppercase, used sparingly, e.g., 'Built in Austin, TX' in footer. Not strictly monospace but serves a distinct, structured role.","sampleId":"font-19","confidence":0.4,"lineHeight":"18px","letterSpacing":"0.2px"} Color evidence: {"hex":"#292826","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(41, 40, 38); AI role: rgb(41, 40, 38) - Dark gray/black used for primary heading and body text.","sampleId":"color-3","confidence":0.95} {"hex":"#B2DD79","name":"primary action","role":"primary-action","source":"computed","evidence":"color-14: computed rgb(178, 221, 121); AI role: rgb(178, 221, 121) - Light green used for primary buttons ('Get started', 'See available plans').","sampleId":"color-14","confidence":0.95} {"hex":"#F0EEEB","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 238, 235); AI role: rgb(240, 238, 235) - Off-white color used extensively as the background for main page sections.","sampleId":"color-1","confidence":0.9} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: rgb(255, 255, 255) - White used for specific component surfaces, input fields, or as text color on dark backgrounds.","sampleId":"color-2","confidence":0.8} {"hex":"#54524F","name":"muted text","role":"muted-text","source":"computed","evidence":"color-9: computed rgb(84, 82, 79); AI role: rgb(84, 82, 79) - Lighter gray used for secondary text and descriptions.","sampleId":"color-9","confidence":0.8} {"hex":"#1E4D2B","name":"accent","role":"accent","source":"computed","evidence":"color-6: computed rgb(30, 77, 43); AI role: rgb(30, 77, 43) - Dark green used for specific headings and textual accents (e.g., 'Better power').","sampleId":"color-6","confidence":0.8} {"hex":"#D8D7D5","name":"border","role":"border","source":"computed","evidence":"color-7: computed rgb(216, 215, 213); AI role: rgb(216, 215, 213) - Light gray used for subtle borders and structural lines.","sampleId":"color-7","confidence":0.75} 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: Two-column equal photo card grid; Bottom pill label with plus icon affordance; Heading + subtext intro block above cards. Dependencies: Photographic assets specific to the brand's product use-cases; Confirmed expand panel behavior and spacing/radius tokens for the pill label. Adaptation guidance: Reuse the grid and pill-label pattern with new imagery and copy; confirm expand animation timing and panel content before treating motion as a differentiator. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.