Twentieth-century movement
Surrealism
An artistic and literary movement exploring the unconscious and unexpected associations. A screen interpretation can use impossible imagery while keeping the actual interaction understandable.
What defines it
- Unexpected association
- Dream logic
- Altered scale
What it asks of the project
- Reading & layout
- Open spacing for a slower reading pace
- Visual emphasis
- bold · illustrated
- Implementation
- Custom artwork or lettering is central to the full expression.
- Images & assets
- One meaningful impossible image is the main creative investment.
Color in use
A literary journal with a surreal cover image and conventional article navigation.
Accent labelOpaque text/surface: 18.16:1 · Text/accent: 5.96:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look at the altered scale, improbable objects, and impossible spatial relationships. These are contemporary graphic interpretations of surreal imagery.
View collected reference imagesBuild it
- Build one meaningful impossible scene
- Keep navigation spatially stable
- Use captions when the image needs context
Typography
Conventional typography can make the impossible image more striking. Distort a title only when the distortion carries an idea.
Watch out for
Random visual oddity without an idea or making essential actions behave unpredictably.
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 one meaningful impossible scene.
- Confirm: keep navigation spatially stable.
- Confirm: use captions when the image needs context.
- Review specifically for: Random visual oddity without an idea or making essential actions behave unpredictably.