Contemporary screen interpretation
Steampunk
A speculative genre combining historical industrial imagery with imagined technology. Gears and brass establish fiction; they should not obscure how a real interface works.
What defines it
- Industrial fantasy
- Mechanical detail
- Antique material cues
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- bold · ornamental
- Implementation
- Custom artwork or lettering is central to the full expression.
- Images & assets
- Coherent fictional machinery takes more work than decorative gears.
Color in use
A fictional invention catalog with mechanical illustrations and readable specifications.
Accent labelOpaque text/surface: 14.77:1 · Text/accent: 8.07:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look for invented machinery, antique print, and industrial fantasy. The examples are speculative genre graphics, not documentation of functioning historical devices.
View collected reference imagesBuild it
- Give decorative mechanisms a plausible visual role
- Use a simple control layout
- Separate fictional gauges from real data
Typography
Slab-serif display lettering can reference industrial print. Monospace is useful for actual specifications, not ornamental pseudo-data.
Watch out for
Random gears on every surface or unlabeled dials that imply nonexistent measurements.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: give decorative mechanisms a plausible visual role.
- Confirm: use a simple control layout.
- Confirm: separate fictional gauges from real data.
- Review specifically for: Random gears on every surface or unlabeled dials that imply nonexistent measurements.