Design System & Component Showcase

Dev Only

Live visual verification of design tokens, typography, accessibility, and UI primitives across viewports.

Isolated Visual Test Environment

All data rendered on this page consists of purely static fixtures. No network requests to payment gateways or blockchain nodes are executed.

1. Semantic Color Tokens

System-wide HSL color variables supporting light & dark themes.

Primary

158 64% 20%

Secondary

210 40% 96%

Success

142 71% 45%

Warning

38 92% 50%

Destructive

0 84% 60%

Muted

210 40% 96%

2. Typographic Scale & Tabular Numerals

High-legibility financial typography with tabular digits.

Hero Display Title ($1,425,850.00)

`text-3xl md:text-5xl font-bold tracking-tight`

Section Title (Page Level)

`text-2xl md:text-3xl font-semibold`

Card Subtitle (Component Level)

`text-xl font-semibold`

Standard Body Text: US Dollar deposits are settled off-chain with immutable double-entry journal postings.

`text-sm md:text-base leading-relaxed`

Tabular Numerals: $1,234,567.89 | 100.000000 USDT | 0.450000 ETH

`font-mono tabular-nums` (Zero jitter across balance mutations)

3. Interactive Controls & Buttons

Accessible buttons with loading states, icon support, and sizes.

4. Financial Display & Asset Cards

Maskable balance displays, EVM address containers, and fee summaries.

Portfolio Balance Display

Hero net worth presentation with privacy masking.

Total Estimated Valuation

₦1,425,850.00NGN

≈ $950.56 USD

Network Base Fee

$0.00

Instant Free Off-chain

Estimated Gas Fee

0.00045 ETH

~$1.20 USD

Total Amount Deducted

$50.00

Deposit Address & QR Module

Dedicated EVM address card with one-click clipboard copy.

USDT Deposit Address

Polygon PoS Network

EVM Compatible

0x71C84949a37651C8407425fAc9a3651C840742f1

Network Compatibility Warning

Send only USDT via the Polygon PoS network to this address. Sending funds via any other chain (e.g. TRC-20, Solana) will cause irreversible loss.

5. Inputs & Form Validation

Accessible text and specialized numeric currency inputs.

Numeric Currency Amount Input

Enforces numeric entry, handles quick MAX clicks.

Funding Amount

Available: 250,000.00 NGN

NGN

Crypto Amount (Disabled)

USDT

Form Validation State

Accessible inline errors linked via aria-describedby.

6. Deterministic Financial Status Badges

Unambiguous visual states for all transactions in the ledger.

DraftPendingProcessingCompletedFailedCancelledExpiredReconciliation

7. Feedback, Skeletons & Empty States

Predictable placeholders preventing layout shifts (CLS).

Loading Skeletons

Pulsing placeholders matching content dimensions.

Empty State Card

Non-intimidating empty state for new accounts.

No transactions yet

When you fund your wallet or receive digital assets, your full ledger history will display here.