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
#174e3c
#174e3c
Citrus
#d8e79c
#d8e79c
Paper
#f7f7f2
#f7f7f2
Ink
#1b2924
#1b2924
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.