Solarpunk

---
name: solarpunk
description: Apply the Solarpunk visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Solarpunk, mentions eco-futurism, green futurism, solar futurism, or describes leaf green and sun gold palette, organic 16–24px curves, botanical illustration — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Solarpunk Design System

Optimistic eco-tech futurism: leaf greens and sun gold on warm cream, organic curves, botanical illustration woven through technology. Art nouveau meets solar panels — a future where nature and engineering flourish together.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Solarpunk.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (eco-futurism, green futurism, solar futurism, eco-tech optimism), or describes its traits: leaf green and sun gold palette; organic 16–24px curves; botanical illustration; art-nouveau linework; warm cream backgrounds; soft natural shadows.

## Design tokens

### Color palette

- Warm cream page background, like sun-bleached paper: `#f7f4e9` (--color-bg)
- Card and panel background, brighter cream: `#fffdf5` (--color-surface)
- Deep green-black primary text: `#26331f` (--color-text)
- Secondary text, mossy gray-green: `#52604a` (--color-text-muted)
- Leaf green — primary brand accent for fills and large display use: `#4c9a2a` (--color-accent)
- Deep leaf green for body-size links and text-on-cream accents: `#2f6018` (--color-accent-deep)
- Sun gold — highlights, badges, CTA fills with dark text: `#f4c430` (--color-sun)
- Sky blue — illustration fills and info surfaces: `#7ec8e3` (--color-sky)
- Terracotta — warm secondary accent for tags and illustration: `#c96f4a` (--color-terracotta)
- Soft warm hairline borders: `#d9d3bd` (--color-border)

### Typography

- Display / headings: Fraunces (fallback: Georgia, serif)
- Body: Nunito (fallback: Verdana, sans-serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Airy and unhurried; sections breathe like a garden path, with generous padding so botanical flourishes have room to trail.
- Border radius: md 16px, lg 24px, organic 60% 40% 55% 45% / 50% 55% 45% 50%, pill 999px — Everything rounds generously; the organic blob radius is for decorative image masks and illustration containers.
- Border treatment: 1px solid #d9d3bd — Hairlines stay soft and warm; emphasis comes from leaf-green 2px borders, never black.

### Shadows

- soft: `0 2px 12px rgba(60, 80, 40, 0.10)` — Default card elevation — a shadow like dappled shade
- soft-lg: `0 8px 28px rgba(60, 80, 40, 0.14)` — Hover lift and modals
- sun-glow: `0 0 24px rgba(244, 196, 48, 0.35)` — Optional warm glow behind sun-gold CTAs and hero badges

### Layout

- Max content width: 1200px
- Curved section dividers (SVG waves and hills) instead of straight seams
- Botanical illustration anchors the hero and drifts into margins
- Asymmetric two-column rhythm: text beside organic-masked imagery
- Stat and impact numbers displayed inside leaf or sun motifs

### Effects

- SVG vine and leaf flourishes trailing from card corners
- Subtle paper-grain texture on the cream background
- Stained-glass style duotone illustration (leaf green + sun gold)

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 180ms / 320ms / 600ms
- Elements grow in: scale from 0.96 with a gentle settle, like a plant unfurling
- Vines and dividers draw themselves on scroll via stroke-dashoffset
- Hover raises cards slightly with the soft-lg shadow; nothing snaps

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f7f4e9;
  --color-surface: #fffdf5;
  --color-text: #26331f;
  --color-text-muted: #52604a;
  --color-accent: #4c9a2a;
  --color-accent-deep: #2f6018;
  --color-sun: #f4c430;
  --color-sky: #7ec8e3;
  --color-terracotta: #c96f4a;
  --color-border: #d9d3bd;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-organic: 60% 40% 55% 45% / 50% 55% 45% 50%;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 12px rgba(60, 80, 40, 0.10);
  --shadow-soft-lg: 0 8px 28px rgba(60, 80, 40, 0.14);
  --shadow-sun-glow: 0 0 24px rgba(244, 196, 48, 0.35);
  --border-default: 1px solid #d9d3bd;
  --font-display: Fraunces, Georgia, serif;
  --font-body: Nunito, Verdana, sans-serif;
  --text-base: 17px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Transparent over cream, 72px tall; wordmark in Fraunces, links in Nunito 600; active link gets a hand-drawn leaf underline in accent green
- **Hero:** Large Fraunces headline with one word highlighted in leaf green, botanical illustration wrapping the right edge, sun-gold CTA with dark text, curved SVG hill as the section base
- **Card:** Bright cream surface, 16–24px radius, soft shadow, 24–32px padding, optional leaf flourish at the top-right corner
- **Button (primary):** Sun-gold fill (#f4c430) with deep green text, pill radius, soft shadow; darkens slightly on hover
- **Button (secondary):** Transparent with 2px leaf-green border and accent-deep text; fills pale green on hover
- **Form fields:** Cream surface, 1px warm border, 12px radius; focus swaps to a 2px leaf-green border with a soft green outer glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Botanical linework — vines, leaves, and sun rays in art-nouveau curves — growing around and through structural UI elements: section dividers that sprout, cards with a trailing leaf flourish at one corner. Spend boldness here; keep everything else quiet.

## Do

- Weave botanical linework through structural elements — dividers, corners, underlines
- Use curves everywhere: rounded corners, wave dividers, organic image masks
- Pair leaf green with sun gold and cream; keep the mood warm and hopeful
- Show real nature and community photography alongside illustration

## Don't

- No dystopian darkness — solarpunk is the optimistic branch of futurism
- No sharp corners, hard black borders, or sterile grays
- Don't use neon or synthetic gradients; color stays sun-and-soil natural
- Avoid greenwashing clichés like generic globe icons — be specific and botanical

## Accessibility notes

- Leaf green #4c9a2a on cream is ~3.2:1 — reserve it for large display type, fills, and decoration; use accent-deep #2f6018 for body-size links and text accents
- Sun gold #f4c430 must always carry dark green or near-black text, never white
- Self-drawing vine animations must respect prefers-reduced-motion

## Reference sites

- Solarpunks community: https://www.solarpunks.net
- Grist climate media: https://grist.org
- Sunrise Movement: https://www.sunrisemovement.org

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip solarpunk.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/solarpunk.json

Settings → Capabilities → Skills → Upload skill → solarpunk.zip