Section 01
Top App Bar
Height 56px, white bg by default. Transparent variant overlays hero cards. All icons = 44×44pt touch area.
Back + title + right action
Transparent over hero card
Top Bar Spec: Height 56px · padding 0 16px · Back icon: ‹ chevron in 44×44 hit area · Border-bottom: 1px #F0F0F0 · Title: 17px 700 centered · Transparent variant: icon color flips to #FFFFFF on dark bg.
Section 02
Tab Bars
Pill indicator for fixed tabs. Underline variant for content switching. Scrollable for 5+ categories.
Fixed Tab — Pill Indicator
3 tabs — dark active pill
All
Brands
Offers
Cashback
4 tabs — gold active pill
Underline Variant
Overview
Transactions
Analytics
Settings
Tab content
Scrollable — 7 Categories
Horizontally scrollable · Active = underline gold · Overflow fades right edge
Section 03
Back Button
Standalone back button spec. 44×44pt minimum. Use ‹ chevron + label or icon-only in top bar context.
‹
Back
Chevron + label (light)
‹
Icon-only round (in top bar)
Back Button Spec: Min touch target 44×44pt · Chevron is ‹ (not ← arrow) · Label = previous screen title or "Back" · Light bg: #F5F5F5 · Dark bg: #1A2540 · Border-radius: 12px pill or circle.
Section 04
Step Progress Indicator
Dot/circle stepper for multi-step flows (KYC, onboarding). 3–5 steps. Completed = dark filled, Active = gold gradient, Remaining = gray.
3-Step Progress
5-Step Progress
Section 05
Bottom Navigation
72px total height (48px nav + 24px safe area). White bg (light) or midnight bg (dark). Max 5 tabs.
4-Tab — Light (with badge)
Bottom Nav Spec: Height 48px visible + 24px iOS safe area = 72px total · Icon size 24px · Label 10px/600 · Active indicator: 4px gold dot below label (light) or gold icon color (dark) · Badge: 16px coral circle top-right of icon.