Hero card Gagan

Primary home screen card that houses the balance visualization on top and a settle strip on the bottom. Acts as a layout container — the visualization component slots into the upper pane. The card owns the structure; it does not own the viz logic.

Preview

↑ visualization slots here ↑
open balances see all →
R
Rohan
you owe
₹2,400
P
Priya
owes you
₹840

Anatomy

PartElementNotes
Outer card.hero-cardPaper background, XL radius (28px), md shadow. No internal padding — sections own their own padding.
Upper pane.hero-paneMin-height 120px. Accepts any balance viz variant as a child slot. Padding 20px horizontal, 20px top / 16px bottom.
Dashed divide.hero-divide1px dashed --ink-line, 20px horizontal inset. The visual language of the khata. Separates the viz from the settle strip.
Settle head.hero-settle .settle-eyebrowMono 10px uppercase "open balances" label left, "see all →" teal link right. 8px margin below.
Settle row.settle-rowAvatar + name/direction + amount + action button. Coral amount for you-owe, teal for owes-you.

Settle strip

Show at most 2–3 settle rows in the card. Beyond 3, the card becomes too tall on small screens. The "see all →" link in the eyebrow handles overflow — it navigates to the full balances list.

Row ordering: rows where you owe come first (coral, action = "Settle"). Rows where others owe you follow (teal, action = "Remind"). Within each group, sort descending by amount.

The action button on owe-rows is teal and says "Settle." The action on owed-rows is warm-surface (not ink, not teal) and says "Remind" — it's a secondary action, not urgent.

Do Keep the settle strip to 2 rows by default. Show a "see all →" link when there are more. The hero card is a summary surface, not a full list.
Don't Don't show a settle strip with zero rows as "nothing to see." Instead, show the all-settled empty state in the viz pane. The dashed divide and settle head should only be visible when there are balances to show.

Visualization slot

The upper pane is a neutral container. It renders the chosen balance viz as a direct child. The hero card does not know which viz is active — that decision lives at the app composition layer.

While balance data is loading, the viz slot renders a Skeleton at the same min-height. On data resolve, fade in the viz (opacity 0→1, 200ms ease-out). Never animate from scale(0).

<!-- Hero card shell -->
<div class="hero-card">

  <!-- Viz slot — swap for any balance viz variant -->
  <div class="hero-pane">
    <BalanceViz variant="constellation" :items="balanceItems" />
  </div>

  <div class="hero-divide"></div>

  <!-- Settle strip -->
  <div class="hero-settle">
    <div class="settle-eyebrow">
      <span>open balances</span>
      <a href="/balances">see all →</a>
    </div>
    <!-- settle rows ... -->
  </div>

</div>

Design tokens used

TokenRole
--s-paperCard background
--r-xlCard border-radius (28px)
--shadow-mdCard elevation
--ink-lineDashed divide color
--tealSettle action button; "owes you" amount; "see all" link
--coral"You owe" amount color
--s-warmRemind button background (secondary)

See it in context

Interactive prototype — this component is live below. Tap, swipe, and drag to explore.

Switch mode:
The hero card is the centrepiece of the home screen. Use the tweaks panel (bottom-right) to switch between 4 balance visualizations: constellation, postcards, typographic, feed. Switch state to settled to trigger the confetti burst.