← All mockups

Design system · v0.16

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 eligible)Sep85%Selected month (90% bonus eligible)S$2,650Oct90%Current month with alerts awaiting check (79% bonus eligible)Nov79%so far
Bonus eligibleNot eligibleAwaiting check
Bonus eligibleBlue, bottom of the bar
Not eligibleAmber, stacked above
Awaiting checkGrey, current period only
Selected periodOthers fade; total shown
% under each barShare that earned the bonus
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 eligible
− 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$0cap reached · switch cards
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.

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.