School of Gains · Presented by PaperGains

Tokens & exports

tokens.json is the source of truth. sog-tokens.css is generated from it (npm run tokens). Both files are in /tokens and served at /tokens/.

Use on the GHL site

In GHL go to Site/Funnel settings › Custom CSS (or a tracking-code head block) and paste the contents of sog-tokens.css and then sog-components.css. Alternatively, link them once they're hosted:

<link rel="stylesheet" href="https://design.school-of-gains.com/tokens/sog-tokens.css">
<link rel="stylesheet" href="https://design.school-of-gains.com/tokens/sog-components.css">
<body class="sog-root"> … <button class="sog-btn sog-btn--primary">Join the community</button>

sog-tokens.css tokens.json sog-components.css

color

Variable	Value	Notes
`--sog-green-400`	#00C948	Action green: buttons, CTAs, focus, success
`--sog-green-500`	#00A83E	Brand accent: logo, highlights, links, outlines
`--sog-green-700`	#005C22	Deep green: gradients, pressed states
`--sog-green-tint`	rgba(0, 168, 62, 0.15)	Tinted green surface
`--sog-green-glow`	rgba(0, 201, 72, 0.18)	Hero radial glow
`--sog-on-green`	#04130A	Text on green buttons
`--sog-green-deprecated`	#008D36	DEPRECATED (old special-offer page). Use green-400 or green-500.
`--sog-amber`	#F2B34A	Headlines, Staff labels, streaks
`--sog-discord`	#5865F2	Discord + Marathon only
`--sog-bg`	#0A0F0C	Page background: near-black with a green cast (portal)
`--sog-surface`	#141414	Flat charcoal cards
`--sog-surface-2`	#181A19	Raised cards, list rows
`--sog-elevated`	#1F2120	Popovers, menus
`--sog-border`	rgba(255,255,255,0.07)	1px subtle card border
`--sog-border-strong`	rgba(255,255,255,0.14)	Ghost buttons, chips, inputs
`--sog-text`	#F2F2F2	Primary text
`--sog-text-muted`	#A3A8A5
`--sog-text-subtle`	#6E7370
`--sog-white`	#FFFFFF
`--sog-success`	#00C948
`--sog-warning`	#F2B34A
`--sog-danger`	#F04848
`--sog-info`	#155EEF
`--sog-surface-3`	#1E1E1E	Inner sub-cards, logo background
`--sog-green-dark`	#0F2A1A	LIVE pill bg, active nav pill
`--sog-gold`	#F5C542	Podium 1st, crown
`--sog-silver`	#C9CED6	Podium 2nd
`--sog-bronze`	#E08A3C	Podium 3rd
`--sog-blue`	#4F9BFF	Monthly Classic, Apprentice
`--sog-indigo`	#7C83F7	Event tag: default/YouTube
`--sog-teal`	#2DD4BF	Event tag: coaching
`--sog-red`	#F04848	Event tag: market, negative numbers

font

Variable	Value	Notes
`--sog-font-display`	'Sora', system-ui, sans-serif
`--sog-font-body`	'Nunito Sans', system-ui, sans-serif
`--sog-font-mono`	ui-monospace, 'SFMono-Regular', Menlo, monospace

font-size

Variable	Value	Notes
`--sog-font-size-xs`	12px
`--sog-font-size-sm`	14px
`--sog-font-size-base`	16px
`--sog-font-size-lg`	18px
`--sog-font-size-xl`	20px
`--sog-font-size-2xl`	28px
`--sog-font-size-3xl`	34px
`--sog-font-size-4xl`	48px
`--sog-font-size-display`	68px

font-weight

Variable	Value	Notes
`--sog-font-weight-regular`	400
`--sog-font-weight-semibold`	600
`--sog-font-weight-bold`	700
`--sog-font-weight-extrabold`	800

line-height

Variable	Value	Notes
`--sog-line-height-tight`	1.1
`--sog-line-height-snug`	1.3
`--sog-line-height-normal`	1.6

letter-spacing

Variable	Value	Notes
`--sog-letter-spacing-eyebrow`	0.14em
`--sog-letter-spacing-display`	-0.02em

space

Variable	Value	Notes
`--sog-space-1`	4px
`--sog-space-2`	8px
`--sog-space-3`	12px
`--sog-space-4`	16px
`--sog-space-5`	20px
`--sog-space-6`	24px
`--sog-space-8`	32px
`--sog-space-12`	48px
`--sog-space-16`	64px
`--sog-space-24`	96px

radius

Variable	Value	Notes
`--sog-radius-sm`	8px
`--sog-radius-md`	12px	Buttons, inputs (portal standard)
`--sog-radius-lg`	14px	Cards (12–16px)
`--sog-radius-pill`	9999px	Badges, chips only, never buttons
`--sog-radius-xs`	6px
`--sog-radius-sub`	10px	Inner sub-cards (8–10px)

shadow

Variable	Value	Notes
`--sog-shadow-card`	none	Portal cards are flat: border, no shadow
`--sog-shadow-focus`	0 0 0 3px rgba(0,201,72,0.35)

motion

Variable	Value	Notes
`--sog-motion-ease`	cubic-bezier(0.2, 0.8, 0.2, 1)
`--sog-motion-duration-fast`	120ms
`--sog-motion-duration`	200ms
`--sog-motion-duration-slow`	320ms

layout

Variable	Value	Notes
`--sog-layout-container`	1200px
`--sog-layout-header-height`	72px

button

Variable	Value	Notes
`--sog-button-height-sm`	36px
`--sog-button-height-md`	44px
`--sog-button-height-lg`	52px
`--sog-button-radius`	12px
`--sog-button-weight`	800
`--sog-button-case`	sentence

gradient

Variable	Value	Notes
`--sog-gradient-page`	radial-gradient(1200px 600px at 0% 0%, rgba(0,168,62,0.16), transparent 60%), #0A0F0C	Page bg with top-left glow
`--sog-gradient-accent`	linear-gradient(150deg, #123A22 0%, #0C1F14 55%, #0A140E 100%)	Next up accent card
`--sog-gradient-module-1`	linear-gradient(90deg,#1F6B3A,#2E8A4E)
`--sog-gradient-module-2`	linear-gradient(90deg,#1E3A33,#2A4A42)
`--sog-gradient-module-3`	linear-gradient(90deg,#1E2A3F,#2A3852)
`--sog-gradient-module-4`	linear-gradient(90deg,#3A2338,#4A2E47)

glow

Variable	Value	Notes
`--sog-glow-green`	0 0 40px rgba(0,201,72,0.12)
`--sog-glow-gold`	0 0 24px rgba(245,197,66,0.25)

label

Variable	Value	Notes
`--sog-label-size`	9px
`--sog-label-weight`	800
`--sog-label-tracking`	0.16em
`--sog-label-case`	uppercase