01 / 30

BYLD Wealth

Brand Guidelines

2026
02 / 30

Manifesto

"Wealth is not found.
It is built."

BYLD exists at the intersection of heritage and intelligence. We believe wealth management is not a transaction — it is a relationship with time. Every family's financial journey is unique, and our role is to illuminate the path with clarity, conviction, and cutting-edge AI.

03 / 30

Purpose

Vision

Every Indian family's wealth,
intelligently managed.

Mission

AI-powered advisory accessible to all HNI families — bridging the gap between institutional-grade insight and personal wealth goals.

04 / 30

Logo

The 5-Dot Mark

A 2-column × 3-row grid with the top-right position empty and the bottom-left dot in gold-light. Five dots represent the five pillars of BYLD: Master · Edge · Core · Legacy · Markets.

The negative space — the missing sixth dot — symbolises room for growth, the wealth yet to be built.

05 / 30

Logo

Construction Grid

12px · Small Gap: 4px (⅓×)
20px · Medium Gap: 6px (0.3×)
28px · Large Gap: 8px (0.29×)

Ratio: gap ≈ 30% of dot diameter. Maintains optical balance at all sizes.

06 / 30

Logo

Clear Space

1× dot 1× dot

Maintain a minimum clear space of 1× the dot diameter around all edges of the mark. No text, graphics, or container edges may intrude into this zone.

07 / 30

Logo

Minimum Sizes

24px total Digital minimum
40px total Recommended
66px total Print minimum

Below the digital minimum, dots lose definition. Use the single-dot favicon variant at very small sizes.

08 / 30

Logo

Do's & Don'ts

✓ DO

On dark backgrounds
Mono dark variant
With clear space
Consistent proportions

✗ DON'T

Stretch or distort
Recolor off-brand
Rotate the mark
Crop or clip
09 / 30

Logo

Tier Variants

Master
Edge
Core
Legacy
Markets

Each sub-brand uses its tier primary for 4 dots and tier-light for the accent dot (bottom-left).

10 / 30

Color

Gold Scale

Gold Light#F5E6C8Accents, highlights
Gold Mid#E0C17AHover states, focus
Gold Primary#C49A3CHeadings, CTAs
Gold Dark#9B7A2FPressed states
Gold Deepest#6B5420Borders, shadows
11 / 30

Color

Tier Palette

Master

#C49A3C

Edge

#5D4749

Core

#034F93

Legacy

#550372

Markets

#566B30

Each tier: Primary · Ambient (8% opacity) · Glass (3% opacity). Use ambient for surface tints, glass for cards.

12 / 30

Color

Neutrals & Semantic

Gray Scale

50 100 200 300 400 500 600 700 800 900

Semantic

Success #566B30
Error #DC2626
Amber #F59E0B
13 / 30

Typography

Type Families

Aa

Playfair Display

--font-serif
Aa

Montserrat

--font-head
Aa

DM Sans

--font-body
Aa

JetBrains Mono

--font-mono
14 / 30

Typography

Type Scale

48 / 56 Display heading
36 / 44 Large heading
24 / 32 Section heading
18 / 28 Subsection title
16 / 24 Body text — default reading size
14 / 20 Small body — secondary content
12 / 16 Caption / data labels
10 / 14 MICRO — LEGAL, FOOTNOTES
15 / 30

Typography

Usage Guide

Playfair Display Display headings, hero text, manifesto quotes. Conveys heritage and gravitas.
Montserrat UI labels, section headings, navigation, buttons. Clean and authoritative.
DM Sans Body copy, descriptions, form text, chat messages. Optimised for readability.
JetBrains Mono Numbers, data, code, timestamps, portfolio values. Tabular precision.
16 / 30

Surface

Glassmorphism

Recipe

background: rgba(255,255,255, 0.03);
border: 1px solid rgba(255,255,255, 0.06);
backdrop-filter: blur(20px);
border-radius: 12px;

Elevated variant uses 0.06 background and 0.10 border for interactive cards and modals.

Live Demo

This card uses the standard glass recipe. Subtle, translucent, and layered.

Action
17 / 30

Surface

Dark Theme Hierarchy

Layer 0 #0A0A0A — Base canvas
Layer 1 Noise texture overlay — 5% opacity
Layer 2 Glass card surface
Layer 3 Content — text, icons, data
18 / 30

Surface

Noise Texture

SVG Recipe

<feTurbulence
  baseFrequency="0.9"
  numOctaves="4"
  stitchTiles="stitch" />
opacity: 0.05

Applied as a fixed, full-screen overlay. Adds organic texture to the dark canvas without affecting readability.

Live SVG noise · 5% opacity over #0A0A0A
19 / 30

MIA

Neural Bloom Avatar

120px · Hero Onboarding, splash
80px · Header Chat header, profile
48px · Card Message avatar
28px · Inline Typing indicator

Radial gradient from gold-light center to gold-dark edge. Outer ring pulses with core-pulse animation.

20 / 30

MIA

Dual Voice

Wealth Advisor

Gold palette. Portfolio analysis, financial planning, goal tracking. Authoritative, warm tone.

var(--gold) spectrum

Markets Analyst

Green palette. Live market data, stock analysis, trading signals. Precise, data-driven tone.

var(--success) spectrum
21 / 30

MIA

Chat UI Anatomy

Good morning! Your portfolio is up 2.3% this week. Would you like a detailed breakdown?
Yes, show me the top performers
Show gains
Tax impact
Rebalance

Radius Pattern

AI bubble: 4px 16px 16px 4px
User bubble: 16px 16px 4px 16px
Chips: 20px (pill)

AI messages have a flat left edge (anchored to avatar). User messages have a flat bottom-right edge (anchored to input).

22 / 30

Motion

Core Animations

shimmer 2s linear infinite · Loading states, skeleton screens
fadeInUp 300ms ease-out · Page entry, card reveal, list items
breathe 2s ease-in-out infinite · Typing dots, live indicators
borderGlow 3s ease-in-out infinite · Focus rings, active cards
23 / 30

Motion

Bloom Animations

core-pulse

3s · Scale 1→1.15

rotate-slow

12s linear · Orbit ring

petal-sway

4s · Rotate ±3deg

iris-glow

3s · Box-shadow pulse

All bloom animations respect prefers-reduced-motion — replaced with static fallbacks.

24 / 30

Layout

Spacing & Grid

8px Base Grid

8 16 24 32 48 64 80

Radius Scale

4 8 12 16 full

Common Padding

Compact: 16px
Default: 20px
Spacious: 24px
Section: 48–80px
25 / 30

Iconography

Inline SVG System

Sizes

16px
20px
24px

Style Rules

stroke-width: 1.5
stroke: currentColor
fill: none
viewBox: 0 0 24 24

Categories

Navigation
Finance
Charts
Security
26 / 30

Photography

Art Direction

Tone

Aspirational HNI lifestyle. Warm, golden-hour tones. Indian cultural context — families, celebrations, heritage homes, modern offices.

Color Grade

Warm shadows, lifted blacks (#1F2937 minimum). Gold highlights. Desaturate blues, boost ambers. Film grain at 5% for premium texture.

Subjects

Multi-generational families. Business founders. Heritage architecture. Abstract wealth metaphors — gold surfaces, geometric patterns, light play.

Hero — 16:9 landscape
Card — 4:3
Square — 1:1
27 / 30

Applications

Digital Touchpoints

App Icon
BYLD Wealth
Splash Screen
BYLD Wealth
AI-Powered Wealth Management byldwealth.com
Social / OG Card
28 / 30

Applications

Print Collateral

Rajesh Sharma Chief Investment Officer rajesh@byldwealth.com +91 98765 43210
Business Card — Front
BYLD Wealth
BYLD Wealth Technologies Pvt. Ltd. Mumbai, India · SEBI RIA: INA000XXXXX
Letterhead
29 / 30

Accessibility

Inclusive Design

Focus Visible

Button
outline: 2px solid var(--gold-mid)
outline-offset: 3px

Reduced Motion

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Touch & ARIA

Minimum touch target: 44 × 44px. All interactive elements have aria-label. Live regions for AI responses. WCAG AA contrast on all text.

AA
WCAG AA 4.5:1 normal · 3:1 large text
44
Touch Targets 44px minimum · 48px recommended
30 / 30

BYLD Wealth

Brand Guidelines · 2026

Designed for

BYLD Wealth Technologies Pvt. Ltd.

SEBI Registered Investment Adviser: INA000XXXXX
AMFI Registered Mutual Fund Distributor: ARN-XXXXXX
CIN: U74999MH2024PTC000000

Confidential. For internal and partner use only.