Design System Specification

Dieselpunk HTML Style Guide

A design system forged in the age of propellers and riveted steel. Art Deco geometry meets wartime industry — diesel smoke, brass instruments, and the roar of heavy machinery.

Classification: Design System
Era: 1930s-1940s
Revision: MK-IV

Color Palette

Derived from the factory floor and the cockpit instrument panel. Dark steel foundations, brass and amber accents that catch the light like polished engine fittings, and signal colors borrowed from military operations manuals.

Steel & Iron
Steel Darkest
#14171A
Steel Dark
#1E2328
Steel Mid
#2F3640
Steel Light
#4A545E
Steel Bright
#6B7B8D
Steel Surface
#8899A6
Brass & Amber
Brass Dark
#8B6914
Brass
#C49A1A
Brass Light
#D4AA2E
Brass Bright
#E8C44A
Amber Glow
#F0A500
Amber Hot
#FF8C00
Oil & Soot
Oil Black
#0B0D0E
Soot
#111315
Grease
#1A1C1F
Carbon
#252830
Oxidation & Rust
Rust Deep
#6B2D0F
Rust
#8B3E1C
Rust Light
#A85A32
Patina Green
#3D6B4F
Warning & Signal
Warning Red
#CC2B2B
Warning Amber
#E8A000
Signal Green
#2D8B3A
Signal Blue
#2A5F8F

Typography

Typefaces drawn from the era of bold headlines, military stencils, and factory signage. Condensed forms echo the vertical thrust of Art Deco architecture; monospaced faces evoke instrument readouts and technical schematics.

Display / Bebas Neue
Engine Room
font-family: 'Bebas Neue' · 4.5rem · letter-spacing: 0.1em · uppercase
Heading H1 / Bebas Neue
Propulsion Division
font-family: 'Bebas Neue' · 3rem · letter-spacing: 0.08em · uppercase
Heading H2 / Oswald 600
Heavy Industry Standard
font-family: 'Oswald' · 1.8rem · weight: 600 · letter-spacing: 0.06em
Heading H3 / Oswald 500
Mechanical Engineering Corps
font-family: 'Oswald' · 1.3rem · weight: 500 · letter-spacing: 0.05em
Stencil / Stint Ultra Condensed
Classified Materials
font-family: 'Stint Ultra Condensed' · 2.5rem · letter-spacing: 0.2em · uppercase
Body / Oswald 300
The diesel engine roars to life in the heart of the factory, its pistons driving the machinery that shapes raw steel into precision instruments. Every rivet placed with care, every weld inspected twice. This is the age of industrial might, where form follows function and beauty is found in the geometry of gears.
font-family: 'Oswald' · 1rem · weight: 300 · line-height: 1.7
Body Strong / Oswald 500
Critical systems require bold identification. Load-bearing components are marked with reinforced typography for immediate recognition under operational conditions.
font-family: 'Oswald' · 1rem · weight: 500 · line-height: 1.7
Caption / Share Tech Mono
FIG. 12-A — Cross-section of radial engine block showing cylinder arrangement. Tolerance: ±0.005mm. Inspection date: 1942-11-08.
font-family: 'Share Tech Mono' · 0.75rem · letter-spacing: 0.06em
Monospace / Share Tech Mono
RPM: 2,400 | TEMP: 218°F | PSI: 34.7 | STATUS: NOMINAL
font-family: 'Share Tech Mono' · 0.9rem · line-height: 1.6

Spacing Scale

A geometric spacing system built on a 4px base unit. Like the precision tolerances of machined parts, consistent spacing ensures that every component fits together cleanly.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
--space-4xl
96px

Buttons

Machined from brass and steel, buttons feature metallic gradients, embossed highlights, and weighted shadows that suggest physical toggle switches and industrial controls.

Primary
Secondary
Danger
Ghost / Outline
Disabled

Forms

Input controls designed for the control room. Dark inset fields with brass focus indicators, styled selectors, and industrial-grade checkboxes and radio buttons.

As registered in personnel files
Standard military format

Cards & Panels

Riveted steel panels and instrument housings. Content containers feature structural borders, metallic header bars, and the utilitarian detailing of wartime equipment.

Radial Engine

MK-IX

Nine-cylinder radial configuration producing 1,200 horsepower. Air-cooled with forged aluminium cylinder heads and chromed piston rings for extended operational life.

Output 78%

Armored Hull

Class-A

Rolled homogeneous steel plating, 38mm thickness at primary surfaces. Riveted construction with overlapping joints for maximum structural integrity under combat conditions.

Integrity 95%

Fuel System

DIESEL

High-pressure injection system with dual fuel pumps and redundant filtration. Capacity: 840 gallons. Fuel grade: military-specification diesel No. 2.

Fuel Level 42%

Riveted Panel

The riveted panel is a foundational container in the Dieselpunk design system. Four corner rivets provide both structural authenticity and visual anchoring. The steel border and subtle emboss shadow create depth, while the dark panel background separates content from the oil-black page beneath.

Alerts & Notifications

Status messages drawn from military communication protocols and factory warning systems. Color-coded for rapid identification during high-pressure operational scenarios.

Intelligence Briefing
New reconnaissance data available. Updated tactical maps have been distributed to all division commanders. Review by 0800 hours.
Systems Operational
All engine diagnostics passed. Fuel pressure nominal. Hydraulic systems verified. Aircraft cleared for departure at scheduled time.
Maintenance Required
Cylinder 3 compression reading below threshold. Schedule engine tear-down within 50 operational hours. Continue operations with reduced load parameters.
Critical Failure
Fuel line breach detected in compartment 7B. Immediate shutdown required. Evacuate engine room. Fire suppression teams to stations.

Stamped Alerts

Restricted Area
Authorization level BRAVO or above required beyond this point. All personnel must display identification at all times.
Emergency Protocol Engaged
Reactor core pressure exceeding safe operational limits. All non-essential personnel must evacuate to designated assembly points.

Gauges & Indicators

Instrument panel readouts for displaying key metrics. Inspired by cockpit dials, factory pressure gauges, and the brass-rimmed instruments of the diesel age.

Engine RPM
2,400
Revolutions / Min
Fuel Pressure
34.7
PSI
Core Temp
218
Degrees F
Operational Hours
1,847
Total Hours

Data Table

Structured data presented in the style of maintenance logs and operations manifests. Clear hierarchy, ruled separators, and status indicators for rapid scanning.

Unit ID Designation Type Output Status
DP-0117 Iron Valkyrie Heavy Bomber 4 × 1,200 HP Active
DP-0233 Steel Tempest Interceptor 2 × 1,800 HP Active
DP-0341 Brass Leviathan Airship 8 × 600 HP Maintenance
DP-0452 Obsidian Hammer Ground Cruiser 2 × 950 HP Active
DP-0518 Smoke Phantom Recon Aircraft 1 × 1,400 HP Grounded
DP-0629 Copper Sentinel Defense Turret 1 × 400 HP Active

Decorative Elements

Dividers, stamps, and ornamental details that reinforce the dieselpunk aesthetic. Use sparingly to punctuate sections or add thematic weight.

Heavy Riveted Divider

Brass Accent Divider

Stamp Marks

Approved Rejected Classified Cleared