A common starting point: a design generated by an AI tool that looks plausible at a glance but falls apart in spacing, type, contrast, tap targets and consistency. Below, four screens of a beauty and fashion shopping app, before and after a refinement pass, with the reasoning behind each decision and the tokens a developer needs to build it.
This is a design concept with fictional products and data. It is not a client's app and not any real brand. The “before” screens recreate typical defects of an unrefined AI-generated design; they are not taken from anyone's product.
Every value on the “after” screens comes from this set. Nothing is hand-nudged, so developers can map it one-to-one to SwiftUI or UIKit.
Muted text on bg: about 5.9:1. Accent button label: about 11:1. Before: muted text was about 2:1.
| Role | Size / line | Weight |
|---|---|---|
| Title | 28 / 32 | 700 |
| Heading | 20 / 26 | 650 |
| Body | 16 / 24 | 400 |
| Secondary | 14 / 20 | 400 / 550 |
| Caption | 12 / 16 | 500 |
Five steps instead of eleven. Dynamic Type supported: all sizes scale relative to Body.
| Token | Value |
|---|---|
| Space | 4 · 8 · 12 · 16 · 24 · 32 |
| Screen margin | 16 |
| Radius | 12 · 16 · pill |
| Button height | 52 |
| Min tap target | 44 × 44 |
| Icons | 24 · 1.75 stroke · round caps |
A refinement pass is judged by how little a developer has to guess.