Ribbon design system · v1
Foundations for the mobile redesign. Teal stays the brand; mint, coral and amber do the signalling. Numbers are the hero. Everything sits on a 4/8 grid with soft 20–24 radius cards. Open the prototype →
Colour · light
{{ c.name }}
{{ c.hex }}
Colour · dark
{{ c.name }}
{{ c.hex }}
Categories · 8 hues, same colour everywhere
{{ c.name }}
Type · DM Sans, tabular figures
Hero 44/700/-1.5£1,612.86
Title 34/700/-0.8Money tools
Heading 20/700Friday, 10 Oct
Section 17/700Recent
Body 15/600 · 15/400Tesco Express · You've spent £412.80 this month
Caption 13 · 12Groceries · Today · 12 days left
Label 11/700/capsStudent
Spacing · 4/8 grid
{{ s.n }}
Radius & elevation
12 chip
20 card
24 sheet
pill
Components
Buttons & pills
Primary · Continue
Secondary
↑ Pay
↓ Request
+ Add
↑ Pay
↓ Request
+ Add
Best rate
Fastest
Lowest fee
Inputs & keypad
Postcode
WC1E 6BT
UPI ID
deepa@okaxis.
That doesn't look like a UPI ID. Try name@bank.
{{ d.v }}
{{ k }}
Wallet card · transaction row
GBP
Main · 60-84-12
£1,284.40
+Open
T
Tesco Express
Groceries · Today+55p1.2 kg
-£12.45
PN
Priya Nair
Transfers · Yesterday
+£18.50
Progress · budget states
58%
Groceries64%
Transport80% · amber
Eating out100% · over
Status tags
Paid
Pending
Opened
Declined
Expired
Empty · loading · error
Nothing here yet
Spend with your card to see insights.
!We couldn't fetch quotes. Check your connection and try again.
Bottom sheet · tab bar
Rate held for 0:27
£1 = ₹105.42 · fee £0 · ₹52,710 arrives today
{{ t.label }}