Components
1. Buttons
Primary interaction elements across all surfaces. Medium size (44 px) is the default.
Default
Hover
Pressed
Disabled
Primary
Gold
Secondary
Outline
Ghost
Destructive
Size Variants (Gold Gradient)
Small
32px · 14px · px-16
Medium
44px · 16px · px-24
Large
52px · 18px · px-32
Hover State CSS
.btn-gold-cta:hover {
box-shadow: 0 6px 24px rgba(196,154,60,0.45);
transform: translateY(-1px);
}
.btn-primary:hover {
background: #1a1a1a;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
Premium Dark Variant
2. Inputs
Text inputs with clear visual states for default, focus, error, and disabled.
Floating Label Variant
Currency Input
3. Cards
Content containers for portfolio data, fund information, and statistics.
Total Value
₹24,58,932
+12.3% ↑
Axis Bluechip Fund
NAV ₹45.23
Large Cap
Returns
₹1,24,500
+8.2% ↑
Glass Cards on Dark Background
Portfolio Value
₹12,45,000
Updated 2 min ago
+5.6%
Gold Plan
Today's Returns
₹3,240
Across 4 funds
XIRR
18.4%
Since inception
4. Badges
Status indicators, tags, and labels used across the platform.
Status Badges
Success
Warning
Error
Brand
Neutral
Investment Tags
SIP
Lump Sum
HIGH RISK
LOW RISK
Glass Badges on Dark
Premium
+12.3%
Pending
GOLD TIER
LOW RISK
5. Bottom Navigation Bar
Mobile tab bar for primary navigation. 64 px height, active state uses gold.
6. List Items
Structured rows for holdings, transactions, and other data lists.
Axis Bluechip Fund
Large Cap · Growth
SIP Investment
Axis Bluechip Fund
7. Dark Premium Showcase
All premium components rendered on a dark surface, showcasing glassmorphism and gold accents.
Buttons
Cards
Total Invested
₹18,50,000
+14.2%
Current Value
₹21,12,700
As of today
SIP Active
4
Next debit: Mar 15
Inputs
Badges
Premium
Invested
Pending
GOLD TIER
ACTIVE SIP
KYC VERIFIED