/ui-kit
Product design system
These examples use the same tokens and components as the production interface.
1. Color
Background
--bg
Primary text
--ink
Muted text
--mut
Dimmed text
--dim
Action
--action
Information
--info
Tier
--tier
Profit / Success
--success
Risk / Error
--danger
2. Typography
English display
PrimeProp
Secondary heading
Funded Account
Tertiary heading
Body text at the standard weight, size, and line height.
MICRO / JETBRAINS MONO
$12,480.50
3. Spacing and radius
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--radius-sm
--radius-md
--radius-lg
--radius-pill
4. Glass surface
A translucent glass surface with an internal highlight and no blur.
--glass-fill ยท --glass-highlight
5. Buttons
6. Inputs
Use Latin characters
The code is invalid
7. Card
Nested card
Product card using shared spacing and radius tokens.
8. Status
PASSEDFAILEDACTIVECLOSED
9. Alerts
Payout request submitted.
Insufficient balance for this order.
Daily loss utilization has reached 80%.
Prices are delayed by one second.
10. Toasts
11. Data
Account balance
$12,480.50
Today's profit
+$186.20