Arenix Design System
Sports booking & community platform · iOS 16+ · Dark-first UI · SwiftUI-native feel
Brand Colors
Primary Orange
#FF5722
--arenix-orange
Dark Orange
#E64A19
--arenix-orange-dark
Deep Background
#0D0D14
--arenix-bg
Card / Glass
#1F1F24
--arenix-card
Text Primary
#FFFFFF
--text-primary
Text Secondary
#FFFFFF 70%
--text-secondary
Text Muted
#FFFFFF 50%
--text-muted
Status Colors
Typography — SF Pro
Large Title28px · Bold
Arenix Home
Title 122px · Semibold
My Bookings
Title 218px · Semibold
Find Match
Body15px · Regular
Filter and book with coaches in blink of an eye
Caption12px · Medium
Tennis · 4.2 km away
Chip Label11px · Semibold
AVAILABLE
Buttons
Input Fields
Chips & Status Badges
TennisBasketballFootballPadelGolfVolleyball
Confirmed
Pending
Cancelled
Available
Finished
Court Card
📷 Court Image Placeholder
Padel Pro Arena
Padel · 2.8 km
OMR 12 / hour
Match Row
🎾
Tennis Doubles — Padel Pro Arena
Today · 18:00–19:00 · Intermediate
3/4 players joined
Conversation Row
Padel Pro Arena
Sure, court 3 is available at 7 PM tomorrow.
Ahmed Al-Rawahi
Great match! Same time next week?
Time Slot Grid
16:00
17:00
18:00
19:00
20:00
21:00
Tab Bar — User Portal (5 tabs)
🏠Home
🔍Explore
📅Bookings
👥Find Match
💬Inbox
Orange accent on active tab · SF Symbols: house.fill, magnifyingglass, calendar, person.2.fill, message.fill · Haptics: selection on change
UI States
⏳
Loading
Fetching your bookings...
📅
No bookings yet
Courts you book will appear here. Start exploring!
⚠️
Something went wrong
Couldn't load your matches. Check your connection.
Map Section
📍 Google Maps — Nearby Courts
Embedded Google Maps section with court markers, locate-me control, expand behavior
Search Filter Sheet
Filters
CourtsBusinesses
Sport
TennisBasketballPadelFootballGolf+6 more
Registration Progress
Step 3 of 7
Multi-step registration: Email → Photo → Name → DOB → Gender → Sports → Loading
Design Tokens Summary
Corners: Cards 12–16px · Buttons 16px · Chips pill (999px)
Tab Bar: Custom orange accent · 5 tabs user / 4 manager / 4 admin
Haptics: Selection on tab change · Medium on primary CTAs
Maps: Google Maps SDK embedded (home map, explore map, manager picker)
Brand Voice: "Fitness made easy" · "Filter and book with coaches in blink of an eye"
Splash Tagline: "Courts • Matches • Community"
Profile Access: Orange person.circle.fill in nav bar → opens Profile sheet
Deep Links: arenix://match/{id} → opens match invite sheet on Find Match tab