Brand Colours
Built on the Tailwind CSS palette and meeting WCAG 2.1 AA contrast standards throughout, the Ultimate Performance Academy colour system covers the brand triad, full tonal scales, semantic status colours, call-to-action pairings and accessibility guidance. Click any swatch to copy its hex.
Primary Colours
The core brand colours: Yellow, Black, and White. These should be used most frequently across all brand applications.
Yellow Scale
The full Tailwind yellow scale from lightest tint (50) to deepest shade (900). Yellow 400 is the UPA primary brand yellow.
Yellow (#facc15) is for backgrounds, buttons and accents. Never use it for body text on white (1.53:1 fails WCAG). Pair with dark text (#09090b) or use as an accent on dark backgrounds for maximum impact.
Black Scale
A complete neutral black scale from near-white (50) to deep black (1000). This is your primary scale for text, UI elements, and backgrounds.
Black 950 (#09090b) is the official UPA brand black. Use this for brand applications, marketing materials, and primary text. Pure black (#000000) can be used for maximum contrast in certain UI contexts.
Cool Slate Scale
A cool, blue-tinted grey scale (50 to 950) designed for dark mode interfaces. Not brown, a professional slate grey.
Use Slate 800 to 950 for dark mode backgrounds. Slate 50 to 400 work well for text and UI on those backgrounds. The cool tone reduces eye strain over extended use.
Success - Green
The full success green scale (50 to 900) for completed actions, confirmed states, and positive feedback.
Success 700 is AA-safe for text and primary buttons on white (5.02:1). Use 50 to 100 for subtle success backgrounds paired with Success 800 text.
Warning - Orange
The full warning orange scale (50 to 900) for cautionary states, pending actions, and items requiring attention.
Warning 700 is AA-safe for text and primary warning buttons on white (5.18:1). Use 50 to 100 for subtle warning backgrounds paired with Warning 800 text.
Error - Red
The full error red scale (50 to 900) for errors, destructive actions, and critical alerts.
Error 600 is AA-safe for text and buttons on white (4.83:1). Use 50 to 100 for subtle error backgrounds paired with Error 800 text.
Info - Blue
The full info blue scale (50 to 900) for informational messages, links, and neutral system feedback.
Info 600 is AA-safe for text and buttons on white (5.17:1). Use 50 to 100 for informational backgrounds paired with Info 800 text.
Lighter Variants
Soft tints for alert bodies, subtle status indicators, and background highlights.
Pair each light background with its matching 800 text colour for AA-compliant alert components. Always include an icon to convey meaning beyond colour.
Primary CTA
Primary action buttons, key CTAs, conversion-focused elements.
The primary brand CTA. High-contrast yellow with dark text. Hover darkens to Yellow 500 (#eab308).
Secondary CTA - Black
Secondary actions, alternative paths, less prominent CTAs.
Use when yellow would be too aggressive. Hover lightens to Black 700 (#404040) for clear feedback.
Secondary CTA - Green
Confirmations, success actions, positive CTAs like "Approve", "Confirm", "Save".
Success 700 passes WCAG AA on white (5.02:1). Hover deepens to Success 800 (#166534).
Secondary CTA - Blue
Informational actions, documentation links, neutral CTAs like "Learn More", "View Details".
Info 600 passes WCAG AA on white (5.17:1). Hover deepens to Info 700 (#1D4ED8).
Secondary CTA - Red
Destructive actions, critical operations like "Delete", "Remove", "Cancel Subscription".
Error 600 passes WCAG AA on white (4.83:1). Hover deepens to Error 700 (#B91C1C). Reserve for truly destructive actions.
Link Colours
Text links, navigation, and inline actions. Black by default, yellow on hover.
Default links use brand black for strong contrast. Yellow on hover signals interactivity without disrupting reading flow. Visited state optional.
Quick Reference
Brand Colour Hierarchy
- Primary: Yellow (#facc15), Black (#09090b), White (#FFFFFF)
- Secondary: Grays (100-900), Traffic Light colours
- CTA: Yellow + Black combinations for maximum impact
Accessibility Guidelines
Yellow on White
Fails WCAG at all levels (1.53:1 contrast)
Yellow on Black
Exceeds WCAG AAA (11.57:1 contrast)
Black on White
Exceeds WCAG AAA (17.72:1 contrast)
Black on Yellow
Exceeds WCAG AAA (11.57:1 contrast)