School of Gains · Presented by PaperGains
Color
A dark-first palette consolidated from the portal (my.school-of-gains.com) and the 2026 logo.
Brand greens
There are exactly two greens. #00C948 is for anything you click (buttons, focus, active states). #00A83E is the brand accent (logo, highlights, outlines, links on light).
green-400--sog-green-400#00C948Action green: buttons, CTAs, focus, success
green-500--sog-green-500#00A83EBrand accent: logo, highlights, links, outlines
green-700--sog-green-700#005C22Deep green: gradients, pressed states
green-tint--sog-green-tintrgba(0, 168, 62, 0.15)Tinted green surface
on-green--sog-on-green#04130AText on green buttons
Program & label colours
Section labels and accents are colour-coded: green default; amber for Headlines, Staff and streaks; blue for Monthly Classic and Apprentice; Discord purple for Discord and the Quarterly Marathon.
amber--sog-amber#F2B34AHeadlines, Staff labels, streaks
blue--sog-blue#4F9BFFMonthly Classic, Apprentice
discord--sog-discord#5865F2Discord + Marathon only
green-dark--sog-green-dark#0F2A1ALIVE pill bg, active nav pill
Podium
Gold, silver and bronze for 1st/2nd/3rd. 1st also gets --sog-glow-gold.
gold--sog-gold#F5C542Podium 1st, crown
silver--sog-silver#C9CED6Podium 2nd
bronze--sog-bronze#E08A3CPodium 3rd
Event tags & numbers
Indigo for general/YouTube events, teal for coaching, red for market closures and negative numbers.
indigo--sog-indigo#7C83F7Event tag: default/YouTube
teal--sog-teal#2DD4BFEvent tag: coaching
red--sog-red#F04848Event tag: market, negative numbers
Neutrals (dark-first)
Near-black #0A0F0C page with a top-left green glow (--sog-gradient-page). Cards are flat charcoal with a 1px 7% white border and no shadow.
bg--sog-bg#0A0F0CPage background: near-black with a green cast (portal)
surface--sog-surface#141414Flat charcoal cards
surface-2--sog-surface-2#181A19Raised cards, list rows
surface-3--sog-surface-3#1E1E1EInner sub-cards, logo background
elevated--sog-elevated#1F2120Popovers, menus
border--sog-borderrgba(255,255,255,0.07)1px subtle card border
border-strong--sog-border-strongrgba(255,255,255,0.14)Ghost buttons, chips, inputs
text--sog-text#F2F2F2Primary text
text-muted--sog-text-muted#A3A8A5
text-subtle--sog-text-subtle#6E7370
Feedback
success--sog-success#00C948
warning--sog-warning#F2B34A
danger--sog-danger#F04848
Deprecated
Remove these wherever they appear. #008D36 was used on /special-offer-general. Also retire #37ca37, #188bf6 and the GHL theme variables.
green-deprecated--sog-green-deprecated#008D36DEPRECATED (old special-offer page). Use green-400 or green-500.
Gradients & glow
page--sog-gradient-pagePage bg with top-left glow
accent--sog-gradient-accentNext up accent card
module-1--sog-gradient-module-1
module-2--sog-gradient-module-2
module-3--sog-gradient-module-3
module-4--sog-gradient-module-4
Semantic roles
| Role | Token |
|---|
| Primary action fill | --sog-green-400 with text --sog-on-green |
| Brand accent / logo / outline | --sog-green-500 |
| Focus ring | --sog-shadow-focus (green-400 at 35%) |
| Page / card / raised | --sog-bg / --sog-surface / --sog-surface-2 |
| Text / secondary / caption | --sog-text / --sog-text-muted / --sog-text-subtle |
| Eyebrow (editorial) | --sog-amber |
Contrast: #04130A on #00C948 is 9.6:1 (AAA). #F2F2F2 on #0A0F0C is 17:1. #6E7370 on #0A0F0C is 4:1 (captions and labels only) (captions only).