BYLD Brand Book · v2.0 — Pivot Edition

The Freemium Bloom.

This brand book documents the BYLD Wealth design system as of the 2026-04-08 product pivot to freemium onboarding, MIA-first navigation, two-product architecture, and the 16-leaf asset/liability taxonomy. Every value in this document comes from a token; every layout is auto-layout; every container is named.

Updated 2026-04-08 Authored by Vivek Kumar, Head of Engineering Dark theme only (Phase 1) WCAG 2.1 AA
SECTION 0

Pivot Update 2026-04-08

The 2026-04-08 product pivot reshaped the BYLD mental model. Five patterns are new to the design system and are documented below. Everything downstream (brand book, tokens, prototypes) follows from these five changes.

What changed in the design system

BYLD moved from "premium subscription from day one" to a seven-day full-Legacy trial that bifurcates into BYLD Wealth (paid RIA) or BYLD Markets (free distribution). This changes what screens exist, which MIA is on duty, and how the user's state is surfaced visually.

  • Five lifecycle states — TRIAL, WEALTH_PAID, FREE_MARKETS, CHURNED, ERASED. Each has a color cue, a badge, and a Home-screen treatment.
  • 5-tab bottom navigation — Home · Investments · MIA (centre) · Liabilities · Services. The 16-leaf taxonomy maps onto the two data tabs.
  • MIA floating sheet pattern — MIA is no longer a page. She is a drawer that peeks from the bottom of every screen and expands into a conversation on tap.
  • Day 5 / 6 / 7 trial nudges — escalating in-app cards that explain the AA data-revocation consequence honestly.
  • 16-leaf taxonomy visualization — a canonical tree (Assets → Listed / Unlisted / Deposits; Security → Insurance; Liabilities → Secured / UnSecured) drives every holdings view.
  • AA Access Revoked notice — the post-trial FREE_MARKETS state shows a user-facing card explaining that Finvu consent ended and the user can upload CAMS CAS to rehydrate.
Do
Make state legible. Show the TRIAL badge + days-remaining counter in the app bar on every screen during Day 1–7. The consequence of inaction must be visible.
Don't
Don't hide the state. The trial should never be discovered only by an end-of-trial alert. Silent trials feel like surprise charges.
SECTION 1

Brand Foundation

BYLD Wealth is a premium, fee-only RIA product for Indian HNI families. The brand expression is CRED-level: dark, confident, data-forward, hand-finished. The mascot is MIA — My Intelligent Analyst — rendered in Neural Bloom.

Logo — 5-dot grid
Canonical

2 columns × 3 rows. The top-right position is empty. The bottom-left is gold (#C49A3C). Every BYLD surface carries this mark.

MIA — Neural Bloom
Mascot

MIA appears as a breathing gold orb in the bottom-centre of the navigation bar. On advisory screens she wears the Wealth voice; on distribution screens she wears the Markets voice. Same character, different auth scope.

MIA is online
Wealth mode · 5,000 credits remaining
Do
Write in the voice of an analyst. Specific, direct, numerate. "Your equity is 58% of assets — that's 8 points above your IPS target."
Don't
Don't use chatbot filler. No "Hi there!", no exclamation marks, no emoji in advisory copy. BYLD users are paying for competence, not friendliness.
SECTION 2

Color System

Gold is the only brand hue. Everything else is neutral, feedback, or a 16-leaf taxonomy accent. All colors live in tokens/core.json and are referenced through semantic aliases; never hardcode hex in a component.

Gold scale

Gold 100
core.color.gold.100
#F5E6C8
Gold 300
core.color.gold.300
#E0C17A
Gold 500 — Primary
core.color.gold.500
#C49A3C
Gold 700
core.color.gold.700
#9B7A2F
Gold 900
core.color.gold.900
#6B5420

Neutral scale (dark-tuned)

Neutral 950 — Page
core.color.neutral.950
Neutral 900 — Card
core.color.neutral.900
Neutral 800 — Raised
core.color.neutral.800
Neutral 700
core.color.neutral.700
Neutral 300 — Muted text
core.color.neutral.300
Neutral 100 — Headline
core.color.neutral.100

16-leaf taxonomy palette

Each asset or liability leaf has a dedicated accent color. Used on cards, chart segments, and MIA reply bullets. Authoritative source: tokens/core.json → color.asset-leaf.

MutualFunds
leaf.mutual-fund
Equity
leaf.equity
PMS / AIF
leaf.pms-aif
Bonds
leaf.bonds
RealEstate
leaf.real-estate
Commodities
leaf.commodities
ESOP / RSU
leaf.esop-rsu
UnlistedOther
leaf.unlisted-other
PF / EPF
leaf.pf-epf
NPS
leaf.nps
FD / RD / Savings
leaf.fd-rd-savings
Insurance
leaf.insurance
LAP / LAS
leaf.lap-las
Auto loan
leaf.auto-loan
CreditCard
leaf.credit-card
EL / PL / HL
leaf.el-pl-hl
SECTION 3

Typography

Four fonts, each with a clearly-defined job. Montserrat for UI headings. DM Sans for body copy. Playfair Display for brand moments and hero display text. JetBrains Mono for every financial number in the product. Sizes come from the {core.typography.size.*} scale; weights from {core.typography.weight.*}.

The quiet confidence of wealth.
Display heroPlayfair Display · 40px · 700semantic.typography.display-hero
Your Investments
H1 page titleMontserrat · 32px · 700semantic.typography.heading-h1
Listed assets
H3 section headingMontserrat · 24px · 600semantic.typography.heading-h3
Your equity concentration in HDFC Bank is 12% of portfolio. Your IPS target for any single equity position is 10%. I'd suggest trimming to align.
Body largeDM Sans · 16px · 400semantic.typography.body-lg
₹2,48,52,310
Data hero — net worthJetBrains Mono · 40px · 500semantic.typography.data-hero
SECTION 4

Spacing & Layout

An 8px base grid with 2, 4, 6 for hairlines and icon gaps. Every gap, padding, and margin comes from this scale. Absolute positioning is reserved for overlays (drawers, modals, sticky bars); content layout is always Flexbox or Grid with explicit gap.

space.8
8px
space.16
16px — default padding
space.24
24px — section gap
space.32
32px — major break
Do 
.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--padding-md);
}
Don't 
.card p {
  margin-top: 14px; /* magic number */
}
.card .title {
  margin-bottom: 10px; /* inconsistent */
}
SECTION 5

Components

Every component on this page is a real instance from tokens/tokens.css. BEM classes name the container (.byld-card), its modifier (.byld-card--hero), and its elements (.byld-card__title).

Buttons
Badges
Trial · Day 3 BYLD Edge Markets only +12.4% −2.1%
Total Net Worth
+₹4.2L this month
As of today · live from Finvu AA
₹2,48,52,310
▲ 1.72% · ₹4,21,840
Mutual Funds
12 schemes · 4 fund houses
₹84.2L
Equity
8 positions · BSE/NSE
₹62.1L
SECTION 6

Screens & Patterns

The two patterns that define the pivot are the MIA floating sheet and the 5-tab bottom navigation. Both live here. Fully-built prototypes are in design-system/prototype-pivot/.

MIA floating sheet (peek)

Total Net Worth
₹2,48,52,310
MIA
Online · Wealth mode

5-tab bottom navigation

Home
Invest
MIA
Liabilities
Services
SECTION 7

Theming

Phase 1 is dark-only per PRD §5. There is no light-mode toggle. The semantic surface/text/border tokens are wired through tokens/themes/dark.json, which is the only theme file in Phase 1. Glassmorphism is achieved by pairing surface-glass fill with blur-md backdrop.

surface.glass
white 4% + blur 16
surface.glass-raised
white 8% + blur 20
surface.card
neutral 900
SECTION 8

Accessibility

Phase 1 NFR is WCAG 2.1 AA. Every typographic pairing in the token set meets the 4.5:1 contrast ratio for body text and 3:1 for headings. Every touch target is at minimum 44×44 (size.control.md). Focus rings use gold-500 at 3px offset.

Do
Use var(--text-default) (white) on var(--surface-card) (neutral 900). Contrast ratio: 17.6:1.
Don't
Don't use var(--text-subtle) (neutral 400) on var(--surface-glass). Contrast ratio is only 3.1:1 — fails AA for body.
SECTION 9

Component States

Every component exposes four states: default, hover, active/pressed, and disabled. Inputs add focus and error. The motion from state to state is duration.fast (150ms) with easing.ease-out.

Button states
Input states
Card states
Default card
Hover card
SECTION 10

Dharam's Three Rules

Three non-negotiable rules govern every BYLD design artifact. They exist so that Dharam (our designer) can lift any HTML screen directly into Figma via Token Studio without translation.

1
Token everything

Typography, spacing, sizing, color — every value comes from a Token Studio token. If it's hardcoded, it's wrong. Export format: Token Studio v2 JSON. 

/* Wrong */
padding: 14px;
color: #C49A3C;

/* Right */
padding: var(--padding-md);
color: var(--brand-primary);
2
Auto-layout only

Flexbox or Grid with explicit gap. Absolute positioning is only for overlays (drawer, modal, sticky bar, scrim). No magic-number margins. 

/* Wrong */
position: absolute;
top: 42px; left: 16px;

/* Right */
display: flex;
flex-direction: column;
gap: var(--gap-md);
padding: var(--padding-lg);
3
Name everything

Every container has a BEM class name that describes its purpose. Every reusable piece is in the component library (§11). Layer names in Figma must match. 

/* Wrong */
<div class="wrapper">
  <div class="inner">...</div>
</div>

/* Right */
<section class="mia-drawer">
  <header class="mia-drawer__header">...</header>
  <div class="mia-drawer__messages">...</div>
</section>
SECTION 11

Component Library Index

Every reusable component defined in tokens/tokens.css is indexed below. Dharam mirrors this index in Figma as a component master set. New components must be added here before they can be used in a screen.

.byld-card / --hero / --leaf
Glass card container for any group of related content. --hero raises elevation and padding. --leaf is the tappable 16-leaf taxonomy card used on Investments and Liabilities tabs.
surface-glass radius-card padding-md elevation-card
.byld-button / --primary / --secondary / --ghost
Action. Primary is the gold gradient CTA with gold glow. Secondary is a glass outline for non-destructive alternatives. Ghost is in-line action.
brand-primary elevation-cta size-control-lg radius-control
.byld-badge / --trial / --wealth-paid / --free-markets / --gain / --loss
Small status marker. Lifecycle state variants signal the user's flag; finance variants signal gain/loss on numbers.
radius-chip caption lifecycle-state.*
.mia-drawer / __handle / __header / __messages / __composer
The core pivot component. Floating sheet that peeks at the bottom of every screen and expands on tap to host MIA conversation. Also renders as a full modal on onboarding.
surface-card-raised radius-sheet blur-lg elevation-drawer
.mia-bubble / --user
Chat message bubble. Default is the MIA-authored glass bubble; --user is the user-authored gold gradient bubble aligned to the right.
radius-card-lg body-default
.mia-avatar / --sm / --md / --lg / --xl
Neural Bloom avatar. Breathing gold orb with radial highlight. Size variants match the position: chat row (md), tab bar (md), hero onboarding (xl).
color-gold-* duration-ambient size-avatar-*
.byld-tabbar / __item / --active / --mia
5-tab bottom navigation. The centre MIA tab is raised 16px above the rest so the avatar floats over the tab bar edge.
brand-primary blur-lg size-icon-md
.trial-banner / __content / __title / __cta
Day 5 / 6 / 7 escalating trial nudge. Gold-tinted card with title, explanation, and a single CTA. Placed above the section header on Home.
color-gold-12 brand-primary radius-card
.networth-hero / __label / __value / __delta
The single largest typographic moment in the app. JetBrains Mono 40px data hero with gain/loss delta row underneath.
data-hero finance-gain
.leaf-swatch / --*
The 16-leaf taxonomy icon container. Each leaf has a dedicated accent color. Used as the leading icon in every leaf card.
leaf.* radius-md
.milestone-list / .milestone-item / __check / __body / --complete
Activation funnel tracker (PRD §15). Shows IPS · Health Score · Goal · First MIA · First Investment · Subscription with done/pending states.
surface-glass color-gold-12 brand-primary
.byld-phone / __notch / __screen
Device frame chrome for the prototype index. Mobile-only Phase 1. Rounded corners, deep shadow, notch.
shadow-xl radius-phone (44px)
SECTION 12

State Visualization

The freemium pivot introduces five lifecycle states on the user. Each gets a color cue, a badge, and a distinct Home treatment. See LLD-IDENTITY §0 for the authoritative state machine.

TRIAL · Day 3
TRIAL

Day 1–7. Full Legacy-equivalent access. Finvu AA live. MIA in Wealth mode. Trial day counter visible in app bar. Day 5/6/7 show escalating nudges.

BYLD Edge
WEALTH_PAID

Subscribed to One / Edge / Legacy. AA feed continues. MIA in Wealth mode with full advisory surface. Markets tab unlocks.

Markets only
FREE_MARKETS

Post-trial Markets-only. AA consent revoked. Advisory tabs grayed out. Home shows "AA Access Revoked" notice + CAMS CAS upload CTA.

Churned
CHURNED

Subscription lapsed. Same as FREE_MARKETS but with a re-engagement card on Home. Read-only access to historical data for retention period.

Erased
ERASED

Two-column erasure per SEBI Reg 19. User requested deletion; UI shows final confirmation screen. Data anonymized; records retained for 5 years per compliance.

AA Access Revoked — user-facing notice

The FREE_MARKETS state requires a dedicated notice card. The copy explains the regulatory boundary honestly: the RIA relationship ended, the AA feed stopped, and the user can bring their own data via CAMS CAS or the AA-emailed PDF. This is not a dark pattern — it is legally required transparency under SEBI RIA / DPDP.

Account Aggregator access ended
Your trial ended on 15 Apr. Finvu consent is closed. Re-subscribe to BYLD Wealth to restore the live feed, or upload your CAMS CAS to view Markets-only.