BudgetZen

BudgetZen mockup preview
Click to expand

Calm, encouraging, goal-oriented -- your money, your peace of mind.

Primary#10B981
Secondary#38BDF8
Tertiary#A8A29E
Neutral#78716C
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayManrope · 36px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineManrope · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadManrope · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeNunito · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyNunito · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallNunito · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionNunito · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineManrope · 11px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeSource Code Pro · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

Calm, encouraging, goal-oriented -- your money, your peace of mind.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ChipStatus Chip - On TrackStatus Chip - At RiskStatus Chip - Over Budget

Lists

Default Item

Checkboxes

Default

Radio Buttons

Default

Selected

Tooltips

Default

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

Use progress bars and visual milestones to celebrate savings goals and budget targets.
Use encouraging, supportive language -- 'Great progress!' instead of 'You spent too much.'
Highlight goal milestones (25%, 50%, 75%, 100%) with subtle animations or confetti moments.
Use soft, rounded shapes and generous whitespace to maintain a stress-free atmosphere.
Provide positive framing: 'You have $200 left this month' over 'You spent $800.'
Use the Sky secondary color for tips and educational content to differentiate from action items.

Don't

Use guilt-inducing patterns like red-heavy dashboards or alarming iconography for minor overspending.
Overwhelm users with too many numbers at once; progressive disclosure keeps it calm.
Auto-expand expense categories; let users drill in at their own pace.
Hide essential information behind multiple taps; budgets and balances should be one glance away.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.4 KB
Downloads 0
clean finance fintech mobile-app warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/budgetzen and implement it in my code

Don't have the MCP? Install it here