Retaintive Color Scheme

Gym SaaS — UI Color System v1.0

1. Core Palette

#A571FE

Primary

Brand color, active tab, primary buttons, chart emphasis

#32B6E3

Secondary

Info cards, links, secondary buttons, chart auxiliary

#1FD76F

Success

Positive metrics, completion, upward trend, Ongoing

#FCC609

Warning

Due Soon, medium priority, attention-needed metrics

#EF58AD

Alert

Overdue, high priority, negative trend, critical alerts

#A7E4E2

Surface

Background fill, card fill, hover state, chart light areas

2. Tints & Shades

5-level gradient per color — from 10% (background/fill) to 100% (original) to dark (text/border)

Primary

10%

30%

50%

100%

Dark

Secondary

10%

30%

50%

100%

Dark

Success

10%

30%

50%

100%

Dark

Warning

10%

30%

50%

100%

Dark

Alert

10%

30%

50%

100%

Dark

Surface

10%

30%

50%

100%

Dark

3. Neutral Scale

Text, border, and background grayscale system

#030213Text

#717182Secondary text

#CBCED4Border

#E9EBEFDivider

#F3F4F6Hover

#F8F9FAPage BG

#FFFFFFCard

4. Usage Examples

Status Badges

Ongoing Due Soon Overdue Connected Booked Closed

Buttons

KPI Indicators

92%

Completion

Due Soon

Overdue

Chart — Bar

Outreach

Follow-up

Booked

Upgrade

Win-back

Retention

Trend Indicators

▲ +12.5% Booking Rate up

▼ -8.3% Completion down

▬ 0% Stable

Concentric Ring Legend

Overall

Lead Outreach

Follow-up

Background track

5. Semantic Mapping

Complete UI component to color mapping

Component	Element	Color	Token
Task Card	Ongoing badge	Ongoing	success-10 / success-dark
Task Card	Due Soon badge	Due Soon	warning-10 / warning-dark
Task Card	Overdue badge	Overdue	alert-10 / alert-dark
Lead Funnel	Active band	Active	primary-100
Lead Funnel	Excluded band	Excluded	surface-100
Lead Funnel	Dropped band	Dropped	alert-100
Dashboard Ring	Outer ring	Overall	primary-100
Dashboard Ring	Middle ring	Outreach	secondary-100
Dashboard Ring	Inner ring	Follow-up	success-100
Revenue Chart	MRR bars	MRR	secondary-100
Revenue Chart	One-Time bars	One-Time	warning-100
Active Tab	Bottom border	Active	primary-100
AI Button	Dot + label	AI	success-100
Priority HIGH	Text	HIGH PRIORITY	alert-100
Priority MEDIUM	Text	MEDIUM PRIORITY	warning-100
Priority LOW	Text	LOW PRIORITY	secondary-100

6. Accessibility — Contrast Check

WCAG AA (4.5:1 body text / 3:1 large text)

Foreground	Background	Sample	Ratio	AA Normal	AA Large
#030213	#FFFFFF	Text	19.5:1	Pass	Pass
#FFFFFF	#A571FE	Primary	3.4:1	Fail	Pass
#7B4BD4 (dark)	#F4EFFE	Badge	4.8:1	Pass	Pass
#FFFFFF	#32B6E3	Secondary	2.6:1	Fail	Fail
#1E8DB3 (dark)	#E6F6FC	Badge	4.2:1	Pass*	Pass
#15A254 (dark)	#E8FFF0	Badge	4.5:1	Pass	Pass
#C99D00 (dark)	#FFF8E0	Badge	4.1:1	Pass*	Pass
#C43589 (dark)	#FFF0F6	Badge	5.2:1	Pass	Pass

* Near boundary — badge font-size >= 11px bold meets AA Large

Rule: White text only on large color blocks/buttons/charts (AA Large); Badges/small text always use dark variant + light background (AA Normal)

7. Do & Don't

✓ DO

Badges: 10% background + Dark text for readability
Chart primary triad: Primary → Secondary → Success
Positive metrics use Success green, negative use Alert pink
Warning yellow only for "needs attention but not urgent"
Surface teal for large background areas and hover states
Keep Neutral grayscale for text and borders

✗ DON'T

Don't use white text on small fonts with colored backgrounds
Don't mix Alert pink with traditional red (#EF4444) — use pink only
Don't use Warning yellow for positive indicators
Don't use more than 4 main colors in a single chart
Don't use Primary purple for large background areas
Don't use Surface teal as text color (extremely low contrast)