Section 01 / 05
Playfair Display
Display Serif — Headlines, hero text, brand statements
Aa
Playfair Display
Display Serif
var(--font-serif) · 'Playfair Display', serif
Weights Available
Regular 400 SemiBold 600 Bold 700
Regular 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
SemiBold 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Number Set
0 1 2 3 4 5 6 7 8 9
Usage
Headlines, hero text, brand statements, pricing amounts, portfolio totals, key financial figures
Type Scale
H1
36px
Your Wealth, Amplified
H2
28px
Portfolio Performance
H3
24px
Investment Summary
Section 02 / 05
Montserrat
UI Sans-Serif — Headings, navigation, buttons, labels
Aa
Montserrat
UI Sans-Serif
var(--font-head) · 'Montserrat', sans-serif
Weights Available
Regular 400 Medium 500 SemiBold 600 Bold 700
Regular 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Medium 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
SemiBold 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Number Set
0 1 2 3 4 5 6 7 8 9
Usage
UI headings, navigation items, buttons, labels, CTAs, tab titles, card headers, section headings
Type Scale
Nav
16px
Portfolio Overview
Button
14px
Start Investing
Label
13px
Asset Allocation
Caption
12px
Last updated 2 min ago
Section 03 / 05
DM Sans
Body Text — Descriptions, form inputs, chat messages
Aa
DM Sans
Body Sans-Serif
var(--font-body) · 'DM Sans', sans-serif
Weights Available
Regular 400 Medium 500 SemiBold 600
Regular 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Medium 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
SemiBold 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Number Set
0 1 2 3 4 5 6 7 8 9
Paragraph Specimen — 14px / 1.6
BYLD Wealth brings together intelligent portfolio management, personalised advisory, and goal-based planning into a single, seamless experience. Whether you're building your first emergency fund or optimising a multi-crore portfolio, our AI-powered advisor Mia helps you make informed decisions aligned with your unique financial journey.
Usage
Body copy, descriptions, form inputs, chat messages, tooltips, card content, onboarding text
Type Scale
Body
14px
Your portfolio has grown 18.2% this quarter
Secondary
13px
SIP of ₹10,000 scheduled for 5th of every month
Small
12px
Last rebalanced on 12 Mar 2026 by Mia
Micro
11px
Data sourced from NSE, updated every 15 minutes
Legal
10px
Mutual fund investments are subject to market risks. Read all scheme-related documents carefully.
Section 04 / 05
JetBrains Mono
Monospace — Portfolio values, transaction IDs, data readouts
Aa
JetBrains Mono
Monospace · Data & Code
var(--font-mono) · 'JetBrains Mono', monospace
Weights Available
Regular 400 Medium 500
Regular 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Medium 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Number Set
0 1 2 3 4 5 6 7 8 9
Usage
Portfolio values, transaction IDs, XIRR/CAGR percentages, NAV figures, timestamps, code snippets, data tables
Financial Data Specimen
₹12,45,678.90 · +18.2% CAGR · NAV: 234.56
TXN2026031100042 · FOLIO: 1234567890/01
XIRR: 14.67% · Sharpe: 1.82 · Beta: 0.94
2026-03-17T09:30:00+05:30
Tabular Data Sample
Fund Name NAV 1Y Return
HDFC Flexi ₹1,824.30 +22.4%
Axis Bluechip ₹52.18 +16.8%
PPFAS Flexi ₹78.92 -3.1%
Section 05 / 05
Hierarchy in Context
All four typefaces working together in a dashboard card
Total Portfolio Value
₹24,58,930
Diversified Growth Portfolio
Your portfolio is well-balanced across equity, debt, and gold allocations. Mia recommends a minor rebalance to maintain your target 70-20-10 split as equity has outperformed this quarter.
XIRR: 16.42%
+₹3,24,680 absolute gain
NAV Date: 2026-03-17
SIP Active: ₹25,000/mo
Next SIP: 2026-04-05
TXN2026031700089
Font Mapping in Card
"Total Portfolio Value" — section overline
Montserrat 600 · 11px
"₹24,58,930" — hero financial value
Playfair Display 700 · 44px
"Diversified Growth Portfolio" — card heading
Montserrat 600 · 15px
"Your portfolio is well-balanced..." — description
DM Sans 400 · 13px
"XIRR: 16.42%" / "TXN2026..." — data values
JetBrains Mono 400 · 12px
Type Hierarchy
Display — Playfair Display
Headlines, hero values, brand moments
700 for impact · 600 for sub-headlines · 400 for editorial
UI — Montserrat
Navigation, buttons, labels, CTAs
700 for primary CTA · 600 for headings · 500 for labels · 400 for secondary
Body — DM Sans
Descriptions, chat, forms, onboarding
600 for emphasis · 500 for active · 400 for body copy
Data — JetBrains Mono
Financial figures, IDs, timestamps
500 for key values · 400 for secondary data
CSS Variables
--font-serif: 'Playfair Display'
--font-head: 'Montserrat'
--font-body: 'DM Sans'
--font-mono: 'JetBrains Mono'
Legend
Playfair Display — Display Serif
Montserrat — UI Sans-Serif
DM Sans — Body Text
JetBrains Mono — Data & Code