Finio - UI/UX Case Study
Design System
A complete visual language for Finio - the AI-powered personal finance app.
Built for consistency, accessibility, and scalability.
Color Palette
Inspired by trust, growth, and intelligence. Dark base with vibrant accent colors.
Background
#080C14
App background
Card
#111827
Card surfaces
Card Elevated
#1A2235
Nested cards
Primary Green
#22C55E
CTAs, positive, income
Amber Warning
#F59E0B
Warnings, near limit
Danger Red
#EF4444
Expenses, over budget
Text Primary
#F0F4FF
Headings, body
Text Muted
#6B7280
Labels, secondary
Typography Scale
Syne for display & headings (bold, geometric). DM Sans for body (clean, readable).
Display / BrandFont: Syne 800
Size: 48px
Use: App name, hero
finio
Heading 1Font: Syne 800
Size: 28px
Use: Page titles
Budget Planner
Heading 2Font: Syne 700
Size: 22px
Use: Section heads
Recent Transactions
Balance / AmountFont: Syne 800
Size: 38px
Use: Money amounts
₹84,320
Body RegularFont: DM Sans 400
Size: 14px
Use: Descriptions
AI-powered insights that actually explain your spending - not just track it. Get personalized tips to reach your goals faster.
Label / CaptionFont: DM Sans 500
Size: 11px
Use: Tags, labels
Food & Dining · 6 transactions
Spacing System
Base unit: 4px. All spacing is a multiple of 4.
4px
xs
8px
sm
12px
md
16px
base
24px
lg
32px
xl
48px
2xl
64px
3xl
Component Library
Reusable UI components used across all screens.
Buttons
Get Started
See Details

Cancel
Delete Goal

Add
Filter
Badges & Tags
✓ On Track
⚠ Near Limit
✕ Over Budget
📅 Pending
+12.4% this month
⚡ 75% used
Progress Bars
Food · 60% · ₹6,000 of ₹10,000
Transport · 77% · ₹3,100 of ₹4,000
Entertainment · 91% · ₹2,720 of ₹3,000
Input Fields
Card Variants
Default Card
₹31,420
Success Card
+₹8,000
Category Icons
🍔
Food
🚕
Travel
🛍️
Shopping
🎬
Fun
📱
Bills
🎯
Goals
Border Radius
Rounded, friendly corners. Higher radius = more prominent element.
8px
Chips
12px
Buttons
16px
Cards
20px
Containers
50px
Phone Frame
50%
Avatars