CPSL
Design System
A complete, publish-ready design system for the Carolina Premier Soccer League. Built for speed, accessibility, and brand cohesion across all digital surfaces.
Logo & Brand Marks
Primary crest, wordmark lockups, horizontal and stacked variants, brandmark, and OG assets. Specs included.
Color System
Primary, accent, semantic, neutral palettes. Dark mode tokens and WCAG contrast ratios.
Typography
9-level type scale. Barlow Condensed for headlines, Inter for body text. Responsive and accessible.
Grid & Spacing
12-column grid, 5 breakpoints, 8px base spacing scale, border radius tokens.
Buttons & CTAs
5 variants, 4 states, 3 sizes. Full anatomy, CSS tokens, and a11y specs.
Inputs & Forms
Text, select, checkbox, radio, toggle, textarea. All interactive states.
Cards & Lists
Default, elevated, score, and horizontal card variants. Standings list pattern.
Navigation
Top nav, tab bar, breadcrumb, pagination, sidebar, and mobile tab bar.
Feedback & Overlays
Alerts, toasts, progress bars, badges, modal, tooltip, and empty states.
Data Display
Sortable tables, avatar groups, tags, stat displays, and skeleton loading.
Patterns
Live scoreboard widget, match cards, auth sign-in flow with 2FA.
Tokens & Dev Guide
tokens.json, CSS custom properties, dark mode, contribution checklist.
Hero Sections
Four production-ready hero layouts — cinematic gradient, split frame, glass card, and magazine overlap. Photo and video ready.
Body Modules
Nine plug-and-play page sections — stats bar, tabs, standings table, club directory, news grid, player spotlight, CTA banner, and skeleton states.
Calendar — Day View
Day-by-day match schedule with a mini month picker, competition badges, live scores, and empty state. Three composable primitives assembled into one drop-in view.
Club Directory
Filterable club directory with conference grouping, crest logos, record stats, and points. Data-source agnostic — static array or Airtable with no component changes.