Arena Pro Play

ARENA

Google

Apple

Design System Showcase

Business ComponentsBusinessSidebarNav

Dashboard

HeatmapCell

Empty

Low (1-30%)

Medium (31-60%)

High (61-90%)

Full (91-100%)

StatusIndicator

In Progress

Upcoming

Pending

Completed

StatusDot

In Progress

Upcoming

Pending

Completed

SlotBar

Empty

Filled

BlockTime

7:00

12:00

18:00

DashboardStatCard — Rating & Duration

Rating

4.7

128 reviews

Avg. Duration Time

+6.2%

1h.35m

FieldSwitcher

All fields

Field 01

Field 02

Field 03

BookingCard — Field variants (Confirmed)

Michael Anderson

Field01

10:00-11:00

Confirmed

$100

Michael Anderson

Field02

10:00-11:00

Confirmed

$100

Michael Anderson

Field03

10:00-11:00

Confirmed

$100

BookingCard — Payment statuses (Field 01)

Michael Anderson

Field01

10:00-11:00

Confirmed

$100

Michael Anderson

Field01

10:00-11:00

Paid

$100

Michael Anderson Pending

Field01

10:00-11:00

Pending

$100

Michael Anderson

Field01

10:00-11:00

Unpaid

$100

BookingCard — Empty

Modal Badges

Field 01

Field 02

Field 03

Completed

In Progress

Unpaid

Confirmed

Paid

Pending

BookingDetailModal — Action

Michael AndersonToday

Field 01

Completed

Unpaid

10:00-11:00

100

BookingDetailModal — Approval

Michael AndersonToday

Field 01

Completed

Unpaid

10:00-11:00

100

Decline

Confirm

BookingDetailModal — Complete

Michael AndersonToday

Field 01

Completed

Unpaid

10:00-11:00

100

Complete Session

CustomerStatusBadge

VIP

Active

Debtor

2unpaid

Inactive

PaginationNav

PaginationButtons — Previous

PaginationButtons — Next

MetricCard

9Active Clients

24Total Bookings

SearchField

SegmentedControl

SendMessageButton

Send Message

Checkbox

Default

Active

TimeFormField

From

AddIntervalButton

Add Interval

ViewToggle

ScheduleDayCard

MonMonday

TueTuesday

WedWednesday07:00 - 22:00

CalendarPicker

April 2025

MonTueWedThuFriSatSun

TableSortDual

None

Asc

Desc

ControlYearly

Yearly

DeleteButton

Delete

PricingDayCard

Monday

$ 25/hr

Saturday

$ 35/hr

Tuesday

$ 25/hr

Wednesday

$ 25/hr

BlockPrice

$25

Workday

$35

Weekend

TimeRangePill

7:00-12:00

Business ColorsBlue Palette

Blue/100#0064B1

Blue/200#004390

Blue/300#0A2E67

Blue/400#00245D

Blue/500#00143B

Text

On-Surface/Muted#99B1BF

Status

Declined#760606

Booking

Background#042A67

Modal

Background#030F26

Icon Default#818D9C

Text Button#99B1BF

UI Surfaces

ClientRowHover#09142D

EmptyState#0F1729

DayHover#091A40

EmptyImgPri#192133

EmptyImgSec#070C1F

TimeBlock#000000

Slot

Border#949598

Effects

Chart Inner Shadow

Booking Shadow

Field Strokes

Stroke 01 (Blue)

Stroke 02 (Green)

Stroke 03 (Orange)

Business Typography

bodyXlRegular()The quick brown fox jumps over the lazy dog

bodyLSemiBold()The quick brown fox jumps over the lazy dog

bodyMLight()The quick brown fox jumps over the lazy dog

businessBodyXlSemiBold()The quick brown fox jumps over the lazy dog

businessBodyXlMedium()The quick brown fox jumps over the lazy dog

ComponentsBlockMedia

SportDropdownMenu

Football

Basketball

Volleyball

Tennis

Padel

WinDrawLossStats

5 Wins

4 Draws

2 Losses

SidebarNav

Arena

ShortcutBar

STATISTIC

TEAM

MEDIA

SportChatButton

Sport Chat

OverlayPartial

OverlayPlayersHorizontal

ChartBarItem

MatchScoreRow

FC BarcelonaWin

2 — 1

Real Madrid

AC MilanDraw

1 — 1

Inter Milan

LiverpoolLoss

0 — 2

Man City

TimeSwitcher

Week

Month

Year

PlayerCard — Football (all sizes)

RES

PlayerCard — Tennis (all sizes)

PlayerCard — Coach (all sports)

Coach

PlayerCard — All Sports

PlayerCardStatus — Confirmed & Pending

Typography

h0()The quick brown fox jumps over the lazy dog

h1()The quick brown fox jumps over the lazy dog

h2()The quick brown fox jumps over the lazy dog

h2Medium()The quick brown fox jumps over the lazy dog

h3()The quick brown fox jumps over the lazy dog

body3xlSemiBold()The quick brown fox jumps over the lazy dog

body2xlSemiBold()The quick brown fox jumps over the lazy dog

body2xlRegular()The quick brown fox jumps over the lazy dog

bodyXlMedium()The quick brown fox jumps over the lazy dog

bodyXlSemiBold()The quick brown fox jumps over the lazy dog

bodyXlBold()The quick brown fox jumps over the lazy dog

bodyLMedium()The quick brown fox jumps over the lazy dog

bodyLRegular()The quick brown fox jumps over the lazy dog

bodyLLight()The quick brown fox jumps over the lazy dog

bodyMRegular()The quick brown fox jumps over the lazy dog

bodySRegular()The quick brown fox jumps over the lazy dog

bodySMedium()The quick brown fox jumps over the lazy dog

bodySBold()The quick brown fox jumps over the lazy dog

cardHeadline()The quick brown fox jumps over the lazy dog

cardTextMedium()The quick brown fox jumps over the lazy dog

cardTextSmall()The quick brown fox jumps over the lazy dog

ColorsBrand

Primary#0061FF

White#FFFFFF

Black#000000

Yellow#E4CD40

Mint#00E5A4

SecondaryMint#00C288

Error#FF1A1A

Text

Text.Primary#B4CCF6

Text.Secondary#BED6F5

Text.Muted#959697

Text.Subtle#B9B9B9

Text.NavInactive#CCCDCE

Dark Surfaces

Background#02040B

Surface#0F172A

SurfaceVariant#112140

Border#282D3C

BorderLight#1E2332

Divider#323746

Light Surfaces

Background#FFFFFF

Surface#FAFAFA

SurfaceVariant#F5F5F5

Border#E9E9E9

Divider#E0E0E0

Result Overlays

Win#0A36F7

Draw#67C476

Loss#F72A0A

ChartTooltip#112140

TabDim#AABBDD

Sport: Football

primary#0061FF

secondary#004DCD

metrics#1E7FF5

dataPoint#0061FF

dataPointInner#0C1787

chartArea#0C1787

chartLine#0C1787

radarStroke#72A5FF

Sport: Tennis

primary#7BFA6F

secondary#34D524

metrics#7BFA6F

dataPoint#7BFA6F

dataPointInner#0D7903

chartArea#0D7903

chartLine#0D7903

radarStroke#C2F1A9

Sport: Volleyball

primary#FFFF54

secondary#F5DE15

metrics#C6F801

dataPoint#AEA725

dataPointInner#FFFF54

chartArea#AEA725

chartLine#AEA725

radarStroke#FFFFAA

Sport: Basketball

primary#FFA438

secondary#E88908

metrics#FFB84C

dataPoint#C6590C

dataPointInner#FFA438

chartArea#C6590C

chartLine#C6590C

radarStroke#FFCE93

Sport: Padel

primary#3CFFFF

secondary#0AD1D1

metrics#20B3B3

dataPoint#20B3B3

dataPointInner#3CFFFF

chartArea#20B3B3

chartLine#20B3B3

radarStroke#ACFFFF

EffectsResult Card Effects

Result Win

Result Draw

Result Loss

Sport Interactive Effects

Football

Tennis

Volleyball

Basketball

Padel

Gradients

SurfaceGradient01

SurfaceGradient02

SurfaceInnerL

ScoreControl

OverlayEdge

OverlayPlayers

OverlayPartial

OverlayPlayersH

BorderGradient01

Icons

Profile

Globe

Chat

Notifications

Settings

ArrowsDiagonal

Pencil

Map

Lightning

ScreenFull

Statistics

People

Videocam

ShieldHalf

Check

Arena

Filter

Add

Remove

Star

ChevronDown

ChevronFwd

Pause

PauseSmall

Analytics

ArrowUp

Ellipsis

Envelope

Verified

Trash

Sight

Expand

Calendar

Time

Shield

FootballField

Card

Basketball

Volleyball

Tennis

Padel

Trophy

InfoCircle

TennisField

ArrowUpOut

Location

ArrowRight

ArrowLeft

ArrowDown

ArrowRightL

ArrowLeftL

BallFootL

BallFootS

BallTenBlk

BallTenWht

BallTenS

BallPadBlk

BallPadWht

BallPadS

BallVolL

BallVolS

BallBaskL

BallBaskS

ActInactive

ActFootball

ActTennis

ActVolley

ActBasket

ActPadel

ActNumber

ActNone

ResultWin

ResultDraw

ResultLoss

CupGoldStr

CupSilverStr

CupBronzeStr

CupGoldAst

CupSilverAst

CupBronzeAst

EmptyAssist

EmptyStrike

StatWin

StatDraw

StatLoss

BallFootWht

BallVolWht

BallBaskWht

LogoStat

TeamPeople

TeamIcon1

TeamIcon2

TeamIcon3

↑

We use cookiesThis website uses cookies to ensure you get the best experience.