Home screen Gagan

Interactive prototype of the Settld home screen. Tap, swipe, and drag to explore — every component is live. Use the tweaks panel (bottom-right) to switch balance visualizations and states.

What to test

  • Swipe the postcard stack in the hero card (when viz = postcards)
  • Tap "Flat 2BHK" ledger row to navigate to the group screen
  • Switch balance viz via the tweaks panel: constellation, postcards, typographic, feed
  • Switch state: default, net owe, settled (triggers confetti)
  • Tap the teal + FAB in the tab bar

Components used

  • TopBar — logo + greeting + avatar
  • HeroCard — balance viz + settle strip
  • SettleRow — owe/owed action rows
  • BalancesLedger — groups + people sections
  • TabBar — 5-item frosted tab bar
  • Odometer — animated digit strips
  • AvatarStack — overlapping initials

Viewport

390 x 844 — iPhone 15 standard. iOS 26 liquid glass design language.