← All mockups

Design system · v0.17

Quiet confidence.

One typeface, one blue, white surfaces and one clear action at a time. Designed for trust and small-screen clarity.

Color

Blue
#3356b8
Blue tint
#e8efff
Paper
#ffffff
Ink
#202735
Notice
#f8eccc

Type

DM Sans · one typeface
A clearer way to see your spending.

Every screen uses DM Sans only. Hierarchy comes from size and weight, not from mixing fonts.

S$1,284.60Figure · 600 · tabular
Page titleHeading · 600
Card nameLabel · 700
Plain language explains each number.Body · 400
Section labelCaption · 700 caps

Components and states

Primary actionSecondary actionQuiet actionConnectedNeeds reviewFailed

A bank can offer many cards with different rules.

Information state: totals are estimates from alerts received.
Review state: this alert is excluded until its card is confirmed.

History chart

0S$1kS$2kS$3kEligibleClosed month (85% bonus covered)Sep85%Selected month (90% bonus covered)S$2,650Oct90%Current month with alerts awaiting check (79% bonus covered)Nov79%so far
Bonus coveredNo bonus portionAwaiting check
Bonus coveredBlue, bottom of the bar
No bonus portionAmber, stacked above
Awaiting checkGrey, any period until resolved
Selected periodOthers fade; total shown
% under each barCovered amount / captured purchases
Every barOpens that period

One measure per chart. Rewards stay as numbers in the list, not a second scale. The list below each chart is the table view.

Card image and MCC

Thumbnail beside every card name

Full image in the card header; 38px thumbnail in lists. The images here are illustrations, not bank artwork.

Cold Storage2 Nov · GroceriesMCC 5411Bonus covered
− S$442.10
Subscription1 Nov · StreamingMCC 4899No bonus
− S$49.00
NTUC Income1 NovMCC unknownReward unclear
− S$98.00

Home card: amount left

Room leftNormal stateS$380left before cap
SpentS$1,000Bonus spendS$620 / S$1,000Earned840 miles
Cap used upShown in red at S$0 or belowS$0this category cap reached
SpentS$1,720Bonus spendS$1,000 / S$1,000Earned2,000 miles
Over the capNegative amount, red−S$85over cap · no extra bonus
SpentS$1,240Bonus spendS$1,085 / S$1,000Earned2,000 miles

Red always comes with words (“cap reached”, “over cap”), never colour alone. A minimum-spend tier counts down in blue; reaching it is good news, not red.

Review pop-up

Tapping any purchase opens this sheet: from the bottom on phones, centred on wider screens. Purchases that need attention carry an amber “Review” tag; Home links to the same sheets.

Closed-period uncertainty

October · 90% bonus-covered

S$50 reward unclear remains grey after the month ends. Spend is S$2,650; the month ending does not confirm rewards. View October and revision reason →

Rule states · PRD v1.1

Blue = bonus-covered amount; amber = base-only, excluded or block remainder; grey = unclear or conditional. A transaction may contain multiple portions. Minimum qualifying spend stays separate.

Open all rule-state examples

Includes minimum + caps, exhausted category with another available, shared limits, S$5 blocks, partly covered purchase, quarterly spend/count and missing payment/account evidence.

Layout

8px spacing rhythm; 44px minimum touch targets; 12px corner radius for controls and 19px for content panels. Desktop uses a quiet side rail. Mobile keeps navigation horizontal and the main content in one column.