A warm, accessible visual language for BEYOND — premium wealth management for high-net-worth individuals across Asia. Purple and gold. Readable at every age. Refined without being cold.
v4 changes: Token naming unified (hyphen-free, e.g. --p600, --tx1). Font refs: --fd / --fb / --fw. Radius: --r6/10/14/20. Stat card values now PJS 700. Buttons/badges sized down. Card shadows flattened one level.
Brand Mark
BEYONDOn Cream
BEYONDOn Purple
✓ Do
Use on cream, white, or deep purple · Always pair icon + wordmark · Maintain 1× icon-height clear space
✗ Don't
Use below 24px · Separate icon from wordmark · Place on busy backgrounds · Alter proportions
Specs
Outfit Light 300 · 22px letter-spacing · Min 24px height · Faceted diamond-arrow mark
Brand Promise
"Redefining Financial Horizons"
Premium wealth management · Asia · HNWI & UHNWI
Foundation
Color System
Three roles: Purple drives consumer identity. Gold signals advisor prestige. Semantic colors are universal financial language — never altered per context. The warm cream base prevents both the coldness of pure white and the heaviness of dark surfaces.
Purple Spectrum — Consumer Primary
--p900#2E1065
--p700#4C1D95
--p600 ⭐#5B21B6
--p500#7C3AED
--p400#A78BFA
--p300#C4B5FD
--p100#EDE9FE
--p50#F5F3FF
Aa
--p600 on white
9.4:1 AAA
Aa
White on --p600
9.4:1 AAA
Gold — Two Roles
--gold-ink#78350F
--gold-mid text#D97706
--gold-deco ⭐#C9A96E
--gold-lt#FDE68A
--gold-tint#FFFBEB
✦
Two gold roles
Decorative (--gold-deco #C9A96E) — borders, ornamental icons, left-border accents. Text (--gold-ink #78350F) — readable labels on light backgrounds. #C9A96E alone has only 2.5:1 contrast on white — never use as small text.
Backgrounds — Warm Cream Hierarchy
--bg
#FAF8F5
Warm parchment
--bg-alt
#F3F0EB
Deeper cream
--surf
#FFFFFF
Card surfaces
--surf2
#F7F5F1
Input surfaces
Semantic Colors — Non-Negotiable Meanings
↑
Success
--ok #16A34A
--ok-bdr rgba(22,163,74,.20)
Profit · Growth · Approved
!
Warning
--warn #B45309
--warn-bdr rgba(180,83,9,.20)
Pending · Caution · Drift
↓
Danger
--err #B91C1C
--err-bdr rgba(185,28,28,.20)
Loss · Error · Rejected
i
Info
--info #1D4ED8
Processing · Neutral · Credentials
Foundation
Type System
Sizes calibrated for a 40+ audience. Body minimum 16px. Labels minimum 11px. Cormorant Garamond for editorial presence; Plus Jakarta Sans for all functional UI and all numbers. Never use Cormorant for financial values.
Type Scale
Display XL
56px · --fd 300 Leading 1.08
Wealth Redefined
Display
44px · --fd 300 Leading 1.12
Your Financial Overview
Heading
24px · --fd 400 Leading 1.30
Portfolio Performance — Q1 2026
Number XL
28–34px · --fb 700 -1.5px tracking
$2,048,320
Number LG
20–22px · --fb 700 -0.5px tracking
$1,200,000+12.4% YTD
Body Large
18px · --fb 300 Leading 1.75
A comprehensive view of your wealth and progress toward your goals.
Body
16px · --fb 300 Leading 1.75
Your portfolio has grown steadily this quarter, outpacing the benchmark by 3.2 percentage points across all asset classes.
Caption
13px · --fb 400 Leading 1.50
Last updated: 26 Feb 2026 · 16:32 WIB · Source: Bloomberg
All UI, buttons, labels · Navigation ALL numbers, values, percentages 300 · 400 · 500 · 600 · 700
--fw · Wordmark Only
BEYOND
Logo lockup exclusively Outfit Light 300 22px letter-spacing minimum
Foundation
Spacing & Grid
4-point base grid. Generous whitespace is the typographic equivalent of fine paper — it signals that nothing needs to compete for attention.
4px
Micro — icon gaps, badge padding
8px
Tight — related inline elements
16px
Default — most common gap
20px
Card padding · content sections
24px
Medium — form fields, panel internals
32px
Large — section breaks
48px
XL — section spacing
64px
2XL — major layout breaks
Radius Scale
--r6 · 6px Buttons, inputs
--r10 · 10px Inner cards, chips
--r14 · 16px Primary cards
--r20 · 20px Modals, large surfaces
Components
Button System
11px · 500 weight · uppercase · 0.6px letter-spacing · 9px 20px padding. Consumer primary is deep purple; advisor primary is warm gold. Minimum tap target 44px on mobile.
Consumer Variants
Advisor Variants
✦
Advisor Context
Advisor primary uses --gold-deco (#C9A96E) with dark text — institutional authority expressed through warm metallic restraint. Now uses --err-bdr and --ok-bdr tokens on semantic buttons.
States
--p600 · shadow 28%
--p700 · deeper shadow
38% opacity
Loading state
Components
Badge & Status
9px · 600 weight · uppercase · 1.2px letter-spacing · 4px 10px padding · pill shape. Color always paired with a legible text label — never rely on color alone to communicate status.
White surface · 15px input text · 11px uppercase labels · purple focus ring (consumer) · gold focus ring (advisor). All placeholder text is warm gray — never cold.
Consumer
We'll never share your email address.
Please enter a valid email address.
Advisor
✦
Advisor inputs use a warm gold focus ring — a quiet but consistent prestige signal through professional workflows.
Components
Card Components
White surface on cream background creates the premium paper layering. --r14 (16px) border-radius · warm violet-tinted shadow · 260ms hover lift. Resting shadow: sh-xs. Hover shadow: sh-sm. Advisor cards shift to gold shadow on hover.
Stat Cards — Consumer (hover each)
Total Portfolio
$2.4M
↑ 12.4% YTD
Net Worth
$3.8M
↑ 8.2% YTD
Monthly Returns
+$18.5K
↑ 2.1% MTD
Goals Progress
68%
↓ −3% vs Target
✓ v4 fix: stat-val now uses --fb (Plus Jakarta Sans) 700 with -1px letter-spacing. Previously used --fd (Cormorant) — which violated the core rule that numbers must never use the serif display font.
Stat Cards — Advisor (gold left-border)
Total AUM
$2.4B
↑ 15.2% YTD
Active Clients
142
↑ 8 New
Approval Rate
94.8%
↑ 2.1%
Revenue MTD
$182K
↑ 12.4%
Content Cards
Portfolio Overview
Consumer · hover for purple shadow
Your diversified holdings have performed strongly this quarter, outpacing the benchmark by 3.2 percentage points across all major positions.
Client: Sarah Chen
✦ HNW
Advisor · hover for gold shadow
AUM
$840K
YTD
+14.2%
Risk
Moderate
Components
Navigation Patterns
62px frosted top bar · 218px sidebar. Consumer active: --p50 background + --p600 left border. Advisor active: --gold-tint background + --gold-deco left border. Font size 12px minimum for all nav labels.
Consumer Navigation
BEYOND
DashboardInvestmentsGoalsAdvisors
Overview
Dashboard
Portfolio
Transactions
Invest
Research
Marketplace
Watchlist
Plan
Goals
Loans
Find Advisor
--p50 active bg · --p600 left border 2px · --p600 text · 260ms transitions · 12px nav link min
Advisor Navigation — Gold Active States
BEYONDAdvisor
OverviewClientsReports
Overview
Dashboard
Analytics
Approvals 3
Management
Clients
Portfolios
Transactions
Tools
Reports
Revenue
Messages
--gold-tint active bg · --gold-deco left border · --gold-ink text (#78350F) · Warm nav background on advisor views
Components
Data Visualization
Consumer bars: --p400 → --p600. Advisor bars: gold-lt → gold-deco. Profit/loss always use semantic green/red — never brand purple or gold for financial performance indicators.
Consumer — Purple
Portfolio Performance
Dec 2025+12.4% ↑Feb 2026
Advisor — Gold
Revenue Overview
Jan 2026+$182K ↑Feb 2026
Components
Data Tables
Warm bg headers · comfortable row height for readability · hover row tint. Table text minimum 14px. Numbers right-aligned using PJS 600 — never the display serif.
Current Holdings
Asset
Price
Value
Return
Allocation
AAPL
Apple Inc.
NASDAQ: AAPL
$185.40
$231,750
+18.4%
9.7%
MSFT
Microsoft Corp.
NASDAQ: MSFT
$412.30
$329,840
+22.1%
13.8%
VTI
Vanguard Total Stock ETF
NYSE: VTI
$238.65
$763,680
+14.8%
31.9%
BND
Vanguard Total Bond ETF
NASDAQ: BND
$74.80
$411,400
+3.2%
17.2%
VXUS
Vanguard Intl Stock ETF
NASDAQ: VXUS
$58.90
$164,920
+1.8%
6.9%
Components
Feedback & Overlays
Toast Notifications
✓
Transfer completed
$5,000 sent to your investment account · New balance: $2,405,000
!
Approval required
3 pending approvals require your review before market close today.
✕
Transaction failed
We couldn't process this transaction. Please check your connection and try again.
i
Market update
Asian markets opened +0.8% · Your holdings are performing as expected.
Loading — Skeleton Screens
Modal
Confirm Transfer
You are about to transfer $5,000 from your Main Portfolio to your Investment Account. This will be reflected within 1–2 business days.
Interactions feel like turning a page in a fine book — deliberate, smooth, purposeful. 260ms ease throughout. No bounce, no spring physics, no continuous animations.
Consumer Card
$2.4M
translateY(−3px) · sh-xs → sh-sm · 260ms ease
Advisor Card
$2.4B AUM
translateY(−3px) · warm gold shadow · 260ms ease
Stat Card
+12.4%
Same pattern across all card types
✓ Permitted
Fade in/out · translateY (−2px to −4px) · Brightness/opacity · Color transitions · scale(0.97→1) for modals
✗ Prohibited
Bounce / spring physics · Rotation on UI elements · Parallax scrolling · Continuous loops · Flash or strobe
Reference
Design Tokens
All values as CSS custom properties. Token names are now hyphen-free (e.g. --p600, --tx1) to match advisory-v4 and all mockup files. Copy the :root block into your application stylesheet.
Token
Value
Role
--p600
#5B21B6
Consumer primary · CTAs · active states
--p500
#7C3AED
Hover state · italic headline accent
--p400
#A78BFA
Light accents · chart bars · focus rings
--p100
#EDE9FE
Active nav background · tints
--p50
#F5F3FF
Hover row · subtle surfaces
--gold-deco
#C9A96E
Advisor borders · decorative ornament
--gold-ink
#78350F
Advisor text · labels on light (9.2:1)
--gold-lt
#FDE68A
Gold chips · avatar gradients
--bg
#FAF8F5
Page background — warm cream
--surf
#FFFFFF
Card & panel surfaces
--surf2
#F7F5F1
Input surfaces · inset areas
--tx1
#1C1917
Primary text
--tx2
#44403C
Secondary text
--tx3
#78716C
Tertiary / muted
--tx4
#A8A29E
Placeholder / disabled / labels
--ok
#16A34A
Success — profit, approved, growth
--ok-bdr
rgba(22,163,74,.20)
Success button/element borders
--warn
#B45309
Warning — pending, drift, attention
--warn-bdr
rgba(180,83,9,.20)
Warning button/element borders
--err
#B91C1C
Danger — loss, error, rejected
--err-bdr
rgba(185,28,28,.20)
Error button/element borders
--r6
6px
Buttons · inputs · pills
--r10
10px
Inner cards · chips · toasts
--r14
16px
Primary cards · nav demo
--r20
20px
Modals · hero quotes · large surfaces
✓ Always
--bg (#FAF8F5) warm cream page background --fb (PJS) for ALL numbers, values, percentages --fd (Cormorant) for headings, names, titles only Body minimum 16px · labels minimum 9px --p600 for consumer CTAs and active states --gold-deco for advisor borders --gold-ink for advisor text labels --err-bdr, --warn-bdr, --ok-bdr on semantic buttons
✗ Never
--fd (Cormorant) for any numeric or financial value --gold-deco as small text on white (2.5:1 contrast) Body text below 16px · labels below 9px Old token names: --p-600, --tx-1, --font-d, --r-sm Bounce / spring physics in any animation Color as sole status indicator — always add text