Mood & theme · 2008–present
Solarpunk
Optimistic eco-futurism: abundant green, warm solar gold, organic architecture, and technology integrated with nature rather than opposed to it.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(96% 0.04 145) - --fg
oklch(18% 0.06 145) - --muted
oklch(50% 0.06 148) - --surface
oklch(99% 0.02 140) - --surface-2
oklch(92% 0.05 142) - --border
oklch(74% 0.09 148) - --accent
oklch(48% 0.2 148) - --accent-fg
oklch(99% 0 0) - --focus
oklch(48% 0.2 148)
| Token | Value |
|---|---|
| --font-body | 'Nunito', system-ui, sans-serif |
| --font-display | 'Nunito', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 18px |
| --radius-sm | 10px |
| --shadow | 0 2px 10px oklch(18% 0.06 145 / 0.1) |
| --shadow-lg | 0 14px 40px -6px oklch(18% 0.06 145 / 0.2) |
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');
:root {
--bg: oklch(96% 0.04 145);
--fg: oklch(18% 0.06 145);
--muted: oklch(50% 0.06 148);
--surface: oklch(99% 0.02 140);
--surface-2: oklch(92% 0.05 142);
--border: oklch(74% 0.09 148);
--accent: oklch(48% 0.2 148);
--accent-fg: oklch(99% 0 0);
--focus: oklch(48% 0.2 148);
--font-body: 'Nunito', system-ui, sans-serif;
--font-display: 'Nunito', system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 18px;
--radius-sm: 10px;
--shadow: 0 2px 10px oklch(18% 0.06 145 / 0.1);
--shadow-lg: 0 14px 40px -6px oklch(18% 0.06 145 / 0.2);
}Where it came from
Origin: Speculative fiction; environmental design; decentralised technology communities
Solarpunk emerged from speculative fiction and online communities in the late 2000s as a direct counter to dystopian cyberpunk. Where cyberpunk imagines technology as dehumanising and corporate, solarpunk imagines it as communal, ecological, and beautiful. The visual language draws from Art Nouveau organic curves, the warm colours of sunshine and growing things, and the geometry of solar panels and sustainable architecture.
How to spot it
- Vibrant green and warm golden-yellow as primary palette
- Organic, flowing shapes alongside geometric solar-panel grids
- Layered plant and botanical motifs integrated with technology
- Warm, generous light quality — high brightness, no dark drama
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Genuinely distinctive — most tech UI defaults to blue or grey | Dense organic decoration conflicts with data-heavy layouts |
| Optimistic affect works well for mission-driven products | Optimistic palette can read as naive in serious enterprise contexts |
| Botanical motifs provide rich decorative possibilities | The aesthetic is still niche — some audiences won't recognise the reference |
In the wild
- Climate technology and sustainable energy product sites
- Community agriculture and urban farming platforms
- Speculative design and futures-research presentations
Use it when
The product is about sustainability, community, or ecological technology, and optimism is the honest signal.