---
id: solarpunk
name: Solarpunk
aesthetic: Optimistic eco-future — verdant greens, warm gold, nature + clean tech harmony.
tags: [solarpunk, eco, optimistic, nature, sustainable, futuristic]
stacks: [web, react-native, flutter, swiftui, compose]
themes: [light, dark]
bestFor: Sustainability, climate-tech, community, energy, hopeful future-facing brands.
version: 1.0.0
---

# Solarpunk

## Overview
A hopeful eco-futurism: lush verdant greens and warm solar gold, organic + clean-tech
harmony (leaves and circuits, sun and glass), Art-Nouveau-tinged flourishes, and bright,
optimistic light. Nature and technology in balance — growth, abundance, and renewable
energy. Warm, alive, and forward-looking without dystopia.

## Rules
1. Verdant palette: leaf/forest greens + warm solar gold + sky; bright and alive.
2. Organic + geometric harmony: foliage motifs with clean lines; Art-Nouveau curves meet tech.
3. Sunlight feel: warm glows, bright airy grounds, golden-hour accents.
4. Natural textures + clean modern UI together; rounded organic shapes.
5. Optimistic, abundant, but not cluttered — let light and green breathe.
6. Maintain AA — green/gold accents need contrast for text.

## Color
- Light: bg `oklch(97% 0.02 130)` (warm leaf-white), forest `oklch(55% 0.12 150)`, leaf `oklch(72% 0.15 140)`, solar gold `oklch(80% 0.13 90)`, sky `oklch(78% 0.08 220)`, fg `oklch(28% 0.04 150)`.
- Dark: deep forest `oklch(24% 0.04 155)`, fg `oklch(93% 0.02 130)`, leaf/gold accents.

## Typography
- Humanist sans (Inter / General Sans) + optional Art-Nouveau-flavored display for headings.

## Components
**Do**
- Foliage/leaf motifs + clean cards; gold-glow CTAs; organic rounded shapes; sun/plant icons; warm bright sections; curved dividers.
**Don't**
- No grey corporate sterility, no dystopian dark-neon, no harsh tech-cold. Keep it warm and alive.

## Motion
- Organic, growing: leaves/elements unfurl, gentle sway, warm glow pulse. 250–450ms.
- Reduced-motion: static.

## Stack: web
- Tailwind v4 verdant+gold tokens; SVG foliage motifs; organic `border-radius`/`clip-path`; gold-glow buttons; warm gradients.
## Stack: react-native
- Verdant NativeWind; svg foliage; organic shapes; gold-glow buttons; gentle Reanimated sway.
## Stack: flutter
- Verdant M3 seed; `flutter_svg` foliage; organic `ShapeBorder`; gold-glow; warm gradients.
## Stack: swiftui
- Verdant asset colors; vector foliage; organic `Shape`; gold `.shadow` glow; warm gradients.
## Stack: compose
- Verdant M3; vector foliage; organic shapes; gold glow; warm `Brush` gradients.