Contemporary screen interpretation
Utilitarian
A task-oriented approach that makes information easy to compare and actions easy to repeat. Density is useful only when it reduces work for the reader.
What defines it
- Explicit labels
- Aligned data
- Predictable controls
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- quiet · structural
- Implementation
- Mostly standard CSS; imagery may still need preparation.
- Images & assets
- Real labels, units, and status data matter more than imagery.
Color in use
An operations queue with owner, state, age, and one clear next action per row.
Accent labelOpaque text/surface: 19.26:1 · Text/accent: 5.75:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
The examples use restrained grids, alignment, and clear numerical detail. They are mostly graphic layouts; a useful operational interface also needs task-specific information and controls.
View collected reference imagesBuild it
- Align numbers and show units
- Keep filters near the results
- Use status text alongside color
Typography
Use a legible sans-serif and tabular numerals for comparable values. Reserve monospace for identifiers.
Watch out for
Hiding important actions in icon-only menus or showing more metrics than a decision needs.
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: align numbers and show units.
- Confirm: keep filters near the results.
- Confirm: use status text alongside color.
- Review specifically for: Hiding important actions in icon-only menus or showing more metrics than a decision needs.