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.

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