DESIGN SYSTEM · LIGHTSOURCE BP

A global utility-solar identity, in tokens.

Real CSS tokens grepped from the live `lightsourcebp-theme` (Sage 10 / Roots WordPress theme) main stylesheet. Real production photography from Lightsource bp's WordPress media library — drone aerials, agrivoltaics, regional case studies. Lato (300/400/700/900) free-Google type stack as the live site loads it. Forty section patterns (canonical + signature) built around the bp Pulse magenta-orange gradient identity.

Sourcelightsourcebp.comWordPress · Sage 10 · `lightsourcebp-theme`
Captured2026-05-08Real CSS · Real photos
TypeLato300/400/700/900 · single-typeface system
Patterns40 patterns26 canonical + 14 signature
Three views into the kit-of-parts
FOUNDATIONS

Design System

Logo, color, typography, gradients, buttons, cards, photography, and the full token reference. Every value mapped 1:1 to a line in the live `main_4744d58b.css`. The signature bp Pulse moves documented inline.

Explore 10 sections
PATTERNS

Sections Catalog

Every canonical section pattern from the library — plus the Lightsource bp signature blocks: pipeline-stats, services-grid, regional-operations-map, agrivoltaics-band, GW-deployed counter, case-study-card, exec-profile, partner-testimonial, partner-with-us, sustainability impact-quad, cobrand-lockup, news-grid, sig-cta-band, process-steps.

Browse 40 patterns
DEMOS

Pages

Four built pages composing only from `_shared.css` tokens: a Homepage, Projects landing, Impact (sustainability) landing, and Partners (land + off-take + invest) landing. Real Lightsource bp voice + photography.

Tour 4 pages
Quick access · individual demo pages
PAGE

Homepage demo

Hero · pipeline-stats · services-grid · case-study-card · regions-map · agrivoltaics-band · impact-quad · testimonial · news-grid · CTA · footer.

View 12 sections
LANDING

Projects pipeline

The signature gw-deployed-counter + case-study grid + regions tile-strip + projects-by-region tabs + 4-step process. The "what we've built" landing.

View 8 sections
LANDING

Sustainability & impact

The agrivoltaics-band signature + impact-quad + KPI row + climate / biodiversity / communities / sourcing pillars. Built around the brand's editorial sustainability voice.

View 9 sections
LANDING

Partner with us

Four conversion paths — partner-with-us tile strip + form-card + cobrand-lockup + landowner FAQ. Land owner / Off-take / Investor / Community.

View 8 sections
DOCUMENTATION

Brand spec

Full markdown documentation: extracted color tokens with frequency counts, typography ramp from live values, photography manifest, signature bp Pulse design moves, and section-pattern reframings for utility-scale solar.

Read 300+ lines
FOUR PALETTE DIRECTIONS

Four moods. Same tokens.

The default is the extracted bp Pulse palette — magenta-to-orange with deep aubergine ink. Three alternates retest the system against a green/agrivoltaics-leaning palette, an amber/sunrise palette, and an industrial-steel/electric-blue palette — each preserving the gradient logic via re-mapped CSS variables.

Original · bp Pulse
Solar Field · Field Green & Sky Blue
Sunrise · Amber & Deep Teal
Industrial Steel · Graphite & Electric Blue