Ultimate Performance Academy

Introduction

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.

Design Principles

Accessibility

All text meets WCAG AA standards at 4.5:1 minimum. The traffic light system of red, amber and green is readable for all users including those with colour blindness.

Consistency

Our three primary brand colours are Yellow #facc15, Black #09090b and White #FFFFFF. These colours form the foundation of the UPA visual identity across all applications and materials.

Typography

Inter for all UI text. Clean, modern, highly legible. Minimum 16px for body text. Clear hierarchy with a consistent sizing scale.

Clarity

Traffic light system for status. Green for success, amber for warning, red for error. Consistent, intuitive and universally understood.

Data-Driven

Built from research and best practices. Google Material Design, Apple HIG, WCAG 2.1 guidelines inform every decision.

Responsive

Designed for all screen sizes and contexts. Works equally well on mobile, tablet, desktop, and large displays.

Design Standards

Readability

Every colour combination in this system has been tested for readability. We follow WCAG 2.1 Level AA standards as a minimum, with many combinations exceeding the Level AAA 7:1 contrast ratio.

Usability

Our design system prioritizes usability best practices from industry leaders:

  • Google Material Design: Clear visual hierarchy, meaningful motion, tactile surfaces
  • Apple Human Interface Guidelines: Clarity, deference, depth
  • Microsoft Fluent Design: Light, depth, motion, material, scale
  • WCAG 2.1: Perceivable, operable, understandable, robust

Consistency

Consistent application of colours, typography, spacing, and components creates a cohesive user experience. This system provides clear guidelines for when and how to use each element.

Performance

All colours and components are designed with performance in mind. CSS custom properties enable efficient theming and reduce CSS bloat. Minimal dependencies keep bundle sizes small.