Visual polish
Buttons, focus states, hierarchy, rhythm, and professional restraint.
What you will practice
Button hierarchy; Focus rings; Card rhythm; Readable contrast.
Use the worked examples when needed, then test your understanding without them.
- 01Visual polish: Button hierarchyA primary action deserves stronger visual emphasis than secondary controls without making either unreadable.Practice
- 02Visual polish: Focus ringsA separated, visible outline makes the keyboard target identifiable without shifting layout.Practice
- 03Visual polish: Card rhythmConsistent internal spacing makes repeated content easier to compare than arbitrary per-card offsets.Practice
- 04Visual polish: Readable contrastForeground and background work as a pair. Color choice still needs contrast measurement in the real product.Practice
- 05Visual polish: Status colorsColor can reinforce a written status but should never be its only carrier.Practice
- 06Visual polish: Subtle shadowsA restrained shadow can separate surfaces; it is not a substitute for content hierarchy.Practice
- 07Visual polish: Consistent radiiA small radius system keeps related controls consistent without making every surface look like a pill.Practice
- 08Visual polish: Visual polish checkpointReadable typography, one action hierarchy, and a keyboard focus treatment are useful polish before decorative effects.Practice