Stats row Gagan

Three-column group insight strip showing "this month" spending, "next up" recurring expense, and "top category." Flat typographic style with trend indicators. Sits below the group hero card to surface actionable context without requiring a tap-through.

Default

this mo

₹4.0k ↑12%

next up

🏠Rent · 3d

top cat

🛒₹1.6k

Trend variants

Spending up — coral indicator

this mo

₹6.2k↑28%

next up

✈︎Goa trip· 5d

top cat

🍜₹2.4k

Spending down — teal indicator

this mo

₹2.1k↓15%

next up

⚡Electricity· 12d

top cat

🛒₹800

Empty cells

this mo

₹0

next up

none set

top cat

—

When a cell has no data, show a muted em dash (—) or short text like "none set" in --ink-mute mono. Never hide the cell or collapse the layout — the three-column grid must remain stable.

Usage

Do Keep eyebrow labels extremely short — 6 chars max ("this mo", "next up", "top cat"). The mono uppercase style is already compact; longer labels overflow on small screens and break the grid.

Don't Don't use the stats row for individual people balances — that's the settle-row component. Stats row is group-level aggregate data: spending totals, upcoming events, category summaries.

Do Use coral (↑) for spending increase (costs more this month) and teal (↓) for spending decrease (costs less). These match the system-wide semantic — coral = negative financial impact, teal = positive.

Don't Don't abbreviate amounts inconsistently. Use ₹4.0k for 4,000 and ₹1.2L for 1,20,000. Pick one abbreviation style and keep it consistent across all three cells.

Spec

Property	Value	Notes
Layout	3 equal flex columns	1px separator is `--ink-line` via `gap:1px` on background
Cell padding	14px 12px	Top/bottom 14, left/right 12
Eyebrow font	JetBrains Mono 9px	Uppercase, 0.1em tracking
Value font	JetBrains Mono 700	Numbers only; labels use Onest 500
Value size	14px	Flex row with baseline alignment
Trend font	JetBrains Mono 600 11px	↑ coral, ↓ teal
Border radius	`--r-md` (14px)	On the outer container

Accessibility

Screen readers Wrap each cell in a <dl>/<dt>/<dd> structure so the eyebrow label and value are paired semantically. Example: <dt>This month</dt><dd>₹4,000, up 12%</dd>. The visible eyebrow can stay abbreviated; the full label belongs in the semantic element.

Trend arrows The ↑ and ↓ arrow glyphs are decorative — the percentage already communicates direction. Add aria-hidden="true" to the trend element and include the direction in the parent dd: "up 12%" or "down 15%."

Code

HTML

<div class="stats-row">
  <div class="stats-row-stat">
    <dt class="stats-row-eyebrow">this mo</dt>
    <dd class="stats-row-val">
      <span class="stats-row-num">₹4.0k</span>
      <span class="stats-row-trend up" aria-hidden="true">↑12%</span>
    </dd>
  </div>
  <div class="stats-row-stat">
    <dt class="stats-row-eyebrow">next up</dt>
    <dd class="stats-row-val">
      <span class="stats-row-ico" aria-hidden="true">🏠</span>
      <span class="stats-row-label">Rent</span>
      <span class="stats-row-num" style="color:var(--ink-mute); font-weight:400;">· 3d</span>
    </dd>
  </div>
  <div class="stats-row-stat">
    <dt class="stats-row-eyebrow">top cat</dt>
    <dd class="stats-row-val">
      <span class="stats-row-ico" aria-hidden="true">🛒</span>
      <span class="stats-row-num">₹1.6k</span>
    </dd>
  </div>
</div>

Design tokens used

Token	Value	Role
`--ink-line`	#DDD2B8	1px separator between columns (via background)
`--s-paper`	#FBF8F0	Cell background
`--font-mono`	JetBrains Mono	Eyebrows and numeric values
`--font-body`	Onest	Non-numeric labels (event name, category name)
`--coral`	#E76F51	Trend up indicator
`--teal`	#0E7C66	Trend down indicator
`--ink-mute`	#8A8276	Eyebrow text and secondary meta
`--r-md`	14px	Container border radius

See it in context

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

The 3-cell stats row sits below the viz carousel in the header card — showing this month total, next up payment, and top spending category.