Contemporary screen interpretation
Rebus
A visual word puzzle that substitutes pictures for words or syllables. Because its meaning depends on language and context, it is not a universal replacement for written labels.
What defines it
- Image-word substitution
- Sequenced symbols
- Wordplay
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- bold · illustrated
- Implementation
- Allow time for a coherent decorative or image layer and responsive checks.
- Images & assets
- Create a coherent image-word puzzle and a text equivalent.
Color in use
A puzzle page with a picture sequence, a labeled answer field, and an optional explanation.
Accent labelOpaque text/surface: 21.00:1 · Text/accent: 6.40:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
The examples insert pictures into sentences and typographic layouts. Read the text and image together: the substitution depends on the specific language and phrasing.
View collected reference imagesBuild it
- Use the puzzle as optional content
- Provide a text equivalent or reveal
- Keep navigation outside the puzzle
Typography
Use simple text around the symbols and an explicit text solution. Keep the puzzle's typography distinct from navigation.
Watch out for
Replacing essential labels with ambiguous icons or assuming the same solution works across languages.
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: use the puzzle as optional content.
- Confirm: provide a text equivalent or reveal.
- Confirm: keep navigation outside the puzzle.
- Review specifically for: Replacing essential labels with ambiguous icons or assuming the same solution works across languages.