Design system · v0.1
Quiet confidence.
Restrained editorial type, warm surfaces, and one clear action at a time. Designed for trust and small-screen clarity.
Color
Forest
#3356b8
#3356b8
Citrus
#e8efff
#e8efff
Paper
#ffffff
#ffffff
Ink
#202735
#202735
Notice
#f8eccc
#f8eccc
Type
Newsreader · display
A clearer way to see your spending.
DM Sans · interface
Specific labels, legible numbers, and plain language make financial details easier to understand.
Components and states
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.
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.