Establish a reading order
Separate the module title, summary, record information, and actions. Give important information emphasis without making everything compete.
04 / Visual craft & systems
Make clarity repeatable.
Across every screen.
Visual craft is the relationship between hierarchy, spacing, type, controls, and states. A system makes that relationship consistent as the product grows.
The design question
What should remain familiar when someone opens a different module?
Repeat meaningful patterns
Use recognizable navigation, filtering, tables, and action placement. Consistency should help people transfer what they have already learned.
Review states and accessibility
Check contrast, focus, keyboard access, and readable values. Pair colors with labels so meaning does not depend on color alone.
In practice / DineroSync
A decision in context.
A financial product can have many modules without needing a different visual language for each one. DineroSync uses recurring structure to connect overview screens and detailed operational records.
Explore the project evidence
The details that matter
Make the reasoning reviewable.
| Pattern | Purpose | What to review |
|---|---|---|
| Module summary | Provide orientation before detail | Hierarchy and label clarity |
| Record table | Make comparison and scanning easier | Alignment, density, and readable values |
| Contextual action | Connect an action to its target | Placement, wording, and state feedback |
Next / Design, in practice