## Overview
Voltline Electric — a residential electrical landing page covering panel upgrades, EV chargers, generators, and lighting. Electric orange primary on charcoal secondary, white canvas. Energetic and modern — leans into the "power" angle without being aggressive. Hand-rolled `_components/`.
## Colors
- **`--background`** (white `#FFFFFF`): Page canvas and card surfaces.
- **`--foreground`** (charcoal `#18181B`): Body text and headlines.
- **`--primary`** (electric orange `#FF6B00`): The "schedule install" orange. Buttons, highlights, headline accents. High-energy without being alarming.
- **`--primary-foreground`** (white): Text on orange surfaces.
- **`--secondary`** (charcoal): Hero overlay, stats strip, footer, financing card.
- **`--secondary-foreground`** (white): Text on charcoal surfaces.
- **`--muted`** (`#F4F4F5`): Why-us and reviews section backgrounds.
- **`--accent`** (lightning yellow `#FFD500`): Star ratings — yellow plays the "spark" angle.
## Typography
- **Headline Font**: Space Grotesk (Google) — geometric, technical, slightly sci-fi without being gimmicky. Reads as "modern engineer".
- **Body Font**: IBM Plex Sans (Google) — corporate-clean, ties the technical heading to the trustworthy body copy.
## Components
All hand-rolled in `_components/`. Same nine sections, electrical-specific copy and icons (Zap, Plug, BatteryCharging, Lightbulb, etc.).
1. **Navbar** — Voltline Electric wordmark, six service links, phone, orange "Schedule install" pill.
2. **Hero** — "Power down? / We bring it back." Star pill, 24/7 outage promise, two CTAs.
3. **ServiceAreas** — four neighborhood cards.
4. **WhyUs** — three features (master electricians, code-compliant installs, written warranties).
5. **Stats** — panels upgraded, EV chargers installed, etc.
6. **Services** — six electrical service cards (panel upgrade, EV charger, generator, lighting, dedicated circuits, troubleshooting).
7. **Reviews** — three electrical-specific testimonials.
8. **Financing** — panel + generator financing CTA.
9. **Footer** — wordmark, two locations, license, social.
## Do's and Don'ts
- Do reserve `--primary` electric orange for clickable affordances and headline accents.
- Do let the white canvas + charcoal pairing carry the modern feel — don't drown it in orange.
- Don't pull from `@repo/design-system/blocks` — this template is custom.
- Don't use thin or light font weights.