Section 01
Card Variants
Cards are the primary content containers. White full-bleed for main content. Compact for horizontal rows. Bordered left for insights.
White Full-Bleed (shadowLow)
Total Portfolio Value
₹1,24,350
↑ 8.4%
Invested
₹1,14,700
Returns
+₹9,650
XIRR
11.2%
Full card — Portfolio summary
Available Balance
₹18,432
Compact — with CTA
Compact Horizontal (72px min-height)
📈
Daily Earnings
Across 8 brands
+₹42.50
💳
Cashback Earned
This month
₹320
Left Border — Insight Cards
💡
Spend more on Zomato to earn faster
You're ₹200 away from unlocking the next cashback tier with Zomato.
Gold border — tip/offer
Nifty 50 up 1.2% today. Your portfolio is outperforming by 0.3%.
Blue border — info/market
Update your KYC documents to continue investing without interruption.
Coral border — alert/warning
Metric / KPI Cards
💰
Total Invested
₹1.14L
↑ 12.4%
Invested
📈
Total Returns
+₹9,650
↑ 8.4% XIRR
Returns
🏆
Cashback
₹4,230
↑ +₹320 this month
Cashback
⏱
Streak
47 days
Personal best!
Streak
Section 02
List Items
All list item variants in a single container. Min 56px height, 16px horizontal padding. Inset divider at content edge.
Basic + Icon Tile Variants
Two-line item
Secondary text with more detail
›
⭐
With icon tile
40×40 tinted tile
›
PR
Paddy Raghavan
paddy@example.com
›
With left colour dot
Status indicator
₹1,200
Settings & Action Rows
Auto-invest
Round-up spare change
Push Notifications
Deals and cashback alerts
Section 03
Transaction List
Brand gradient tile + name + category tag + date + amount. Grouped by date header. Credit = tealText, Debit = txMid. Optional cashback chip.
C
Cashback Credited
Auto-credited
Section 04
Notification List
Unread = bold title + gold left border + gold dot. Read = normal weight, no border. Grouped by recency.
💰
Cashback of ₹47.20 credited!
Your Zomato, Swiggy and Ola cashbacks have been credited to your wallet.
2 minutes ago
📈
Portfolio hit a new high
Your portfolio crossed ₹1.24 lakh. Keep it up!
1 hour ago
🛍
New brand added — Myntra
Earn up to 5% cashback on all Myntra purchases.
Yesterday at 3:00 PM
⚠️
KYC verification pending
Complete your KYC to keep investing without limits.
2 days ago