Ember Forge
Coal black, molten orange and condensed capitals hammered out of the fire.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
Soot-black with orange heat bleeding up from the bottom of every section. Tall condensed capitals are stamped like maker's marks, orange glows around the edges of cards like cooling metal, and corner brackets frame details like a workshop drawing. Raw, hot and handmade.
Ember Forge is a hot, industrial dark system. It takes its cues from Victorian foundry signage, stamped maker's marks and the visual drama of molten metal: a soot-black grainy canvas, tall condensed capitals set tight like letters punched into steel, and an orange-to-amber heat that glows up from below. Corner brackets frame key details like a technical drawing pinned to the workshop wall. It should feel raw, physical and slightly dangerous — all fire, no polish.
Principles
- Headlines are stamped, not written: condensed capitals, tight leading.
- Heat rises from the bottom — gradients run orange at the base to black at the top.
- Use orange as fire: buttons, glows, one numeral; never as a large panel.
- Frame details in corner brackets like an engineering drawing.
- Back every claim with a number — degrees, layers, hardness.
Motion
Headline lines strike in from the left like hammer blows, each 80ms apart; a slow orange heat-glow pulses at the base of the hero every 4 seconds, and cards flare orange at the edges on hover.
Do & don't
Do
- ✓ Set headlines at 0.86 line-height so lines nearly touch.
- ✓ Run a red-orange-amber heat gradient at the base of the hero.
- ✓ Use mono for every spec and measurement.
Don't
- ✕ Don't fill large areas with orange.
- ✕ Don't use soft pastel or cool colours.
- ✕ Don't round corners past 4px.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 372 lines of DESIGN.md in total.
More like this
All Dark & Cinematic →
Noir Cinema
No. 028Letterboxed, grainy and lit from one side, like a 1947 crime picture.
Midnight Velvet
No. 046Indigo velvet, a lush italic serif and the glow of a stage at 11pm.
Moody Forest
No. 047Pine-dark greens, a sturdy old serif and mist hanging between the trunks.
Obsidian Champagne
No. 048Polished black stone, champagne gold hairlines and a whisper-thin roman.
Studio Black
No. 049Black page, white capitals the height of the screen, and nothing else.
Street Lookbook
No. 094A streetwear drop lookbook: condensed caps, asphalt black, hi-vis lime and night shots.