Court Claimer
Design system — components, tokens, layout, spacing, and motion.
Spacing System
8px base grid. Spacing tokens control gaps between components, sections, and page-level rhythm.
--card-gap16pxCard gap — between cards in a grid--heading-gap-sm24pxHeading gap sm — sub-heading to content--heading-gap32pxHeading gap — section heading to content--section-gap48pxSection gap — between page sections--section-gap-lg64pxSection gap lg — major section breaksGrid & Layout
Responsive grid with automatic column collapse. Uses --card-gap (16px) between items.
| mobile | base (0-639) | sm (640+) | lg (1024+) | Use for |
|---|---|---|---|---|
| stack | 1 col | 2 col | full | Content cards, how-it-works, feeds |
| 2-col | 2 col | 2 col | full | Stat cards, pricing, compact pairs |
| none | full | full | full | Day pickers, icon rows, tiny items |
Responsive Breakpoints
Mobile-first. Components stack on small screens and expand as viewport grows.
| Breakpoint | Width | Behavior |
|---|---|---|
| base | 0–639px | Single column. Stacked hero. Hamburger nav. |
| sm | 640px | 2-column grids. Side-by-side stats. |
| md | 768px | Full nav visible. Hero grid 2-col. |
| lg | 1024px | 3-column grids. Full dashboard layout. |
| xl | 1280px | Max shell width (1120px) centered. Extra gutter. |
Motion
Subtle, functional transitions. No bounce, no delight animations. This is a precision tool.
--duration-fast--duration-normal--duration-slowprefers-reduced-motion. All transitions collapse to 0.01ms when user has motion sensitivity enabled.Elevation & Depth
Four elevation levels. Higher elevation = more shadow = closer to the user.
z-base: 0z-raised: 10z-overlay: 40Buttons
Badges
Cards
Feed
Inputs
Additional Primitives
Core form and interaction primitives for flows beyond the base dashboard set.
Component States
Every interactive component must handle default, hover, focus, active, disabled, and loading states.
Skeleton Loading
Skeleton placeholders match the shape of real content. Use instead of spinners for predictable layouts.
Empty States
Every data-driven section needs an empty state. Three variants for different scenarios.
No courts yet
Add your first venue to start watching for available courts.
No matches
No courts match your current filters. Try adjusting your search.
Couldn't load venues
Something went wrong fetching your venues. Please try again.
Error Patterns
Page-level errors, inline errors, and field validation — all three patterns for comprehensive error handling.
Failed to load bookings
We couldn't reach the booking service. Check your connection and try again.
Navigation
Sticky nav with logo, links, and CTA. Collapses to hamburger on mobile.
Hero
Landing page hero with scarcity badge, headline, subhead, and dual CTAs.
Stop refreshing. Start playing.
Court Claimer watches London's busiest venues and books your preferred slot the instant it opens — in under 2 seconds.
Stats Row
Configurable stat cards. Uses Grid with mobile="2-col" so stats never fully stack.
Booking Table
Data table for booking history with venue, time, cost, and status badges.
| Venue | Court | Date | Time | Cost | Status |
|---|---|---|---|---|---|
| Archbishops Park | Ct 1 | Sat 19 Apr | 10:00–11:00 | £8.00 | CLAIMED |
| Kennington Park | Ct 2 | Sat 19 Apr | 11:00–12:00 | £8.00 | WATCHING |
| Finsbury Park | Ct 1 | Sun 20 Apr | 09:00–10:00 | £9.50 | CLAIMED |
| Victoria Park | Ct 3 | Sun 20 Apr | 10:00–11:00 | £8.00 | QUEUED |
| Battersea Park | Ct 2 | Mon 21 Apr | 18:00–19:00 | £12.00 | FAILED |
Settings Panel
Toggle rows, input fields, and save action — the standard settings card pattern.
Pricing
Three-tier pricing cards with feature lists. Popular tier gets elevated border and badge.
How It Works
Numbered step cards for feature explanation sections.
Add your venues
Tell us which parks and courts you want. We support 50+ London venues.
Set your preferences
Pick your ideal days, times, and budget. We handle the rest.
We watch & claim
Court Claimer monitors availability and books the instant a slot opens — in under 2 seconds.
Icon Set
Curated Lucide icons for the Court Claimer domain. Consistent 24px size, 1.5px stroke.
Microcopy Guidelines
Voice: Confident, Precise, Dry. These patterns keep UI text consistent across the product.
| Context | Use | Avoid |
|---|---|---|
| Brand moments (badges, alerts) | claimed, secured | grabbed, snagged |
| Transactional (confirmations) | booked, reserved | purchased, bought |
| Availability | slot, opening | time, appointment |
| System action | watching, monitoring | tracking, stalking |
Typography
Stop refreshing.
Booking History
Bot Status
Prime-time tennis courts sell out in seconds. Court Claimer watches, races, and books your preferred slot automatically.
Book automatically when a watched slot opens. Telegram alerts ping on claim success or failure.
94% · 1.2s · £8.00 · 10:00–11:00
Claims This Week
Elevation System (Refined)
Multi-layer shadows with secondary ambient layer. Stronger shadows in dark mode for depth on dark surfaces.
shadow-cardshadow-raisedshadow-toastshadow-btnshadow-inputShadows use higher opacity in dark mode (0.2–0.5 vs 0.04–0.12) because dark surfaces absorb light. Toggle dark mode above to compare.
Accessibility
WCAG 2.1 AA compliance. Focus management, contrast, keyboard navigation, and reduced motion.
Focus ring: 2px clay with offset. Keyboard-only — no ring on mouse click.
When prefers-reduced-motion: reduce is set:
- All transitions → 0.01ms
- Skeleton pulse animation stops
- Scroll behavior → instant
Dark Mode
Full dark theme with adjusted brand colors, elevated shadows, and AA-compliant contrast. Toggle with the moon icon in the header.
Data Visualization
Charts built with Recharts using Court Claimer tokens for color, typography, and elevation.
Court Claimer Design System · Scale B · Editorial Athletic