All Templates
☀
Editorial & Bold
31. Solar Brutalism
Charred concrete meets a molten setting sun. Oversized numerals, Helvetica grids, and difference-blend typography for solar-tech, climate, and architecture brands that want gravity without gloss.
When to Use
Climate-tech, architecture studios, energy brands, solar startups, science journals
Key Vocabulary
Charred backgroundmolten orange sunmix-blend differenceoversized numeralshorizon ruleHelvetica gridconcrete poetryfield bulletincoordinates as decoration
Example Prompt
Build a solar-tech landing page with charred-concrete brutalism: - Background: deep charcoal hsl(20, 18%, 10%) - One molten radial sun anchored top-right (45° yellow → orange hsl(18, 95%, 55%) → rust hsl(12, 60%, 35%)), 70vw wide, blurred 0.4px - A single 1px bone-white horizon rule at 62% height - Massive numeric headline (a time, a coordinate, a year) at clamp(160px, 32vw, 380px), font-black, leading-[0.78], tracking-[-0.06em], using mix-blend-mode: difference so it inverts over the sun - Uppercase tracking-[0.25em] nav with a station code (SOL/03), section labels, and latitude - Bottom-right "bulletin №07" block with a single 12px sentence — the only prose on the page - No buttons, no gradients beyond the sun, no rounded corners larger than rounded-sm - Animations: sun scales from 0.6 to 1 over 1.4s, headline rises 50px ease [0.2, 0.8, 0.2, 1] - Mobile: keep the sun, drop the numeral to clamp(96px, 24vw, 200px), stack nav vertically
Pro Tip
"mix-blend-mode: difference is the whole trick — the same headline reads bone over charcoal and inverts to deep blue over the sun. One element, two compositions."