Design System
Comprehensive guide to our design tokens, components, and visual language
Choose Your Color Scheme
The entire page will adapt to your chosen color scheme
Color Palette
Primary Colors
Slate 900
#0f172a
Slate 800
#1e293b
Slate 700
#334155
Slate 600
#475569
Accent Colors
Blue 600
#2563eb
Purple 600
#9333ea
Green 600
#16a34a
Red 600
#dc2626
Gradients
Blue to Purple
Primary gradient
Green to Blue
Success gradient
Purple to Pink
Accent gradient
Typography
Heading 1
Font: Inter, Weight: 700, Size: 48px/3rem
Heading 2
Font: Inter, Weight: 700, Size: 36px/2.25rem
Heading 3
Font: Inter, Weight: 600, Size: 30px/1.875rem
Heading 4
Font: Inter, Weight: 600, Size: 24px/1.5rem
Body Large
Font: Inter, Weight: 400, Size: 20px/1.25rem
Body Regular
Font: Inter, Weight: 400, Size: 16px/1rem
Body Small
Font: Inter, Weight: 400, Size: 14px/0.875rem
Components
Buttons
Button Styles: Squared vs Rounded
Primary Buttons
Rounded (Default)
Squared (Trading Interface)
Compact Buttons
Rounded Compact
Squared Compact
Icon Buttons
Rounded Icon Buttons
Squared Icon Buttons
Input Styles: Squared vs Rounded
Text Inputs
Rounded Inputs (Default)
Squared Inputs (Trading Interface)
Compact Inputs
Rounded Compact
Squared Compact
Input States Comparison
Rounded States
Squared States
Cards
Card Title
This is a sample card component with some content.
Featured Card
This card has a special gradient background.
Interactive Card
This card has hover effects and transitions.
Form Elements
Input Components
Text Inputs
Input States
This field is required
Input Types
Textarea
Checkboxes & Radio Buttons
Checkboxes
Radio Buttons
Toggle Switch
Compact Inputs
Compact Text Inputs
Compact Form Groups
Compact Search & Filters
Compact Toggles
Compact Checkboxes
Alerts
Spacing & Layout
Spacing Scale
Container Widths
Container: max-width 1280px (80rem)
Max-width 4xl: 896px (56rem)
Max-width 2xl: 672px (42rem)
Ready to Build?
Use our design system to create consistent, beautiful interfaces
Background Showcase
Visual preview of all available background schemes
Current Palette
Atmospheric fog with subtle slate gradients
Inferno
Fiery plasma with intense red-orange gradients
Turbo
High-energy vapor with cyan-blue gradients
Viridis
Organic life with purple-green gradients
Section Backgrounds
Subtle backgrounds used in content sections
Color System Background
Subtle slate gradient for content sections
Components Background
Enhanced opacity for component sections
Interactive Background Preview
Switch between schemes to see how backgrounds change
Current Selection: Current Palette
The entire page above adapts to your chosen color scheme