01
Brand Direction
Steward should feel like a modern classic: refined, trustworthy, and distinctive. Premium is quiet.
Personality Attributes
Smart
Calm
Premium
Helpful
Modern
Trustworthy
Mature
Elegant
Three Pillars
Steward is built around three core pillars. Stuart sits between them as the AI layer that explains, recommends, and helps the user act.
Spend
What can I safely spend right now?
Earn
What income is arriving, and when?
Tax
What should I reserve and deduct?
Design Principles
1
Calm over busy — Whitespace is a feature. Never crowded or overloaded.
2
Hierarchy through restraint — Typography and spacing guide attention. No decorative clutter.
3
Numbers first — Financial values are the interface. The most important number is the most dominant.
4
Card containment — Information lives in clear, well-spaced cards with consistent padding.
5
Meaningful emphasis — Emphasis only where it has functional meaning: live states, warnings, actions.
6
Stuart has personality — Warm and memorable, never childish or noisy.
7
Zero chrome waste — No unnecessary borders, dividers, icons, or visual noise.
8
Motion should feel native — Smooth, quiet, purposeful transitions.
9
Premium is quiet — Expensive because calm, polished, and precise.
02
Color System
A restrained palette rooted in deep forest greens and warm golds, designed for financial clarity and premium feel.
Brand Colors
Primary
#1B3A2A
Primary Light
#2D5A3D
Accent / Gold
#C4975A
Accent Light
#D4AD74
Mid Emerald
#3D8B6A
Semantic Colors
Success
#2E7D4F
Warning
#D4920A
Danger
#C4453A
Info
#3A6B8C
Light Mode Surfaces
Background
#FAFAF8
Surface
#FFFFFF
Border
#F0EFEC
Text Primary
#1A1A18
Text Secondary
#6B6B65
Text Tertiary
#9C9C95
Dark Mode Surfaces
Background
#0C1210
Surface
#152420
Elevated
#1C2E28
Border
#243830
Text Primary
#E8F0EB
Text Secondary
#8A9E93
Text Tertiary
#5A6E62
03
Typography
A refined type system pairing a classic serif display face with a clean geometric sans for UI.
Display — Instrument Serif
Good morning, Sarah
Safe to Spend
Body — DM Sans
Your paycheck of $4,200 was deposited. After bills and reserves, you have $2,847 available to spend through April 14.
Monospace — JetBrains Mono
$2,847.32 +$142.00 -$67.50 Q2 EST: $3,420
Type Scale
| Token | Size | Weight | Usage |
|---|---|---|---|
| hero-xl | 3.2rem / 51.2px | 700 | Safe to Spend hero number |
| hero-lg | 2rem / 32px | 700 | Secondary hero amounts |
| hero-md | 1.5rem / 24px | 700 | Card hero numbers |
| display | 1.6rem / 25.6px | 400 (serif) | Screen titles, greetings |
| title | 1rem / 16px | 600 | Card titles, section headers |
| body | 0.85rem / 13.6px | 400-500 | Primary content, merchants |
| caption | 0.72rem / 11.5px | 400-600 | Labels, badges, timestamps |
| micro | 0.65rem / 10.4px | 600 | Badges, section overlines |
03b
Icon System — Style Comparison
Five icon style candidates rendered at app scale. Each row shows the same 8 category icons so visual weight, personality, and legibility differences are immediately apparent.
Style A Current
Style A — Feather
Clean & Minimal — what the app currently ships
Source: feathericons.com · 1.5px stroke, round caps, no fill
Style B
Style B — Phosphor Regular
Warm & Friendly — more character while still clean
Source: phosphoricons.com · 1.5px stroke, round caps, softer curves, more personality
Style C
Style C — Lucide
Consistent & Bold — fork of Feather with better consistency
Source: lucide.dev · 1.75px stroke, round caps, strict 24px grid alignment
Style D
Style D — Tabler
Geometric & Precise — architectural feel
Source: tabler.io/icons · 1.5px stroke, square caps, miter joins, geometric construction
Style E Recommended
Style E — Custom Duotone
Premium Duotone — adds subtle depth, most luxury feel
Source: custom (Feather base + 8% fill) · 1.5px stroke, round caps, 0.08 opacity fill of stroke color
Money Icon Variations
Five approaches to representing money/currency. Choose one as the primary financial icon throughout the app.
Money Icon Candidates
A. Line Dollar
B. Circle Dollar
C. Wallet
D. Coins
E. Banknote
04
Spacing & Layout
A consistent 4px base grid with generous spacing that makes the app feel premium and breathable.
Spacing Scale
xs4px
sm8px
md16px
lg24px
xl32px
2xl48px
3xl64px
Layout Tokens
| Token | Value | Usage |
|---|---|---|
| screen-padding | 20px | Horizontal screen edge padding |
| card-padding | 16px-24px | Internal card padding |
| card-gap | 12px-16px | Vertical gap between cards |
| section-gap | 24px | Gap between screen sections |
| radius-sm | 6px | Small controls, segments |
| radius-btn | 12px | Buttons (softer, modern feel) |
| radius-md | 10px | Inputs, icon containers |
| radius-lg | 16px | Cards, sheets |
| radius-xl | 24px | Hero containers |
| radius-pill | 100px | Pills, chips, toggles |
Elevation System
| Level | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| base | No shadow | No shadow | Background surfaces |
| card | 0 1px 2px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.02) | 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2) | Content cards |
| sheet | 0 -4px 24px rgba(0,0,0,0.08) | 0 -4px 24px rgba(0,0,0,0.3) | Bottom sheets, modals |
| overlay | 0 8px 40px rgba(0,0,0,0.12) | 0 8px 40px rgba(0,0,0,0.4) | Dialogs, menus |
05
Buttons
Consistent, clear button styles for primary actions, secondary options, and destructive operations.
Variants
Sizes
Pill Variant
06
Badges & Pills
Semantic indicators for status, categories, confidence levels, and financial states.
Status Badges
● Paid
● Pending
● Overdue
● Scheduled
● Draft
Financial Badges
Tax Deductible
Recurring
Review
Estimated
Confidence Badges
● 95% Confident
● 72% Confident
07
Cards & Surfaces
Contained, well-spaced information blocks that form the primary building blocks of every screen.
Stat Card
Safe to Spend
$2,847.32
Through April 14
Insight Card (Stuart)
S
Your dining spend is up 23% this pay cycle. Want me to suggest a weekly dining budget?
Goal Card
Emergency Fund
$8,400 / $10,000
84% — Est. completion: June 2026
Transaction Row
Starbucks
Food & Drink
-$6.45
Today
Tax Deduction Card
Office Supplies
$1,247.00
IRS Category 27a · 14 transactions
Chart Card
Monthly Spending
Nov
Dec
Jan
Feb
Mar
Apr
08
Inputs & Controls
Clean, accessible form elements designed for financial data entry.
Text Input
Category Name
Amount
Controls
Tax Deductible
Recurring
Pay Frequency
09
Alerts & Notifications
In-app banners and push notification previews for financial events and system states.
In-App Alert Banners
10
Onboarding — Welcome
First impression. Brand introduction with Stuart and a clear call to action.
Light Mode
Meet Steward
Your personal financial operating system. Budget by paycheck, track tax deductions year-round, and let Stuart guide your spending.
Already have an account? Sign in
Dark Mode
Meet Steward
Your personal financial operating system. Budget by paycheck, track tax deductions year-round, and let Stuart guide your spending.
Already have an account? Sign in
1
Brand icon uses the Instrument Serif "S" as a strong identity mark.
2
Copy focuses on the three pillars: budgeting, tax tracking, and AI guidance.
3
Dark mode swaps primary green CTA for warm gold accent to maintain contrast hierarchy.
11
Onboarding — Value Proposition
Three-panel carousel highlighting the core pillars with concise, benefit-driven copy.
Light Mode
Know What You
Can Spend
Can Spend
Steward calculates your safe-to-spend number each pay cycle, after bills, reserves, and tax set-asides. No guesswork.
Dark Mode
Tax Tracking,
Built In
Built In
Stuart categorizes deductible expenses automatically and estimates your quarterly payments. Filing season becomes simple.
12
Onboarding — Bank Connection
Plaid integration with trust cues, popular bank logos, and a skip option.
Light Mode
Connect Your Bank
Steward uses Plaid to securely read your transactions. We never store your bank credentials.
Chase
BofA
Wells
+
Skip for now
256-bit encryption · Read-only access
Dark Mode
Connect Your Bank
Steward uses Plaid to securely read your transactions. We never store your bank credentials.
Chase
BofA
Wells
+
Skip for now
256-bit encryption · Read-only access
13
Onboarding — Pay Cycle & Self-Employment
Quick configuration of pay frequency and Schedule C eligibility.
Light — Pay Cycle
Step 4 of 7
Set Up Your Pay Cycle
How often do you get paid?
Weekly
Bi-weekly
Monthly
Next payday
April 11, 2026
Expected take-home amount
$4,200.00
Dark — Self-Employment
Step 5 of 7
Are You Self-Employed?
I file Schedule C
Steward will track your deductible business expenses and estimate quarterly tax payments automatically.
S
This is where Steward really shines. I'll catch deductible expenses as they happen, so you never miss a write-off.
14
Onboarding — Safe to Spend Reveal
The first payoff moment. Show the calculated safe-to-spend number with Stuart's explanation.
Light Mode
Your Safe to Spend
$2,847
Through April 14, 2026
S
I've set aside $1,050 for bills and $303 for your estimated tax. The rest is yours to spend freely this pay cycle.
Dark Mode
Your Safe to Spend
$2,847
Through April 14, 2026
S
I've set aside $1,050 for bills and $303 for your estimated tax. The rest is yours to spend freely this pay cycle.
15
Home / Dashboard
The most important screen. Answers: "What can I do right now?" A lighter, more breathable command center with floating safe-to-spend hero, borderless stats, and refined Stuart insight.
Light Mode
Good morning,
Sarah
Safe to Spend
$2,847
Through April 14 · 10 days left
$285/day for 10d
Income
$4,200
Spent
$1,353
Bills
$1,050
Savings Target
Projected Savings
$420
projected this cycle
Feb
Mar
Apr
May
S
Your dining spend is tracking 23% higher this cycle. Consider a $150 weekly cap to stay on target.
Recent Transactions
Starbucks
Food & Drink
-$6.45
Amazon
Shopping · Tax Ded.
-$47.82
Client Payment
Income
+$2,100
Dark Mode
Good morning,
Sarah
Safe to Spend
$2,847
Through April 14 · 10 days left
$285/day for 10d
Income
$4,200
Spent
$1,353
Bills
$1,050
Savings Target
Projected Savings
$420
projected this cycle
Feb
Mar
Apr
May
S
Your dining spend is tracking 23% higher this cycle. Consider a $150 weekly cap to stay on target.
Recent Transactions
Starbucks
Food & Drink
-$6.45
Amazon
Shopping · Tax Ded.
-$47.82
Client Payment
Income
+$2,100
1
Floating Safe to Spend hero — no card wrapper. The hero number floats directly on the screen background for a lighter, more premium feel. Increased to 3.2rem.
2
Borderless three-stat row — Income, Spent, and Bills separated by thin dividers instead of individual card wrappers. Reduces visual weight.
3
Simplified Savings Target — projected amount and mini chart without decorative badges. Clean and data-focused.
4
Stuart insight with accent border — a 3px left border in mid-emerald replaces the full background fill, making the card lighter while preserving Stuart's identity.
5
More breathing room — increased spacing between major dashboard sections with var(--space-lg) margins.
6
Center FAB uses mid-emerald in light mode for a softer accent than dark pine green.
7
Tax deductible badge appears inline on qualifying transactions, reinforcing the tax pillar.
16
Budget
Two views: Categories (budget utilization) and Transactions (detailed activity). A working finance workspace.
Light — Categories
Budget
Categories
Transactions
Remaining this cycle
$2,847
Housing
$1,200 / $1,200
Food & Drink
$287 / $450
Transportation
$95 / $300
Business
$412 / $600
Entertainment
$67 / $200
Dark — Transactions
Budget
Categories
Transactions
Search transactions...
All
Deductible
Recurring
Pending
Today
Starbucks
Food & Drink
-$6.45
Shell Gas
Transportation · Tax Ded.
-$52.30
Yesterday
Amazon
Shopping · Tax Ded.
-$47.82
Client Payment
Income
+$2,100
Rent
Housing · Recurring
-$1,200
17
Transaction Detail Sheet
Bottom-sheet modal for quick transaction review, categorization, and tax deduction management.
Light Mode
Amazon
-$47.82
March 31, 2026
AI Category
Office Supplies
Tax Deductible
IRS Category
27a - Supplies ›
Recurring
Notes
Add note ›
Receipt
Attach ›
Dark Mode
Amazon
-$47.82
March 31, 2026
AI Category
Office Supplies
Tax Deductible
IRS Category
27a - Supplies ›
Recurring
Notes
Add note ›
Receipt
Attach ›
18
Tax Dashboard
A dedicated tax control center. YTD deductions, quarterly estimates, IRS category breakdown, and review queue.
Light Mode
Tax Center
YTD Deductions
$14,872
127 transactions · Jan 1 - Today
Quarterly Estimates
Q1
$3,420
✓ Paid
Q2
$3,680
Due Jun 15
Q3
$3,500
Est.
Q4
$3,500
Est.
IRS Categories
Office Supplies (27a)
$4,247
Vehicle (9)
$3,892
Utilities (25)
$2,640
Professional Services (17)
$2,180
Other (27b)
$1,913
S
3 transactions need review for tax categorization. Want to review them now?
Dark Mode
Tax Center
YTD Deductions
$14,872
127 transactions · Jan 1 - Today
Quarterly Estimates
Q1
$3,420
✓ Paid
Q2
$3,680
Due Jun 15
Q3
$3,500
Est.
Q4
$3,500
Est.
IRS Categories
Office Supplies (27a)
$4,247
Vehicle (9)
$3,892
Utilities (25)
$2,640
Professional Services (17)
$2,180
Other (27b)
$1,913
S
3 transactions need review for tax categorization. Want to review them now?
19
Stuart / AI Chat
The active AI financial adviser. Warm, professional, and helpful. Premium assistant, not novelty chatbot.
Light Mode
S
Stuart
Your financial adviser
Can I afford...?
Tax summary
Budget check
Can I afford to spend $500 on a new camera lens this month?
S
Let me check your numbers.
You have $2,847 safe to spend through April 14. A $500 purchase would leave you with $2,347, which keeps you above your $1,500 comfort threshold.
Also, camera equipment may qualify as a business deduction under IRS Category 13 if used for work.
✓ You can afford it. Would you like me to pre-flag it as deductible?
Yes, flag it please.
S
Done. When the charge comes through, I'll auto-categorize it as Equipment (13) and mark it deductible.
Dark Mode
S
Stuart
Your financial adviser
Can I afford...?
Tax summary
Budget check
Can I afford to spend $500 on a new camera lens this month?
S
Let me check your numbers.
You have $2,847 safe to spend through April 14. A $500 purchase would leave you with $2,347, which keeps you above your $1,500 comfort threshold.
Also, camera equipment may qualify as a business deduction under IRS Category 13 if used for work.
✓ You can afford it. Would you like me to pre-flag it as deductible?
Yes, flag it please.
S
Done. When the charge comes through, I'll auto-categorize it as Equipment (13) and mark it deductible.
20
Profile & Settings
Structured, calm, and trustworthy. Settings, linked accounts, tax access, and preferences.
Light Mode
Financial
Tax Dashboard
›
Linked Accounts
›
Pay Cycle
›
Preferences
Appearance
›
Stuart Tone
Professional ›
Notifications
›
Data
Export Data
›
About Steward
›
Sign Out
›
Dark Mode
Financial
Tax Dashboard
›
Linked Accounts
›
Pay Cycle
›
Preferences
Appearance
›
Stuart Tone
Professional ›
Notifications
›
Data
Export Data
›
About Steward
›
Sign Out
›
21
Goals
Goal tracking with progress rings, timelines, and Stuart recommendations.
Light — Goal Detail
‹ Back
Emergency Fund
84%
Complete
$8,400
of $10,000 goal
S
At your current pace of $400/month, you'll hit your goal by June 2026. Bumping to $500/month would get you there by May.
Recent Contributions
April 1, 2026
Auto-transfer
+$400
March 1, 2026
Auto-transfer
+$400
February 1, 2026
Auto-transfer
+$400
Dark — Goal Detail
‹ Back
Emergency Fund
84%
Complete
$8,400
of $10,000 goal
S
At your current pace of $400/month, you'll hit your goal by June 2026. Bumping to $500/month would get you there by May.
Recent Contributions
April 1, 2026
Auto-transfer
+$400
March 1, 2026
Auto-transfer
+$400
February 1, 2026
Auto-transfer
+$400
23
Marketing Homepage
The public-facing landing page. Communicates Steward's value proposition, features, trust signals, and drives signups. Inspired by Mercury's editorial restraint and Monarch's warm, confident voice.
Light Mode
stewardapp.com
S
Steward
Features
Pricing
About
Support
Your finances, wisely stewarded
Know exactly what
you can spend
Smart budgeting, AI-powered tax tracking, and a personal financial adviser — built for self-employed professionals who want clarity, not clutter.
Everything you need
Three pillars of financial clarity
Safe to Spend
Know your true spending power every day. Income minus bills minus savings — one number that keeps you on track.
Tax Engine
Schedule C deductions tracked automatically. AI categorizes expenses and maps them to IRS categories with confidence scoring.
Stuart AI Adviser
Ask anything about your finances. Stuart analyzes your data and gives proactive, personalized guidance — not generic tips.
Bank-level encryption
No ads, ever
Built for self-employed
Plaid-powered bank sync
Dark Mode
stewardapp.com
S
Steward
Features
Pricing
About
Support
Your finances, wisely stewarded
Know exactly what
you can spend
Smart budgeting, AI-powered tax tracking, and a personal financial adviser — built for self-employed professionals who want clarity, not clutter.
Everything you need
Three pillars of financial clarity
Safe to Spend
Know your true spending power every day. Income minus bills minus savings — one number that keeps you on track.
Tax Engine
Schedule C deductions tracked automatically. AI categorizes expenses and maps them to IRS categories with confidence scoring.
Stuart AI Adviser
Ask anything about your finances. Stuart analyzes your data and gives proactive, personalized guidance — not generic tips.
Bank-level encryption
No ads, ever
Built for self-employed
Plaid-powered bank sync
1
Hero section leads with the core value prop. "Know exactly what you can spend" is the tagline. Serif italic accent on "spend" draws the eye. Inspired by Mercury's editorial hero sizing.
2
Three pillars (Safe to Spend, Tax Engine, Stuart AI) map directly to Steward's product architecture. Icon + title + short copy per card. Inspired by Monarch's clean feature grid.
3
Trust bar reinforces security and no-ads positioning. Compact, understated — not screaming for attention. Inspired by Wealthfront's trust signals.
4
Navigation is minimal: Features, Pricing, About, Support. Two CTAs (Log in + Get Started). Sticky header with backdrop blur on scroll.
24
Pricing
Two tiers: Free and Pro. Clean comparison with the Pro plan highlighted. Inspired by Copilot's "honest and thoughtful pricing" and Monarch's straightforward layout.
Light Mode
stewardapp.com/pricing
S
Steward
FeaturesPricingAboutSupport
Pricing
Simple, transparent pricing
Start free. Upgrade when you need unlimited power. No ads, no data selling, no tricks.
Free
$0
Free forever
- 1 bank connection
- Safe to Spend dashboard
- 5 Stuart AI messages/month
- Basic budget tracking
- Manual transaction entry
Most popular
Pro
$9.99
per month · or $79.99/year (save 33%)
- Unlimited bank connections
- Full Safe to Spend + insights
- Unlimited Stuart AI adviser
- Tax deduction engine (Schedule C)
- Paycheck-based budgets
- Goal tracking & projections
- Receipt scanning
- Priority support
Dark Mode
stewardapp.com/pricing
S
Steward
FeaturesPricingAboutSupport
Pricing
Simple, transparent pricing
Start free. Upgrade when you need unlimited power. No ads, no data selling, no tricks.
Free
$0
Free forever
- 1 bank connection
- Safe to Spend dashboard
- 5 Stuart AI messages/month
- Basic budget tracking
- Manual transaction entry
Most popular
Pro
$9.99
per month · or $79.99/year (save 33%)
- Unlimited bank connections
- Full Safe to Spend + insights
- Unlimited Stuart AI adviser
- Tax deduction engine (Schedule C)
- Paycheck-based budgets
- Goal tracking & projections
- Receipt scanning
- Priority support
1
Two plans only — no decision fatigue. Free is generous enough to hook, Pro is comprehensive enough to justify the price.
2
Pro card highlighted with accent border, "Most popular" badge, and stronger CTA ("Start 7-Day Free Trial" vs "Get Started").
3
Monospace pricing (JetBrains Mono) signals financial precision. The yearly discount is called out inline.
25
Web Dashboard
The authenticated dashboard experience on desktop. Sidebar navigation, wider layout, same design tokens as mobile. Inspired by Mercury's clean dashboard and Linear's information density.
Light Mode
app.stewardapp.com/dashboard
Good morning,
Sarah
Safe to Spend
$2,847
$285/day for 10d
Through April 14 · 10 days left
Income
$4,200
Spent
$1,353
Bills
$1,050
Total Balance
$12,485
3 accounts linked
Chase Checking
$5,240
Chase Savings
$6,120
Visa Credit
-$875
Budget Snapshot
View all
Groceries$280 / $400
Dining$190 / $200
Transport$145 / $300
Software$320 / $250
Recent Transactions
View all
Starbucks
Food & Drink
-$6.45
Amazon
Shopping · Tax Ded.
-$47.82
Client Payment
Income
+$2,100
Adobe Creative
Software · Tax Ded.
-$54.99
1
Sidebar navigation with 7 items mirrors the mobile tab bar but takes advantage of desktop width. Active state uses mid-emerald highlight. Inspired by Mercury's sidebar.
2
2:1 top grid gives Safe to Spend hero prominence while showing Total Balance. Sub-stats (Income/Spent/Bills) sit below a thin divider inside the hero card.
3
1:1 bottom grid puts Budget Snapshot and Recent Transactions side by side. Color-coded progress bars (green/amber/red) provide instant budget health readout.
4
Tax Deductible badges appear inline on qualifying transactions, keeping the tax engine visible across the dashboard.
26
Web Transactions
Full transaction list with search, filters, and expanded detail. Takes advantage of desktop width for a table-like layout. Inspired by Monarch's transaction review system.
Light Mode
app.stewardapp.com/dashboard/transactions
Transactions
Search transactions...
All
Income
Expenses
Tax Deductible
Needs Review
1
5-column table layout takes advantage of desktop width: Merchant, Category, Date, Account, Amount. Compact rows for scanning. Inspired by Monarch's transaction list with "reviewed" system.
2
Filter pills (All, Income, Expenses, Tax Deductible, Needs Review) provide quick segmentation. Active filter uses the mid-emerald accent.
3
Inline "Tax" badges on qualifying transactions surface the tax engine without leaving the transaction view. Same badge as mobile but adapted for table density.
4
Search + Filters in the header provides quick access to finding specific transactions. Filters button opens an expanded panel (not shown).
32
Plaid Bank Linking Flow
3-step modal flow: search & select bank, enter credentials, choose accounts. Uses the Plaid Link SDK embedded in a bottom sheet. On success, accounts sync immediately via the plaid-exchange-token Edge Function.
Light Mode
‹ Settings
Link Bank Account
Select Accounts
✓
Checking ****3847
Available balance
$5,240
✓
Savings ****9201
Available balance
$6,120
✓
Credit Card ****4821
Current balance
-$875
✓
Account linked!
3 accounts from Wells Fargo are now syncing.
Dark Mode
‹ Settings
Link Bank Account
Select Accounts
✓
Checking ****3847
Available balance
$5,240
✓
Savings ****9201
Available balance
$6,120
✓
Credit Card ****4821
Current balance
-$875
✓
Account linked!
3 accounts from Wells Fargo are now syncing.
1
Plaid Link SDK — renders inside a native bottom sheet via
react-native-plaid-link-sdk. The bank list, credential entry, and account selection are all handled by Plaid's UI. We style the surrounding chrome to match Steward.2
Bank logos as colored circles — placeholder initials in brand colors. In production, Plaid provides institution logos automatically.
3
Account selection checkboxes — all accounts default to selected. User can deselect any they don't want to track. Balances shown immediately from Plaid's response.
4
Success state triggers sync — on "Continue," the app calls
plaid-exchange-token Edge Function, then plaid-sync-transactions to pull initial history. Never exposes access tokens to client.
33
MFA / Two-Factor Authentication
Verification screen for bank linking or Supabase auth. Clean, centered layout with 6-digit OTP input and biometric fallback.
Light Mode
Verify your identity
We sent a 6-digit code to
•••@gmail.com
•••@gmail.com
4
7
2
–
–
–
Didn't receive it? Resend code
or
Dark Mode
Verify your identity
We sent a 6-digit code to
•••@gmail.com
•••@gmail.com
4
7
2
–
–
–
Didn't receive it? Resend code
or
1
Individual digit boxes — each digit gets its own input cell. Filled cells use the emerald border, empty cells use the default border. Auto-advances focus on input.
2
Obfuscated email — only shows domain hint (•••@gmail.com) for security. For SMS MFA, shows last 4 digits of phone number instead.
3
Biometric fallback — Face ID / Touch ID option uses
expo-local-authentication. Skips the OTP flow entirely for a faster experience.
34
Balance Overview
Full-screen net worth view with 6-month trend chart and linked account list. Balances refresh via the plaid-get-balances Edge Function.
Light Mode
Balances
Total Net Worth
$12,485
▲ $340 this month
6-Month Trend
Nov
Dec
Jan
Feb
Mar
Apr
Linked Accounts
CH
Chase Checking
Synced 2 min ago
$5,240
CH
Chase Savings
Synced 2 min ago
$6,120
VI
Visa Credit Card
Synced 5 min ago
-$875
Dark Mode
Balances
Total Net Worth
$12,485
▲ $340 this month
6-Month Trend
Nov
Dec
Jan
Feb
Mar
Apr
Linked Accounts
CH
Chase Checking
Synced 2 min ago
$5,240
CH
Chase Savings
Synced 2 min ago
$6,120
VI
Visa Credit Card
Synced 5 min ago
-$875
1
Net worth = assets minus liabilities — credit card balances are subtracted. The hero number uses tabular-nums for stable alignment as values change.
2
6-month trend bars — current month highlighted in solid success green, previous months in muted tint. In production, uses actual historical balance snapshots stored nightly.
3
Last synced timestamps — shows how fresh each balance is. Tapping an account navigates to its detail view (e.g., Card Balance Detail for credit cards).
4
"Link new account" CTA — triggers the Plaid Link flow (Section 32). Ghost button keeps the visual weight low since most users already have accounts linked.
35
Card Balance Detail
Individual credit card view with card visual, statement info, and recent card-specific transactions. Encourages payoff behavior.
Light Mode
‹ Balances
Visa Credit Card
Statement Due
April 25, 2026
Minimum Payment
$25.00
17.5% of $5,000 credit limit used
Recent Card Activity
Chipotle
Food & Drink · Apr 9
-$12.40
Shell Gas
Transportation · Apr 8
-$48.30
Netflix
Entertainment · Apr 5
-$15.99
Target
Shopping · Apr 3
-$67.25
Dark Mode
‹ Balances
Visa Credit Card
Statement Due
April 25, 2026
Minimum Payment
$25.00
17.5% of $5,000 credit limit used
Recent Card Activity
Chipotle
Food & Drink · Apr 9
-$12.40
Shell Gas
Transportation · Apr 8
-$48.30
Netflix
Entertainment · Apr 5
-$15.99
Target
Shopping · Apr 3
-$67.25
1
Card visual — styled after a physical credit card with gradient, masked number, and balance/credit layout. Provides instant visual recognition of which card the user is viewing.
2
Credit utilization bar — shows percentage of limit used. Color shifts from green (<30%) to warning (<50%) to danger (>50%) based on utilization ratio.
3
Card-scoped transactions — only shows activity for this specific card, not all accounts. Filtered server-side by Plaid account ID.
4
"Pay Balance" CTA — deep links to the bank's payment portal or triggers an in-app payment flow in future versions. Positioned as a sticky primary action.
36
Goal Setup Walkthrough
Multi-step goal creation: name, amount, target date, icon, and suggested savings rate based on Safe to Spend. Preview shows projected timeline ring.
Light Mode
‹ Goals
Create New Goal
Step 1 of 2
Goal Name
Emergency Fund
Target Amount
$10,000
Target Date
December 2026
Choose an Icon
How much can you save per cycle?
$400
/paycheck
Based on your Safe to Spend of $2,847
Projected Timeline
0%
Reach goal by December 2026
9 months · 18 paychecks at $400
Dark Mode
‹ Goals
Create New Goal
Step 1 of 2
Goal Name
Emergency Fund
Target Amount
$10,000
Target Date
December 2026
Choose an Icon
How much can you save per cycle?
$400
/paycheck
Based on your Safe to Spend of $2,847
Projected Timeline
0%
Reach goal by December 2026
9 months · 18 paychecks at $400
1
Smart savings suggestion — the suggested $400/paycheck is calculated from the user's current Safe to Spend, recommending roughly 15% of available funds. Adjustable with a slider in the full implementation.
2
Icon selector grid — emoji-based icons for quick personalization. The selected icon (money bag) gets an emerald highlight border. Keeps the setup flow fast and playful.
3
Projected timeline ring — starts at 0% and previews when the goal will be reached. Updates dynamically as the user adjusts the savings amount or target date.
4
Paycheck-aligned savings — goals use the same paycheck cycle as budgets, not arbitrary monthly amounts. This ties into Steward's core paycheck-based budgeting philosophy.
37
Category Review
AI categorization review screen. Transactions flagged for confirmation show suggested categories with confidence scores. Approve individually or in bulk.
Light Mode
Review Categories
AI-suggested categorizations
8 to review
Office Depot
Apr 8
-$127.50
→ Office Supplies
92%
Tax Ded.
Blue Bottle Coffee
Apr 7
-$8.75
→ Dining
97%
Adobe Inc.
Apr 6
-$54.99
→ Software
74%
Tax Ded.
Trader Joe's
Apr 5
-$63.22
→ Groceries
99%
Shell Gas Station
Apr 4
-$52.40
→ Gas & Transport
95%
Dark Mode
Review Categories
AI-suggested categorizations
8 to review
Office Depot
Apr 8
-$127.50
→ Office Supplies
92%
Tax Ded.
Blue Bottle Coffee
Apr 7
-$8.75
→ Dining
97%
Adobe Inc.
Apr 6
-$54.99
→ Software
74%
Tax Ded.
Trader Joe's
Apr 5
-$63.22
→ Groceries
99%
Shell Gas Station
Apr 4
-$52.40
→ Gas & Transport
95%
1
Confidence percentage badges -- color-coded by threshold: green (90%+), amber (70-89%), red (<70%). Higher confidence means less need for manual review.
2
Tax deductible flagging -- green "Tax Ded." badge appears inline on transactions the AI believes qualify. Users confirm or reject during review.
3
Approve/reject per row -- circular checkmark and X buttons keep interaction tight. Approve All at bottom handles bulk confirmation for high-confidence batches.
38
Budget Detailed View
Expanded budget screen with period navigation, total summary, and category-level ring progress indicators. Each category expands to reveal individual transactions.
Light Mode
Budget
Apr 1 – Apr 14
Budget Overview
Budgeted
$2,450
Spent
$1,353
Remaining
$1,097
Categories
Groceries
$280 / $400
›
Dining
$190 / $200
Near limit
›
Gas
$85 / $150
›
Software
$320 / $250
$70 over budget!
›
Housing
$478 / $478
Exact — paid
›
Dark Mode
Budget
Apr 1 – Apr 14
Budget Overview
Budgeted
$2,450
Spent
$1,353
Remaining
$1,097
Categories
Groceries
$280 / $400
›
Dining
$190 / $200
Near limit
›
Gas
$85 / $150
›
Software
$320 / $250
$70 over budget!
›
Housing
$478 / $478
Exact — paid
›
1
Ring progress indicators -- SVG-based circular progress per category gives a quick at-a-glance health check. Color shifts from green to amber to red as spend approaches or exceeds the budget.
2
Over-budget accent border -- categories exceeding their budget get a 3px red left border on the card, matching the Stuart insight pattern but signaling danger.
3
Period navigation -- arrow buttons align to paycheck-based budget cycles, not calendar months. Reinforces the core "paycheck-based budgets" concept.
4
Expandable rows -- chevron on each category card indicates drill-down to see individual transactions within that budget category.
39
Stuart AI Expanded
Full conversation view with rich analysis cards, multi-turn dialogue, and contextual prompt suggestions. Stuart is a premium financial adviser, not a novelty chatbot.
Light Mode
S
Stuart
Your financial adviser
Can I afford a new laptop this month?
S
Let me look at your numbers.
Affordability Analysis
Safe to Spend
$2,847
Remaining Budget
$1,097
Laptop Cost
-$1,200
After Purchase
$1,647
Based on your Safe to Spend of $2,847 and $1,097 remaining budget, a $1,200 laptop would leave you tight. I'd recommend waiting until next pay cycle.
What if I spread it over 2 cycles?
S
That's smarter. $600/cycle would keep you above your $500 Safe to Spend minimum. Here's the breakdown:
Cycle 1
$2,247
remaining
Cycle 2
$2,647
projected
Tax summary
Budget advice
Spending trends
Dark Mode
S
Stuart
Your financial adviser
Can I afford a new laptop this month?
S
Let me look at your numbers.
Affordability Analysis
Safe to Spend
$2,847
Remaining Budget
$1,097
Laptop Cost
-$1,200
After Purchase
$1,647
Based on your Safe to Spend of $2,847 and $1,097 remaining budget, a $1,200 laptop would leave you tight. I'd recommend waiting until next pay cycle.
What if I spread it over 2 cycles?
S
That's smarter. $600/cycle would keep you above your $500 Safe to Spend minimum. Here's the breakdown:
Cycle 1
$2,247
remaining
Cycle 2
$2,647
projected
Tax summary
Budget advice
Spending trends
1
Embedded analysis cards -- Stuart renders structured data (Safe to Spend, budget remaining, projected impact) inside the chat bubble rather than just text. This makes financial answers scannable.
2
Multi-turn conversation -- Stuart handles follow-up questions with context, showing the split-payment scenario with cycle-by-cycle projections in mini cards.
3
Contextual prompt chips -- appear at the bottom of the conversation, updating based on recent topics. Quick access to common financial queries.
40
Recurring Transactions
Subscription and bill tracker with two views: all recurring charges and upcoming due dates. Color-coded by category type for quick scanning.
Light Mode
Recurring
Monthly Total
$216.96/mo
Netflix
$15.99
Monthly · Entertainment
Next: Apr 18
Spotify
$10.99
Monthly · Entertainment
Next: Apr 22
Adobe Creative
$54.99
Monthly · Software
Next: Apr 15
Equinox Gym
$49.99
Monthly · Health
Next: May 1
T-Mobile
$85.00
Monthly · Utilities
Next: Apr 25
Dark Mode
Recurring
Monthly Total
$216.96/mo
Netflix
$15.99
Monthly · Entertainment
Next: Apr 18
Spotify
$10.99
Monthly · Entertainment
Next: Apr 22
Adobe Creative
$54.99
Monthly · Software
Next: Apr 15
Equinox Gym
$49.99
Monthly · Health
Next: May 1
T-Mobile
$85.00
Monthly · Utilities
Next: Apr 25
1
Color-coded category icons -- entertainment (purple), software (blue), health (green), utilities (gray). Instant visual grouping without explicit category headers.
2
Monthly total callout -- prominent total at the top answers "how much do my subscriptions cost?" immediately. The /mo suffix reinforces frequency.
3
Segment control tabs -- "All Recurring" shows the full list; "Upcoming" filters to next 7 days with due-date urgency. Matches the existing segment-control pattern from the Budget screen.
41
Spending Analytics
Spending insights with donut chart breakdown, category trends, and month-over-month comparisons. Data-rich but visually calm.
Light Mode
Spending
Total Spent
$1,353
of $4,200 income (32%)
5 categories
Housing 35%
Software 24%
Groceries 21%
Dining 14%
Gas 6%
Trends
Dining
↑ 23%
Groceries
↓ 8%
Transport
→ flat
vs. Last Month
$1,353
This mo.
$1,487
Last mo.
↓ $134 less this month
Dark Mode
Spending
Total Spent
$1,353
of $4,200 income (32%)
5 categories
Housing 35%
Software 24%
Groceries 21%
Dining 14%
Gas 6%
Trends
Dining
↑ 23%
Groceries
↓ 8%
Transport
→ flat
vs. Last Month
$1,353
This mo.
$1,487
Last mo.
↓ $134 less this month
1
SVG donut chart -- pure CSS/SVG ring chart with colored segments per category. No JavaScript charting library needed. Center shows category count.
2
Trend arrows -- red up arrow for increased spend, green down arrow for decreased, gray right arrow for flat. Simple directional indicators beat complex line charts on mobile.
3
Month-over-month comparison -- side-by-side bars with a positive/negative delta callout. Green "less this month" reinforces good behavior.
4
Income percentage -- "$1,353 of $4,200 income (32%)" anchors spending to earnings, tying back to the Safe to Spend philosophy.
42
Linked Accounts Management
Account management hub for connected bank institutions. Status indicators, reconnection flows, and Plaid-powered security assurance.
Light Mode
‹ Settings
Linked Accounts
3 accounts connected across 3 institutions
BofA
Bank of America
1 account · Synced 1 hour ago
Connected
›
Powered by Plaid
Your credentials are never stored on our servers
Dark Mode
‹ Settings
Linked Accounts
3 accounts connected across 3 institutions
BofA
Bank of America
1 account · Synced 1 hour ago
Connected
›
Powered by Plaid
Your credentials are never stored on our servers
1
Expandable institution rows — Chase shows expanded sub-accounts (checking + savings) with individual balances and last-sync timestamps. Rows collapse to save space.
2
Amber warning state for Visa — the card border, status badge, and inline reconnection CTA all use the warning color. The user never has to hunt for the problem.
3
Plaid trust footer — lock icon + "credentials never stored" reinforces security at the point of highest user anxiety (bank connections).
44
Notifications & Alerts Center
In-app activity feed. Color-coded left borders signal urgency. Filter tabs separate alerts, insights, and Stuart messages from the noise.
Light Mode
Activity
All
Alerts
Insights
Stuart
Swipe left to dismiss · Swipe right to mark read
Dark Mode
Activity
All
Alerts
Insights
Stuart
Swipe left to dismiss · Swipe right to mark read
1
Color-coded left borders — green for income, amber for budget warnings, blue for Stuart insights, red for connection errors. Severity is visible at a glance without reading.
2
Unread dot indicator — small filled circle on unread notifications. Read items fade to 75% opacity (55% in dark mode) for clear visual hierarchy.
3
Stuart attribution — AI-generated notifications show the Stuart avatar and name, distinguishing proactive insights from system alerts.
45
Demo Mode
The try-before-you-sign-up experience. Stuart Mouse's fictional data showcases the app's value without requiring any real financial information.
Light Mode
DEMO MODE
Using sample data — your info stays private
ℹ
Good morning,
Stuart
Safe to Spend
$1,247
Through April 14 · 10 days left
Income
$3,500
Spent
$1,253
Bills
$1,000
S
Your cheese spending is looking sharp this month! You might want to set a dairy budget.
Recent Transactions
Cheese Emporium
Food & Drink
-$24.99
Mouse Trap Co
Income
+$3,500
Tiny Furniture Store
Shopping
-$89.00
Whisker Gym
Health & Fitness
-$29.99
Ready to try with your real data?
Connect your bank and get personalized insights
Dark Mode
DEMO MODE
Using sample data — your info stays private
ℹ
Good morning,
Stuart
Safe to Spend
$1,247
Through April 14 · 10 days left
Income
$3,500
Spent
$1,253
Bills
$1,000
S
Your cheese spending is looking sharp this month! You might want to set a dairy budget.
Recent Transactions
Cheese Emporium
Food & Drink
-$24.99
Mouse Trap Co
Income
+$3,500
Tiny Furniture Store
Shopping
-$89.00
Whisker Gym
Health & Fitness
-$29.99
Ready to try with your real data?
Connect your bank and get personalized insights
1
Persistent demo banner — gold gradient banner is always visible and not dismissible. Users always know they are viewing sample data, never real finances.
2
Stuart Mouse persona — playful fictional data (Cheese Emporium, Mouse Trap Co, Whisker Gym) makes the demo memorable and clearly fictional. No risk of confusion with real merchants.
3
Full dashboard fidelity — demo mode renders the real dashboard layout, Stuart insights, and transaction feed. Users experience the actual product, not a simplified preview.
4
Conversion CTA — bottom card with "Create Account" button appears only in demo mode. Low-pressure, positioned after the user has already explored the value.
46
Employment Type Selector
Step 2 of onboarding. Determines income structure, tax treatment, and which deduction features to enable. Self-employed selection unlocks full Schedule C tracking.
Light Mode
Step 2 of 6
How do you earn income?
This helps us tailor your budget and tax features.
Self-employed / 1099
Freelancer, contractor, or business owner. Full tax deduction tracking enabled.
W-2 Employee
Traditional employment. We'll estimate your tax return.
Mixed
Both self-employed and W-2 income.
Other
Retired, investment income, or other sources.
Dark Mode
Step 2 of 6
How do you earn income?
This helps us tailor your budget and tax features.
Self-employed / 1099
Freelancer, contractor, or business owner. Full tax deduction tracking enabled.
W-2 Employee
Traditional employment. We'll estimate your tax return.
Mixed
Both self-employed and W-2 income.
Other
Retired, investment income, or other sources.
1
Radio-card pattern -- each option is a full-width tappable card with icon, title, and description. Selected state uses a left accent border and tinted background instead of a checkbox.
2
Self-employed selection enables Schedule C tracking -- this is the primary branching point. The choice propagates to budget rules, tax engine, and Stuart's advice tone.
3
Progress indicator -- step label + thin progress track at top. Uses mid-emerald in light mode and warm gold in dark mode, consistent with onboarding accent rules.
4
Style E duotone icons -- stroke outlines with fill-opacity 0.08 for the subtle filled interior, matching the blueprint icon convention.
47
AI Pay Cycle Detection
Stuart analyzes deposit history to detect pay frequency, amounts, and multiple income sources. Two states shown: loading (analysis in progress) and detected (results ready for confirmation).
Detected State
Light Mode
Step 3 of 6
S
I analyzed your deposit history
Biweekly deposits detected
~$2,100 every other Friday
Last 6 deposits matched this pattern
Income Sources
Income 1: ~$2,100 biweekly
Freelance Design
Income 2: ~$3,500 monthly
Consulting
Edit details
Dark Mode
Step 3 of 6
S
I analyzed your deposit history
Biweekly deposits detected
~$2,100 every other Friday
Last 6 deposits matched this pattern
Income Sources
Income 1: ~$2,100 biweekly
Freelance Design
Income 2: ~$3,500 monthly
Consulting
Edit details
Loading State
Light — Analyzing
Step 3 of 6
S
Stuart is analyzing your income patterns...
This usually takes a few seconds
Dark — Analyzing
Step 3 of 6
S
Stuart is analyzing your income patterns...
This usually takes a few seconds
1
Stuart-driven detection -- the AI avatar introduces results conversationally. The stuart-card bubble establishes trust before presenting data.
2
Editable income labels -- each detected income source has a mock-input field so users can name their income streams (e.g., "Freelance Design"). Labels persist into budget and tax views.
3
Skeleton loading state -- animated pulse bars fill the exact layout positions where real content will appear, preventing layout shift when results load in.
4
Confirm-first pattern -- the primary action is "This is correct" with a checkmark, optimizing for the happy path. "Edit details" is a secondary ghost link for edge cases.
48
AI Budget Builder with Slider
Stuart generates a personalized 50/30/20 budget from spending history. The savings strictness slider lets users trade discretionary spending for higher savings projections in real time.
Light Mode
Step 5 of 6
Your personalized budget
50/30/20
Based on your last 3 months of spending
Savings Strictness
More Freedom
More Savings
Projected monthly savings: $420
Budget Categories
Groceries
$600
Dining
$250
Transport
$150
Software
$200
Entertainment
$100
Personal
$50
Fine-tune categories
Dark Mode
Step 5 of 6
Your personalized budget
50/30/20
Based on your last 3 months of spending
Savings Strictness
More Freedom
More Savings
Projected monthly savings: $420
Budget Categories
Groceries
$600
Dining
$250
Transport
$150
Software
$200
Entertainment
$100
Personal
$50
Fine-tune categories
1
50/30/20 donut chart -- three-segment ring (needs/wants/savings) with the ratio displayed in the center. Green for needs, amber for wants, blue for savings -- consistent with the app's semantic color system.
2
Savings strictness slider -- a continuous control that trades discretionary budget for savings. The gradient fill and projected amount update together, giving immediate feedback on the trade-off.
3
Category list with amounts -- reuses the txn-row pattern for consistency. Each row uses a Style E duotone icon with fill-opacity 0.08 and a tinted icon background.
4
Progressive disclosure -- "Fine-tune categories" is a collapsed expandable link. Keeps the initial view clean while giving power users a way to adjust individual allocations.
49
Budget Summary / Accept
Final onboarding step. Presents the complete financial plan -- Safe to Spend hero, income/savings summary, goal projection, and a waterfall breakdown -- before the user commits.
Light Mode
Step 6 of 6
Here's your plan
Safe to Spend
$2,847
per pay cycle
Monthly income
$5,600
Monthly savings
$420
Emergency fund in
14 months
Monthly Breakdown
Income
$5,600
→
Bills
$1,200
→
Savings
$420
→
Budget
$3,980
Go back and adjust
Dark Mode
Step 6 of 6
Here's your plan
Safe to Spend
$2,847
per pay cycle
Monthly income
$5,600
Monthly savings
$420
Emergency fund in
14 months
Monthly Breakdown
Income
$5,600
→
Bills
$1,200
→
Savings
$420
→
Budget
$3,980
Go back and adjust
1
Hero Safe to Spend number -- the same format as the dashboard hero, shown here before the user ever reaches the app. Creates an "aha" moment: this is what Steward delivers every pay cycle.
2
Goal projection -- "Emergency fund in 14 months" connects the savings rate to a tangible outcome. This is calculated from the budget accepted in step 5 and the user's stated goals.
3
Mini waterfall chart -- proportional bar heights show how income flows through bills, savings, and into the spendable budget. Arrow connectors reinforce the left-to-right flow metaphor.
4
"Go back and adjust" escape hatch -- secondary ghost link respects user autonomy. The primary "Accept & Start" button is prominent but not pressuring.
50
Onboarding Value Props with App Previews
Four onboarding carousel screens, each containing a mini phone preview showing what the user will unlock. The embedded previews build anticipation by revealing real app UI before the user finishes setup.
Welcome
Meet Steward
Your paycheck-based financial OS
Goals
What's your goal?
Pick what matters most right now
Budget Rule
Your Budget Rule
We'll start with 50/30/20
Tax Preview
Tax Tracking
Deductions tracked automatically
1
Embedded mini phone previews -- 120px-wide phone silhouettes inside each onboarding screen show real app UI. This "preview within a preview" technique builds anticipation before the user completes setup.
2
Mixed light/dark carousel -- screens 1-2 use light mode, screens 3-4 use dark mode. This previews both themes during onboarding and demonstrates the app's polish.
3
Tax preview screen (new) -- introduces the tax deduction pillar during onboarding with a mini tax center showing "YTD Deductions: $4,280" and category breakdowns. Self-employed users see this; W-2 users see a simpler version.
4
Dot indicator progression -- each screen highlights the corresponding dot, with the active dot using the elongated pill style (18px wide) from the existing onboard-dot pattern.
51
Category Review — Swipe Cards
Tinder-style card stack for rapid AI category approval. Swipe right to approve, left to skip. Replaces the legacy list-based review flow.
Light Mode
3 of 12
reviewed
Office Depot
-$127.50
Apr 8, 2026
Office Supplies
AI Suggestion
Tax Deductible
Schedule C Line 18
Skip
Approve
Dark Mode
3 of 12
reviewed
Office Depot
-$127.50
Apr 8, 2026
Office Supplies
AI Suggestion
Tax Deductible
Schedule C Line 18
Skip
Approve
1
Card stack depth cue — a second card peeks behind the front card (8px offset, 0.96 scale, lower opacity). Creates a tactile "deck" feeling without heavy 3D transforms.
2
Slight rotation (1.5deg) on the front card hints at swipability. Users intuitively reach for drag gestures when cards appear "loose" in the UI.
3
Tax deductible banner surfaces Schedule C line context at the moment of categorization, reinforcing Steward's tax pillar without requiring a separate screen.
4
"Approve All Remaining" ghost button respects power users who trust AI suggestions. Reduces friction while keeping individual review as the default path.
52
Safe to Spend — Waterfall Breakdown
Expanded view showing how Safe to Spend is calculated. Each line is tappable to drill into the underlying data.
Light Mode
Good morning,
Sarah
Safe to Spend
$2,847
Through April 14 · 10 days left
How is this calculated?
Total Balance
$30,000
Upcoming Bills
-$1,200
Savings Goals
-$800
Already Spent
-$1,353
Taxes Set Aside
-$460
= Safe to Spend
$2,847
Spending Snapshot
Income
$4,200
Spent
$1,353
Bills
$1,200
Savings Target
$420
projected this cycle
Dark Mode
Good morning,
Sarah
Safe to Spend
$2,847
Through April 14 · 10 days left
How is this calculated?
Total Balance
$30,000
Upcoming Bills
-$1,200
Savings Goals
-$800
Already Spent
-$1,353
Taxes Set Aside
-$460
= Safe to Spend
$2,847
Spending Snapshot
Income
$4,200
Spent
$1,353
Bills
$1,200
Savings Target
$420
projected this cycle
1
Waterfall math — each row is a subtraction from the total balance. Users can see exactly where their money is allocated, building trust in the Safe to Spend number.
2
Monospace amounts — financial figures use JetBrains Mono for precise alignment and a "ledger" feel. Subtraction rows use muted red; the result row uses bold green.
3
Tappable rows with chevrons — each line item drills down (e.g., "Upcoming Bills" shows the specific bills, "Already Spent" shows transactions). Progressive disclosure keeps the top level clean.
4
"How is this calculated?" toggle — shown in its active/expanded state. When collapsed, only the hero number and subtitle are visible, keeping the dashboard light.
53
Bank Linking — Brand Logos
Improved Plaid linking screen with recognizable bank brand circles, search, and trust signals.
Light Mode
Connect Your Bank
Choose your bank or search for any institution
C
Chase
B
Bank of America
W
Wells Fargo
C1
Capital One
U
US Bank
P
PNC
Search all banks...
Secured by Plaid
Your credentials are never stored on our servers
Dark Mode
Connect Your Bank
Choose your bank or search for any institution
C
Chase
B
Bank of America
W
Wells Fargo
C1
Capital One
U
US Bank
P
PNC
Search all banks...
Secured by Plaid
Your credentials are never stored on our servers
1
Brand-color circles — each bank is represented by its brand color with a white letter initial. Immediate recognition without needing actual logo assets, which simplifies licensing.
2
2-column grid covers the 6 most popular US banks. The grid pattern scales naturally if more institutions are added later.
3
Search fallback — "Search all banks..." input below the grid covers the long tail of 11,000+ Plaid-supported institutions.
4
Trust footer — lock icon + "Secured by Plaid" plus the credentials disclaimer. Positioned at the bottom to reinforce security at the moment of decision.
54
Budget — Dropdown Filter
Compact dropdown replaces pills for time-period selection. Tighter category rows maximize vertical density.
Light Mode
Budget
This Pay Cycle
Categories
Transactions
Groceries
$280 / $400
Dining
$190 / $200
Transport
$85 / $150
Software
$320 / $250
Housing
$478 / $478
Dark Mode
Budget
This Pay Cycle
Categories
Transactions
Groceries
$280 / $400
Dining
$190 / $200
Transport
$85 / $150
Software
$320 / $250
Housing
$478 / $478
1
Dropdown selector replaces horizontal pill filters. "This Pay Cycle" is the default, reinforcing paycheck-based budgeting. Dropdown saves horizontal space and avoids scroll overflow on small screens.
2
Compact category rows — reduced vertical padding (8px vs 12px) and smaller icons (28px vs 36px) allow 5 categories to fit without scrolling. Progress bars shrunk to 4px height.
3
Over-budget treatment — Software at $320/$250 shows a red amount and fully filled red progress bar. The color shift is the only signal needed; no alert icon clutter.
55
Tax Center — Disclaimers
Tax dashboard with legally required disclaimer language and "estimates only" badges on quarterly numbers.
Light Mode
Tax Center
YTD Deductions
$14,872
127 transactions · Jan 1 - Today
Quarterly Estimates
Q1
$3,420
✓ Paid
Q2
Est.
$3,680
Due Jun 15
Q3
Est.
$3,500
Est.
Q4
Est.
$3,500
Est.
IRS Categories
Office Supplies (27a)
$4,247
Vehicle (9)
$3,892
Utilities (25)
$2,640
Professional Services (17)
$2,180
Other (27b)
$1,913
Steward provides tax estimates only and is not a certified tax preparation service. Always consult a qualified tax professional before making tax decisions.
Dark Mode
Tax Center
YTD Deductions
$14,872
127 transactions · Jan 1 - Today
Quarterly Estimates
Q1
$3,420
✓ Paid
Q2
Est.
$3,680
Due Jun 15
Q3
Est.
$3,500
Est.
Q4
Est.
$3,500
Est.
IRS Categories
Office Supplies (27a)
$4,247
Vehicle (9)
$3,892
Utilities (25)
$2,640
Professional Services (17)
$2,180
Other (27b)
$1,913
Steward provides tax estimates only and is not a certified tax preparation service. Always consult a qualified tax professional before making tax decisions.
1
Shield + "Est." badge on each quarterly estimate card clearly marks them as projections, not finalized tax obligations. Uses the duotone shield icon at 10px for minimal visual weight.
2
Bottom disclaimer card — subtle background (neutralBgLight / darkSurface), shield icon, and caption-size text. Legally necessary but designed to not dominate the screen.
3
Conservative by design — Steward's tax engine philosophy: surface estimates prominently but always qualify them. This builds trust rather than creating false confidence in automated tax advice.
27
Empty States
Every empty state is useful, calm, and motivating. Clear next action, short copy, one CTA.
No Accounts
No Accounts Connected
Connect your bank so Steward can track spending and find tax deductions automatically.
No Transactions
No Transactions Yet
Once your bank syncs, transactions will appear here automatically. You can also add them manually.
No Goals
No Goals Set
Set a savings goal and Stuart will help you stay on track with each paycheck.
First Stuart Chat
S
Hey, I'm Stuart
Your AI financial adviser. Ask me anything about your budget, spending, or taxes.
Can I afford...?
Tax summary
29
Interaction Flows
Key user journeys mapped step by step. Short flows, quick outcomes, no dead ends.
Onboarding to First Value
1
Welcome
Brand intro
→
2
Value Props
3-panel carousel
→
3
Connect Bank
Plaid Link
→
4
Pay Cycle
Frequency + amt
→
5
Schedule C
Tax toggle
→
6
AI Scan
First insight
→
✓
STS Reveal
First value
Transaction Categorization
1
Txn Appears
Bank sync
→
2
AI Categorizes
+ confidence
→
3
User Reviews
Accept / Change
→
4
Tax Check
Deductible?
→
✓
Saved
Budget updated
"Can I Afford X?" with Stuart
1
User Asks
"Can I afford...?"
→
2
Stuart Checks
STS calculation
→
3
Answer
Yes/No + context
→
4
Tax Tip
Deductible?
→
✓
Action
Pre-flag / set budget
30
Motion & Animation
Smooth, restrained, purposeful. Motion as orientation, not decoration.
Tab Switch
150ms
ease-out · Instant feel
Sheet Present
300ms
ease-in-out · Slide up
Number Count-up
600ms
ease-out · Gentle reveal
Card Appear
200ms
ease-out · Fade + 8px rise
Stuart Typing
∞ loop
3 dots · 1.2s cycle
Progress Fill
500ms
ease-in-out · Smooth fill
Motion Rules
1
Use motion for orientation and feedback, never for decoration.
2
Keep durations under 400ms for direct interactions, up to 600ms for reveals.
3
Avoid bounce, overshoot, or elastic easing. Use ease-out or ease-in-out.
4
Celebration states (goal reached, paycheck arrived) should be minimal: a subtle pulse or gentle check animation.
5
Stagger sequential card animations with 50ms delays for a smooth cascade.
31
Push Notifications
Contextual, helpful notifications for financial events. Never spammy.
Paycheck Received
$4,200.00 deposited. Your new safe to spend is $2,847.
Just now
Large Transaction Detected
$892.00 at Apple Store. Is this a business expense?
2 min ago
Tax Reserve Reminder
Q2 estimated payment of $3,680 is due in 12 days.
8:00 AM
Recurring Bill Due
Rent payment of $1,200 is due tomorrow. Sufficient funds available.
Yesterday
Deductible Expense Found
$127.50 at Office Depot flagged as deductible. Review?
3 hours ago
Bank Sync Issue
Connection to Chase lost. Tap to reconnect.
1 hour ago