Early twentieth century
Art Deco
A decorative vocabulary of stepped geometry, symmetry, and stylized luxury. Its screen adaptation works best as a frame around content rather than an all-over effect.
What defines it
- Stepped forms
- Symmetry
- Geometric ornament
What it asks of the project
- Reading & layout
- Open spacing for a slower reading pace
- Visual emphasis
- bold · ornamental
- Implementation
- Allow time for a coherent decorative or image layer and responsive checks.
- Images & assets
- A repeatable geometric frame is more useful than many stock ornaments.
Color in use
A cinema program with stepped borders and a clear screening schedule.
Accent labelOpaque text/surface: 16.97:1 · Text/accent: 9.99:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look for stepped borders, symmetrical framing, and geometric lettering. The metallic-looking accents reinforce the structure rather than defining it by themselves.
View collected reference imagesBuild it
- Build a symmetrical title composition
- Use metallic color as a flat accent
- Pair a decorative heading with restrained body text
Typography
Use short geometric display lettering, with controlled symmetry. A neutral body face prevents the page becoming a poster at every scale.
Watch out for
Gold-on-gold text, excessive hairlines, or substituting generic luxury styling for the geometric structure.
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: build a symmetrical title composition.
- Confirm: use metallic color as a flat accent.
- Confirm: pair a decorative heading with restrained body text.
- Review specifically for: Gold-on-gold text, excessive hairlines, or substituting generic luxury styling for the geometric structure.