optima
Product mockups · v0.17
Rewards, at a glance.
Optima · the blue design, set in one typeface (DM Sans). Estimated cashback and miles, eligible and non-eligible spend, card priorities and reward flags. Example data.
Design systemColor, type, components and states
Open ↗Sign inGoogle account entry
Open ↗Add cardPick the exact card product
Open ↗Forward alertsCopy address and follow three steps
Open ↗Test an alertConfirm the first forwarded message
Open ↗Spending overviewMonth overview and what’s left on each card
Open ↗Card detailCashback, progress and spending
Open ↗Spending historyMonthly chart of eligible and non-eligible spend
Open ↗Statement cyclesPast cycles for one card
Open ↗Past monthOctober results by card
Open ↗Miles card detailExample cap and every transaction
Open ↗Card priorityChoose a card for each purchase type
Open ↗Review a purchasePop-up from any transaction or from Home
Open ↗RewardsRule references and estimated progress
Open ↗Archived visual studies · not chosen
Waymark · editorial directionRefined phone preview with softer reward progress
Open ↗Editorial visual systemColour, typography and component principles
Open ↗Earlier Waymark studyPrevious visual treatment
Open ↗Waymark visual systemColor, type and component idea
Open ↗Earlier visual directionsThree previous concepts for comparison
Open ↗v0.17 alignment draft. Static examples: Save category navigates to an illustrated result, not a persisted change. Earlier history navigation remains illustrative.