← Back to Index
09 / FOUNDATION

Component States

Every core BYLD Wealth component documented across all interaction states. Horizontal comparison rows for developer handoff, with live demos and CSS snippets.

1. Gold CTA Button

Primary call-to-action with gold gradient. Communicates premium brand at every touch point.

Default
Hover
Active / Pressed
Disabled
Loading
/* Gold CTA Button — State-specific styles */

.btn-gold-cta {
  background: linear-gradient(135deg, #E0C17A, #C49A3C, #9B7A2F);
  box-shadow: 0 4px 16px rgba(196,154,60,0.3);
}

.btn-gold-cta:hover {
  background: linear-gradient(135deg, #EDD48E, #D4AA4C, #AB8A3F);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(196,154,60,0.45);
}

.btn-gold-cta:active {
  background: #9B7A2F;
  transform: scale(0.98);
}

.btn-gold-cta:disabled {
  filter: saturate(0.3);
  opacity: 0.5;
  pointer-events: none;
}

.btn-gold-cta.loading::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  background-size: 200% 100%;
  animation: shimmer-fast 1s linear infinite;
}

2. Glass Input

Glassmorphic text input with gold focus ring. Used across forms, KYC, and search.

Default
Focus
Filled
Invalid PAN format
Error
Disabled
/* Glass Input — State-specific styles */

.glass-input {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
}

.glass-input:focus {
  border-color: #C49A3C;
  box-shadow: 0 0 0 3px rgba(196,154,60,0.2), 0 0 20px rgba(196,154,60,0.1);
}

.glass-input.filled {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.12);
}

.glass-input.error {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}

.glass-input:disabled {
  opacity: 0.4;
  pointer-events: none;
}

3. Glass Card

Primary container for portfolio values, holdings, and data display. Glassmorphic with elevation on interaction.

Total Portfolio
₹2.4 Cr
+12.4% YTD
Default
Total Portfolio
₹2.4 Cr
+12.4% YTD
Hover
Total Portfolio
₹2.4 Cr
+12.4% YTD
Active
Skeleton / Loading
/* Glass Card — State-specific styles */

.glass-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border-radius: 16px;
}

.glass-card:hover {
  border-color: rgba(196,154,60,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(196,154,60,0.1);
  transform: translateY(-2px);
}

.glass-card:active {
  transform: scale(0.98);
}

/* Skeleton shimmer via ::after overlay */
.skel-line::after {
  background: linear-gradient(90deg, transparent, rgba(196,154,60,0.12), transparent);
  background-size: 200% 100%;
  animation: shimmer-skel 1.8s ease-in-out infinite;
}

4. Chat Bubble — AI

AI advisor response bubble with gold left accent. The primary conversational interface element.

Based on your risk profile, I recommend a 60/40 equity-debt split for your retirement goal.
Default
Typing Indicator
SIP stands for Systematic Investment Plan. It lets you invest a fixed amount regularly.
Educational
Badge: Educational
As per SEBI guidelines, KYC verification is mandatory before investing.
Regulatory
Badge: Regulatory
Your portfolio has outperformed benchmark by 3.2% this quarter.
Personalized
Badge: Personalized
Would you like to explore investment options?
With Action Chips
/* Chat Bubble AI — State-specific styles */

.chat-ai {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #C49A3C;
  border-radius: 2px 14px 14px 14px;
}

/* Typing indicator — 3 bouncing dots */
.typing-dots span {
  width: 8px; height: 8px;
  background: #C49A3C;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.badge-educational { background: rgba(59,130,246,0.15); color: #60A5FA; }
.badge-regulatory  { background: rgba(245,158,11,0.15); color: #FBBF24; }
.badge-personalized { background: rgba(196,154,60,0.15); color: #E0C17A; }

5. Chat Bubble — User

User message bubble with gold gradient background. Right-aligned with delivery status indicators.

Show me my portfolio summary
12:34 PM
Sent
Show me my portfolio summary
Sending...
Sending
I want to start a SIP of 50K
12:35 PM
Default
Show me tax harvesting options
Retry
Failed
/* Chat Bubble User — State-specific styles */

.chat-user {
  background: linear-gradient(135deg, rgba(196,154,60,0.2), rgba(155,122,47,0.15));
  border: 1px solid rgba(196,154,60,0.25);
  border-radius: 14px 2px 14px 14px;
}

.chat-user.sending {
  opacity: 0.55;
  /* Show clock icon in meta */
}

.chat-user.sent {
  opacity: 1;
  /* Show checkmark in meta */
}

.chat-user.failed {
  border-color: #DC2626;
  box-shadow: 0 0 0 1px rgba(220,38,38,0.3);
  /* Show retry link in meta */
}

6. Quick Reply Chips

Tappable option chips below chatbot messages. Gold outline with fill on interaction.

View SIPs
Default
View SIPs
Hover
View SIPs
Selected
View SIPs
Disabled
/* Quick Reply Chips — State-specific styles */

.qr-chip {
  border: 1.5px solid rgba(196,154,60,0.5);
  color: #E0C17A;
  background: transparent;
}

.qr-chip:hover {
  background: linear-gradient(135deg, #E0C17A, #C49A3C, #9B7A2F);
  color: #0A0A0A;
  border-color: transparent;
}

.qr-chip.selected {
  background: #C49A3C;
  color: #0A0A0A;
  box-shadow: 0 2px 12px rgba(196,154,60,0.3);
}

.qr-chip:disabled {
  border-color: rgba(255,255,255,0.1);
  color: #4B5563;
  cursor: not-allowed;
}

7. Bottom Navigation Tab

Mobile bottom navigation bar with active gold highlight, inactive gray, and notification badge.

🏠 Home
Active
📊 Portfolio
Inactive
💬 Chat
Badge
🏠 Home
📊 Portfolio
💬 Chat
👤 Profile
Full Bar
/* Bottom Navigation — State-specific styles */

.bnav-item.active .bnav-icon,
.bnav-item.active .bnav-label {
  color: #C49A3C;
}

.bnav-item .bnav-icon,
.bnav-item .bnav-label {
  color: #4B5563;  /* Inactive gray */
}

.bnav-dot-indicator {
  width: 4px; height: 4px;
  background: #C49A3C;
  position: absolute; top: -6px;
}

.bnav-badge {
  width: 8px; height: 8px;
  background: #DC2626;
  border: 1.5px solid #0A0A0A;
  position: absolute; top: -4px; right: -6px;
}

8. Tier Badge

Subscription tier identifiers. Each variant uses its sub-brand color with the 5-dot logo rendered in tier color.

BYLD Master
Master — #000 / #FFF
BYLD Edge
Edge — #5D4749
BYLD Core
Core — #034F93
BYLD Legacy
Legacy — #550372
/* Tier Badge — Variant-specific styles */

.tier-badge.master {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  color: #FFFFFF;
}

.tier-badge.edge {
  background: rgba(93,71,73,0.12);
  border-color: rgba(93,71,73,0.4);
  color: #D4A0A3;
}

.tier-badge.core {
  background: rgba(3,79,147,0.12);
  border-color: rgba(3,79,147,0.4);
  color: #5BA3E0;
}

.tier-badge.legacy {
  background: rgba(85,3,114,0.12);
  border-color: rgba(85,3,114,0.4);
  color: #B55CD8;
}

/* 5-dot logo: 2x3 grid, top-right empty, bottom-left accent */
.tier-dots {
  display: grid;
  grid-template-columns: 8px 8px;
  gap: 3px;
}

9. Toast Notification

Transient feedback notifications. Color-coded left border with icon, message, and dismiss control.

✓
SIP of ₹50,000 started successfully
×
Success
!
Payment failed. Please retry.
×
Error
⚠
KYC expires in 7 days
×
Warning
i
Market opens in 30 minutes
×
Info
/* Toast Notification — Variant-specific styles */

.toast {
  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid;
  backdrop-filter: blur(20px);
}

.toast.success  { border-left-color: #16A34A; }
.toast.error    { border-left-color: #DC2626; }
.toast.warning  { border-left-color: #F59E0B; }
.toast.info     { border-left-color: #3B82F6; }

.toast-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  /* Background uses variant color at 15% opacity */
}
BYLD Wealth Design System v2.0 Page 09 — Component States Reference