UPA Design System
A professional, WCAG AA compliant design system built for Ultimate Performance Academy's application interface. Every colour combination meets minimum 4.5:1 contrast ratios. Every component is tested for accessibility.
Getting started
This design system provides a comprehensive set of colours, components, and guidelines that ensure your applications are both visually stunning and fully accessible. Built from best practices from Google Material Design, Apple Human Interface Guidelines, and WCAG 2.1 standards.
Design Principles
Colour System
Yellow (#facc15) and Black are the primary brand colours. Yellow is used strategically for highlights and calls-to-action, never for body text.
Typography
Inter for all UI text (clean, modern, highly legible). Minimum 16px for body text. Clear hierarchy with consistent sizing scale.
Components
Traffic light system for status (Green=Success, Amber=Warning, Red=Error). Consistent, intuitive, universally understood.
Accessibility
All text meets WCAG AA standards (4.5:1 minimum). Traffic light system is readable for all users including those with colour blindness.