Figma Theme Styles
Click any swatch to edit
Backgrounds
Background Primary
#1A1A2E
colour_background
Background Secondary
#22223A
colour_background_secondary
Overlay
#000000 @ 60%
colour_overlay
Text
Text Primary
#F0F0F5
colour_text_primary
Text Secondary
#9090A8
colour_text_secondary
Primary / Accent
Primary
#7C5CFC
colour_primary
Primary Hover
#9B82FC
colour_primary_hover
Button / CTA
Button Background
#7C5CFC
colour_button_bg
Button Text
#FFFFFF
colour_button_text
Components
Pill Background
#2A2A42
colour_pill_bg
Pill Active
#7C5CFC
colour_pill_active
Card / Input Background
#16162A
colour_card_input_bg
Border
#2E2E48
colour_border
Icon Default
#9090A8
colour_icon
Status
Success
#34D399
colour_success
Warning
#FBBF24
colour_warning
Error
#F87171
colour_error
Progress
Progress Track
#2A2A42
colour_progress_bg
Progress Fill
#7C5CFC
colour_progress_fill
Gradient (Button CTA)
CTA Gradient
135deg, #7C5CFC -> #A78BFA
colour_gradient_start / colour_gradient_end
to
Font Weights
Body
400
Semi-bold
600
Bold
700
Button Style
Deposit
Pill
Deposit
Rounded
Deposit
Square
Deposit
✕
Enter Amount
$10
$25
$50
$100
Payment Method
Visa ****4821
Instant deposit
✓
Mastercard ****7733
Instant deposit
100% Match Bonus
Deposit $50, play with $100
DatoCMS Field Mapping
Ready to export to DatoCMS