Settld design system

Built for splitting bills
between friends.

A design system for Settld — an expense-splitting app for Indian friend groups. Warm cream palette, khata ledger aesthetics, UPI-native patterns. Everything here is opinionated: the tokens, the motion, the copy. Use it as-is, or fork it. But read the principles first.

Bricolage Grotesque · Onest · JetBrains Mono
WCAG 2.1 AA baseline
Token-first · Mobile-first

What's here

Foundations
Color, type, space, motion
The raw material. Every color token, typeface choice, spacing step, and easing curve with rationale. The warm cream palette. The motion philosophy. All of it, documented.
Color Typography Spacing & grid Motion
04
Components
32 components + 12 from Gagan
Buttons, chips, amount displays, ledger rows, split bars, segmented controls, and more. Plus 12 new components from Gagan's screen prototypes — odometer, sparkline, settle row, hero card, and others. Side-by-side comparisons on overlapping components.
Button Split bar Tab bar Ledger row
44
Patterns
How components compose
The expense composer, settle flow, navigation, list patterns, and Gagan's 4 balance visualization directions. Core interactions — documented as compositions, not just component specs.
Expense form Settle flow Navigation Lists & feeds Balance viz
05
Prototypes
Interactive screen prototypes
Live, interactive prototypes of the home and group screens built by Gagan. Rendered in a 390x844 iPhone frame with full gesture support — swipe, drag, long-press, tap. Includes the balance visualization pitch document.
Home screen Group screen Balance viz pitch
03
Guidelines
Principles, voice, rules, and token reconciliation
Six design principles. Content and voice guide. Accessibility requirements. Developer guide. Plus a token reconciliation page mapping Gagan's CSS tokens to the design system.
Principles Content & voice Accessibility Token recon
05

Quick start

Two files get you 90% of the way. tokens.css is the only file you need in production. shared.css is for the documentation site only — don't ship it.

<!-- Step 1: Load fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<!-- Step 2: Import tokens -->
<link rel="stylesheet" href="tokens.css">

<!-- Step 3: Base body -->
<style>
body {
  background: var(--s-canvas);   /* warm cream */
  color: var(--ink);
  font-family: var(--font-body); /* Onest */
}
</style>

<!-- Step 4: Use tokens everywhere -->
<button style="
  background: var(--ink);
  color: var(--s-paper);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-weight: 600;
">Add expense</button>
Design token file
tokens.json
The source of truth. Contains every color, spacing step, radius, shadow, motion token. Edit this file first — then regenerate tokens.css.
↓ tokens.json
CSS custom properties
tokens.css
Ready-to-import CSS file with all tokens as :root custom properties. Includes dark mode overrides via [data-theme="dark"]. This is the only file that ships to production.
↓ tokens.css

What this system believes

Design systems can be neutral kits or opinionated products. This one is opinionated. Six principles govern everything — they're worth reading before you start using components. The short version:

  • Caps, not locks. Usage limits on free tier. Never feature gates.
  • Settle, don't accumulate. Resolution is the celebrated state, not debt.
  • Design is the product. Linear/Stripe craft standard. Not a bank statement.
  • Never nag. Warm nudges. "Settle when you're ready" not "OVERDUE."
  • Offline-first. Local store is truth. Works on flight mode.
  • Paper, not pixels. Warm cream, grain texture, khata aesthetics.

Read the full principles →

Status: building
·
Hey Man Labs · 2026
·
We're not going to Splitwise you. Promise.