Victorian industrial revolution reimagined forward. Brass gears, copper pipes, steam pressure, clockwork mechanisms.
Dark wood + burnished metal + warm amber light
Each instrument certified by the Aetheric Steam Co. Guild of Engineers, London.
Captures ambient vapour and converts it to usable locomotive force via a triple-stage condensation manifold.
A self-correcting gyroscopic compass driven by a 240-tooth brass gear train. Accurate to within one nautical league.
Harnesses electrical potential from steam-driven turbines, feeding copper-wound coils for industrial telegraph networks.
PRIMARY — Brass filled, warm glow on hover
SECONDARY — Copper outlined, copper hover glow
GHOST — Subtle brass outline, delicate hover
All buttons use serif text — warm brass glow on hover — no rounded pills
Every tone drawn from the workshop. Brass, copper, iron, mahogany, and aged ivory.
PRIMARY
Brass Gold
#b5a642
BACKGROUND
Dark Mahogany
#3d2b1f
ACCENT
Copper
#b87333
BODY TEXT
Aged Ivory
#f5f0e1
STRUCTURAL
Iron Grey
#4a4a4a
Rule: font-serif for all headings and body copy. font-mono for data, labels, IDs, measurements, and technical readings. Sans-serif is forbidden in the Victorian workshop.
Dark Mahogany Foundation
bg-[#3d2b1f] or bg-[#2a1f15]Every surface begins dark and warm. Mahogany is not black — it carries the grain of aged wood.
Brass Serif Headings
font-serif text-[#b5a642]Victorian industry married artistry. Headings wear brass and speak in serifs. No sans-serif shall lead.
Copper Riveted Borders
border border-[#b87333]/50Every panel edge suggests hand-riveted copper plate. Use border-2 for structural panels, border for inset elements.
Brass Glow Shadows
shadow-[0_0_15px_rgba(181,166,66,0.3)]Warm amber gas-lamp light spills from brass fittings. Glow is always warm — never cool or neutral.
Mono Data Labels
font-mono text-[#b87333]Technical readings, measurements, and pressure values use monospace. It signals precision instrumentation.
Gear SVG Ornaments
inline SVG cog + spoke patternDecorative gears are structural truth — the machinery that drives the world forward. Never purely cosmetic.
No Flat Modern Design
avoid: flat UI, minimal cardsSteampunk is ornate by nature. Flat minimalism strips away the very soul of the Victorian workshop.
No Pastel Palettes
avoid: pink, mint, sky, lavenderPastels were not yet invented in the coal-fired age. Only brass, copper, iron, and aged ivory.
No Sans-serif Headings
avoid: font-sans for h1-h4The 20th-century typographic revolution has not yet arrived. Serifs carry the weight of the Industrial Age.
No Neon or Screen-glow
avoid: shadow cyan/violet/greenElectric light exists but has not been aestheticised. Glow is warm amber gas-lamp — never cold neon.
No Bright White Backgrounds
avoid: bg-white, bg-[#ffffff]The workshop is lit by oil and gas. Backgrounds are always mahogany-dark or aged-ivory warm.
No Rounded Pill Shapes
avoid: rounded-full on panelsSteampunk panels are riveted, rectangular or subtly curved. Full pills belong to a different century.
shadow-[0_0_15px_rgba(181,166,66,0.3)]Warm amber light radiates from brass fittings on focus and hover. Always warm, never cool.
border border-[#b87333]/50 hover:border-[#b87333]Copper plating brightens on interaction. Simulates polished metal catching the gas-lamp flame.
animate-spin duration-[8000ms] linear infiniteBackground gears rotate slowly and continuously. The workshop never stops — it merely idles.
w-[{value}%] transition-all duration-700Linear gauges fill from left. Use warm brass colour below 80%, copper at critical levels.
focus:shadow-[0_0_12px_rgba(181,166,66,0.2)]Interactive fields emit a brass glow ring on focus. No blue outline — the workshop uses gas-lamp amber.
translateY(-60px) scaleX(1.4) opacity-0Decorative steam puffs rise and dissipate. Opacity 0 to 0.35 and back. Duration minimum 3.5 seconds.
All systems nominal — steam pressure maintained