Foundations

Colors

All design tokens that define the Wanna visual language. Every value supports Light and Dark mode via CSS custom properties.

Full neutral scale. In Dark mode the scale inverts — 100↔800, black↔white.

neutral/white#FFFFFF

neutral/100#F7F6F9

neutral/200#EAE7F1

neutral/300#C7C0D4

neutral/400#988DAC

neutral/500#706784

neutral/600#3F3855

neutral/700#2B263F

neutral/800#150F2B

neutral/black#090127

neutral/100#150F2B

neutral/200#2B263F

neutral/300#3F3855

neutral/400#706784

neutral/500#988DAC

neutral/600#C7C0D4

neutral/700#EAE7F1

neutral/800#F7F6F9

neutral/white#FFFFFF

Functional colors for feedback states — success, warning, error, info.

semantic/success#198F51

semantic/warning#FCA512

semantic/error#EA3A2E

semantic/info#5723B0

semantic/success-dark#55BC5B

semantic/warning#FCA512

semantic/error-dark#FF584D

semantic/info-dark#A874FF

Adaptive accent — flips automatically between Light and Dark mode.

accent/light#5723B0

accent/secondary#EFE9F8

accent/tertiary#E1D5F2

accent/dark#A874FF

accent/secondary#150F2B

accent/tertiary#2B263F

Low-opacity tints for backgrounds, badges and state indicators. Same value in both modes.

support/yellow#F5CC45

support/yellow/20rgba(245,204,69,.20)

support/success/20rgba(25,143,81,.20)

support/warning/20rgba(252,165,18,.20)

support/error/20rgba(234,58,46,.20)

support/yellow#F5CC45

support/yellow/20rgba(245,204,69,.20)

support/success/20rgba(25,143,81,.20)

support/warning/20rgba(252,165,18,.20)

support/error/20rgba(234,58,46,.20)

Purple-tinted overlays at varying opacities for modals and sheets.

overlay/5rgba(87,35,176,.05)

overlay/10rgba(87,35,176,.10)

overlay/20rgba(87,35,176,.20)

overlay/5rgba(168,116,255,.05)

overlay/10rgba(168,116,255,.10)

overlay/20rgba(168,116,255,.20)

Linear gradients for premium Gold and Silver surfaces — sourced from partner JSON.

gradient/gold#F8BD4F → #FCFDC9

gradient/silver#C0C0C0 → #F6F3F6

gradient/brand#5723B0 → #2C1357

gradient/gold#F8BD4F → #FCFDC9

gradient/silver#C0C0C0 → #F6F3F6

gradient/brand#A874FF

Foundations

Typography

Wanna uses Montserrat as the primary typeface and Barlow Condensed for compact, high-impact display text.

Aa

Montserrat

--font-primary

fontFamily/primary · Regular → ExtraBold

The quick brown fox jumps over the lazy dog.

Aa

Barlow Condensed

--font-condensed

fontFamily/condensed · Regular → Bold

The quick brown fox jumps over the lazy dog.

3 weights × 6 sizes — SemiBold, Bold, ExtraBold. 10px to 20px.

2 weights × sizes — Bold (14–48px) · Bold Italic (16–18px). All uppercase · line-height 100% · letter-spacing 3%.

Named text styles used across components and layouts.

TokenSample

Foundations

Spacing & Radius

An 8-point based spacing system and four border radius values for consistent spatial rhythm.

--spacing-xs

4px

--spacing-sm

8px

--spacing-md

12px

--spacing-lg

16px

--spacing-xl

24px

--spacing-2xl

32px

--spacing-3xl

48px

Small

--radius-small · 4px

Medium

--radius-medium · 8px

Large

--radius-large · 12px

Full

--radius-full · 130px

Foundations

Shadows

Two elevation levels — Bottom Sheet for overlays and Card for surface elevation.

shadow/bottomSheet

Bottom Sheet — Light

X0px

Y-10px

Blur25px

Spread0px

Colorrgba(9,1,39,.25)

Dark0px -30px 50px 0px rgba(9,1,39,.80)

shadow/card

Card — Light

X0px

Y-10px

Blur25px

Spread0px

Colorrgba(9,1,39,.25)

Dark0px -10px 25px 0px rgba(9,1,39,.70)

Foundations

Icons

Inline SVG icons using currentColor — recolor via CSS with no extra assets.

Soccer, MMA, Football, E-Sports, Baseball, Basketball, Volleyball, Tennis, Motorsports, Hockey, Golf.

Dark

White

Purple

Grey

Wallet, Support, Rules, How to Play, Free Play, Settings, Chevron Left, Chevron Right.

Dark

White

Search, Menu, Person — plus Free Play and Money in Green.

Dark

White

Green

Lobby, Moneyboard, Buzz, Notifications, Profile.

Active

Inactive

Camera, Send, Receive, Mentions, Muted, Suggestions, GIF, Image, Refresh, Add.

White

Light

Dark

Purple

Calendar, More, Share.

White

Light

Dark

Purple

Directional arrows — Left, Right, Up, Down.

Default

Custom

Yellow

Red

Apple Pay, Credit Card, Debit Card, Bank Transfer, Venmo, PayPal.

White

Light

Dark

Purple

Close, Open, Filter — 20px size.

White

Light

Dark

Purple

Fire, Poop, Comment, Share — 18px size.

Inactive

Active

Free Play ticket icon — Inactive and Active states.

Inactive

Active

Components

Inputs

21 input components across Sign Up, Login and account flows. Every field shows 5 states — Default, Focused, Filled, Completed, Error. Font: Montserrat SemiBold · Label 12px · Value 14px · Error 10px.

Login

Fields used on the login screen.

Live demo

Email or Username

All states

Default

Email or Username ·

Focused

Email or Username |

Filled

Email or Username Renato

Completed

Email or Username Renato

Error

Email or Username Re

No account associated with this email or username.

Live demo

All states

Default

Password·

Focused

Password|

Filled

Password••••••••••••••••

Completed

Password#Rrnnaattoo#123@

Error

Passwordrena123

Please enter a valid password.

Create Account I — Personal Info

First screen of account creation: name, address, date of birth, gender.

Live demo

Month

Day

Year

Focused state (all segments)

MonthMM |

DayDD |

YearYYYY |

Filled state

Month01

Day15

Year1990

Live demo

Male

Female

Other

Default

Male

Female

Other

Selected

Male

Female

Other

Live demo

State

States

Default

State

Open

State

Completed

State FL

Error

State XX

Select a valid state.

Create Account II — Credentials

Email, phone, username, password and invite/promo codes.

Live demo

All states

Default

Filled (valid)

Error

Invalid promo code.

Completed

Live demo

States

Default

Filled (valid)

Error

Invalid invite code.

Completed

Live demo

Password

Focused (checklist visible)

Password|

A lowercase letter

An uppercase letter

One number

At least 8 characters

Filled (checks passing)

Password••••••••••••••••

A lowercase letter

An uppercase letter

One number

At least 8 characters

Error (mixed checks)

Passwordrena123

A lowercase letter

An uppercase letter

One number

At least 8 characters

Forgot Password

Email recovery, temporary password, and new password reset flow.

Semantic color tokens used across all Input states. Each semantic token aliases a primitive token, which resolves to different HEX values in Light and Dark mode.

Element · State	Semantic Token	Primitive Token	HEX · Light / Dark
Label
Label · Default	semantic/input/label/default	neutral/400	L#988DAC D#706784
Label · Active	semantic/input/label/active	accent/light · accent/dark	L#5723B0 D#A874FF
Label · Error	semantic/input/label/error	semantic/error · error-dark	L#EA3A2E D#FF584D
Border
Border · Default	semantic/input/border/default	neutral/400 · neutral/600	L#988DAC D#3F3855
Border · Focused	semantic/input/border/focused	accent/light · accent/dark	L#5723B0 D#A874FF
Border · Error	semantic/input/border/error	semantic/error · error-dark	L#EA3A2E D#FF584D
Placeholder
Placeholder · Filled	semantic/input/placeholder/filled	neutral/black · neutral/white	L#090127 D#FFFFFF
Placeholder · Error	semantic/input/placeholder/error	semantic/error · error-dark	L#EA3A2E D#FF584D
Messages
Message · Error	semantic/input/message/error	semantic/error · error-dark	L#EA3A2E D#FF584D
Message · Success	semantic/input/message/success	semantic/success · success-dark	L#198F51 D#55BC5B
Password Check
Check · Empty	semantic/input/check/empty	neutral/300 · neutral/600	L#C7C0D4 D#3F3855
Check · Success	semantic/input/check/success	semantic/success · success-dark	L#198F51 D#55BC5B
Check · Error	semantic/input/check/error	semantic/error · error-dark	L#EA3A2E D#FF584D
Background
BG · Label Chip	semantic/input/bg/label-chip	neutral/100 · neutral/700	L#F7F6F9 D#2B263F
BG · Option Active	semantic/input/bg/option/active	overlay/10	Lrgba(87,35,176,.10) Drgba(87,35,176,.10)

Components

Input Label

Six input component variants. All use Montserrat SemiBold — 12px label · 14px value. Barlow Condensed Bold 24px for code fields.

Live demo

Label

All states

Default

Label·

Focused

Label|

Filled

LabelInput

Completed

LabelInput

Error

LabelInput

Error message

Live demo

Label

Default

Label·

Focused (checklist visible)

Label|

A lowercase letter

An uppercase letter

One number

At least 8 characters

Filled (all checks passing)

Label••••••••••••••••

A lowercase letter

An uppercase letter

One number

At least 8 characters

Completed

Label••••••••••••••••

Error (mixed checks)

Labelrena123

A lowercase letter

An uppercase letter

One number

At least 8 characters

Live demo

Month

Day

Year

Default

MonthMM

DayDD

YearYYYY

Month focused

MonthMM |

DayDD

YearYYYY

Day focused

Month12

DayDD |

YearYYYY

Year focused

Month12

Day30

YearYYYY |

Completed

Month12

Day30

Year1999

Error

Month12

Day30

Year2025

Error message

Live demo

Label

AL — Alabama

FL — Florida

NY — New York

TX — Texas

Default

Label ·

Open / Focused

Label ·

AL — Alabama

FL — Florida

NY — New York

TX — Texas

Completed

Label FL

Live demo

Label

Male

Female

Other

Default

Label

Male

Female

Other

Male selected

Label

Male

Female

Other

Female selected

Label

Male

Female

Other

Other selected

Label

Male

Female

Other

Live demo — type WANNA25 for success

Default

Focused

Filled

Completed

Success

Sucess message

Error

Error message

Components

Buttons

18 button variants across 7 groups. Font: Montserrat SemiBold 600 · CTA uses Bold 700. All heights and radii are pixel-exact from Figma.

Default

Disabled

+ Icon

Icon Right

Icon Both

Payout

Default · bg support/yellow · text neutral/black

Default

Disabled

Icon Right

Outline

Soft

Soft Outline

Inline

Link · 12px SemiBold · primary/500

Compact Accent · 12px SemiBold · support/yellow

Primary Brand · gradient #5723B0 → #2C1357

Secondary Outline · bg primary/200 · border primary/500

Components

Buttons 2

Sistema de botões com tokens de design. Cada card exibe os estados e a tabela completa de tokens: componente → primitivo → HEX claro/escuro.

Button MD

48px de altura · border-radius 100px · Montserrat SemiBold 16px · padding 0 24px

Live demo

Estados

Default

Disabled

Live demo

Estados

Default

Disabled

Live demo

Estados

Default

Disabled

Live demo

Estados

Default

Disabled

Button Compact

Botão reduzido · border-radius 42px · Montserrat SemiBold 12px · padding 8px 20px

Live demo

Estados

Default

Disabled

Live demo

Estados

Default

Disabled

Button Floating

52px de altura · border-radius 32px · Montserrat Bold 700 16px · ícone em pill 40×40px

Live demo

Estado

Default

Live demo

Estado

Default

Live demo

Estados

Expanded

Collapsed

Parlay Action

Componente de ação principal no bottom-sheet do parlay. 48px · duas áreas: Action (botão) e Hint (status). Controlado por BOOLEAN Show Action / Show Hint.

Live demo — Ready

$5could pay$25

Go to checkout

Todas as variações

Ready

$5could pay$25

Go to checkout

Payout

$5could pay$25

Continue

Checkout

Go to checkout

Continue

Continue making picks

Live demo — Add Player

Add a player pick

Todas as variações

Empty 1

Start making picks!

Empty 2

Make a pick

Add Points

Add picks to increase your points

Add Player

Add a player pick

Different Event

Add a pick from a different event

Meet Requirement

Add picks to meet requirement

Max Exceeded

Max picks exceeded

Components

Headers

3 header variants. Navigation header centers the Wanna logo with a back arrow. Description header uses Barlow Condensed Bold 36px · uppercase · 3% tracking · 30px line-height. Label header combines both.

Default

With description

Label

This is a long description to go along the label if necessary.

Title only

Label

Default

Label

This is a long description to go along the label if necessary.

Colors

Neutral

Semantic

Accent

Support

Overlay

Gradient

Typography

Font Families

Montserrat Scale

Barlow Condensed Scale

Semantic Text Styles

Heading Styles

Spacing & Radius

Spacing

Border Radius

Shadows

Icons

Sports

Side Menu

Lobby

Tab Bar

Chat

Others

Picks Section

Wallet

Filters

Parlay Details

Free Plays

Inputs

Login

Create Account I — Personal Info

Create Account II — Credentials

Forgot Password

Token Reference

Input Label

Buttons

Buttons 2

Button MD

Button Compact

Button Floating

Parlay Action

Headers