Complete live reference for every component in the Court Booking design system.
Club Navy
#0F172A
Chalk White
#FAFAFA
Optic Yellow
#D9F544
Surface Clay
#C25E4B
Surface Hard
#3B82F6
Slate 200
#E2E8F0
Body Text — The quick brown fox jumps over the lazy dog. Designed for readability in dense scheduling grids.
Metadata Text (Monospace)Thin 1px border for structured information display.
Subtle drop shadow for floating elements.
4 bookings/month
Off-peak hours
Email support
Unlimited bookings
All hours
Priority support
Guest passes
Unlimited bookings
All hours
Dedicated courts
Team analytics
Please enter a valid email
Court Maintenance
Booking Confirmed
Weather Alert
Payment Failed
Active tab: clay
Clay Court #1 available for the day.
1h session, clay court.
Court grooming and net inspection.
Semi-finals, Hard Court #2.
Gates Open
Warm-up Session
Main Match
Clay Court #1 — in progress
Awards Ceremony
Professional European red clay, maintained daily.
Tournament-grade acrylic surface.
Natural turf, seasonal availability.
The Section component wraps content with consistent vertical padding and a max-width container. The Divider is a styled horizontal rule.
Scroll-triggered entrance animation.
Elements appear with incremental delay.
Creates a flowing reveal effect.