Wealth CleverProduct design system
Foundations & components
A calmer way to see it all.
A compact reference for the color, type, controls and account patterns used throughout Wealth Clever. The sample account below is illustrative only.
Color tokens
Primary
Background
Card
Muted
Border
Destructive
Type scale
Page title · 30 px
Section title · 20 px
Body emphasis · 16 px
Body copy · 14 px
Labels and supporting text · 12 px
Buttons & states
Form fields
Enter the date this balance was last checked.
Please enter a valid amount.
Account card
Savings
Rainy day savings
€0.00
Balance date: illustrative
CheckingSavingsCredit cardInvestmentCash
Saved successfully
Clear, brief feedback after an account is saved.
Private by design
Direct language. No claims of automatic syncing.
Responsive behavior & accessibility
- Account cards flow from one column on narrow screens to two and three columns as space allows.
- Navigation collapses to a horizontal row on small browser widths.
- Inputs and buttons keep generous touch targets, visible focus rings and persistent labels.
- Balances use tabular figures and remain separate by currency: EUR, USD, BRL and GBP.