# BYLD Wealth — Design Tokens Reference

> **Version** 1.0 · **Updated** 2026-03-11
> **Source of truth**: `tokens.css` + `design-tokens.json`
> **Figma sync**: Compatible with Tokens Studio / Figma Variables

---

## 1. Overview

BYLD Wealth is a premium wealth management platform for HNI families in India. The design language follows CRED-level craft: dark glassmorphism, gradient gold accents, serif display typography, and futuristic micro-animations.

**How to use these tokens:**
- **Developers**: Copy the CSS `:root` block (Section 11) into your stylesheet, or import `tokens.css`.
- **Designers**: Import `design-tokens.json` into Tokens Studio (Figma plugin) for automatic variable sync.
- **Component authors**: Reference the component recipes (Section 12) for glass cards, gold CTAs, inputs, and chat bubbles.

---

## 2. Colors

### 2.1 Gold Accent Scale

The brand's signature gold, derived from the golden dot in the BYLD logo.

| Token | Swatch | Hex | Usage |
|-------|--------|-----|-------|
| `gold-100` | <span style="display:inline-block;width:24px;height:24px;background:#F5E6C8;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#F5E6C8` | Lightest — tints, subtle backgrounds |
| `gold-300` | <span style="display:inline-block;width:24px;height:24px;background:#E0C17A;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#E0C17A` | Mid — accents, hover states |
| `gold-500` | <span style="display:inline-block;width:24px;height:24px;background:#C49A3C;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#C49A3C` | **Primary** — CTAs, active states |
| `gold-700` | <span style="display:inline-block;width:24px;height:24px;background:#9B7A2F;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#9B7A2F` | Dark — pressed states, borders |
| `gold-900` | <span style="display:inline-block;width:24px;height:24px;background:#6B5420;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#6B5420` | Deepest — text on light backgrounds |

**Gold Gradient**: `linear-gradient(135deg, #E0C17A, #C49A3C, #9B7A2F)` — used for CTA buttons, hero badges, shimmer overlays.

### 2.2 Tier / Sub-brand Colors

Each subscription tier has a distinct identity color used for theming cards, badges, and navigation accents.

| Tier | Swatch | Hex | Price | Usage |
|------|--------|-----|-------|-------|
| **Master** | <span style="display:inline-block;width:24px;height:24px;background:#000000;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#000000` | Free | Default theme, onboarding |
| **Edge** | <span style="display:inline-block;width:24px;height:24px;background:#5D4749;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#5D4749` | ₹3,650/yr | Entry paid tier |
| **Core** | <span style="display:inline-block;width:24px;height:24px;background:#034F93;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#034F93` | ₹18,250/yr | Most popular tier |
| **Legacy** | <span style="display:inline-block;width:24px;height:24px;background:#550372;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#550372` | ₹36,500/yr | Ultra premium |
| **Markets** | <span style="display:inline-block;width:24px;height:24px;background:#566B30;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#566B30` | Mode | Trading & analysis mode |

**Theming rule**: When a user is on a tier, the tier color replaces `--gold-500` as the primary accent for navigation highlights, card borders, and badge backgrounds. Gold remains for CTAs and financial data.

### 2.3 Neutral Scale

| Token | Swatch | Hex | Usage |
|-------|--------|-----|-------|
| `neutral-0` | <span style="display:inline-block;width:24px;height:24px;background:#FFFFFF;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#FFFFFF` | Pure white |
| `neutral-50` | <span style="display:inline-block;width:24px;height:24px;background:#F9FAFB;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#F9FAFB` | Page background (light) |
| `neutral-100` | <span style="display:inline-block;width:24px;height:24px;background:#F3F4F6;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#F3F4F6` | Card backgrounds (light) |
| `neutral-200` | <span style="display:inline-block;width:24px;height:24px;background:#E5E7EB;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#E5E7EB` | Borders, dividers |
| `neutral-300` | <span style="display:inline-block;width:24px;height:24px;background:#D1D5DB;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#D1D5DB` | Disabled text, placeholders |
| `neutral-400` | <span style="display:inline-block;width:24px;height:24px;background:#9CA3AF;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#9CA3AF` | Secondary text |
| `neutral-500` | <span style="display:inline-block;width:24px;height:24px;background:#6B7280;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#6B7280` | Body text (light mode) |
| `neutral-600` | <span style="display:inline-block;width:24px;height:24px;background:#4B5563;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#4B5563` | Emphasized text |
| `neutral-700` | <span style="display:inline-block;width:24px;height:24px;background:#374151;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#374151` | Heading text |
| `neutral-800` | <span style="display:inline-block;width:24px;height:24px;background:#1F2937;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#1F2937` | Strong headings |
| `neutral-900` | <span style="display:inline-block;width:24px;height:24px;background:#111827;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#111827` | Near-black text |
| `neutral-950` | <span style="display:inline-block;width:24px;height:24px;background:#0A0A0A;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#0A0A0A` | Dark mode base |

### 2.4 Semantic / Feedback Colors

| Token | Swatch | Hex | Usage |
|-------|--------|-----|-------|
| `success` | <span style="display:inline-block;width:24px;height:24px;background:#16A34A;border-radius:4px;vertical-align:middle"></span> | `#16A34A` | Confirmations, positive actions |
| `success-light` | <span style="display:inline-block;width:24px;height:24px;background:#DCFCE7;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#DCFCE7` | Success badge background |
| `error` | <span style="display:inline-block;width:24px;height:24px;background:#DC2626;border-radius:4px;vertical-align:middle"></span> | `#DC2626` | Errors, destructive actions |
| `error-light` | <span style="display:inline-block;width:24px;height:24px;background:#FEE2E2;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#FEE2E2` | Error badge background |
| `warning` | <span style="display:inline-block;width:24px;height:24px;background:#F59E0B;border-radius:4px;vertical-align:middle"></span> | `#F59E0B` | Cautions, pending states |
| `warning-light` | <span style="display:inline-block;width:24px;height:24px;background:#FEF3C7;border:1px solid #ccc;border-radius:4px;vertical-align:middle"></span> | `#FEF3C7` | Warning badge background |

### 2.5 Finance-Specific Colors

Distinct from generic semantic colors — used exclusively for portfolio gain/loss indicators.

| Token | Hex | Usage |
|-------|-----|-------|
| `gain` | `#16A34A` | Positive returns, up arrows |
| `gain-bg` | `#052E16` | Dark mode gain badge fill |
| `loss` | `#DC2626` | Negative returns, down arrows |
| `loss-bg` | `#450A0A` | Dark mode loss badge fill |

---

## 3. Typography

### 3.1 Font Families

| Token | Font Stack | Usage |
|-------|-----------|-------|
| **serif** | `'Playfair Display', serif` | Hero text, premium statements, display headings |
| **heading** | `'Montserrat', sans-serif` | Navigation, labels, section headings, UI controls |
| **body** | `'Calibri', 'Segoe UI', sans-serif` | Paragraphs, body copy, descriptions |
| **mono** | `'JetBrains Mono', 'SF Mono', monospace` | Financial data, OTP fields, portfolio values |

**Google Fonts import:**
```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;700&display=swap');
```

### 3.2 Type Scale

| Token | Size | Weight | Family | Line Height | Usage |
|-------|------|--------|--------|-------------|-------|
| `display` | 36px | 700 | serif | 1.2 | Hero headlines, splash screens |
| `h1` | 28px | 700 | heading | 1.25 | Page titles |
| `h2` | 22px | 700 | heading | 1.3 | Section headings |
| `h3` | 18px | 600 | heading | 1.35 | Card titles, sub-headings |
| `h4` | 16px | 600 | heading | 1.4 | Small headings, labels |
| `body-lg` | 16px | 400 | body | 1.5 | Lead paragraphs, primary content |
| `body` | 14px | 400 | body | 1.5 | Default body text |
| `body-sm` | 13px | 400 | body | 1.45 | Secondary descriptions |
| `caption` | 12px | 400 | body | 1.4 | Captions, helper text, timestamps |
| `overline` | 11px | 600 | heading | 1.3 | Category labels (uppercase, `letter-spacing: 0.08em`) |
| `mono-lg` | 24px | 500 | mono | 1.2 | Large portfolio values, hero numbers |
| `mono` | 14px | 400 | mono | 1.4 | Financial data, table values |
| `mono-sm` | 12px | 400 | mono | 1.3 | Small data, OTP digits, codes |

### 3.3 Font Weights

| Weight | Value | Usage |
|--------|-------|-------|
| Regular | 400 | Body text, descriptions |
| Medium | 500 | Mono data emphasis |
| Semibold | 600 | Subheadings, labels, overline |
| Bold | 700 | Display, h1, h2, CTA text |

---

## 4. Spacing

BYLD uses a **4px base grid** for precise alignment, with semantic aliases for common use cases.

### 4.1 Spacing Scale

| Token | Value | Typical Usage |
|-------|-------|---------------|
| `space-1` | 4px | Icon gaps, inline spacing |
| `space-2` | 8px | Chip padding, small gaps |
| `space-3` | 12px | Input padding, compact lists |
| `space-4` | 16px | Card padding, section gaps |
| `space-5` | 20px | Medium spacing |
| `space-6` | 24px | Section spacing |
| `space-8` | 32px | Page margins, section breaks |
| `space-12` | 48px | Section separators |
| `space-16` | 64px | Page-level spacing |
| `space-20` | 80px | Large section gaps |
| `space-24` | 96px | Maximum spacing |

### 4.2 Semantic Aliases

| Alias | Maps to | Usage |
|-------|---------|-------|
| `xs` | 4px | Tight — icon gaps |
| `sm` | 8px | Compact — chip padding |
| `md` | 16px | Default — card padding |
| `lg` | 24px | Generous — section spacing |
| `xl` | 32px | Large — page margins |
| `2xl` | 48px | Extra — separators |
| `3xl` | 64px | Maximum |

---

## 5. Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `radius-sm` | 4px | Chips, tags, small badges |
| `radius-md` | 8px | Input fields, small cards |
| `radius-lg` | 12px | Cards, modals |
| `radius-xl` | 16px | Large cards, bottom sheets |
| `radius-2xl` | 24px | Hero cards, chat bubbles |
| `radius-pill` | 9999px | Pill buttons, tags |
| `radius-phone` | 44px | Phone mockup frame |

---

## 6. Glassmorphism

Glass cards are a core visual pattern for dark-mode interfaces (RIA dashboard, portfolio views).

### Glass Card Recipe

```css
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
}
```

| Token | Value | Purpose |
|-------|-------|---------|
| `glass-bg` | `rgba(255,255,255,0.03)` | Near-transparent white fill |
| `glass-border` | `1px solid rgba(255,255,255,0.06)` | Subtle edge definition |
| `glass-blur` | `blur(20px)` | Frosted backdrop effect |

**Usage notes:**
- Always pair glass cards with a dark background (`neutral-900` or `neutral-950`).
- Add SVG noise overlay (Section 9) for premium texture.
- Glass cards should NOT be nested — use `rgba(255,255,255,0.05)` for inner elements.

---

## 7. Shadows

| Token | Value | Usage |
|-------|-------|-------|
| `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift — input fields |
| `shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` | Card elevation (light mode) |
| `shadow-md` | `0 4px 16px rgba(0,0,0,0.12)` | Modals, dropdowns |
| `shadow-lg` | `0 8px 32px rgba(0,0,0,0.16)` | Floating panels, toasts |
| `shadow-gold` | `0 4px 24px rgba(196,154,60,0.3)` | Gold glow — active CTAs, premium cards |

**Dark mode**: Shadows are generally invisible on dark backgrounds. Use `border` + `glow` effects instead.

---

## 8. Animations

All animations use CSS `@keyframes`. Durations and easings are calibrated for premium feel.

### 8.1 Looping Animations (Infinite)

| Token | Duration | Easing | Purpose |
|-------|----------|--------|---------|
| `shimmer` | 3s | linear | Loading skeleton shimmer |
| `breathe` | 2.5s | ease-in-out | Gold glow pulse on active elements |
| `borderGlow` | 4s | ease-in-out | Animated gold border on focused cards |
| `gold-pulse` | 3.5s | ease-in-out | Premium gold shadow pulsation |
| `subtle-glow` | 5s | ease-in-out | Gentle opacity fade for decorative elements |
| `focusPulse` | 2s | ease-in-out | Input focus ring pulse |
| `notifPulse` | 2s | ease-in-out | Notification badge bounce |

### 8.2 Entry Animations (Once)

| Token | Duration | Easing | Purpose |
|-------|----------|--------|---------|
| `fadeInUp` | 0.5s | ease-out | Content entry — slide up + fade in |
| `dotFadeIn` | 0.4s | ease-out | Logo dot stagger animation |

### 8.3 Keyframe Definitions

```css
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(196,154,60,0.15); }
  50% { box-shadow: 0 0 40px rgba(196,154,60,0.4); }
}

@keyframes borderGlow {
  0% { border-color: rgba(196,154,60,0.2); }
  50% { border-color: rgba(196,154,60,0.5); }
  100% { border-color: rgba(196,154,60,0.2); }
}

@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(196,154,60,0.25); }
  50% { box-shadow: 0 0 40px rgba(196,154,60,0.5); }
}

@keyframes subtle-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@keyframes dotFadeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,154,60,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(196,154,60,0.08); }
}

@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
```

---

## 9. Noise Texture

An SVG noise overlay adds premium surface texture to glass cards and dark backgrounds.

### SVG Implementation

```html
<svg style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:0.03;mix-blend-mode:overlay">
  <filter id="noise">
    <feTurbulence baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/>
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)"/>
</svg>
```

| Property | Value | Purpose |
|----------|-------|---------|
| `baseFrequency` | 0.9 | Fine grain size |
| `numOctaves` | 4 | Complexity layers |
| `opacity` | 0.03 | Barely visible — subtle texture |
| `blendMode` | overlay | Blends with underlying colors |

---

## 10. Tier Colors — Detailed Usage

### Master (Free) — `#000000`

- Default state for all new users
- Black/gold palette — the core BYLD identity
- Navigation: gold accent on black
- All screens accessible in this tier

### Edge (₹3,650/yr + GST) — `#5D4749`

- Warm brown-mauve, conveying approachability
- Unlocks: basic financial planning tools, goal tracking
- Card borders and badges use this color
- Gradient: `linear-gradient(135deg, #5D4749, #8B6B6E)`

### Core (₹18,250/yr + GST) — `#034F93`

- Deep blue, conveying trust and professionalism
- Most popular tier — highlighted with "POPULAR" badge
- Unlocks: full RIA advisory, portfolio analytics, AI insights
- Gradient: `linear-gradient(135deg, #034F93, #0670C7)`

### Legacy (₹36,500/yr + GST) — `#550372`

- Rich purple, conveying exclusivity and prestige
- Unlocks: concierge support, family office features, estate planning
- Gradient: `linear-gradient(135deg, #550372, #7B05A5)`

### Markets (Mode) — `#566B30`

- Olive green, conveying growth and market activity
- Not a tier — a mode toggle for distribution/trading features
- Used in BYLD Capital (distribution) screens
- Gradient: `linear-gradient(135deg, #566B30, #7A9645)`

---

## 11. CSS Variables Reference

Complete `:root` block — copy-paste ready:

```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;700&display=swap');

:root {
  /* ── Sub-brand / Tier Primaries ─────────────────────── */
  --brand-master:    #000000;
  --brand-edge:      #5D4749;
  --brand-core:      #034F93;
  --brand-legacy:    #550372;
  --brand-markets:   #566B30;

  /* ── Gold Accent Scale ─────────────────────────────── */
  --gold-100:        #F5E6C8;
  --gold-300:        #E0C17A;
  --gold-500:        #C49A3C;
  --gold-700:        #9B7A2F;
  --gold-900:        #6B5420;

  /* ── Shorthand aliases (used in existing screens) ── */
  --gold:            var(--gold-500);
  --gold-light:      var(--gold-100);
  --gold-dark:       var(--gold-700);

  /* ── Neutral Scale ─────────────────────────────────── */
  --neutral-0:       #FFFFFF;
  --neutral-50:      #F9FAFB;
  --neutral-100:     #F3F4F6;
  --neutral-200:     #E5E7EB;
  --neutral-300:     #D1D5DB;
  --neutral-400:     #9CA3AF;
  --neutral-500:     #6B7280;
  --neutral-600:     #4B5563;
  --neutral-700:     #374151;
  --neutral-800:     #1F2937;
  --neutral-900:     #111827;
  --neutral-950:     #0A0A0A;

  /* ── Shorthand aliases (used in existing screens) ── */
  --white:           var(--neutral-0);
  --gray-50:         var(--neutral-50);
  --gray-100:        var(--neutral-100);
  --gray-200:        var(--neutral-200);
  --gray-300:        var(--neutral-300);
  --gray-400:        var(--neutral-400);
  --gray-500:        var(--neutral-500);
  --gray-600:        var(--neutral-600);
  --gray-700:        var(--neutral-700);
  --gray-800:        var(--neutral-800);
  --gray-900:        var(--neutral-900);
  --black:           var(--neutral-950);
  --master:          var(--brand-master);

  /* ── Semantic / Feedback ───────────────────────────── */
  --success:         #16A34A;
  --success-light:   #DCFCE7;
  --error:           #DC2626;
  --error-light:     #FEE2E2;
  --warning:         #F59E0B;
  --warning-light:   #FEF3C7;
  --amber:           var(--warning);

  /* ── Finance-Specific ──────────────────────────────── */
  --gain:            #16A34A;
  --gain-bg:         #052E16;
  --loss:            #DC2626;
  --loss-bg:         #450A0A;

  /* ── Typography ────────────────────────────────────── */
  --font-serif:      'Playfair Display', serif;
  --font-head:       'Montserrat', sans-serif;
  --font-body:       'Calibri', 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', monospace;

  /* ── Gradients ─────────────────────────────────────── */
  --gold-gradient:   linear-gradient(135deg, #E0C17A, #C49A3C, #9B7A2F);

  /* ── Shadows ───────────────────────────────────────── */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
  --shadow-card:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.16);
  --shadow-gold:     0 4px 24px rgba(196,154,60,0.3);
  --gold-glow:       0 4px 16px rgba(196,154,60,0.3);

  /* ── Spacing (4px base grid) ───────────────────────── */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;
  --space-24:        96px;

  /* ── Border Radius ─────────────────────────────────── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-2xl:      24px;
  --radius-full:     9999px;
  --radius-phone:    44px;

  /* ── Glassmorphism ─────────────────────────────────── */
  --glass-bg:        rgba(255,255,255,0.03);
  --glass-border:    1px solid rgba(255,255,255,0.06);
  --glass-blur:      blur(20px);
}
```

---

## 12. Component Recipes

### 12.1 Glass Card

```css
.glass-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* With gold accent border */
.glass-card--gold {
  border: 1px solid rgba(196, 154, 60, 0.2);
  animation: borderGlow 4s ease-in-out infinite;
}

/* With breathe glow */
.glass-card--glow {
  animation: breathe 2.5s ease-in-out infinite;
}
```

### 12.2 Gold CTA Button

```css
.btn-gold {
  background: var(--gold-gradient);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(196, 154, 60, 0.4);
}

.btn-gold:active {
  transform: translateY(0);
  background: var(--gold-700);
}
```

### 12.3 Glass Input Field

```css
.glass-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral-0);
  outline: none;
  transition: border-color 0.2s;
}

.glass-input::placeholder {
  color: var(--neutral-400);
}

.glass-input:focus {
  border-color: var(--gold-500);
  animation: focusPulse 2s ease-in-out infinite;
}

.glass-input--error {
  border-color: var(--error);
}
```

### 12.4 Chat Bubble (Chatbot-First UX)

```css
/* Bot message (left-aligned) */
.chat-bubble--bot {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--neutral-100);
  max-width: 85%;
  animation: fadeInUp 0.3s ease-out;
}

/* User message (right-aligned) */
.chat-bubble--user {
  background: var(--gold-gradient);
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: #FFFFFF;
  max-width: 85%;
  margin-left: auto;
  animation: fadeInUp 0.3s ease-out;
}

/* Tappable option chip */
.chat-chip {
  display: inline-block;
  background: rgba(196, 154, 60, 0.1);
  border: 1px solid rgba(196, 154, 60, 0.3);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-300);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.chat-chip:hover {
  background: rgba(196, 154, 60, 0.2);
  border-color: var(--gold-500);
}
```

### 12.5 Financial Value Display

```css
.value-display {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--neutral-0);
}

.value-display--gain {
  color: var(--gain);
}

.value-display--loss {
  color: var(--loss);
}

.value-display__label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-400);
  margin-bottom: 4px;
}
```

---

## 13. Figma Variable Mapping

### How Tokens Map to Figma

| Token Type | Figma Feature | Mapping |
|------------|---------------|---------|
| **Colors** (gold, tier, neutral, semantic) | Color Variables | Create a collection per group: `Gold/100`, `Tier/Master`, etc. |
| **Typography** (family, scale) | Text Styles | One style per scale entry: `Display`, `H1`, `Body`, `Mono-lg`, etc. |
| **Spacing** | Number Variables | Collection `Spacing` with modes: `space-1` = 4, `space-2` = 8, etc. |
| **Radius** | Number Variables | Collection `Radius`: `sm` = 4, `md` = 8, etc. |
| **Shadows** | Effect Styles | One effect style per shadow token |
| **Glass** | Effect Styles + Fill | Combined as a reusable style |
| **Gradients** | Color Styles (gradient fill) | Linear fill with stops |

### Tokens Studio (Plugin) Setup

1. Import `design-tokens.json` into the Tokens Studio plugin.
2. Set token type to **"Figma Variables"** for colors, spacing, radius.
3. Set token type to **"Figma Styles"** for typography, shadows, gradients.
4. Create two modes: `Light` and `Dark` in the color collection.

### Figma Variable Collections

```
Collection: Colors
├── Gold/100, Gold/300, Gold/500, Gold/700, Gold/900
├── Tier/Master, Tier/Edge, Tier/Core, Tier/Legacy, Tier/Markets
├── Neutral/0 ... Neutral/950
├── Semantic/Success, Semantic/Error, Semantic/Warning
└── Finance/Gain, Finance/Loss

Collection: Spacing
├── space-1 = 4
├── space-2 = 8
├── space-3 = 12
├── space-4 = 16
├── space-5 = 20
├── space-6 = 24
├── space-8 = 32
├── space-12 = 48
├── space-16 = 64
├── space-20 = 80
└── space-24 = 96

Collection: Radius
├── sm = 4
├── md = 8
├── lg = 12
├── xl = 16
├── 2xl = 24
├── pill = 9999
└── phone = 44

Text Styles:
├── Display (Playfair Display 700 36/1.2)
├── H1 (Montserrat 700 28/1.25)
├── H2 (Montserrat 700 22/1.3)
├── H3 (Montserrat 600 18/1.35)
├── H4 (Montserrat 600 16/1.4)
├── Body Large (Calibri 400 16/1.5)
├── Body (Calibri 400 14/1.5)
├── Body Small (Calibri 400 13/1.45)
├── Caption (Calibri 400 12/1.4)
├── Overline (Montserrat 600 11/1.3 uppercase)
├── Mono Large (JetBrains Mono 500 24/1.2)
├── Mono (JetBrains Mono 400 14/1.4)
└── Mono Small (JetBrains Mono 400 12/1.3)

Effect Styles:
├── Shadow/SM
├── Shadow/Card
├── Shadow/MD
├── Shadow/LG
├── Shadow/Gold Glow
├── Glass/Background + Border + Blur
└── Noise/Overlay
```

---

## 14. Logo Construction

The BYLD logo is a 5-dot grid forming an abstract "B":

```
●  ·     ← top-right position EMPTY
●  ●
◆  ●     ← bottom-left is GOLD (#C49A3C)
```

- **Grid**: 2 columns × 3 rows
- **Dot diameter**: Proportional (5mm at print scale)
- **Gap**: ~40% of dot diameter
- **Golden dot**: Bottom-left — signifies wealth, prosperity
- **All other dots**: Black (`#000000`)

### CSS Implementation

```css
.byld-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40%;
  width: fit-content;
}

.byld-logo .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000000;
}

.byld-logo .dot--empty {
  visibility: hidden;  /* top-right */
}

.byld-logo .dot--gold {
  background: #C49A3C;  /* bottom-left */
}
```