Design philosophy
Clarity in the interface. Confidence in every action.
People should understand where they are, what they can do and what happens next.
Use these four principles when choosing a component, reviewing a screen or designing a new interaction.
Make the next step obvious.
Give each screen a purpose. Let the primary action stand out and keep supporting choices visually quieter.
Action hierarchy →All required details are complete.
“Submit for review” tells people what happens. “OK” makes them guess.
Let people use what they already know.
Keep the same labels, spacing and status meanings across screens. Familiar behavior makes the next task easier to learn.
Color and meaning →Keep “In review” consistent across lists, detail pages and notifications.
Keep progress and outcomes visible.
Show when a change is still a draft, when a save is in progress, and what happened. Keep the person’s work available when a request fails.
Editing and saving →Your draft is still here. Try again.
A click is a request, not a confirmed result. Update the state after the save completes.
Make the complete task usable.
Give controls meaningful names, keep focus visible and provide alternatives to dragging. Review the full sequence, including errors and recovery.
Accessibility guidance →Focus follows the task in a predictable order.
Place focus thoughtfully after a dialog closes or a new region opens.
Ask these questions before shipping.
Review a real task with realistic content, rather than an isolated, empty screen.
- Can someone name the purpose and next step without an explanation?
- Do repeated actions use the same words and visual treatment?
- Can someone tell whether their changes are saved?
- Can the task be completed with a keyboard and on a narrow screen?
Put the principles to work.
Follow a complete interaction from its starting state to the outcome.