Pace
Fresh green design system for fitness and cycling studios. One calm brand green on light or dark surfaces, clear status colors, large touch targets and light motion. Built for studio admin, coach and member screens plus transactional email.
Start here
- Foundations: palette, contrast, typography, spacing, shape and icons.
- CSS implementation: tokens, theming and usage.
- Components: full live catalog with states.
- Charts: attendance, trends, comparison and funnel.
- Layouts: admin console and member app.
- Emails: booking, reminder, receipt and expiry templates.
- Motion: what moves, how long, and reduced-motion rules.
- Member app demo: the original one-screen Pace demo.
Principles
- One brand green per surface. Green is the action; status colors carry meaning with a label and icon.
- Light and dark are first-class. Dark uses a lighter green (#83d4a1) so contrast stays above 4.5:1.
- Numbers use tabular digits. Seats, credits and times never hide units.
- Touch targets stay at least 40px in member screens; admin tables scroll inside their wrapper.
- Motion explains change (arrival, count, confirmation) and respects reduced motion.
- Every preview is local with fictitious data. No booking, payment or message is real.
Using the system
Load studio-systems.css and pace-system.css, wrap content in studio-kit studio-pace and use the sk-* classes. StudioCatalog.vue and StudioExtended.vue render live components with theme="pace". Dark mode follows the site toggle (html.tpl-dark).