Principles
Six principles govern every decision — from which feature to build to which shade of teal to use on a button. They're not aspirational. They're constraints. When a design decision is in conflict with a principle, the principle wins.
Principle 01
Caps, not locks.
Usage limits on the free tier. Never feature gates.
The free tier has caps — a maximum number of groups, expenses per month, members per group. When you hit the cap, you know exactly what you're missing and what the Pro tier restores. What you never find: a screen that says "upgrade to access this feature." Features are features. Caps are volume controls.
In practice
Aarav's free tier has logged 47 of 50 expenses this month. He sees a cap meter: "47/50 expenses this month — ₹99/mo removes the cap." He can still add 3 more expenses. He can still view all history. He can still settle up. The meter is honest information, not a threat.
This means
- Never put a feature behind a paywall. If it's in the app, it's for everyone.
- Show cap progress proactively — don't let users hit a wall without warning.
- Never write "Free forever" or "₹0 forever." The model is caps. Be honest about that.
- The cap meter component (teal→coral gradient fill) is the only place "approaching limit" is communicated. No other warning pattern for caps.
- Pro tier copy: "Removes the cap." Not "Unlocks X." Not "Upgrade for more."
Principle 02
Settle, don't accumulate.
Nudge toward resolution. "All settled up" is a celebrated state.
Expense apps have a gravity problem: balances accumulate silently over months until someone has to be the awkward one who asks. Settld fights this by treating settlement as the natural, easy, visible end state — not an afterthought. Every list view surfaces outstanding balances. The settle flow takes fewer taps than adding an expense.
In practice
Priya owes Rohan ₹840 from three weeks ago. Every time she opens the Goa trip group, the outstanding balance is visible at the top — not buried, not passive. A single teal "Settle up" button opens the settle flow. Four taps later, she's done. The group shows "All settled up." with a confetti moment. Resolution is the reward.
This means
- Outstanding balances always appear at the top of group views — above the expense list, not at the bottom.
- The settle button is always teal and always visible when there's a balance. Never hidden in a menu.
- "All settled up." is a full-screen moment with confetti — not a toast, not a snackbar.
- Never show a balance in a neutral color. Owed amounts are coral; settled amounts are teal. The color does the nudging so the copy doesn't have to.
- Never add friction to the settle flow. Confirmation is one tap. No "are you sure?" dialogs for settlement.
Principle 03
Design is the product.
Linear/Stripe craft standard. It must not look like a bank statement.
In a market where finance apps default to clinical blue-and-white with dense tables, Settld's visual quality is itself a product differentiator. Warm cream. Paper grain. The khata margin rule. Glass cards. These aren't decoration — they're why the app feels different the first time you open it. Mediocre execution isn't "fine for a first version." It's the product.
In practice
The expense composer has a coral margin rule — a 1px vertical line at 56px from the left. It references a physical notebook. No user will consciously notice it. But every user will sense that this app was made by someone who cares about what it looks like. That feeling is the product.
This means
- Every interactive element has a press state (
scale(0.97)). No exceptions. - Shadows are always warm-tinted (
rgba(23,21,19,…)). Never gray. Never CSSbox-shadow: 0 4px 8px #ccc. - The paper grain texture is permanent. Never remove it, even on dark surfaces.
- Font choices are non-negotiable: Bricolage Grotesque for display, Onest for body, JetBrains Mono for amounts and labels. Never substitute system fonts for these roles.
- "Good enough" is not a standard here. A misaligned avatar by 2px is a bug, not a rounding issue.
Principle 04
Never nag.
Warm nudges, not guilt trips. "Settle up" not "pay me."
Money is already awkward between friends. An app that adds pressure — aggressive reminders, guilt-inducing copy, overdue counters in red — makes it worse. Settld surfaces information, not judgment. The outstanding balance is visible, but it doesn't accuse. A nudge is offered, never repeated until acted upon.
In practice
Kabir owes Aarav ₹600 from last week. Settld can optionally send one nudge notification after 7 days: "Hey — you owe Aarav ₹600 from the Goa trip. Settle when you're ready." Not: "OVERDUE: ₹600 — settle immediately." Not: "Aarav is waiting for your payment." One nudge, warm tone, no escalation.
This means
- Never use "overdue" as a status label. Use "pending" or a date.
- Reminder notifications are opt-in, sent once per debt, after a user-configurable delay (default 7 days).
- Copy tone: "Settle when you're ready" not "Pay now." "You owe" not "Kabir is waiting."
- Never show a count-up timer or days-overdue counter on an outstanding balance.
- Error states use coral to signal something needs action — but the copy is always explanatory, never accusatory.
Principle 05
Offline-first.
Local store is source of truth. Network is an optimization.
Expenses happen at restaurants, on flights, in places with bad signal. The app must work when the internet doesn't. Every action taken offline is queued and synced when the connection returns. The user never sees a spinner when they could see their data instead. "Works on flight mode" is a feature, not an edge case.
In practice
Priya adds a ₹4,200 dinner on the flight back from Goa. The expense appears instantly in her group list, tagged with a small sync indicator. When the plane lands and she reconnects, it syncs silently. Her friends see the expense appear in their activity feeds. She never waited, they never missed it.
This means
- All read operations must work from local cache. Never block a list view on a network call.
- Write operations (add expense, settle) are optimistic — update the local state immediately, sync in the background.
- Show a small sync status indicator (a dot, not a banner) when unsynced changes exist. Don't block interaction.
- Conflict resolution: last-write-wins for expense edits; for settlements, flag and require manual resolution.
- Never disable the "Add expense" button because the user is offline. Queue it.
Principle 06
Paper, not pixels.
Warm cream, grain texture, khata aesthetics. The screen should feel like something you'd hand someone.
The visual system is rooted in the physical — the khata ledger, the ruled notebook, the receipt. Not literally (no skeuomorphism), but emotionally. The warm cream palette, the grain texture, the dashed dividers, the coral margin rule: these are the digital echoes of a physical ledger. When you open the app, it shouldn't feel like opening a spreadsheet.
In practice
The transaction ledger uses dashed row dividers instead of solid lines. The expense composer has a vertical coral line at the left margin. Amounts are set in JetBrains Mono, the same way an accountant would typeset a column of figures. The paper grain texture is a permanent SVG overlay — it makes the screen feel warm, not clinical.
This means
- Ledger-style dividers are always dashed within financial contexts. Solid borders are structural (card edges, nav borders).
- Amount displays always use JetBrains Mono. Never Onest, never Bricolage for running totals or transaction amounts.
- The paper grain (SVG turbulence filter, opacity 0.3, multiply blend mode) is permanent. If you're removing it for performance, find a different solution.
- Surface colors are warm cream, not white. The palette is
#F6F1E6(canvas),#F1E9D5(warm),#FBF8F0(paper). Never#FFFFFFor cold gray. - Category glyphs (🍜 ✈︎ ⌂) are the only emoji used as UI elements. They're chosen for geometric neutrality, not personality.