Handoff 03 / Tier Theming
5 Tiers Side-by-Side
Each tier transforms the home dashboard with its own ambient colour, glass tint, and accent hierarchy.
Master
9:41
₹24,50,000
+12.3% all time
Equity MF₹14.2L
Debt MF₹6.8L
Gold₹3.5L
Master
Edge
9:41
₹24,50,000
+12.3% all time
Equity MF₹14.2L
Debt MF₹6.8L
Gold₹3.5L
Edge
Core
9:41
₹24,50,000
+12.3% all time
Equity MF₹14.2L
Debt MF₹6.8L
Gold₹3.5L
Core
Legacy
9:41
₹24,50,000
+12.3% all time
Equity MF₹14.2L
Debt MF₹6.8L
Gold₹3.5L
Legacy
Markets
9:41
₹24,50,000
+12.3% all time
Equity MF₹14.2L
Debt MF₹6.8L
Gold₹3.5L
Markets
Handoff 03 / Architecture
CSS Override Chain & Token Map
Four cascading layers: base tokens → component styles → MIA chat overrides → tier theme. Each layer only overrides what it needs.
1. Base Tokens
byld-base.css
:root variables — gold, neutrals, glass, typography, spacing
↓ inherits all tokens
2. Components
byld-components.css
Glass cards, buttons, inputs, nav — uses base tokens
↓ inherits + adds component tokens
3. MIA Chat
byld-mia.css
Bloom avatar, bubbles, typing, feedback — overrides glass values
↓ inherits + overrides accent colour
4. Tier Theme
byld-tier-{name}.css
Overrides --accent, --glow, --glass-tint, --cta-gradient
/* Load order in HTML */
<link rel="stylesheet" href="byld-base.css">
<link rel="stylesheet" href="byld-components.css">
<link rel="stylesheet" href="byld-mia.css">
<link rel="stylesheet" href="byld-tier-edge.css">
/* Tier overrides only touch these tokens: */
.tier-edge {
--accent: #5D4749;
--accent-light: #D4A0A5;
--ambient-glow: 0 0 80px rgba(93,71,73,0.08);
--glass-tint: rgba(93,71,73,0.03);
--cta-gradient: linear-gradient(135deg, #D4A0A5, #5D4749);
}
Color Token Mapping per Tier
| Token | Master | Edge | Core | Legacy | Markets |
|---|---|---|---|---|---|
| --accent | #000 | #5D4749 | #034F93 | #550372 | #16A34A |
| --accent-light | #FFF | #D4A0A5 | #4A9EE0 | #A855F7 | #4ADE80 |
| --ambient-glow | rgba(255,255,255,0.04) | rgba(93,71,73,0.08) | rgba(3,79,147,0.08) | rgba(85,3,114,0.08) | rgba(22,163,74,0.06) |
| --glass-tint | rgba(255,255,255,0.03) | rgba(93,71,73,0.03) | rgba(3,79,147,0.03) | rgba(85,3,114,0.03) | rgba(22,163,74,0.03) |
| --bg-gradient | 165deg, #0A0A0A, #0D0D0D | 165deg, #0F0A0B, #120E0E | 165deg, #060D14, #081018 | 165deg, #0A0510, #0D0814 | 165deg, #050F08, #081209 |
| --cta-gradient | gold standard | #D4A0A5 → #5D4749 | #4A9EE0 → #034F93 | #A855F7 → #550372 | #4ADE80 → #16A34A |
| --card-bg | rgba(255,255,255,0.03) | rgba(93,71,73,0.08) | rgba(3,79,147,0.08) | rgba(85,3,114,0.08) | rgba(22,163,74,0.06) |
| --nav-active | gold | #D4A0A5 | #4A9EE0 | #A855F7 | #4ADE80 |