Plants everywhere
Greenery grows on roofs, walls and balconies, softening every building.
A hopeful picture of the future. Buildings wear gardens, rooftops collect sunlight, wind turbines turn quietly, and technology helps nature instead of replacing it.
Open the kit Copy promptSolarpunk imagines a sustainable, green future with community and craft at its heart. Visually it mixes lush plants, solar and wind tech, and soft organic curves.
Greenery grows on roofs, walls and balconies, softening every building.
Solar panels and wind turbines appear as beautiful, everyday objects.
Rounded towers and arches take cues from Art Nouveau rather than sharp sci-fi.
Leaf greens, warm gold and clear sky blue, bright but natural.
Solarpunk began as an online idea and grew into a genre of stories, art and design.
Art Nouveau's love of plant forms becomes one of solarpunk's visual roots.
Movements for small-scale, sustainable technology shape the ideas behind the look.
The word solarpunk starts appearing online as a hopeful answer to dark cyberpunk futures.
Artists share images of green cities, stained glass and solar tech, defining the visual style.
Sustainable brands, architects and illustrators adopt the look to show positive futures.
Solarpunk motion is renewable. A turbine spins steadily and the sun breathes, like a city running on nature's rhythm.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Energy, food and transport companies use the look to show a positive future.
Studios visualise green buildings and neighbourhoods.
Cosy games and stories use solarpunk worlds as hopeful settings.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Greens and gold from nature, with sky blue and a deep forest ink for text. Tap a swatch to copy its hex value.
:root{
--morning: #F6F8EE;
--leaf: #3E8E41;
--sprout: #9CCB5B;
--sun-gold: #F4B942;
--sky: #BFE3F0;
--solar-blue: #2C6E87;
--forest-ink: #1F3B2C;
}A friendly slab serif for headings and a clean rounded sans for body text.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Bree Serif",Georgia,serif;
--font-b: "Sora",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(46px, 9vw, 96px);
--fs-1: 45.6px; --fs-2: 35.7px;
--fs-3: 27.9px; --fs-4: 21.8px;
--fs-body: 17px; --fs-sm: 13.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.08;
}
/* fonts: Bree Serif and Sora */Open, airy layouts with rounded panels. Illustrations of green cities give the page its world.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Large leaf-like radii with one tighter corner, soft green-tinted shadows.
:root {
--radius: 24px;
--radius-sm: 14px;
--bw: 1.5px;
--shadow: 0 10px 24px rgba(31,59,44,.12);
--shadow-sm: 0 4px 10px rgba(31,59,44,.12);
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Solarpunk kit · Anti-Boring */
:root{
--bg:#F6F8EE;
--surface:#FFFFFF;
--surface2:#E7EFD8;
--fg:#1F3B2C;
--muted:#4C6656;
--accent:#3E8E41;
--accent-fg:#FFFFFF;
--accent2:#F4B942;
--accent2-fg:#1F3B2C;
--border:#BFD2A8;
--bw:1.5px;
--radius:24px;
--radius-sm:14px;
--shadow:0 10px 24px rgba(31,59,44,.12);
--shadow-sm:0 4px 10px rgba(31,59,44,.12);
--font-d:"Bree Serif",Georgia,serif;
--font-b:"Sora",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.08;
--gap:24px;
--pad:24px;
--focus:rgba(244,185,66,.5);
--ok:#2E7D32;
--warn:#9A5A00;
--danger:#B3261E;
--info:#2C6E87;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 75% 30%,#F4B942 0 14%,transparent 15%),linear-gradient(#BFE3F0 0 60%,#9CCB5B 60%);
--code-bg:#1F3B2C;
--code-fg:#E7EFD8;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.3px;
--fs-body:17px;
--fs-4:21.8px;
--fs-3:27.9px;
--fs-2:35.7px;
--fs-1:45.6px;
--fs-d:clamp(46px, 9vw, 96px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px 999px 999px 8px}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.card{border-radius:30px 30px 30px 8px}
.card-media{border-radius:22px 22px 22px 6px}
.badge{background:#E7EFD8;color:#1F3B2C;border-color:#BFD2A8}
.badge::before{content:"☀ "}
.alert{border-radius:18px 18px 18px 4px}
.progress i{background:linear-gradient(90deg,#9CCB5B,#3E8E41)}
.switch::before{background:#F4B942}
.tab{border-radius:999px;border:0}
.tab[aria-selected="true"]{background:#E7EFD8;color:#1F3B2C}
.tabs{border:0}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#10211A;
--surface:#183024;
--surface2:#142A20;
--fg:#E9F2DE;
--muted:#AFC6A8;
--border:#2E4F3C;
--accent:#8BC34A;
--accent-fg:#10211A;
--code-bg:#08140F;
}
html.alt .hero{background:linear-gradient(#0A1A14,#10211A 70%)}html.alt .hero h1{color:#E9F2DE}html.alt .hero .lede{color:#AFC6A8}html.alt .stage{background:linear-gradient(#0E2A3A,#183024)}html.alt .tab[aria-selected="true"],html.alt .badge{background:#183024;color:#E9F2DE}html.alt .tl .yr{color:#8BC34A}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a community solar energy cooperative in an authentic Solarpunk style.
Palette: Morning #F6F8EE, Leaf #3E8E41, Sprout #9CCB5B, Sun gold #F4B942, Sky #BFE3F0, Solar blue #2C6E87, Forest ink #1F3B2C.
Typography: Bree Serif for headings, Sora for body.
Layout: Two-column hero on a sky-to-cream gradient: headline left, an SVG city of rounded towers covered in plants with solar panels, a glowing sun and a spinning wind turbine on the right.
Signature details: Leaf green, sprout green, sun gold and sky blue, leaf-shaped radii (large with one tight corner), soft green shadows.
Components: Leaf-shaped pill buttons, rounded cards with one tight corner, sun badges, green gradient progress bars.
Motion: A spinning turbine, a gently pulsing sun.
Avoid: neon, dark dystopian palettes, sharp chrome, greenwashing clichés, clip-art leaves.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Plants on everything can look like empty eco marketing. Show real substance.
Hard metal and neon break the mood. Keep technology warm and friendly.
Light greens on cream can fail contrast. Use the forest ink for text.
Generic leaf icons feel cheap. Draw simple, consistent plant shapes.