An intentional interface has a clear hierarchy, stable spacing and coherent states. Adding gradients to an unresolved flow makes it decorated rather than understandable.
- 1Task hierarchy
- 2Content and controls
- 3Tokens and spacing
- 4State review
Work through the example
Choose one primary action per screen and explain where secondary actions belong. Compare empty and content states together.
Start with a disposable branch and synthetic data. Write the expected outcome before changing the implementation, then keep the first failing result. This prevents a later repair from quietly redefining the task. The procedure below is grounded in the repository reference; its examples must still be checked against your project and installed toolchain.
Implementation reference
The following focused section is adapted from the maintained project guide. It preserves the source’s examples and limitations.
Review Order
- Primary task: can the user see what to do in two seconds?
- Hierarchy: do size, weight, color, and position match importance?
- Layout: are alignment, rhythm, gutters, and touch targets consistent?
- Type: semantic styles first; fixed sizes only with a clear reason.
- State: loading, empty, error, success, offline, disabled.
- Adaptation: compact/regular widths, iPad resizability, keyboard, pointer.
- Accessibility: VoiceOver labels, focus order, Dynamic Type, contrast, Reduce Motion.
Acceptance and failure review
| Checkpoint | What to inspect | If it does not match |
|---|---|---|
| Task hierarchy | Confirm the input and environment | Preserve the failure and return to this step |
| Content and controls | Inspect the intermediate artifact | Preserve the failure and return to this step |
| Tokens and spacing | Run the focused check | Preserve the failure and return to this step |
| State review | Record the observed result | Preserve the failure and return to this step |
Ask the agent to explain the smallest change that resolves the observed mismatch. Keep unrelated refactors out of the repair. A change that makes a warning disappear is not enough if the behavior or ownership contract has changed. Re-run the same acceptance check so the before and after results are comparable.
Evidence and limits
The pattern library is a starting point, not evidence that a particular redesign improved usability.
This is an educational guide. Its presence in the series does not certify a completed client-specific lab. The series evidence record separates executed checks from exercises and blocked environments.
Inspect the source used in this lesson.
Related reading
- SwiftUI: review state transitions before polishing the screen
Make loading, empty, success and error states part of the implementation brief.
- How can design tokens generate light, dark and high-contrast color assets?
Generate a real xcassets catalog from explicit color tokens, inspect its four variants, and compile it with actool.
What to do next
Next: Preparing repeatable simulator captures for App Store screenshots