Glasssystem

Solarpunk Green

80
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI radiating sustainable optimism — translucent green panels, soft light diffusion, organic data visualization, and the hopeful energy of tech that works with nature, not against it.

greensustainabletranslucentorganicoptimistic

Added February 16, 2026 by unslop.dev

Example output

Energy dashboard card

🌱 Solar Output
Live

4.2 kWh

Today's generation — 12% above forecast

0 kWh 6 kWh peak
View code
<div style="padding: 2rem; background: #f0f4ec;">
  <div style="max-width: 24rem; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(34,197,94,0.08), 0 1px 4px rgba(0,0,0,0.03);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-size: 1rem;">🌱</span>
        <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; color: #1a2e1a;">Solar Output</span>
      </div>
      <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #16a34a; background: rgba(34,197,94,0.1); padding: 0.125rem 0.5rem; border-radius: 9999px;">Live</span>
    </div>
    <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: 600; color: #16a34a; margin: 0; line-height: 1;">4.2<span style="font-size: 1rem; color: #7a8a7a; font-weight: 400;"> kWh</span></p>
    <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: #7a8a7a; margin: 0.375rem 0 0 0;">Today's generation — 12% above forecast</p>
    <div style="margin-top: 1.25rem; height: 6px; background: rgba(34,197,94,0.1); border-radius: 9999px; overflow: hidden;">
      <div style="width: 72%; height: 100%; background: linear-gradient(90deg, #16a34a 0%, #d97706 100%); border-radius: 9999px;"></div>
    </div>
    <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
      <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a;">0 kWh</span>
      <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a;">6 kWh peak</span>
    </div>
  </div>
</div>

Eco action buttons

View code
<div style="padding: 2rem; background: #faf8f3; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #16a34a; color: white; border: none; border-radius: 10px; padding: 0.5rem 1.5rem; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(22,163,74,0.25);">🌱 Plant a Tree</button>
  <button style="background: rgba(34,197,94,0.08); color: #16a34a; border: 1px solid rgba(34,197,94,0.25); border-radius: 10px; padding: 0.5rem 1.5rem; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;">View Garden</button>
  <button style="background: rgba(217,119,6,0.08); color: #d97706; border: 1px solid rgba(217,119,6,0.2); border-radius: 10px; padding: 0.5rem 1.5rem; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;">☀ Energy Report</button>
</div>

Community notification

☀

Community goal reached

Your neighborhood generated 120% of its energy needs today. Surplus is being shared with adjacent grids.

View code
<div style="padding: 2rem; background: #f0f4ec;">
  <div style="max-width: 28rem; background: rgba(255,255,255,0.7); border: 1px solid rgba(34,197,94,0.12); border-radius: 14px; padding: 1rem 1.25rem; box-shadow: 0 2px 12px rgba(34,197,94,0.06); display: flex; gap: 0.875rem; align-items: flex-start;">
    <div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(217,119,6,0.1) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(34,197,94,0.15);">
      <span style="font-size: 0.875rem;">☀</span>
    </div>
    <div>
      <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.875rem; font-weight: 600; color: #1a2e1a; margin: 0;">Community goal reached</p>
      <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; color: #4a5c4a; margin: 0.25rem 0 0 0; line-height: 1.5;">Your neighborhood generated 120% of its energy needs today. Surplus is being shared with adjacent grids.</p>
      <div style="display: flex; gap: 0.75rem; margin-top: 0.75rem;">
        <button style="background: none; border: none; color: #16a34a; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0;">View details</button>
        <button style="background: none; border: none; color: #7a8a7a; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0;">Dismiss</button>
      </div>
    </div>
  </div>
</div>

Habitat profile card

🌿

Riverside Commons

Community habitat since 2024

142

members

8.4

kWh avg

A+

eco score

View code
<div style="padding: 2rem; background: #faf8f3;">
  <div style="max-width: 24rem; background: rgba(34,197,94,0.04); border: 1px solid rgba(34,197,94,0.12); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(34,197,94,0.06);">
    <div style="height: 80px; background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(217,119,6,0.08) 50%, rgba(14,165,233,0.08) 100%); display: flex; align-items: flex-end; padding: 0 1.5rem;">
      <div style="width: 52px; height: 52px; border-radius: 50%; background: white; border: 3px solid rgba(34,197,94,0.2); display: flex; align-items: center; justify-content: center; transform: translateY(50%); box-shadow: 0 2px 8px rgba(34,197,94,0.1);">
        <span style="font-size: 1.5rem;">🌿</span>
      </div>
    </div>
    <div style="padding: 2rem 1.5rem 1.5rem;">
      <h3 style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.125rem; font-weight: 600; color: #1a2e1a; margin: 0;">Riverside Commons</h3>
      <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: #7a8a7a; margin: 0.25rem 0 0 0;">Community habitat since 2024</p>
      <div style="display: flex; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(34,197,94,0.1);">
        <div style="text-align: center;">
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.25rem; font-weight: 600; color: #16a34a; margin: 0;">142</p>
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0;">members</p>
        </div>
        <div style="text-align: center;">
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.25rem; font-weight: 600; color: #d97706; margin: 0;">8.4</p>
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0;">kWh avg</p>
        </div>
        <div style="text-align: center;">
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.25rem; font-weight: 600; color: #0ea5e9; margin: 0;">A+</p>
          <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0;">eco score</p>
        </div>
      </div>
      <button style="width: 100%; background: #16a34a; color: white; border: none; border-radius: 10px; padding: 0.625rem; font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; margin-top: 1.25rem; box-shadow: 0 2px 8px rgba(22,163,74,0.2);">🌱 Join This Habitat</button>
    </div>
  </div>
</div>

Resource grid

Resource Overview

☀ +12%

4.2 kW

Solar generation

💧 -3%

142 L

Water harvested

🔋 87%

13.2 kWh

Battery stored

🌿 +8%

2.1 kg

COâ‚‚ offset today

View code
<div style="padding: 2rem; background: #f0f4ec;">
  <div style="max-width: 30rem;">
    <h3 style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 600; color: #1a2e1a; margin: 0 0 1rem 0;">Resource Overview</h3>
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;">
      <div style="background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.12); border-radius: 14px; padding: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <span style="font-size: 1.25rem;">☀</span>
          <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; color: #16a34a; background: rgba(34,197,94,0.1); padding: 0.125rem 0.5rem; border-radius: 9999px;">+12%</span>
        </div>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.5rem; font-weight: 600; color: #16a34a; margin: 0;">4.2 kW</p>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0.25rem 0 0 0;">Solar generation</p>
      </div>
      <div style="background: rgba(14,165,233,0.04); border: 1px solid rgba(14,165,233,0.12); border-radius: 14px; padding: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <span style="font-size: 1.25rem;">💧</span>
          <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; color: #0ea5e9; background: rgba(14,165,233,0.1); padding: 0.125rem 0.5rem; border-radius: 9999px;">-3%</span>
        </div>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.5rem; font-weight: 600; color: #0ea5e9; margin: 0;">142 L</p>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0.25rem 0 0 0;">Water harvested</p>
      </div>
      <div style="background: rgba(217,119,6,0.04); border: 1px solid rgba(217,119,6,0.12); border-radius: 14px; padding: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <span style="font-size: 1.25rem;">🔋</span>
          <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; color: #d97706; background: rgba(217,119,6,0.1); padding: 0.125rem 0.5rem; border-radius: 9999px;">87%</span>
        </div>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.5rem; font-weight: 600; color: #d97706; margin: 0;">13.2 kWh</p>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0.25rem 0 0 0;">Battery stored</p>
      </div>
      <div style="background: rgba(34,197,94,0.04); border: 1px solid rgba(34,197,94,0.1); border-radius: 14px; padding: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <span style="font-size: 1.25rem;">🌿</span>
          <span style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; color: #16a34a; background: rgba(34,197,94,0.1); padding: 0.125rem 0.5rem; border-radius: 9999px;">+8%</span>
        </div>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 1.5rem; font-weight: 600; color: #1a2e1a; margin: 0;">2.1 kg</p>
        <p style="font-family: Avenir, 'Nunito Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #7a8a7a; margin: 0.25rem 0 0 0;">COâ‚‚ offset today</p>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a solarpunk aesthetic — the visual language of optimistic, sustainable technology. Interfaces that feel like they're powered by sunlight, wrapped in living systems, and designed for a world that's getting better. Translucent green panels, soft golden light, organic curves, and the quiet confidence of technology in harmony with nature.

VISUAL RULES:
- Background: Warm light cream (#faf8f3) or very pale sage (#f0f4ec). Feels like natural light on a clean surface.
- Panels/surfaces: Translucent green-tinted glass. `background: rgba(34,197,94,0.06)` with `backdrop-filter: blur(8px)`. Border: `1px solid rgba(34,197,94,0.15)`. Layered, airy, breathing.
- Primary color: Living green (#16a34a) — the green of healthy leaves, not neon. Use for accents, CTAs, status indicators.
- Secondary: Warm golden amber (#d97706) for energy indicators, highlights, solar references.
- Tertiary: Soft sky blue (#0ea5e9) for water/air data, secondary information.
- Text: Deep forest (#1a2e1a) for headings, warm gray-green (#4a5c4a) for body, muted sage (#7a8a7a) for metadata.
- Typography: Clean humanist sans-serif. `font-family: 'Avenir', 'Nunito Sans', 'Segoe UI', sans-serif`. Friendly but precise. Headings medium-weight, not heavy.
- Border radius: Generous organic curves. 12px-20px on panels, 8px on buttons, 9999px on badges. Soft, natural, approachable.
- Borders: Thin and green-tinted. 1px solid at low opacity. Nothing heavy or structural.
- Shadows: Soft and diffused, tinted green. `box-shadow: 0 4px 20px rgba(34,197,94,0.08), 0 1px 4px rgba(0,0,0,0.04)`.
- Decorative: Small leaf/sprout indicators (🌱), circular progress rings for energy metrics, soft gradient washes of green-to-golden light.

SPECIFIC PATTERNS:
- Cards: Translucent green-tinted bg, soft green border, generous border-radius, gentle shadow. Content feels like it's floating in natural light.
- Buttons primary: bg-green-600 text-white, rounded-lg, medium weight text. Soft green shadow on hover. Feels inviting, not urgent.
- Buttons secondary: Transparent with green border, green text. Hover: pale green fill.
- Progress indicators: Circular or organic-shaped. Green fill growing like a plant. Optional leaf icon at the tip.
- Stats: Large clean numbers in forest green, with small amber or sky blue indicators for trends.
- Status dots: Green (#16a34a) = thriving, amber (#d97706) = needs attention, sky blue (#0ea5e9) = neutral/water.
- Section headers: Friendly medium-weight text, no uppercase shouting. Optional small leaf or sun icon.

ANTI-PATTERNS:
- No dark mode. This aesthetic lives in light.
- No red for errors (use warm amber instead — solarpunk is optimistic).
- No heavy borders or brutalist elements.
- No neon or fluorescent colors. Greens are natural, not electric.
- No monospace fonts. Keep it humanist and warm.
- No angular/sharp corners. Everything is organic and curved.
- No heavy black text. Keep it forest-toned.

Related prompts

â—†

Crystal Cache

Edge network layer

Distributed caching at the edge. Sub-millisecond reads with automatic invalidation and regional replication.

Requests
2.4M
↑ 12.3%
Latency
4.2ms
↓ 8.1%
Uptime
99.97%
30d window
Glass

Frosted Midnight

🔥63system

Generates UI with dark glass morphism — midnight blue and charcoal surfaces, frosted translucent panels, cool blue highlights, and the elegant depth of a winter night sky behind ice.

✦ Now Available

Experience the
Northern Lights

Immersive visual experiences that bring the aurora borealis into your digital space. Crafted with light, color, and movement.

Real-time sync Edge computing Auto-scaling Multi-region Encrypted
Glass

Gradient Aurora

🔥71system

Generates UI with aurora borealis-inspired gradients — iridescent teal-to-purple-to-green washes, translucent panels, ethereal glows, and the mesmerizing quality of northern lights over a dark sky.

♦

Cloud Storage

2.4 GB of 10 GB used

Your files are synced across all devices. Upgrade your plan for more storage and priority support.

Confirm Changes

×

You're about to update your workspace settings. This will affect all team members currently in this project. Are you sure you want to continue?

What will change

Default branch protection, merge requirements, and notification preferences for 12 members.

Glass

Glass Morphism

🔥62system

Generates UI with frosted-glass surfaces, backdrop blur, translucent layers, and soft gradients — depth created through transparency, not shadows. Light, airy, and dimensional.