N
NAMH CRM
Design System

Component Library

Dark + light · Brand tokens from namh-nextjs adapted for CRM density.

Brand Palette

Primary Brand
Brand Gold
#D4AF37
Bronze
#755A37
Growth Green
#39A86B
Gold Dark
#B8960C
Semantic Surfaces
bg-top
bg-0 (body)
bg-1 (card)
bg-2 (input)
bg-3 (hover)
Status
Success
#39A86B
Warning
#E5A60A
Danger
#E5484D

Typography

4xl / 36 / semiDealing Desk Overview
3xl / 28 / semi$54,321.88
2xl / 22 / semiClient 360° View
xl / 18 / semiSample Text · ID-000000
lg / 16 / medSection heading
md / 14 / regBody text at a readable size
base / 13 / regDefault table row — dense but legible
sm / 12 / regCaption / helper text
xs / 11 / medStat label
mono / sm$0.00 · 0.00000 · ID-000000

Buttons

Status Pills

ActiveCompletedReviewHolding 2dRejectedBlockedVIPBonusKYC PendingDemo

Form Fields

Stat Tiles

Total Deposits
—
▲ +12% vs last month
Equity
—
▼ -2.1% last 7d
Active Clients
—
▲ +184 new
Churn Risk
MEDIUM
Score: 48/100

Data Tables

Recent Trades
TicketSymbolSideLotsOpenCloseP&LStatus
00000001XAUUSDBUY2.500.000.00+$0.00Closed
00000002EURUSDSELL5.000.000000.00000+$0.00Closed
00000003BTCUSDBUY0.3067,240—-$0.00Open

Cards

Simple Card

Any dashboard content goes here. Padded, bordered, elevated.

With Action
Last updated 2m ago

Header action for filters, refresh, or view-all.

Footer with metadata or total counts
Highlight Card
Premium

Used for VIP / bonus / tier context. Subtle gold wash.

Avatars & Progress

RS
AK
MT
Wagering progress22.4 / 50 lots
KYC completion4 / 4
NAMH CRM Design System v1.0 · 2026-04-23tokens in tailwind.config.ts · theme via CSS vars