Handoff 01 / Onboarding

Onboarding Flow

5-screen sequence: Value Prop → Phone Entry → OTP Verify → Welcome → KYC Prompt. Estimated completion: 90 seconds.

9:41

Invest Smarter,
Grow Faster

Value Proposition

screens-onboarding-00-value-prop.html

9:41

Enter your mobile number

+91

We'll send a verification code

Phone Entry

screens-onboarding-01-phone.html

9:41

Verify OTP

Resend in 28s

OTP Verification

screens-onboarding-02-otp.html

9:41

✓

Welcome to BYLD

Welcome

screens-onboarding-03-welcome.html

9:41

Complete KYC

KYC Prompt

screens-kyc-01-prompt.html

Glassmorphism Values

background: rgba(255,255,255,0.03)
backdrop-filter: blur(20px)
border: 1px solid rgba(255,255,255,0.06)
border-radius: 16px (cards), 12px (inputs)
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04)

Animation Timing

fadeInUp: 0.8s ease, stagger 0.1s
Page transition: 300ms ease-in-out
Button press: scale(0.98) 100ms
OTP auto-advance: 50ms per digit
Success check: 0.5s spring overshoot

Typography

H1: Playfair Display 700 / 28px / 1.2
Body: DM Sans 400 / 14px / 1.6
Label: DM Sans 500 / 11px / uppercase
Button: Montserrat 700 / 16px / 0.02em
Mono: JetBrains Mono 400 / 13px

Spacing Grid

Screen padding: 28px horizontal
Section gap: 24px
Card padding: 20px
Input height: 52px
Button height: 52px
Bottom safe area: 36px

Handoff 01 / Developer Specs

Per-Screen Specifications

CSS class names, required ARIA labels, and regulatory requirements for each onboarding screen.

01 — Value Proposition

/* Container */
.onboarding {
  background: linear-gradient(165deg, #0A0A0A, #111, #0D0D0D);
}

/* Carousel dots */
.page-dot.active {
  background: var(--gold);
  width: 24px;
}

/* CTA */
.btn-gold-cta {
  height: 52px;
  border-radius: 12px;
  background: var(--gold-gradient);
}

aria-label: "Get Started with BYLD Wealth"
role: "main" on .onboarding
aria-live: "polite" on carousel

⚠ REGULATORY: No return promises. "AI-powered" must link to AI disclosure.

02 — Phone Entry

/* Phone input */
.phone-input {
  height: 56px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 18px;
}

.phone-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,154,60,0.15);
}

aria-label: "Mobile number"
inputmode: "tel"
autocomplete: "tel"
maxlength: 10

⚠ REGULATORY: Must show T&C + Privacy Policy links. Consent checkbox required.

03 — OTP Verification

/* OTP boxes */
.otp-digit {
  width: 48px;  height: 56px;
  border: 1px solid rgba(196,154,60,0.3);
  border-radius: 12px;
  font: 600 24px 'JetBrains Mono';
}

/* Auto-read OTP */
autocomplete: "one-time-code"

aria-label: "OTP digit N of 6"
inputmode: "numeric"
pattern: [0-9]
Resend timer: 30s countdown, 3 max retries

⚠ REGULATORY: OTP expires in 5 min. Rate limit: 5 attempts / 15 min.

04 — Welcome Screen

/* Success animation */
.success-check {
  animation: scaleIn 0.5s
    cubic-bezier(0.34,1.56,0.64,1);
}

/* Gold confetti (optional) */
.gold-particles {
  color: var(--gold);
  count: 24;
  duration: 2s;
}

aria-label: "Welcome to BYLD Wealth"
aria-live: "assertive" on success
Auto-advance: 3s to KYC (cancellable)

✓ No regulatory requirements on this screen.

05 — KYC Prompt

/* Progress steps */
.kyc-progress {
  display: flex;
  gap: 4px;
}
.kyc-step.done {
  background: var(--gold);
  height: 3px;
}

/* Skip option */
.skip-link {
  color: var(--gray-500);
  font-size: 13px;
}

aria-label: "Complete KYC verification"
Steps: PAN → Aadhaar → Bank → Selfie
Skip: Yes, limited to demo mode

⚠ REGULATORY: SEBI KYC mandatory before investment. AMFI ARN display. PAN via NSDL/CDSL.

Regulatory Summary

Screen	Requirement
Value Prop	AI disclosure link
Phone	T&C, Privacy Policy, consent
OTP	5-min expiry, rate limiting
Welcome	None
KYC	SEBI KYC, AMFI ARN, PAN

All screens: WCAG 2.1 AA. :focus-visible 2px gold outline. prefers-reduced-motion support.