# Basepowercompany — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.basepowercompany.com/
Captured: 2026-10-10
CSS measured: 2026-10-10T06:25:46.066Z at 1440×1000 — https://www.basepowercompany.com/?base_vid=26fd6e0a-1bd8-4967-b660-e139e719ee64
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Base Power Company employs a clean, modern aesthetic with a soft, photographic approach. The design leverages a neutral canvas with dark text, accented by a vibrant green primary action color. The typography relies heavily on PP Neue Montreal across all roles, providing a consistent, functional feel. Key components include an interactive hero section with a video background, a sticky navigation bar, and various feature and editorial cards to explain the product offering.

## Classification

- Industry: other
- Site type: Landing
- Business model: Not identified
- Styles: minimal, soft, photographic, corporate, eco-friendly
- Platform: Custom code
- Technology: Astro

## Typography

- Display: PP Neue Montreal — weight 600; size 48px; line-height 52.8px; tracking normal; Regular (90% role confidence, computed values)
- Heading: PP Neue Montreal — weight 600; size 40px; line-height 44px; tracking normal; Regular (85% role confidence, computed values)
- Body: PP Neue Montreal — weight 400; size 16px; line-height 24px; tracking 0.2px; Regular (85% role confidence, computed values)
- Mono: Clarendon Wide — weight 700; size 12px; line-height 18px; tracking 0.2px; uppercase (40% role confidence, computed values)

## Functional palette

- Text — text #292826: color-3: computed rgb(41, 40, 38); AI role: rgb(41, 40, 38) - Dark gray/black used for primary heading and body text. (95% role confidence, computed values)
- Primary Action — primary action #B2DD79: color-14: computed rgb(178, 221, 121); AI role: rgb(178, 221, 121) - Light green used for primary buttons ('Get started', 'See available plans'). (95% role confidence, computed values)
- Canvas — canvas #F0EEEB: 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. (90% role confidence, computed values)
- Surface — surface #FFFFFF: 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. (80% role confidence, computed values)
- Muted Text — muted text #54524F: color-9: computed rgb(84, 82, 79); AI role: rgb(84, 82, 79) - Lighter gray used for secondary text and descriptions. (80% role confidence, computed values)
- Accent — accent #1E4D2B: 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'). (80% role confidence, computed values)
- Border — border #D8D7D5: color-7: computed rgb(216, 215, 213); AI role: rgb(216, 215, 213) - Light gray used for subtle borders and structural lines. (75% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "JJ Watt",
        "top": 1463,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Energy + Backup",
        "top": 8457,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“I was ready to go and get the biggest, loudest generator I could possibly find. Then I found Base.”",
        "top": 9221,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get started",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About Base energy",
        "top": 8197,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "40px",
    "lineHeight": "44px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "h2",
        "text": "A better way to power your home.",
        "top": 1934,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Power your home your way.",
        "top": 7437,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Fixed-rate energy plus backup for $13,000 is $695",
        "top": 8429,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h3",
        "text": "When the grid is up and running.",
        "top": 2222,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Energy",
        "top": 8098,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Backup + Energy",
        "top": 8098,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "How it works",
        "top": 13106,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Members",
        "top": 13106,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Partnerships",
        "top": 13106,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "One of the largest home batteries",
        "top": 3105,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "39.2 kWh",
        "top": 3135,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Days of backup",
        "top": 3209,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Better power starts with Core:",
        "top": 2991,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Better power",
        "top": 2991,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Save money. Stay powered.",
        "top": 585,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Affordable pricing",
        "top": 3417,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 94,
    "contexts": [
      {
        "tag": "button",
        "text": "Products",
        "top": 15,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Pricing",
        "top": 15,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": 15,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 28,
    "contexts": [
      {
        "tag": "p",
        "text": "Low, fixed electricity rates.",
        "top": 8156,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get home backup with energy for up to 95% less than a traditional generator.",
        "top": 8156,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get home backup with your existing utility, only available in select areas.",
        "top": 8156,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "Join 30,000+ homes powered by Base",
        "top": 786,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Product availability, system configurations, and pricing vary by state.",
        "top": 13806,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Registered Retail Electric Provider (REP) with the Texas Public Utility Commission (PUCT), PUCT Lice",
        "top": 13830,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "span",
        "text": "4.8 stars",
        "top": 549,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Learn more",
        "top": 1578,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "See your pricing",
        "top": 3573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "a",
        "text": "Base Core",
        "top": 13144,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Home energy",
        "top": 13180,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "How Base works",
        "top": 13216,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "/kWh",
        "top": 8556,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One-time installation",
        "top": 8667,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Monthly membership fee",
        "top": 8667,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Featured across national news and media",
        "top": 932,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Oncor",
        "top": 8419,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Energy",
        "top": 8517,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Base helps the grid when demand is high. When the power goes out, Base helps keep homes running.",
        "top": 1994,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The grid needs extra power at certain times of day. Base helps fill the gap, which helps keep electr",
        "top": 2323,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Whether you want to lower your bills, protect your home from outages, or both — Base has a plan for ",
        "top": 7505,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Automatic, whole-home backup without the five-figure cost of a generator or solar.",
        "top": 3451,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Clarendon Wide",
    "fontStack": "\"Clarendon Wide\", \"PP Neue Montreal\", ui-serif, Georgia, serif",
    "weight": "700",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Built in Austin, TX",
        "top": 14312,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 46,
    "contexts": [
      {
        "tag": "span",
        "text": "Bill Prout",
        "top": 9380,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Angelo V",
        "top": 9380,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cat",
        "top": 9380,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 9906,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 10085,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 10208,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "32px",
    "lineHeight": "41.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“I'm not just an investor in Base, I'm also a member. Since switching to Base, I'm saving over 20% o",
        "top": 1264,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "saving over 20%",
        "top": 1348,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Dahlia Blues",
    "fontStack": "\"Dahlia Blues\", cursive",
    "weight": "400",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "How it works",
        "top": 1868,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Got questions?",
        "top": 11866,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Grid",
        "top": 2152,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "ON",
        "top": 2154,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "address",
        "text": "205 E Riverside Dr, Suite 100,Austin, TX 78704",
        "top": 13320,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F0EEEB",
    "alpha": 1,
    "cssValue": "rgb(240, 238, 235)",
    "count": 21,
    "contexts": [
      {
        "tag": "body",
        "text": "astro-island,astro-slot,astro-static-slot{display:contents}(()=>{var e=async t=>{await(await t())()}",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "ProductsPricingResourcesUtilitiesCompanySign inGet startedReliable PowerBase CoreOur next-generation",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Featured across national news and media",
        "top": 900,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 247,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#292826",
    "alpha": 1,
    "cssValue": "rgb(41, 40, 38)",
    "count": 191,
    "contexts": [
      {
        "tag": "section",
        "text": "4.8 starsSave money. Stay powered.The power company bringing affordable, reliable energy to homes ac",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Grid",
        "top": 2152,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "When the grid is up and running.",
        "top": 2222,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.5490196078431373,
    "cssValue": "oklab(0 0 0 / 0.55)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 9143,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(0, 0, 0, 0.35)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1E4D2B",
    "alpha": 1,
    "cssValue": "rgb(30, 77, 43)",
    "count": 75,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 13,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "A better way to power your home.",
        "top": 1934,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Better power",
        "top": 2991,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#D8D7D5",
    "alpha": 1,
    "cssValue": "rgb(216, 215, 213)",
    "count": 25,
    "contexts": [
      {
        "tag": "div",
        "text": "GridONWhen the grid is up and running.The grid needs extra power at certain times of day. Base helps",
        "top": 2082,
        "property": "background"
      },
      {
        "tag": "ol",
        "text": "One of the largest home batteries 39.2 kWh in every Base Core, making it one of the largest home bat",
        "top": 3105,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Learn moreGet started",
        "top": 8856,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F1EEEB",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(240, 238, 235, 0.35)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 8303,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#54524F",
    "alpha": 1,
    "cssValue": "rgb(84, 82, 79)",
    "count": 48,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 3111,
        "property": "svg-fill"
      },
      {
        "tag": "h3",
        "text": "One of the largest home batteries",
        "top": 3105,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Whether you want to lower your bills, protect your home from outages, or both — Base has a plan for ",
        "top": 7505,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0 0 0 / 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1158,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#A9A8A7",
    "alpha": 1,
    "cssValue": "rgb(169, 168, 167)",
    "count": 27,
    "contexts": [
      {
        "tag": "h2",
        "text": "How it works",
        "top": 13106,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Base Power, Inc | Base Texas REP, LLC (PUCT #10338) | Base Retail, LLC (ICC #26-0121) | Base Power D",
        "top": 13784,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Product availability, system configurations, and pricing vary by state.",
        "top": 13806,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#7F7D7A",
    "alpha": 1,
    "cssValue": "rgb(127, 125, 122)",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Featured across national news and media",
        "top": 932,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "/kWh",
        "top": 8556,
        "property": "text"
      },
      {
        "tag": "s",
        "text": "$13,000",
        "top": 8471,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F7C33C",
    "alpha": 1,
    "cssValue": "rgb(247, 195, 60)",
    "count": 470,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 551,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 553,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#B2DD79",
    "alpha": 1,
    "cssValue": "rgb(178, 221, 121)",
    "count": 83,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 13,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "ON",
        "top": 2142,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8106,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.8509803921568627,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.85)",
    "count": 19,
    "contexts": [
      {
        "tag": "p",
        "text": "Bob A. · Waxahachie, TX",
        "top": 9287,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Select your utility provider to view plans and pricing available in your area.",
        "top": 8631,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#D6F0B4",
    "alpha": 1,
    "cssValue": "rgb(214, 240, 180)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Oncor",
        "top": 8419,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "~13.8% avg. savings vs. market rates",
        "top": 8718,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 47,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 554,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#ED6C30",
    "alpha": 1,
    "cssValue": "rgb(237, 108, 48)",
    "count": 7,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1381,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3105,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#EA4335",
    "alpha": 1,
    "cssValue": "rgb(234, 67, 53)",
    "count": 47,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 555,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#34A853",
    "alpha": 1,
    "cssValue": "rgb(52, 168, 83)",
    "count": 47,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 562,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#4285F4",
    "alpha": 1,
    "cssValue": "rgb(66, 133, 244)",
    "count": 47,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 560,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "hr",
        "text": "",
        "top": 13757,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FBBC05",
    "alpha": 1,
    "cssValue": "rgb(251, 188, 5)",
    "count": 47,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 558,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, with tighter, consistent padding within cards and interactive components.
- Corner style: Predominantly rounded corners across most elements.
- Radius: Medium to large border radii used on product cards, testimonial cards, input fields, and buttons, contributing to a soft look.
- Borders: Subtle, thin borders (color-7) used occasionally to define structural elements or secondary button outlines.
- Buttons: Solid fill (color-14) with dark text for primary actions; outline or ghost styles for secondary actions, all featuring rounded corners.
- Content width: A max-width container keeps content centered, though some background elements (like the hero video or footer) stretch full width.
- 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.

## Sections

Gallery section count: 11. Each entry corresponds to one gallery capture.

1. **Hero — Save Money, Stay Powered Hero** (Home)
   AI suggestion (98% confidence): Complete full-bleed homepage hero with integrated navigation, social proof, clear value proposition, ZIP-code form, and primary conversion CTA.
   Capture: 1440×900px; page bounds 0–900px of 14379px; source section ID: `e9e09e87-fb31-45b1-a97f-a898f98d19ef`; image: https://media.designdetails.io/library/e33ce50cd119e250ec9286bc98feac12c51b1aad9fe45f3c4c97f99f5b2f269f/e9e09e87-fb31-45b1-a97f-a898f98d19ef.webp
   SECTION.md v3.2: `e9e09e87-fb31-45b1-a97f-a898f98d19ef` (deterministic evidence; editorial review pending)
2. **Pricing — Utility Area Plan Finder** (Explore Base in my area)
   AI-proposed category: location-finder
AI suggestion (96% confidence): Complete searchable utility directory with location input, plan-type filters, and a full three-column results listing.
   Capture: 1440×1125px; page bounds 141–1266px of 3038px; source section ID: `b482313a-fd7a-4801-b53f-3317f1b1fba1`; image: https://media.designdetails.io/library/f25ed1ac0c16f17e8549da076493fcbaa1261b92051414606b408495e21a6654/b482313a-fd7a-4801-b53f-3317f1b1fba1.webp
   SECTION.md v3.2: `b482313a-fd7a-4801-b53f-3317f1b1fba1` (deterministic evidence; editorial review pending)
3. **Testimonial Card — J. J. Watt Member Testimonial** (Home)
   AI suggestion (97% confidence): Self-contained, distinctive testimonial banner combining a prominent customer quote, credentials, CTA, and contextual lifestyle portrait.
   Capture: 1440×585px; page bounds 1155–1740px of 14379px; source section ID: `f7fca2b8-4322-4e32-bffd-e42e8fba8057`; image: https://media.designdetails.io/library/4465067be8d7da358de238e4bad7fdfd453167306097276d71f1d13d8c5ca746/f7fca2b8-4322-4e32-bffd-e42e8fba8057.webp
   SECTION.md v3.2: `f7fca2b8-4322-4e32-bffd-e42e8fba8057` (deterministic evidence; editorial review pending)
4. **Footer — Expanded Company Footer** (Explore Base in my area)
   AI suggestion (98% confidence): Substantial, complete footer combining navigation groups, app badges, contact details, social links, certification marks, legal disclosures, and policy links.
   Capture: 1440×1278px; page bounds 1722–3000px of 3038px; source section ID: `568724d1-b6eb-4ed0-a949-2564873b7870`; image: https://media.designdetails.io/library/a263404d1440cfc7ff9287b86de5dfbdbe7eed7699fb75870259e6bf6c2432c9/568724d1-b6eb-4ed0-a949-2564873b7870.webp
   SECTION.md v3.2: `568724d1-b6eb-4ed0-a949-2564873b7870` (deterministic evidence; editorial review pending)
5. **Features — Core battery backup feature** (Home)
   AI suggestion (84% confidence): Strongest complete representative of the repeated split-layout feature: it pairs the shared product-benefit navigation and CTAs with an expanded “Days of backup” explanation and contextual installation imagery.
   Capture: 1440×690px; page bounds 4700–5390px of 14379px; source section ID: `7150f6a5-145d-4724-a7e9-17b00274c20a`; image: https://media.designdetails.io/library/4bfbc0d8f0ae49fd1388f9be3ba0bb42f5b209365254af780f09e772bc0f1fd7/7150f6a5-145d-4724-a7e9-17b00274c20a.webp
   SECTION.md v3.2: `7150f6a5-145d-4724-a7e9-17b00274c20a` (deterministic evidence; editorial review pending)
6. **Feature Card — Better power starts with Core** (Home)
   AI suggestion (94% confidence): Complete split-layout product feature with benefit list, expanded affordability detail, two calls to action, and a large supporting product image. It is the strongest representative of the repeated pattern visible in this segment.
   Capture: 1440×684px; page bounds 6499–7183px of 14379px; source section ID: `6936c004-5e92-4857-b05d-62c152ec5d38`; image: https://media.designdetails.io/library/ce3679236060690f0d9e9c07f72d49544e574dcf2a94efccaea0b64c9834d691/6936c004-5e92-4857-b05d-62c152ec5d38.webp
   SECTION.md v3.2: `6936c004-5e92-4857-b05d-62c152ec5d38` (deterministic evidence; editorial review pending)
7. **Testimonials — Homeowner Trust Stories** (Home)
   AI suggestion (95% confidence): Complete testimonial carousel with a strong trust-focused heading, ratings, customer quotes, mixed text/photo cards, attribution, and navigation controls.
   Capture: 1440×513px; page bounds 9021–9534px of 14379px; source section ID: `7ca89de8-15e4-4bda-9268-777d98735bc1`; image: https://media.designdetails.io/library/42a193a2bc5ced18e829cfa8113062d78d673a8077447174d2a4abf32888ef57/7ca89de8-15e4-4bda-9268-777d98735bc1.webp
   SECTION.md v3.2: `7ca89de8-15e4-4bda-9268-777d98735bc1` (deterministic evidence; editorial review pending)
8. **Process — Easy Switching Process** (Home)
   AI suggestion (96% confidence): Self-contained three-step onboarding process with a heading, CTA, accordion-style numbered steps, and supporting technician/customer imagery.
   Capture: 1440×678px; page bounds 9642–10320px of 14379px; source section ID: `dd16049c-d10f-4868-a493-807a1fe45ba3`; image: https://media.designdetails.io/library/7aa35d7a1f1fcb3eca7d94ddde56671274d2fc74868678d98e1a460228846fba/dd16049c-d10f-4868-a493-807a1fe45ba3.webp
   SECTION.md v3.2: `dd16049c-d10f-4868-a493-807a1fe45ba3` (deterministic evidence; editorial review pending)
9. **CTA — Overpaying for Energy CTA** (Home)
   AI suggestion (98% confidence): Complete promotional banner with a strong headline, supporting copy, two actions, and a distinctive full-width bill image.
   Capture: 1440×480px; page bounds 11294–11774px of 14379px; source section ID: `85faeb44-de10-4fc9-a661-2c21baa59cc6`; image: https://media.designdetails.io/library/0c606820b1899c84be7d9c0c35981c3abf076f954a4922b58e1f965b54b7e226/85faeb44-de10-4fc9-a661-2c21baa59cc6.webp
   SECTION.md v3.2: `85faeb44-de10-4fc9-a661-2c21baa59cc6` (deterministic evidence; editorial review pending)
10. **FAQ — We've Got Answers FAQ** (Home)
   AI suggestion (99% confidence): Complete accordion FAQ section with its heading, one expanded answer, and multiple collapsed questions, all visible through the section ending.
   Capture: 1440×918px; page bounds 11774–12692px of 14379px; source section ID: `e3c96a11-1ade-4914-8350-ea4015b84882`; image: https://media.designdetails.io/library/366f6fd0efd87f6d5b4553d8f36bda3fc4606c76c10082121210f45dded1c798/e3c96a11-1ade-4914-8350-ea4015b84882.webp
   SECTION.md v3.2: `e3c96a11-1ade-4914-8350-ea4015b84882` (deterministic evidence; editorial review pending)
11. **Footer — Base Power site footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer with grouped navigation, app-download badges, contact details, social links, oversized brand treatment, regulatory disclosures, certifications, and legal links.
   Capture: 1440×1318px; page bounds 13058–14376px of 14379px; source section ID: `15dd08e1-26c0-457b-a398-8329b751dd7a`; image: https://media.designdetails.io/library/76a7319507fb4f1d9ccfe83eea0295942456e8cdd41ce5d64e475e8f8c86b8d9/15dd08e1-26c0-457b-a398-8329b751dd7a.webp
   SECTION.md v3.2: `15dd08e1-26c0-457b-a398-8329b751dd7a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/7eca0c8570e66eaa6b4de439ec68c6dcad30504d558d7fe3d6d41dec58d2c923/desktop_full-75a712a5-2026-10-10T06-25-46-091Z.webp
- Mobile screenshot: https://media.designdetails.io/library/117e16d154b7f4262bcb5429afef0c9ebbc793cee9c936965f97c695aadabfe0/mobile_full-75a712a5-2026-10-10T06-26-43-477Z.jpg
- Open Graph image: https://media.designdetails.io/library/c7cf3340ce372fcb500ee1919c23a52b71f1ac857c8c8ad3ef14c5b9796e4bf5/og_image-75a712a5-2026-10-10T06-25-57-869Z.webp
- Full-page video: https://media.designdetails.io/library/a5ee20386c490e9c57aaae840e284c333bcacd183ff1734ea5a0edaf9f3cf6f1/motion-1791697466512.mp4
- Video poster: https://media.designdetails.io/library/69aad7cf396ea534f034039969a88471629f65ef75fae743c0aadf69a6b46e3f/motion-poster-1791697466512.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Feature Card
- Carousel
- FAQ Accordion
- Footer
- Interactive Feature Scroller
- Interactive Illustration Toggle
- Navigation Bar
- Hero With Background Imagery
- Input Field
- Primary Button
- Logo Strip
- Testimonial Card

## Quality rubric

Overall: 56/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Base Power Company is a cleanly built, content-coherent marketing site that executes a familiar contemporary startup template — soft canvas, single grotesque typeface, green accent, scroll-tied carousel, toggle demo, FAQ accordion, oversized footer wordmark — competently and legibly, but without introducing distinctive layout, color, or motion ideas beyond current industry convention, landing it squarely in the competent tier.

- Typography (15%): 60 — A single functional sans-serif (PP Neue Montreal) is deployed consistently across display, heading, body, label and caption roles with a legible, logical size ladder (48/40/32/20/16px) and consistent 0.2–0.5px tracking on uppercase labels. This is competent, systemized type usage, but it is a safe, utilitarian choice rather than a distinctive voice. A decorative script (Dahlia Blues) is used sparingly as a tape-label accent ('How it works', 'Got questions?') and a serif (Clarendon Wide) appears once in the footer — nice small flourishes but too minor to constitute a real typographic system beyond the dominant grotesque.
- Color (10%): 61 — The palette is restrained and purposeful: off-white canvas (#F0EEEB), near-black text (#292826), and a light-green primary action (#B2DD79) paired with a darker forest green (#1E4D2B) for accents/footer — all clearly reinforcing an eco/energy brand story. Muted grays (#54524F, #A9A8A7) support secondary text cleanly. The system is cohesive and legible but conventional (standard light-canvas + single accent-green corporate palette common to climate/fintech startups) without unexpected combinations or tension.
- Layout (20%): 63 — The page runs a clear, repeatable section grammar: sticky nav, full-bleed hero, logo strip, testimonial cards, a two-column 'how it works' module with illustration, a stepped feature list tied to an image column, a three-card product grid, a scrollable testimonial carousel, a numbered process block, and a large dark footer with an oversized wordmark. Content width is controlled with consistent card radii and padding. This is a competently assembled, multi-section system, but the pattern set (logo wall, three-up feature cards, FAQ accordion, giant footer logotype) is a very common SaaS/startup template arrangement rather than a layout with a distinctive spatial idea.
- Motion (20%): 61 — Motion is functional and content-linked across multiple modules: a looping hero background video, a grid ON/OFF toggle that swaps both illustration and copy, a scroll-position-synced image crossfade carousel with a moving active-step indicator (confirmed working in both scroll directions), and standard FAQ accordion expand/collapse. These are coherent, purposeful interactions rather than a single decorative flourish, which supports a system-level read. However, the patterns themselves (toggle-driven illustration swap, scroll-scrubbed carousel, accordion) are common conventions in modern product marketing sites, and no evidence establishes animation quality (easing, frame timing, responsiveness) beyond basic state changes.
- Originality (25%): 38 — The overall vocabulary — logo wall of press mentions, three-up product cards, numbered step list, FAQ accordion, giant low-opacity wordmark in a dark footer, scroll-tied feature carousel — closely follows a widely used contemporary SaaS/startup marketing template. The grid ON/OFF toggle with illustration swap is a nice functional touch specific to the product, but it's a single idea, not a system of distinctive moves. Nothing observed (palette, type, layout rhythm, or motion) departs meaningfully from current industry convention for climate-tech/fintech landing pages.
- Content (10%): 66 — Design choices are tied to real product content: the toggle visibly demonstrates grid-up vs. outage states with matching copy changes, the scroll carousel pairs specific claims ('largest home batteries', 'days of backup', 'tested for -22 to 122°F') with corresponding photography, testimonials include real names/locations and star ratings, and the FAQ delivers detailed, specific operational and regulatory information. Pricing and plan distinctions (Energy / Backup+Energy / Backup Only) are clearly mapped to dedicated cards and imagery.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Warm lifestyle photos of families and real homes, not product renders, make a power company feel like a neighbour, while a green accent and hand-drawn sticky-note labels keep the mood friendly. Repeating photo-plus-feature blocks with short bold checklists let visitors scan battery benefits quickly without reading dense text.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.