Principles Colour Type Shape & motion Components Patterns Tokens
Design System

How Arth looks, and why

The colours, type, shapes and components behind Arth. Everything on this page is generated from the same design-token file the Android app is built from, so what you see here is what ships.

Principles

Money is stressful. The interface shouldn't add to it.

Calm and private

Quiet surfaces, one accent colour, no alarm unless something needs you. Amounts can be hidden with one tap.

₹

Numbers first

Every screen leads with the figure you came for. Money renders through one component, so signs, colour and privacy masking are always consistent.

One source of truth

Colours, sizes, radii and motion live in one token file. Changing a radius is one edit, not a hunt through forty screens.

Readable in both themes

Light and dark are designed together, and text colours are checked against WCAG contrast. Nothing is smaller than 11px.

Colour

Thirteen semantic roles, each defined for light and dark. Screens use roles, like primary or mutedForeground, never raw hex, so both themes stay in step.

Brand ramp · Teal

Data colours

Charts and account types use a separate palette, so data never gets confused with interface states like success or danger.

Typography

Inter, in seven steps. Larger sizes tighten their letter-spacing so headlines feel solid; small sizes stay open for legibility.

Shape & motion

Four corner radii, each with one job. Buttons are fully rounded; inputs and chips use a softer square so they read as fields, not actions.

Motion

Three durations and one easing curve. Arth turns animation off when the phone's "remove animations" setting is on.

Components

Rebuilt here in HTML with the app's own tokens. Switch themes to compare.

Buttons
Fully rounded. One primary action per screen; Skip-style choices use Secondary.
Money
Spent this month
₹18,400
+₹2,500 −₹1,240 ₹••••
Signed amounts colour themselves. The last one shows privacy mode.
Input
This month Last month Custom
Status & progress
On track Close to limit Over budget
Food & Dining · ₹6,200 of ₹8,000
List rows
Swiggy
Food & Dining · Yesterday
₹1,240
Salary
Credit · 1 Sep
+₹85,000
Toast with undo
Approved Swiggy Undo
Every action you might regret gets a 6-second Undo instead of an "Are you sure?" dialog.
Field chips
Food & Dining ▾ Swiggy ▾ Payment mode ▾
On a Catch Up card. The category chip takes its colour; merchant and payment mode stay muted until set. Each opens a picker and saves straight away.
Money event card
Money back from an investment
Looks like a redemption or payout. Pick the investment it came from and it stops counting as income.
FD deposits and closures, transfers to your own accounts, SIPs and investment withdrawals all use this one card.
Stacked area chart
Total value
₹6,15,000
+₹97,000 in 12 months
AllMarketPensionFD
Nov 25May 26Oct 26
Pension₹2,40,00039%
Market (Demat)₹3,20,00052%
Fixed Deposits₹55,0009%
Bands stack, so the top edge is the total and each band's thickness is its share, which keeps small holdings visible next to big ones. Tap a band, chip or legend row to see that category split by account, shaded from the category's colour. Uses the data palette, never interface colours.
Daily statement
17 Sep₹2,12,400₹8,100
↘ Market loss since 4 Sep−₹3,050 (−1.4%)
5 Sep——
↑ Withdrawn to HDFC Bank−₹20,000
4 Sep₹2,08,200₹35,350
↓ Added from SBI+₹10,000
↗ Market gain+₹1,820 (+0.8%)
Demat snapshots (portfolio, idle cash) with the money that moved that day underneath. Gain is the value change minus your own money, so a deposit never reads as profit. After skipped days it says where it's measured from.
Investment withdrawal sheet
Money back from an investment
₹1,50,000 came in. It's recorded as coming out of the investment, so it doesn't count as income.
Which investment?
Parag Parikh Flexi CapMutual fund
＋ Not in Arth yetAdd it now
₹50,000 is recorded as investment gain and counts as income.
Fully withdrawn
Close it. It stops counting in net worth.
The whole credit is assumed to come out; lowering it splits off the gain. Optional: take it out of a yearly-plan bucket.

Patterns

The check-in deck is used by Catch Up, Settle up, Subscriptions, Rule suggestions and the Month-end check. It shows one card at a time: swipe right for the main action, left to skip. Extra actions sit inside the card, so the only buttons below it are Skip and the main action.

Settle up
1 of 2
Owes you
Rahul Mehta
₹4,250
Last entry12 Sep
Entries6
Last remindedNever
✓  Mark settled ›
☰  Open ledger ›
Swipe right to remind · left to skip

One decision per card

The card shows only what you need to decide. Details live one tap away in the full edit screen.

Fixed button positions

Skip is always bottom-left and the main action bottom-right, on every deck, so your thumb learns them once.

Extra actions inside the card

Choices like Mark settled or Reject are full-width rows at the bottom of the card, never floating chips. Each row is at least 48px tall, so it's easy to tap.

Undo, not confirm

Nothing is saved until the 6-second Undo window passes, so undo is exact and the flow never stops for a dialog.

Using the tokens

In the app, colours come from Tailwind classes or the useTheme() hook, and component recipes live alongside the tokens.

<Card> <Text className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"> Spent this month </Text> <Money value={18400} className="text-title font-bold text-foreground" /> <Button title="See budget" onPress={open} /> </Card> // When a colour must be computed: const theme = useTheme(); theme.alpha("primary", 0.1) // tinted background, both themes

Source: constants/design-tokens.js