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
30 production-ready components
Buttons, chips, amount displays, ledger rows, split bars, segmented controls, and more. Each with live previews, anatomy, usage rules, ARIA patterns, and CSS classes.
Button Split bar Tab bar Ledger row
30
Patterns
How components compose
The expense composer, settle flow, navigation, and list patterns. These are the product's core interactions — documented as compositions, not just component specs.
Expense form Settle flow Navigation Lists & feeds
04
Guidelines
Principles, voice, and rules
Six design principles. A full content and voice guide. Accessibility requirements. A developer guide. The things that make Settld feel like Settld — not just a UI kit.
Principles Content & voice Accessibility Dev guide
04

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.