Tokens

Color

Primitive ramps, and the semantic colors components use in all four modes: SuperCoach and Coach, light and dark. Components only ever use semantic tokens.

Semantic colors

What components use: bg-primary, text-muted-foreground, border-border. SuperCoach is the default on :root; Coach overrides 14 of 47 tokens under [data-brand="coach"]. Dark mode is the .dark class: it changes 36 tokens for SuperCoach and 39 for Coach.

Pending decisions on this page

#13 · Proposed (review on the site)
Dark theme for all tokens, both brands.
In use until decided: Defined in tokens/ (.dark and .dark[data-brand="coach"]). All key pairs pass AA except Coach decision #3. See decision #13
#14 · Proposed
--link token: primary is a fill color; in dark it is too low-contrast as text (3.8:1), so text links use link (brand-600 light / brand-300 dark).
In use until decided: Added. See decision #14
#4 · Open
The blue #2A46CB is SuperCoach's --primary in the code but is not in the brand guide. Keep it, or use brand Black as primary with lime for highlights?
In use until decided: Blue stays as --primary. See decision #4
#5 · Open
Lime bound to shadcn --secondary makes every secondary button lime. Keep that, or keep --secondary neutral and add --brand-accent?
In use until decided: Lime on --secondary. See decision #5
#3 · Open
Coach primary button: white text on #FF6D38 is 2.8:1 and fails AA. Use brand Black text (6.3:1) or accept it for large bold labels only?
In use until decided: White text, as in the code today. See decision #3
#6 · Proposed
Third text level --foreground-secondary (neutral-700), not in stock shadcn.
In use until decided: Added. See decision #6
#7 · Proposed
SuperCoach sidebar: brand Black with a lime active item, or navy?
In use until decided: Black + lime. See decision #7
#12 · Open
Coach sidebar color is not in the code.
In use until decided: neutral-900. See decision #12

Surfaces and text

Surfaces and text semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-background · text-background	white#FFFFFF	neutral-950#191919 Changes in dark	white#FFFFFF	neutral-950#191919 Changes in dark	#fff / white / #ffffff (1,237 uses incl. near-whites)
bg-foreground · text-foreground	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	brand Black #191919. Replaces $dark-text-color #1d2939, $black-text-color, #292d32, #1e1e1e
bg-foreground-secondary · text-foreground-secondarySuperCoach extension	neutral-700#4A4A4A	neutral-300#D4D4D5 Changes in dark	neutral-700#4A4A4A	neutral-300#D4D4D5 Changes in dark	$grey-text-color #4d4d4d, $invoice-ink-secondary #5a6070, $medium-grey-text-color #3e3e3ePending decision #6
bg-card · text-card	white#FFFFFF	neutral-900#252525 Changes in dark	white#FFFFFF	neutral-900#252525 Changes in dark	$card-surface-bg, $overlay-surface-bg, $input-bg
bg-card-foreground · text-card-foreground	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	—
bg-popover · text-popover	white#FFFFFF	neutral-900#252525 Changes in dark	white#FFFFFF	neutral-900#252525 Changes in dark	$floating-chip-bg, dropdown panels
bg-popover-foreground · text-popover-foreground	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	neutral-950#191919	neutral-50#F7F8F9 Changes in dark	—
bg-link · text-linkSuperCoach extension	brand-600#2A46CB	brand-300#99B5FF Changes in dark	orange-700#CB2F1F Coach override	orange-300#FFB977 Changes in dark	text links and inline actions; primary is a fill, link is its text-safe twin

Actions

Actions semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-primary · text-primary	brand-600#2A46CB	brand-500#466AE9 Changes in dark	orange-500#FF6D38 Coach override	orange-500#FF6D38	$primary-color #2a46cb, $nav-active-color, $checkbox-checked, #2545c7Pending decision #4
bg-primary-foreground · text-primary-foreground	white#FFFFFF	white#FFFFFF	white#FFFFFF	white#FFFFFF	$white-text-color, $nav-active-txt-colorPending decision #3
bg-secondary · text-secondary	lime-300#A7F840	lime-300#A7F840	neutral-100#F0F0F2 Coach override	neutral-800#333333 Changes in dark	brand Electric Green #a7f840Pending decision #5
bg-secondary-foreground · text-secondary-foreground	neutral-950#191919	neutral-950#191919	neutral-800#333333 Coach override	neutral-50#F7F8F9 Changes in dark	—Pending decision #5
bg-muted · text-muted	neutral-100#F0F0F2	neutral-800#333333 Changes in dark	neutral-100#F0F0F2	neutral-800#333333 Changes in dark	$light-surface-bg #f5f5f7, $scpay-neutral-bg #f2f4f7, $media-surface-bg #f0f0f0
bg-muted-foreground · text-muted-foreground	neutral-600#636363	neutral-400#A4A4A4 Changes in dark	neutral-600#636363	neutral-400#A4A4A4 Changes in dark	brand Grey #636363. Replaces $subtitle-text-color #667085, #6b7280, #6c757d
bg-accent · text-accent	brand-50#F1F5FE	brand-950#061045 Changes in dark	orange-50#FFF7EF Coach override	orange-950#44120E Changes in dark	$light-primary-color (primary @10%), $scpay-primary-tint #eef1fc, $paid-experience-header-bg
bg-accent-foreground · text-accent-foreground	brand-700#1F35AA	brand-200#C2D4FF Changes in dark	orange-700#CB2F1F Coach override	orange-200#FFD6AB Changes in dark	$scpay-primary-strong #1e3399

Status

Status semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-destructive · text-destructive	red-600#DC2626	red-600#DC2626	red-600#DC2626	red-600#DC2626	$danger-color #ef4444, $error-color #ff6868, #ff0000, red, #dc3545
bg-destructive-foreground · text-destructive-foreground	white#FFFFFF	white#FFFFFF	white#FFFFFF	white#FFFFFF	—
bg-destructive-subtle · text-destructive-subtleSuperCoach extension	red-50#FEF2F2	red-950#450A0A Changes in dark	red-50#FEF2F2	red-950#450A0A Changes in dark	$danger-bg-color #fee2e2, $light-error-color
bg-destructive-text · text-destructive-textSuperCoach extension	red-700#B91C1C	red-300#FCA5A5 Changes in dark	red-700#B91C1C	red-300#FCA5A5 Changes in dark	$danger-text-color #b91c1c
bg-success · text-successSuperCoach extension	green-600#16A34A	green-500#22C55E Changes in dark	green-600#16A34A	green-500#22C55E Changes in dark	#4dbd74, #22c55e, $invoice-sar-color
bg-success-subtle · text-success-subtleSuperCoach extension	green-50#F0FDF4	green-950#052E16 Changes in dark	green-50#F0FDF4	green-950#052E16 Changes in dark	$light-success-color, $invoice-sar-bg
bg-success-text · text-success-textSuperCoach extension	green-700#15803D	green-300#86EFAC Changes in dark	green-700#15803D	green-300#86EFAC Changes in dark	$success-text-color #15803d, #138625, $invoice-net-color
bg-warning · text-warningSuperCoach extension	amber-500#F59E0B	amber-400#FBBF24 Changes in dark	amber-500#F59E0B	amber-400#FBBF24 Changes in dark	$light-warning-color base (#ffaa00), #fa8607
bg-warning-subtle · text-warning-subtleSuperCoach extension	amber-50#FFFBEB	amber-950#451A03 Changes in dark	amber-50#FFFBEB	amber-950#451A03 Changes in dark	#fffbeb, $invoice-due-row-bg
bg-warning-text · text-warning-textSuperCoach extension	amber-800#92400E	amber-300#FCD34D Changes in dark	amber-800#92400E	amber-300#FCD34D Changes in dark	$warning-text-color #92400e, $invoice-warn-text
bg-info · text-infoSuperCoach extension	blue-700#1D4ED8	blue-400#60A5FA Changes in dark	blue-700#1D4ED8	blue-400#60A5FA Changes in dark	$invoice-usd-color #1d4ed8
bg-info-subtle · text-info-subtleSuperCoach extension	blue-50#EFF6FF	blue-950#172554 Changes in dark	blue-50#EFF6FF	blue-950#172554 Changes in dark	$invoice-usd-bg #eff6ff
bg-ai · text-aiSuperCoach extension	violet-ai-500#7C5CBF	violet-ai-300#BDA9F6 Changes in dark	violet-ai-500#7C5CBF	violet-ai-300#BDA9F6 Changes in dark	$ai-accent-color #7c5cbf
bg-ai-foreground · text-ai-foregroundSuperCoach extension	violet-ai-700#5F3F9E	violet-ai-300#BDA9F6 Changes in dark	violet-ai-700#5F3F9E	violet-ai-300#BDA9F6 Changes in dark	$ai-accent-text-color #5f3f9e

Lines and focus

Lines and focus semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-border · text-border	neutral-200#E6E7E8	neutral-800#333333 Changes in dark	neutral-200#E6E7E8	neutral-800#333333 Changes in dark	$border-color #e4e4e4, $scpay-row-line #eaecf0, #e9ecef, $card-divider-color
bg-border-strong · text-border-strongSuperCoach extension	neutral-300#D4D4D5	neutral-700#4A4A4A Changes in dark	neutral-300#D4D4D5	neutral-700#4A4A4A Changes in dark	$border-strong-color #c8cdd8, $scpay-control-border #d0d5dd
bg-input · text-input	neutral-200#E6E7E8	neutral-800#333333 Changes in dark	neutral-200#E6E7E8	neutral-800#333333 Changes in dark	$input-border-color #e0e2ea
bg-ring · text-ring	brand-600#2A46CB	brand-400#678DFF Changes in dark	orange-500#FF6D38 Coach override	orange-400#FF8948 Changes in dark	$input-focus-shadow (primary @43%)

Charts

Charts semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-chart-1 · text-chart-1	brand-600#2A46CB	brand-400#678DFF Changes in dark	orange-500#FF6D38 Coach override	orange-400#FF8948 Changes in dark	—
bg-chart-2 · text-chart-2	lime-600#52A701	lime-300#A7F840 Changes in dark	green-700#15803D Coach override	green-400#4ADE80 Changes in dark	—
bg-chart-3 · text-chart-3	navy-900#1C3657	navy-300#AFBFD5 Changes in dark	orange-400#FF8948 Coach override	orange-200#FFD6AB Changes in dark	brand Navy
bg-chart-4 · text-chart-4	sand#FFBF51	sand#FFBF51	sand#FFBF51	sand#FFBF51	brand Sand
bg-chart-5 · text-chart-5	maroon#7D1A31	beige#CAC4B8 Changes in dark	maroon#7D1A31	beige#CAC4B8 Changes in dark	brand Maroon

Sidebar

Sidebar semantic colors in four modes: SuperCoach and Coach, light and dark
Token	SuperCoach light	SuperCoach dark	Coach light	Coach dark	Replaces in coach-admin
bg-sidebar · text-sidebar	neutral-950#191919	black#000000 Changes in dark	neutral-900#252525 Coach override	black#000000 Changes in dark	brand Black. Replaces the $nav-color navy → black gradientPending decision #7 Pending decision #12
bg-sidebar-foreground · text-sidebar-foreground	white#FFFFFF	neutral-50#F7F8F9 Changes in dark	white#FFFFFF	neutral-50#F7F8F9 Changes in dark	$nav-txt-color
bg-sidebar-primary · text-sidebar-primary	lime-300#A7F840	lime-300#A7F840	orange-500#FF6D38 Coach override	orange-500#FF6D38	$nav-active-color (lime on black, as in the logo tile)Pending decision #7
bg-sidebar-primary-foreground · text-sidebar-primary-foreground	neutral-950#191919	neutral-950#191919	neutral-950#191919	neutral-950#191919	$nav-active-txt-color
bg-sidebar-accent · text-sidebar-accent	neutral-800#333333	neutral-800#333333	neutral-800#333333	neutral-800#333333	nav hover
bg-sidebar-accent-foreground · text-sidebar-accent-foreground	white#FFFFFF	neutral-50#F7F8F9 Changes in dark	white#FFFFFF	neutral-50#F7F8F9 Changes in dark	—
bg-sidebar-border · text-sidebar-border	neutral-800#333333	neutral-800#333333	neutral-700#4A4A4A Coach override	neutral-800#333333 Changes in dark	$nav-border-color #2e3d50
bg-sidebar-ring · text-sidebar-ring	lime-300#A7F840	lime-300#A7F840	orange-500#FF6D38 Coach override	orange-400#FF8948 Changes in dark	—

Primitive ramps

Raw values. Only semantic tokens point at these; components never use them directly.

neutral

Brand greys: Black 950, Dark Grey 800, Grey 600, Light Grey 200 and 100. Other steps are filled in between.

neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950

brand

SuperCoach blue, built around the current app primary at 600. Not in the brand guide.

brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
brand-950

lime

Electric Green, built around the brand value at 300. A fill only: it fails contrast as text on white.

lime-50
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
lime-800
lime-900
lime-950

red

Destructive states.

red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-950

green

Success states.

green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-950

amber

Warning states.

amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900
amber-950

blue

Info states only. Kept apart from the brand blue.

blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-950

orange

Coach orange, built around the Coach primary at 500.

orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-950

navy

Expanded palette, built around brand navy at 900.

navy-50
navy-100
navy-200
navy-300
navy-400
navy-500
navy-600
navy-700
navy-800
navy-900
navy-950

violet ai

AI features, shared by both products.

violet-ai-500
violet-ai-700
violet-ai-50
violet-ai-300
violet-ai-950

singles

Expanded palette singles and pure white and black.

white
black
beige
sand
maroon

Opacity

Opacity tokens
Preview	Token	Value	Use
	opacity/disabledfrom audit/token-map.html (Shadows, layers, motion)	0.5	opacity-(--opacity-disabled)
	opacity/overlayfrom audit/token-map.html (Shadows, layers, motion)	0.5	opacity-(--opacity-overlay)