Distilled from lightsourcebp.com — real colors lifted from the live `lightsourcebp-theme` (Sage 10 / Roots scaffolded WordPress theme) main stylesheet, real production photography from the WordPress media library, and the exact Lato weights the live site loads via Google Fonts. Every token below has a one-to-one mapping with a value in the live site's stylesheet.
Lightsource bp's primary mark is the wordmark with the lowercase "bp" parent-brand reference set at smaller scale than "Lightsource". Pulled directly from `lightsourcebp.com/app/uploads/2022/11/lightsouce-bp-main-logo.png`. The lockup is sibling-hierarchy — Lightsource is the operating company, bp is the parent (50/50 JV). Logo max-width on the live site caps at 200px.
The Lightsource bp palette is the bp Pulse identity — magenta `#df1995` to orange `#fe5000` as the signature gradient, deep aubergine `#2e1a47` as the canonical headline / dark-scrim ink (every h2-h6 inherits this purple), warm cream `#f2e8e1` as the section surface, sky blue `#96d4e9` as the sustainability accent. Counter-intuitive for a solar developer, but it correctly inherits the parent bp brand language. Greens are conspicuously off-brand.
The magenta-to-orange gradient is the brand's most-recognized visual signature — it appears at the top of feature sections, on button-hover backgrounds, on stat-figure text-clip, on top-of-card accent strips, and as the parent-brand pulse-dot reference. Treat the gradient as the "logo flourish" — it identifies a section as Lightsource bp without needing the wordmark.
Lato is the only typeface on the live site (one Google Fonts <link> rule loads weights 400/700/900, plus 300 for editorial captions). The single-typeface choice is intentional — Lato is the closest free Google Fonts equivalent to bp's parent-brand "Univers" derivative. Using one face across display, body, eyebrow, and UI creates a unified editorial voice that reads as engineered/utility-scale rather than consumer-app-flashy.
From greenfield site selection through 35-year asset management, our integrated teams handle every stage of a utility-scale solar or storage project. We work with landowners, off-takers, and community partners to deliver projects that pay back the land, the grid, and the local economy.
Lightsource bp's signature button is RECTANGULAR (border-radius 0) with a 1px orange border and orange uppercase Lato 700 text. On hover the bp Pulse gradient swaps in (86.97deg with extreme 3.29%/249.87% stops — reads as a horizontal sweep rather than a tile), text goes white, label underlines. The 0.8s transition is slow and cinematic — replicating with a snappier 200ms loses the brand's measured pacing. Hover each below to feel the move.
Cards use the dominant 5px radius (intentionally minimal — the brand is engineered, not friendly) + the signature `8px 6px 10px rgba(0,0,0,0.10)` directional drop shadow. The 8px-right / 6px-down offset creates an editorial "magazine page" feel — NOT a soft halo (centimark) or tight directional drop (Goettl). Radii cap at 5px; rounded chrome would feel "consumer SaaS" to a utility-infrastructure brand.

260 MW of clean power across 1,800 acres in Lamar County. Off-take partner: McDonald's USA & UPS.
View case study
50 MW / 100 MWh battery system supporting grid resilience in Nottinghamshire. Online 2024.
Read moreChips are square-edged (radius 2px) with tracked uppercase Lato 700. The gradient-pill variant marks "live" / "featured" / parent-brand co-references. The pulse-bar is the brand's decorative gradient hairline — a 64×4px (or 120×6px lg) bar used as an "above-the-headline" separator. It's the brand's signature "marker" element.
64 × 4px gradient hairline
120 × 6px gradient hairline
Cinematic full-bleed drone aerials of utility-scale solar farms (the signature "Aerial_Impact_Solar" hero) + agrivoltaics dual-use land photography (sheep grazing under panels, pollinator meadows) + corporate team photography (GLB-prefixed global hero/banner files) + regional case-study tiles. NO smiling-handshake stock. NO solar-installer-with-tools clichés. The brand is inherently aerial / editorial / cinematic.
Every token defined in `_shared.css :root`, with hex values and the live `main_4744d58b.css` source where each was extracted from. Use these in CSS, never hard-code colors or radii.
| Token | Value | Source / Usage |
|---|---|---|
--brand | #fe5000 | main.css · 89 occurrences · primary CTAs, links, borders |
--brand-deep | #df1995 | main.css · 48 occurrences · gradient origin, accent |
--brand-soft | #840b55 | main.css · 6 occurrences · deeper magenta gradient stop |
--brand-light | #e7c0ae | main.css · `button--white:hover` swap |
--brand-pale | #fff3ed | main.css · soft section bg |
--ink-deep | #2e1a47 | main.css · 20 occurrences · h2-h6 color, dark scrims |
--ink | #585858 | main.css · body text mid-gray |
--ink-mid | #60586b | main.css · nav default, secondary text |
--accent-sky | #96d4e9 | main.css · 10 occurrences · sustainability accent |
--bg-warm | #f2e8e1 | main.css · 14 occurrences · feature panel surface |
--bg-soft | #f0edeb | main.css · soft band surface |
--border | #eaeaea | main.css · hairline borders |
--radius | 5px | DOMINANT · main.css · 5 occurrences · cards + content tiles |
--radius-sm | 4px | main.css · 3 occurrences · utility chrome (carousel arrows, form inputs) |
--shadow-card | 8px 6px 10px rgba(0,0,0,0.10) | main.css · signature directional drop |
--shadow-text | 0 3px 7px rgba(0,0,0,0.60) | main.css · text-on-image overlay shadow |
--transition-base | 0.8s | main.css · 24 occurrences · `transition: all .8s ease` cinematic default |
--grad-pulse | linear-gradient(90deg, #df1995, #fe5000) | main.css · 10 occurrences · THE bp Pulse signature |
--grad-aubergine-pulse | linear-gradient(46.23deg, #2e1a47 63.69%, #840b55 86.93%, #fe5000 125.21%) | main.css · hero scrim 2 occurrences |
--container | 1320px | cinematic photography needs the wider canvas |
--font-display | 'Lato', sans-serif | only typeface · live `` Google Fonts |
--font-body | 'Lato', sans-serif | same — single-typeface system |
Lightsource-bp-only patterns extending the canonical section catalog. Below: the pipeline-stats bar (8.4 GW · 65 projects · 19 countries · 1,000 employees) — a distinctive utility-scale solar signature. See `sections.html` for the full catalog and `homepage.html` for live composition.
Founded 2010, 50/50 JV with bp PLC since 2017. Today we operate in 19 countries with construction, project-development, and asset-management teams co-located in every market we deliver.
8.4GW
Pipeline
65+
Projects
19
Countries
1,000+
Employees