The vocabulary
Spacing — the gaps between things
Spacing — the gaps between things
- “more breathing room / airier” → bigger gaps
- “tighter / denser” → smaller gaps
- “the padding inside the card” → space between a card’s edge and its contents
- “the margin” → space from the screen edge to the content
- “the gap / the rhythm between items” → space between repeated elements
Font sizes — measured in pt (points)
Font sizes — measured in pt (points)
iOS uses a fixed type scale. You rarely need the numbers, but here they are so you can point at a role:
- 34pt — large title (the big screen title)
- 22pt — title
- 17pt — body / headline (default reading size; anything smaller starts to look like a website)
- 15pt — subheadline
- 13pt / 11pt — caption / metadata (timestamps, labels)
Font weight — how bold
Font weight — how bold
The words iOS uses, light to heavy: regular → medium → semibold → bold. “Make the amount semibold so it stands out from the label.”
Color — always by role, not by name
Color — always by role, not by name
- accent / primary — the interactive color (buttons, active tab, selection)
- surface / background — the color behind content (card vs screen)
- ink / text-primary / text-secondary — text colors: primary for headings, secondary for supporting text
- semantic roles — success, warning, error, plus your app’s own named roles
Shape and depth
Shape and depth
- corner radius — how rounded corners are (“softer corners” / “sharper corners”)
- elevation / shadow / depth policy — whether things float on shadows, sit on surfaces, or use gradients. Your system should pick one policy; point at it: “we use surfaces, not shadows — remove that drop shadow.”
State and interaction
State and interaction
- tap target — the invisible touchable area (must be at least 44×44pt)
- pressed / disabled state — how something looks when tapped or unavailable
- hairline — a 1px divider line