# Three-Column Plan Cards Schema: Design Details SECTION.md v3.2 Website: Base Power Source: https://www.basepowercompany.com/ Source section IDs: gap-f89b84fb-7183-9021 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three equal square lifestyle photos, each matched to its plan's promise, let visitors grasp the tiers at a glance before reading anything. - Every card repeats the same stack of icon, title, short description and text link, so comparing the plans is quick and the hierarchy stays calm on the warm off-white canvas. - The dark green lookup widget contrasts sharply with the light cards and turns the section from browsing into one clear action, a dropdown for pricing. What a screenshot can't show: - The recording shows only a plain scroll past the cards between about 21 and 24 seconds, with no visible hover or state changes. - No type sizes, spacing or padding were measured, so exact scale and gaps are unknown. Borrow: Pair a row of identical image-led option cards with one high-contrast tool below, so the visitor moves from understanding choices to acting on them. Leave alone: Don't copy Base Power's dark forest green and lime palette, its PP Neue Montreal typeface (use a clean neo-grotesque sans instead), or its home-energy photography and blurred-card-behind-widget layering. ## Classification - Type: pricing - Layout: Three-column grid of image cards above a centered pricing interaction widget. - Styles: photographic, minimal - Confidence: 90% ## Purpose and structure A section displaying three distinct plan options using image-led cards, followed by a dark green pricing lookup widget. Visual signature: Three square lifestyle images representing different tiers, sitting above a distinct dark green floating box for pricing lookup. ## Components - image cards - plan titles - plan descriptions - text links - dropdown input - floating widget ## 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 - 21.0–24.0s — User scrolls past three plan option cards with accompanying images. (90% confidence) ## Section quality Overall: 60.65/100 (Good) Scored coverage: 85% - Typography: 62 — Clear hierarchy between display heading, card titles, descriptions, and the dark widget's modal type; consistent use of PP Neue Montreal with sensible weight contrast, but nothing beyond competent pairing and sizing choices. Next tier: Needs more distinctive type treatment (scale contrast, custom numerals/labels) rather than standard heading/body pairing to earn a higher tier. - Composition: 66 — Three-column image-led cards are evenly balanced with consistent image aspect ratios, icon+title+description+link pattern, and a blurred background card peeking behind the dark pricing widget creates some layered depth, but the grid itself is a standard card layout. Next tier: Layout is a conventional three-up card grid; would need an unexpected grid relationship, asymmetry, or stronger visual tension between the cards and the widget to move into strong/memorable territory. - Motion: inconclusive — Gemini only supplies a generic scroll-past description without specific visible transitions, state changes, or interaction timing within this section. Next tier: Needs timestamped evidence of specific motion (e.g., widget reveal, image hover, dropdown open) to be scored. - Content: 60 — Lifestyle photography is tightly matched to each plan's value prop (reading at home, generator on porch, kids safe during outage), and the widget's copy directly supports the pricing lookup task; integration is functional but imagery is stock-like rather than bespoke-feeling. Next tier: Photography and copy serve their purpose cleanly but don't push beyond expected pricing-page content conventions into a more tailored or surprising content strategy. - Originality: 55 — The three-tier plan comparison with photo cards and a utility-provider pricing lookup is a familiar SaaS/home-services pattern; the dark green floating widget color is a mild distinguishing touch but the overall structure is a known convention. Next tier: Would need a structurally novel approach to plan comparison or pricing lookup, not just a color/tone variation on a standard pattern. - Adaptability: 58 — Card structure (image, icon, title, description, link) and widget (icon, heading, copy, dropdown) are clearly separable components with a repeatable skin, making reskinning plausible, though the floating widget's positioning relative to a blurred background card depends on specific page content. Next tier: Full separation is limited by the widget's dependency on an underlying content layout (the blurred pricing detail panel) that isn't itself described in deterministic terms. Strengths: - Photography is tonally matched to each plan's use case (family reading, outdoor generator, kids playing safely) - Consistent, repeatable card anatomy (image, icon, title, description, link) across all three columns - Dark green widget creates a clear color-coded focal shift from the light card grid above it Weaknesses: - Three-column pricing card grid is a conventional, widely-used pattern - Motion evidence is too generic to assess interaction quality - Widget's relationship to the blurred background panel is unclear and may depend on content not described Why it does not reach the next tier: The section executes a familiar plan-comparison and pricing-lookup pattern competently with good photographic consistency, but lacks a structurally original layout idea, distinctive typographic treatment, or confirmed motion sophistication needed to be memorable rather than merely polished. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card anatomy and the light/dark section-within-section contrast pattern; the floating widget concept transfers readily but needs its own background content designed, and the dropdown's data source must be rebuilt for a new domain. What transfers: - Three-column image card pattern with icon+title+description+link - Dark contrasting floating widget for a secondary lookup/input task - Icon-leading plan labels Dependencies: - Underlying blurred content panel the widget floats over - Specific utility-provider dropdown data/logic - Photography set matched to three distinct plan use cases ## 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 scoring blocked by lack of specific timestamped interaction detail - Exact font sizes/colors for the widget's internal dropdown and modal are not confirmed by deterministic data, limiting typography precision - Cannot verify hover or interaction states for the image cards or dropdown ## 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: pricing - Source type: pricing - Structure: centered single-column - Layout: Three-column grid of image cards above a centered pricing interaction widget. - Styles: photographic, minimal - Components: image cards, plan titles, plan descriptions, text links, dropdown input, floating widget - Purpose: A section displaying three distinct plan options using image-led cards, followed by a dark green pricing lookup widget. - Visual signature: Three square lifestyle images representing different tiers, sitting above a distinct dark green floating box for pricing lookup. - Place on the page: 7 of 15, after Feature collection (`basepowercompany-com:Tabbed_Product_Features`), before Form (`f565bd28-6c19-4c11-8d6f-250046c84a71`) ### 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": "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 1. **scroll** — User scrolls past three plan option cards with accompanying images. (21s–24s; 90% 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: Three-column image card pattern with icon+title+description+link; Dark contrasting floating widget for a secondary lookup/input task; Icon-leading plan labels - Dependencies: Underlying blurred content panel the widget floats over; Specific utility-provider dropdown data/logic; Photography set matched to three distinct plan use cases - Guidance: Reuse the card anatomy and the light/dark section-within-section contrast pattern; the floating widget concept transfers readily but needs its own background content designed, and the dropdown's data source must be rebuilt for a new domain. ### 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 pricing section inspired by the design evidence titled “Three-Column Plan Cards”. Purpose: A section displaying three distinct plan options using image-led cards, followed by a dark green pricing lookup widget. Structure: centered single-column. Source layout label: Three-column grid of image cards above a centered pricing interaction widget.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Three square lifestyle images representing different tiers, sitting above a distinct dark green floating box for pricing lookup. Components: image cards, plan titles, plan descriptions, text links, dropdown input, floating widget. Style direction: photographic, minimal. 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. Motion evidence: scroll: User scrolls past three plan option cards with accompanying images. (90% confidence) Transfer these principles: Three-column image card pattern with icon+title+description+link; Dark contrasting floating widget for a secondary lookup/input task; Icon-leading plan labels. Dependencies: Underlying blurred content panel the widget floats over; Specific utility-provider dropdown data/logic; Photography set matched to three distinct plan use cases. Adaptation guidance: Reuse the card anatomy and the light/dark section-within-section contrast pattern; the floating widget concept transfers readily but needs its own background content designed, and the dropdown's data source must be rebuilt for a new domain. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.