BYLD Wealth — Component States & Interaction Spec

Section 01 / 05

Button States

All interactive button variants across 5 states. Hover and click elements directly — states are fully live.

.btn-gold-cta — Primary Action

Default gold-gradient + gold-glow

background: --gold-gradient
box-shadow: --gold-glow

Hover :hover — brightness 1.1

filter: brightness(1.1)

Active :active — scale 0.98

transform: scale(0.98)

Disabled :disabled — opacity 0.4

opacity: 0.4
cursor: not-allowed

Loading shimmer sweep 1.4s

animation: btn-shimmer 1.4s infinite

Live Interactive hover / click / hold

Hover Me

.btn-secondary — Glass Background, White Text

Default glass bg, white text

background: rgba(255,255,255,0.05)
border: rgba(255,255,255,0.12)

Hover elevated bg + shadow

background: rgba(255,255,255,0.09)
box-shadow: 0 4px 16px rgba(0,0,0,0.25)

Active :active — scale 0.98

transform: scale(0.98)

Disabled opacity 0.4

opacity: 0.4; cursor: not-allowed

Loading white shimmer 1.4s

animation: btn-shimmer 1.4s infinite

Live Interactive

Hover Me

.btn-back — 44px Circle, Back Navigation

Default glass circle

width: 44px
border-radius: 50%

Hover elevated + float

box-shadow: 0 6px 20px rgba(0,0,0,0.35)
transform: translateY(-1px)

Active :active — scale 0.94

transform: scale(0.94)

Live Interactive

Hover Me

Section 02 / 05

Input States

Text input and OTP across all interaction states. Click the live inputs to see focus ring.

Text Input — 5 States

Empty placeholder text

::placeholder:
color: --gray-600

Focused :focus-visible — gold ring

border-color: --gold-mid
box-shadow: 0 0 0 3px rgba(196,154,60,0.18)

Filled value present

border-color: rgba(255,255,255,0.18)
background: rgba(255,255,255,0.06)

⚠ Required field

Error red border + message

border-color: --error (#DC2626)
box-shadow: 0 0 0 3px rgba(220,38,38,0.12)

Disabled :disabled — not-allowed

opacity: 0.4
cursor: not-allowed

Live Interactive
click to focus

Click Me

OTP Input (6 boxes) — 4 States

Emptyall boxes blank

border: rgba(255,255,255,0.10)
background: rgba(255,255,255,0.04)

4

2

Activecurrent digit — gold glow + cursor

border-color: --gold-mid
cursor anim: otp-cursor 1s infinite

8

4

3

1

9

2

Completeall 6 filled — green

border-color: rgba(74,222,128,0.4)
color: #4ADE80

7

Incorrect OTP. Try again.

Errorwrong code — red + shake

border-color: --error
animation: otp-shake 0.4s ease

Section 03 / 05

Card States

Glass card variants, MIA message bubbles, and user message bubbles across all interaction and data states.

.glass-card — 4 States

Nifty 50

NSE · Index

₹24,320

Defaultglass bg 0.03

background: --glass-bg
rgba(255,255,255,0.03)

Nifty 50

NSE · Index

₹24,320

Hoverbg elevated 0.06

background: --glass-elevated
rgba(255,255,255,0.06)

Nifty 50

NSE · Index

₹24,320

Selectedgold border

border: rgba(196,154,60,0.45)
background: rgba(196,154,60,0.04)

Nifty 50

NSE · Index

₹24,320

With Glowgold box-shadow

box-shadow: --gold-glow
0 4px 16px rgba(196,154,60,0.3)

Nifty 50

NSE · Index

₹24,320

Live Interactive

Hover Me

.msg-bubble.ai-bubble — MIA Message Variants

Based on your portfolio, I recommend increasing equity exposure to 65%.

Defaultplain text

border-left: 3px solid --gold
border-radius: 4px 16px 16px 4px

📊 SEBI Data · 2025

Equity mutual funds returned 18.4% average in FY25.

With Sourcedata attribution tag

.source-tag: gold tint badge

Your SIP of ₹5,000/month is due tomorrow.

→ Review SIP

With Actioninline CTA link

.action-link: gold color, hover-active

What would you like to explore next?

SIP Plans Mutual Funds Tax Saving

With Chipsquick-reply options

.bubble-chip: glass, hover → gold

.msg-bubble.user-bubble — User Message States

I want to invest ₹10,000 this month.

10:42 AM ✓✓

Defaultsent + read ticks

border-radius: 16px 16px 4px 16px

I want to invest ₹10,000 this month.

sending…

Sendingopacity 0.6 + shimmer

opacity: 0.6
animation: btn-shimmer 1.2s infinite

I want to invest ₹10,000 this month.

10:42 AM ✓

Sentdelivered, not read

opacity: 1.0
tick: single ✓ in gold

Section 04 / 05

Navigation States

Bottom nav tabs and chip/tag components across all interaction states.

.nav-tab — Bottom Navigation Item

LIVE PREVIEW — Home tab active

📊 Portfolio

Defaultgray icon + label

color: --gray-500
font-weight: 500

📊 Portfolio

Activegold + dot indicator

color: --gold
::before: top bar gold-gradient

💬 MIA

3

With Badgered circle + count

background: #DC2626
border: 1.5px solid --black

.chip — Tag / Quick-Reply Chip

SIP Plans

Defaultglass bg, gray text

background: rgba(255,255,255,0.05)
border: rgba(255,255,255,0.12)

SIP Plans

Hovergold border + text

border-color: rgba(196,154,60,0.4)
color: --gold-light

SIP Plans

Selectedgold bg fill

background: linear-gradient(135deg,
rgba(196,154,60,0.18), .06)
border: --gold

SIP Plans

Disabledopacity 0.35, not-allowed

opacity: 0.35
cursor: not-allowed

Try Me

Live Interactive

Hover Me

Section 05 / 05

MIA Avatar States

The 44px header mark (.mia-mark-header) across all semantic states. Animations are live.

.mia-mark-header (44px) — 5 States

M

Idleslow breathe

mia-glow 3s ease-in-out ∞

border-color:
rgba(196,154,60, 0.35→0.65)

M

Thinkingfast pulse

bloom-think 1.2s ease-in-out ∞

scale: 1 → 1.06 → 0.98
brightness: 1 → 1.25 → 0.95

M

Activebright glow

static — brightness(1.3)

box-shadow:
0 0 35px rgba(196,154,60,0.6)
0 0 70px rgba(196,154,60,0.25)

M

⚠

Errordim — no animation

animation: none

filter: brightness(0.5)
border: rgba(220,38,38,0.35)

M

Green Marketsemerald color mode

mia-glow-green 3s ease-in-out ∞

border-color:
rgba(74,222,128, 0.35→0.65)
color: #4ADE80

Animation Reference

mia-glow

duration: 3s
easing: ease-in-out
iteration: infinite
state: Idle

bloom-think

duration: 1.2s
easing: ease-in-out
iteration: infinite
state: Thinking

bloom-core-pulse

duration: 3.5s
easing: ease-in-out
iteration: infinite
state: Default header

mia-orbit

duration: 18–35s
easing: linear
iteration: infinite
state: Ring rotation

WCAG 2.1 AA · Accessibility Notes

Focus indicator: 2px gold-mid outline, 3px offset — meets 2.4.11 Focus Appearance
Motion: All animations respect prefers-reduced-motion when applied
Touch targets: All interactive elements ≥44×44px (back button, nav tabs)
Contrast (gold on black): 4.8:1 — passes AA for normal text
Disabled state: opacity 0.4 — decorative, not keyboard-focusable