Authority / Design / Brand colour

Brand colour standard

CoachMe's brand colour is periwinkle #9193FD. This page is the source of truth for the ramp, the pairing rules, and what is still open. Decided 2026-07-25. It replaced the candidates from the July 2026 colour restart exploration (a lime, a green, a crimson — none in this hue family); those pages have since been deleted, and git history holds them.

Tags: Design, Brand, Accessibility, Authority

The brand colour cannot carry white text

White on #9193FD measures 2.70:1. WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components, so white-on-brand fails every threshold. The palette is therefore a two-step system: the periwinkle fills large surfaces and carries ink text; a darker step of the same hue carries white text. Any surface pairing outside the table below must be measured before use.

The ramp

One hue family, 238°→246°, with saturation eased on the dark steps so they read as indigo rather than neon.

Step	Hex	On white	On black
50	#EDEEFF	1.15	18.27
100	#D9DBFE	1.35	15.41
200	#B9BAFE	1.82	11.60
300	#A3A4FD	2.26	9.34
400 — brand	#9193FD	2.69	7.86
500	#6868F3	4.32	5.19
600	#4E49E1	6.24	3.41
700	#392FC6	8.76	2.52
800	#32298E	11.39	1.88
900	#251F5C	14.69	1.41

Pairing rules

Every pairing below is measured. Use these; do not invent new ones without checking.

Use	Background	Foreground	Ratio
Large brand fill — the hero surface (see scope rule below)	#9193FD	#251F5C	5.45 ✅
Button, small control, any white-text fill	#4E49E1	#FFFFFF	6.24 ✅
Soft surface — chips, avatars, quiet cards	#EDEEFF	#392FC6	7.63 ✅
Soft surface, emphatic text	#EDEEFF	#251F5C	12.79 ✅
Brand text on the light canvas	#F6F5F2	#392FC6	8.04 ✅
Hairline border, state outline (light)	#FFFFFF	#7C7EFA	3.38 ✅
Never — white on brand	#9193FD	#FFFFFF	2.70 ❌

Fill scope rule (July 2026). The large-fill row is a contrast pairing, not a licence to fill everywhere: at most one filled --brand surface per screen. On client mobile that surface is reserved for the resumable-session signal (the paused-session dock); banners, avatars, and chips use the soft pair. On dark, --accent resolves to the same periwinkle, so the cap is about the --brand token, not the hue.

On dark surfaces the brand has room to be the accent itself, provided it still carries ink rather than white:

Use	Background	Foreground	Ratio
Brand on the dark canvas	#1A1A19	#9193FD	6.47 ✅
Filled control (dark)	#9193FD	#251F5C	5.45 ✅
Soft surface (dark)	#221D52	#A3A4FD	6.80 ✅
Soft surface, emphatic text (dark)	#221D52	#D9DBFE	11.36 ✅
Hairline border, state outline (dark)	#1A1A19	#6868F3	4.03 ✅

Token names

The client mobile guided screen set implements these names; new surfaces should reuse them rather than hard-coding hexes.

Token	Light	Dark
--brand	#9193FD	#9193FD
--on-brand	#251F5C	#251F5C
--accent	#4E49E1	#9193FD
--on-accent	#FFFFFF	#251F5C
--accent-soft-bg	#EDEEFF	#221D52
--accent-soft-fg	#392FC6	#A3A4FD
--accent-strong-fg	#251F5C	#D9DBFE
--accent-border	#7C7EFA	#6868F3

Two rules follow from the table and are easy to get wrong:

• Never hard-code #fff on a control whose background is var(--accent). On dark, --accent is the brand periwinkle and --on-accent flips to ink; a literal white breaks only in dark mode, which is exactly where it will go unnoticed.
• Progress fills, meter bars, and state dots are meaningful graphics, not decoration — they need 3:1 against their track and their surrounding surface. The brand step clears this on dark but not on light, so on light they use --accent.

Still open

• Type and imagery. Unchanged by this decision; both remain open.
• Coach-facing surfaces. Coach web still carries its own accent, and the coach mobile direction (Rounds) is built on a near-black canvas with a #FF4B26 vital orange — a deliberate editorial character, not a variant of this ramp. Whether the coach product adopts the brand periwinkle or stays visually distinct from the client app is undecided.
• Application code. apps/web in the app repo has an empty Tailwind theme; no tokens have been written into code yet. This page is the spec they should be seeded from.