Contemporary screen interpretation
Pixel Art
An image-making approach where the placement of individual pixels is visible and deliberate. Pixel illustration does not require pixel-sized interface controls.
What defines it
- Visible pixel grid
- Restricted palette
- Stepped silhouettes
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
- A small original sprite set gives this direction its identity.
Color in use
A game library with pixel cover art and readable save-file details.
Accent labelOpaque text/surface: 18.01:1 · Text/accent: 11.85:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Compare the deliberately stepped silhouettes and limited colors. Some tiles are broader retro illustration references, so inspect the pixel construction rather than assuming every tile uses the same technique.
View collected reference imagesBuild it
- Draw icons on a consistent source grid
- Scale artwork by whole-number multiples
- Pair display lettering with normal body text
Typography
A bitmap display face can work for a short title; use a normal-width monospace or sans-serif for descriptions.
Watch out for
Blurry scaling, tiny bitmap paragraphs, or controls whose hit areas are only as large as their sprites.
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: draw icons on a consistent source grid.
- Confirm: scale artwork by whole-number multiples.
- Confirm: pair display lettering with normal body text.
- Review specifically for: Blurry scaling, tiny bitmap paragraphs, or controls whose hit areas are only as large as their sprites.