# Solarpunk Design System

Technology in Harmony with Nature | Optimistic Future Design

## Design Philosophy

This system embodies solarpunk principles: technology should enhance rather than replace nature. Every element reflects growth, sustainability, and hopeful human-centered progress. Unlike dystopian or antiseptic corporate aesthetics, this design celebrates optimism through informed action.

### Core Principles

- Flora (Growth): Living greens represent continuous development and natural systems
- Sol (Energy): Solar golds symbolize renewable power and enlightened progress
- Aqua (Flow): Water teals embody adaptability and resource consciousness
- Terra (Foundation): Earth tones ground the system in material reality

## Photosynthetic Color Palette

Flora 1 #6faa5f
Flora 2 #4a8b3f
Terra 1 #c67d4a
Terra 2 #a86840
Sol 1 #f4a841
Sol 2 #e89530
Aqua 1 #5ba3a3
Aqua 2 #3d8585

Inspired by photosynthesis, soil composition, sunlight spectrum, and water cycles. Each color family serves distinct semantic purposes while maintaining natural harmony.

## Typography System

# H1: Tri-Color Nature Gradient

## H2: Flora Green (Growth)

### H3: Solar Gold (Energy)

#### H4: Aqua Teal (Flow)

##### H5: Terra Clay (Foundation)

###### H6: Light Primary

Body text uses Space Grotesk with generous 1.75 line-height for accessibility and reading comfort. Strong emphasis uses living green, while emphasis uses solar gold. Outfit serves as the header font—geometric but warm, technical but human.

Inline `code snippets` use aqua coloring to represent flowing information.

    // Code reflects natural growth patterns
    function regenerate(ecosystem) {
        return ecosystem.nurture().flourish();
    }

> Blockquotes use flora green borders. "The future is not something we enter. The future is something we create." - Leonard I. Sweet

## Action Components

### Primary (Flora Growth)

### Solar (Energy)

### Aqua (Flow)

### Outline (Transparent)

Buttons feature shimmer effect on hover, suggesting living energy. Organic 10px corners balance technical precision with natural flow.

## Card Components

### Standard Growth

Default cards lift on hover, suggesting organic vitality and responsive design.

### Organic Form

Asymmetric corners (12px/18px/14px/20px) mimic natural growth patterns. Gradient border appears on hover.

##### Terra Foundation

Earth-toned gradient background for grounded, material content.

## Data Structures

Resource | Renewable % | Efficiency | Status
--- | --- | --- | ---
Solar Capacity | 94% | High | Growing
Wind Integration | 87% | Optimal | Active
Hydro Systems | 78% | Stable | Monitoring
Biofuel Research | 45% | Developing | Testing
Total Renewable | 76% System-wide

## Input Systems

Project Name
Contact Email
Project Scope
Vision Statement
Priority Systems
Energy Democracy
Food Security
Water Commons

## Growth Indicators

### Native Progress Elements

### Custom Progress Trackers

Carbon Sequestration 850 tons / 1000 target
Community Adoption 62 households / 100

Progress bars feature shimmer animation suggesting active growth and living systems.

## Status Markers

Thriving Powered Flowing Grounded Regenerating Active

### Semantic Applications

Status: Online Standby Offline

Tiers: Community Cooperative Commons

## Navigation Layers

### Ecosystem Overview

Integrated systems working in harmony. Tabs use organic rounded corners and flora green indicators for active states.

### Impact Metrics

- Energy Independence: 87%
- Carbon Drawdown: 2,400 tons/year
- Food Sovereignty: 64% local
- Community Participation: 340 members

### Community Network

Collaborative governance and resource sharing.

12 Co-ops 45 Projects 340 Members

## Growth Timeline

Phase 1: Seeding

#### Community Formation

Initial outreach, vision alignment, and resource assessment. Foundation building.

Phase 2: Sprouting

#### Infrastructure Development

Solar installation, water systems, community gardens. First visible growth.

Phase 3: Flourishing

#### System Integration

Energy sharing networks, local food production, circular economy loops.

Phase 4: Regenerating

#### Scaling & Replication

Knowledge sharing, network expansion, supporting new communities.

## Impact Metrics

94%
Renewable Energy
2.4K
Tons CO₂ Sequestered
340
Community Members
+76%
Local Food Production

## Growth Visualization

### System Health Indicators

Energy Independence 87/100
Food Sovereignty 64/100
Water Security 78/100
Community Resilience 92/100

## System Messages

Growth Update: Solar array expanded by 12 panels. Community capacity increased to 94kW.
Energy Notice: Peak generation achieved. Surplus energy available for sharing.
Water Systems: Rainwater harvesting targets exceeded. Reserve capacity at 120%.
Maintenance: Composting system requires attention. Schedule cooperative work day.

## Implementation Guide

### Philosophy → Practice

This system isn't merely aesthetic—it encodes values. Every rounded corner represents organic growth over rigid geometry. Gradient transitions mirror natural change. Shimmer effects suggest living systems.

#### Border Radius Strategy

- Small (6px): Inputs, code blocks—functional elements
- Medium (10px): Buttons, standard components—balanced
- Large (16px): Cards, panels—welcoming spaces
- Extra (24px): Headers, features—significant forms
- Organic (asymmetric): Special cards—natural variation

### Color Semantics

Flora: Growth, success, primary actions

Sol: Energy, attention, active states

Aqua: Flow, information, adaptability

Terra: Foundation, stability, warnings

### Animation Principles

Use `cubic-bezier(0.4, 0, 0.2, 1)` for natural motion. Add shimmer effects to suggest vitality. Transitions should feel organic, never mechanical.

### Core Constraints

- Optimism required: Design choices should suggest hope and possibility
- Nature-inspired: Colors from earth, typography with warmth
- Organic curves: 6-24px range, asymmetric when appropriate
- Living animations: Shimmer, pulse, flow—avoid mechanical motion
- Semantic color: Each palette family has distinct meaning
- Community-focused: Language emphasizes collective action
- Fonts: Outfit (geometric-warm) + Space Grotesk (technical-human)