Quick reference for platform conventions, touch targets, type scales, contrast rules, navigation patterns, and accessibility checks on iOS and Android.
Design SystemsAccessibilityNavigation PatternsTouch Targets
Platform Conventions
iOS 18+ HIG vs Material 3
| Concern |
iOS |
Android (M3) |
| Nav |
Bottom tab bar (≤5) |
Navigation bar (3–5) |
| Back |
Top chevron + left-edge swipe |
System back + predictive back |
| Primary action |
Bar button / in-content |
FAB |
| Font |
SF Pro |
Roboto / Roboto Flex |
| Menus |
Context menu, action sheet |
Overflow menu, bottom sheet |
| Color model |
Semantic system colors |
Dynamic color + tonal surfaces |
Touch Targets & Spacing
| Guideline |
Min target |
Spacing |
| iOS |
44 × 44 pt |
≥ 8 pt |
| Android |
48 × 48 dp |
≥ 8 dp |
| WCAG 2.2 AAA |
44 × 44 px |
adequate offset |
Spacing
- Base on an 8pt grid (4pt for fine tuning).
- Keep primary actions in the thumb zone (bottom-center).
- Give small icons a larger invisible hit area.
Typography Scale
| Role |
iOS style |
M3 role |
| Title |
Large Title / Title 1 |
Headline / Display |
| Section |
Title 2 / Title 3 |
Title Large / Medium |
| Body |
Body |
Body Large / Medium |
| Meta |
Footnote / Caption |
Label / Body Small |
Use named text styles so Dynamic Type / font scaling works automatically.
Color & Contrast
- Normal text:
4.5:1 (WCAG AA).
- Large text (≥18pt / 14pt bold) & UI:
3:1.
- Never convey state with color alone — add icon/label.
- Prefer semantic tokens (
label, systemBackground) over raw hex.
- Test contrast at reduced brightness (outdoor use).
Navigation Patterns
| Pattern |
Use for |
| Tab bar |
3–5 peer top-level sections |
| Stack / push |
Drill-down (list → detail) |
| Drawer / rail |
Many / secondary destinations |
| Modal / sheet |
Focused self-contained tasks |
Always give an exit from modals; preserve scroll position; never break the system back gesture.
Accessibility Checklist
- Label every control for VoiceOver / TalkBack.
- Hide decorative images from screen readers.
- Support Dynamic Type / font scaling (no hardcoded sizes).
- Honor Reduce Motion; ensure logical focus order.
- SwiftUI:
.accessibilityLabel("Add item")
- Compose:
contentDescription = "Add item"
- Test at 200% text size + screen reader on.
Dark Mode
- Don't invert — design dedicated dark tokens.
- Avoid pure
#000000 for large surfaces; use dark gray.
- Desaturate bright accents so they don't vibrate.
- M3: higher elevation = lighter tonal surface.
- Define both light & dark for every semantic token.
Do / Don't
| Do |
Don't |
| Use native components |
Reinvent OS controls |
| Meet 44pt / 48dp targets |
Ship tiny tap areas |
| Design empty/loading/error |
Show blank screens |
| Show gesture affordances |
Hide critical actions in gestures |
| Give fields the right keyboard |
Block submit behind keyboard |
