Dark surface (midnight) with semantic border. Positioned 16px above bottom nav bar. Auto-dismiss after 4s. Action button optional.
✓Investment confirmed! ₹1,000 invested in Zepto.
Success — teal
✕Payment failed. Please try again.Retry
Error — coral + action
ℹNew offer available on Swiggy. Limited time only.View
Info — blue + action
⚠KYC pending — investing limit reduced.Fix
Warning — gold + action
Toast Spec: Background #0C1220 · Border 1px with 30% opacity semantic color · cornerRadius 16px · Min 300px wide, max 360px · Padding 14px 16px · Icon 20px · Text 14px/600 · Action 13px/700 semantic color · Position: fixed, 80px above bottom safe edge.
Section 02
Alert Banners (Inline)
Inline alerts within page content. Dismissible variant has ✕ button top-right. Semantic color coding consistent with toasts.
ℹ
Market is closed today
Orders placed now will execute when markets open at 9:15 AM on the next trading day.
⚠
KYC expires in 7 days
Renew your documents to avoid investment limits. Renew now
✕
✕
Bank account verification failed
The account number or IFSC you entered doesn't match our records. Please check and try again.
✕
✓
PAN verified successfully
Your PAN card has been verified. You can now invest up to ₹2 lakh.
Section 03
Progress Indicators
Linear bars for goals and loading. Circular ring for goal tracking. Step progress for onboarding flows.
Linear Progress Bars
Emergency Fund₹34,500 / ₹50,000
69% complete
Monthly target₹8,200 / ₹10,000
82%
KYC documents3 / 5
60%
Loading
@keyframes progressLoad { from { width:15%; } to { width:85%; } }
Circular Ring Progress
69%
Emergency Fund
Goal ring (gold)
82%
Monthly Target
Goal ring (teal)
30%
Portfolio drop
Alert ring (coral)
3-Step Progress (numbered)
KYC Verification
✓
Mobile
2
Documents
3
Bank
Section 04
Skeleton Loaders
Shimmer animation (1.5s, ease-in-out, infinite). Shapes mirror the real content geometry. Never use spinners alone for content areas — prefer skeletons.
Card Skeleton
List Item Skeleton
Avatar & Amount
Section 05
Empty States
Every major list/content area needs an empty state. Icon + title + body + optional CTA. Tone matches context (neutral for no results, encouraging for first-use).
📄
No transactions yet
Your spending history will appear here once you shop with a Multipl brand.
No transactions
🏷
No brands added
Link your favourite brands to start earning cashback automatically.
No brands linked
🔍
No results found
We couldn't find anything matching "zepto2". Try a different search term.
Search — no results
😕
Something went wrong
We're having trouble loading your data. This is on us — please try again.
Error / server failure
Section 06
Loading Screens
Full-page loader for initial app load or blocking operations. Inline section loader for partial content refresh.