Design System v1.0

Aura Finance

A minimal, scalable mobile UI system for modern financial management. Designed for young professionals focusing on clear typography, high contrast, and atomic components.

1. Foundations

Colors

Primary Black

zinc-900

Surface White

white / zinc-50

Neutral Light

zinc-100 / zinc-200

Success Green

emerald-500

Typography

Heading 1

text-3xl, font-semibold, tracking-tight

Heading 2

text-2xl, font-semibold, tracking-tight

Heading 3

text-lg, font-medium, tracking-tight

Body text used for general descriptions and paragraphs.

text-sm, text-zinc-600

Caption text for hints.

text-xs, text-zinc-500

Components

Toggle Switch

2. Application Screens

9:41

Master your money
with clarity.

Track spending, set budgets, and achieve your financial goals effortlessly.

9:41
AURA

Welcome back

Enter your details to access your account.

Forgot?

Don't have an account? Sign up

9:41
Avatar

Good morning

Alex Doe

Total Balance

$14,250.00

+$2,400
vs last month
Send
Receive
Top Up
More

Recent Activity

See all

Whole Foods

Today, 10:24 AM

-$42.50

Stripe Payout

Yesterday

+$1,250.00

Spotify Premium

Oct 24

-$10.99
Home
Cards
Analytics
Profile
9:41

Transactions

October 2023

Starbucks

Coffee

-$5.40

Amazon

Shopping

-$129.00

Sarah Miller

Dinner split

+$45.00

Steam

Entertainment

-$59.99
9:41
Details

-$129.00

Amazon

Completed
Date Oct 24, 14:32
Category Shopping
Payment Method Visa •••• 4242
Transaction ID #TRX-9824L
Desk setup accessories.
9:41

Settings

Avatar

Alex Doe

hello@example.com

Account

Personal Information
Security
Payment Methods

Preferences

Push Notifications
Dark Mode
Home
Cards
Analytics
Profile