Style Guide
Visual style guide for PrimeServe Tennis. Use this page to review and approve the color scheme and component styles.
To change colors, edit the CSS variables in src/styles/global.css
Color Palette
Primary (Tennis Court Green)
50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
Secondary (Sky Blue)
50
#f0f9ff
100
#e0f2fe
200
#bae6fd
300
#7dd3fc
400
#38bdf8
500
#0ea5e9
600
#0284c7
700
#0369a1
800
#075985
900
#0c4a6e
Accent (Warm Coral/Orange)
50
#fff7ed
100
#ffedd5
200
#fed7aa
300
#fdba74
400
#fb923c
500
#f97316
600
#ea580c
700
#c2410c
800
#9a3412
900
#7c2d12
Typography
Heading 1
The quick brown fox jumps
Heading 2
The quick brown fox jumps
Heading 3
The quick brown fox jumps
Heading 4
The quick brown fox jumps
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Small Text
This is smaller text used for captions, labels, and secondary information.
Buttons
Variants
Sizes
Cards
Default Card
A simple card with no shadow or border.
Elevated Card
A card with shadow that increases on hover.
Bordered Card
A card with a subtle border.
Star Ratings
Form Elements
Sample Sections
Professional Tennis Coaching & Racket Stringing
Improve your game with personalised coaching from an experienced professional. Expert racket stringing service with quick turnaround.
1-to-1 Coaching
Personalised sessions tailored to your skill level and goals. Perfect for rapid improvement.
Group Sessions
Fun and social group coaching for all ages and abilities. Great value and motivation.