Month plate Gagan

Horizontal ribbon segmented by payer showing who paid what this month. Each segment's width is proportional to that person's payment share. Shows initials and percentage. Used in group detail cards to give an at-a-glance view of contribution balance.

Default — 3 members

A 25%

R 52%

P 23%

Aarav — ₹2,500

Rohan — ₹5,200

Priya — ₹2,300

4 members

A 38%

R 28%

P 20%

K 14%

Single payer

R Rohan paid everything

When one person paid 100%, the plate shows a single segment spanning the full width. The label can expand to include a short phrase like "Rohan paid everything" if horizontal space allows.

Equal contributions

A 33%

R 34%

P 33%

Inconsistency note

Hardcoded segment colors Gagan's designs hardcode per-person segment colors as raw hex values rather than using avatar palette tokens. The specific values used — #D6EAE2/#0A5F4F (teal), #FADED4/#8B3722 (coral), #F5E4A8/#6B5208 (butter) — correspond to palette slots, but the indirection is absent. Recommendation: map each person to one of the --av-* color slots at the data layer and pass the slot name as a prop; the component renders using tokens, not hardcoded hex. This ensures dark mode overrides and future palette changes propagate automatically.

Usage

Do Assign colors consistently per person across the entire group session. If Aarav is teal in the month plate, he should be teal in the flow rows, settle rows, and avatar group. Color is identity — inconsistency breaks the mental model.

Don't Don't use month plate to show expense splits (who owes whom). Month plate shows who paid — contributions in, not debts outstanding. Use split-bar or flow rows for debt visualization.

Do Hide the share percentage label when a segment is too narrow to display it legibly (under ~48px). Use a minimum segment width of 24px — below that, hide even the initial and merge into an overflow indicator.

Don't Don't use more than 5 color slots in a single month plate. 5+ people makes the segments too narrow and the color-per-person mapping too cognitively dense. Consider showing top 4 payers + "others" if the group is larger.

Spec

Property	Value	Notes
Height	40px	Fixed; contents vertically centered
Border radius	`--r-sm` (10px)	On outer container
Segment width	Proportional (flex)	`flex: [percentage-value]`
Segment padding	0 8px	Horizontal only; vertical uses flex centering
Initial font	Bricolage Grotesque 700 13px	Display font for names
Share font	JetBrains Mono 9px	70% opacity
Gap between initial and share	4px
Shadow	`--shadow-sm`	Subtle lift off background
Transition	`flex var(--d-slow) var(--ease-spring)`	For animated rebalancing on data change

Color slots (pending token mapping)

Slot	Background	Foreground	Maps to
Teal	#D6EAE2	#0A5F4F	`--teal-pale` / `--teal-deep`
Coral	#FADED4	#8B3722	`--coral-pale` / hardcoded (no token)
Butter	#F5E4A8	#6B5208	Closest: `--warning-bg` / hardcoded
Lavender	#E8E0F0	#4B3B6B	No existing token — needs addition

Accessibility

Color-only encoding Segment color encodes identity, but color alone isn't sufficient. The initial letter (A, R, P) provides a second signal. For screen readers, add aria-label on each segment: aria-label="Aarav, 25%". Wrap the plate in a container with role="img" and aria-label="Payment contributions this month".

Code

HTML

<div class="month-plate"
     role="img"
     aria-label="Payment contributions this month">
  <!-- flex value = percentage integer (e.g. 25 for 25%) -->
  <div class="month-plate-seg"
       style="flex:25; background:#D6EAE2; color:#0A5F4F;"
       aria-label="Aarav, 25%">
    <span class="month-plate-initial" aria-hidden="true">A</span>
    <span class="month-plate-share" aria-hidden="true">25%</span>
  </div>
  <div class="month-plate-seg"
       style="flex:52; background:#FADED4; color:#8B3722;"
       aria-label="Rohan, 52%">
    <span class="month-plate-initial" aria-hidden="true">R</span>
    <span class="month-plate-share" aria-hidden="true">52%</span>
  </div>
  <div class="month-plate-seg"
       style="flex:23; background:#F5E4A8; color:#6B5208;"
       aria-label="Priya, 23%">
    <span class="month-plate-initial" aria-hidden="true">P</span>
    <span class="month-plate-share" aria-hidden="true">23%</span>
  </div>
</div>

Design tokens used

Token	Value	Role
`--r-sm`	10px	Container border radius
`--shadow-sm`	—	Plate elevation
`--font-display`	Bricolage Grotesque	Initial letter
`--font-mono`	JetBrains Mono	Share percentage
`--d-slow`	420ms	Segment rebalance animation
`--ease-spring`	cubic-bezier(0.34,1.56,0.64,1)	Segment rebalance easing

See it in context

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

The month plate is the first slide in the viz carousel below the header card. It shows a segmented ribbon of who-paid proportions for the current month.