Work / Mobile Development / Trackbuddy

React Native · In Development · 2026

Trackbuddy.

An AI budget tracker that turns spending into clear next steps.

Trackbuddy is a React Native app built to help people budget with less friction and more clarity. It surfaces category-level insights, flags overspending early, and uses the Claude API for natural-language spend analysis and personalised financial nudges. Every screen was designed end-to-end in Figma before development began.

View screens ↓ Tech stack
Trackbuddy primary logo mark App Mark
Trackbuddy website mockup Dashboard
Trackbuddy mobile app icon Budgeting
Project
AI Budgeting
Status
In Development
Platform
Mobile App
Backend
Supabase
AI spend insights
Receipt scan
Budget categories
Claude API
React Native
Expo
Supabase
Personalised nudges
AI spend insights
Receipt scan
Budget categories
Claude API
React Native
Expo
Supabase
Personalised nudges

React Native · In Development · 2026

A system,
not a logo.

Trackbuddy asked for a brand that could scale — from a product icon tucked into a crowded home screen to a full-bleed web hero — without ever losing its signature.

The experience is built around three loops: (1) capture spending fast (manual or receipt scan), (2) stay aware through dashboards and trends, and (3) adjust with AI-driven explanations and nudges that feel human.

Before implementation, I designed the full UI/UX system in Figma so interaction patterns and hierarchy were locked in early. That reduces churn during development and keeps the product coherent as features expand.

31
pages of defined brand rules & applied examples
4
core pillars — mark, palette, type, voice
2
platforms covered — web & native mobile
1
unmistakable visual identity system

React Native · In Development · 2026

Four disciplines.
One identity.

The guidelines are organised around four pillars — each with clear rules, usage examples, and application notes.

01 / Foundations

Brand Story
& Positioning

Purpose, personality, and tone. Defines what Trackbuddy stands for and the voice it speaks with — so messaging stays cohesive across every channel.

Purpose Voice Values
02 / Mark

Logo
Construction

Primary and secondary marks, clearspace, minimum sizes, and explicit do/don't examples. Built to stay legible from favicon to billboard.

Primary App Icon Clearspace
03 / Palette & Type

Color
& Typography

A deliberate palette led by crimson, anchored with deep ink and soft cream. Type pairings that balance confidence with readability on any surface.

Hex / RGB Hierarchy Pairing
04 / Applications

Web,
App & Print

Applied examples across the web experience, the mobile app icon and UI, and social/print collateral — showing the system in the wild.

Web iOS / Android Social

React Native · In Development · 2026

Mark. Palette.
Typography.

01 — The Mark

A hexagonal crest
with an upward arrow.

The mark is built from a crimson hexagon — a shape that suggests structure and alignment — pierced by a rising blue triangle. It reads as motion, direction, and balance all at once. Works equally at 16px and billboard scale.

Trackbuddy logo mark
02 — The Palette

Crimson-led,
ink-grounded.

Trackbuddy's palette is anchored by a confident crimson, balanced by deep ink and a soft cream. A deep-green accent adds calm and depth to long-form layouts.

#C8103D
#8F0B2B
#0B0B0B
#EDE8E0
#0A0A0A
Tint
Tint
Paper
03 — Typography

Editorial &
functional.

A display serif carries the emotional weight; a clean geometric sans does the work; a mono voice speaks in data and detail.

Trackbuddy.
Display · Serif
Section heading in UI
Interface · Sans
01 — PRIMARY MARK / CLEARSPACE
Labels · Mono

React Native · In Development · 2026

In the
wild.

Key screens from the UI system — showing the product across capture, budgeting, and analysis flows.

Trackbuddy website browser mockup on crimson background
Dashboard Browser & product surface
Trackbuddy mobile app icon on a phone home screen
Budgeting iOS home screen treatment

UI / UX

Designed first.
Built next.

A mobile-first UI designed in Figma before implementation — clean hierarchy, soft depth, and a crimson accent that guides attention.

Trackbuddy home dashboard
Home Spend overview
Trackbuddy budget month view
Budget Category control
Trackbuddy add budget
Add budget Quick assign
Trackbuddy new transaction
New transaction Receipt scan

Implementation

The stack
powering it.

A pragmatic mobile stack with AI analysis, real-time data, and a path to shipping fast.

01 / Mobile

React Native
+ Expo

Cross-platform foundations for a native-feel UI, rapid iteration, and smooth navigation patterns.

React NativeExpoTypeScript
02 / AI

Claude API
analysis

Natural-language spend analysis and personalised nudges that explain patterns and suggest next actions.

InsightsNudgesNLP
03 / Data

Supabase
backend

Auth, database, and secure storage for transactions, budgets, and user settings.

PostgresAuthStorage
04 / UX

Designed in
Figma

Full UI/UX designed end-to-end before coding, keeping the product intuitive and mobile-first.

UIDesign systemPrototyping

Have a product that needs
real UX?

If you're building a product, service, or studio — let's design an identity system that's beautiful, opinionated, and actually usable by the people around you.

Start a project → See more work