Contemporary screen interpretation
Aurora
A lighting treatment built from broad, luminous color fields. It supplies atmosphere behind an interface rather than a navigation model.
What defines it
- Diffuse gradients
- Dark grounding surface
- Sparse luminous accents
What it asks of the project
- Reading & layout
- Open spacing for a slower reading pace
- Visual emphasis
- bold · atmospheric
- Implementation
- Allow time for a coherent decorative or image layer and responsive checks.
- Images & assets
- Atmosphere comes from a gradient; custom images are optional.
Color in use
A music discovery page with an aurora header and solid album rows.
Accent labelOpaque text/surface: 18.72:1 · Text/accent: 5.84:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look at the large blue light fields and soft-edged color transitions. These poster treatments suggest atmosphere; they do not demonstrate a complete interface.
View collected reference imagesBuild it
- Keep the gradient behind the header
- Put body text on an opaque panel
- Use one accent for the primary action
Typography
Use a medium-weight sans-serif. Keep luminous effects off the letterforms.
Watch out for
Animating the entire background or placing small text over changing colors.
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: keep the gradient behind the header.
- Confirm: put body text on an opaque panel.
- Confirm: use one accent for the primary action.
- Review specifically for: Animating the entire background or placing small text over changing colors.