MOD/01 · FoundationOCEAN + POOL
Take-Off
Mechanics
The exact pop-up sequence you're probably getting wrong — timing, foot placement, rail-compression cue.
The System, indexed & named.
A technical design system derived from the SPI landing codebase. Three typefaces. A calibrated palette. Hairline grids, corner marks, mono labels. Every primitive here is a real production pattern — not decoration. Use it to build on-brand surfaces fast.
/01 — Foundations
Core tokens.
Token
Value
Preview
Role
--bg
#FFFFFF
Paper
Primary surface
--bg-2
#F5F5F5
Bone
Nested surface / hover
--bg-3
#E8E8E8
Mist
Inactive bar / track
--fg
#0A0A0A
Ink
Primary text
--muted
#6A6A6A
Grey
Secondary text / captions
--line
rgba(10,10,10,.12)
Hairline
Borders / dividers / grid
--signal
#BDD631
Signal
Primary accent — fills & surfaces only
--signal-ink
#6F8E18
Signal Ink
Signal as text / rule on light surfaces
--acid
#D8FF3A
Acid
Alt accent — hover / highlight
--electric
#35E0D4
Electric
Tertiary — data / chart
--dark-ink
#F2EFE8
Shell
Text inside dark surfaces
/02 — Color
A restrained palette.
--signal/01 · PRIMARY ACCENT
Signal Green
HEX#BDD631
RGB189 · 214 · 49
USEActions · emphasis · live markers · key strokes
--fg/02 · TEXT
Ink
HEX#0A0A0AUSEBody text · dark surfaces
--bg/03 · SURFACE
Paper
HEX#FFFFFFUSEPrimary surface
--bg-2/04
Bone
HEX#F5F5F5
--bg-3/05
Mist
HEX#E8E8E8
--muted/06
Grey
HEX#6A6A6A
--dark-ink/07
Shell
HEX#F2EFE8
--signal-ink/08 · SIGNAL AS TEXT
Signal Ink
HEX#6F8E18
RGB111 · 142 · 24
USESignal as text / rule / thin border on light surfaces
--acid/09 · RESERVE
Acid
HEX#D8FF3AUSEHover peaks · sparse highlight
--electric/10 · RESERVE
Electric
HEX#35E0D4USEData viz · tertiary emphasis
/02.a — Pairings
Approved combinations — always hairline-bordered.
PAIR · PRIMARYA
Ink.
fg on bgAAAPAIR · REVERSEB
Shell.
dark-ink on fgAAAPAIR · SIGNALC
Signal.
fg on signalAA largePAIR · QUIETD
Bone.
fg on bg-2AAA
/03 — Type
Three voices, one tone.
01 · DISPLAYGeometric
Aa
Unbounded
Display · Headlines
300400600700800900
02 · BODYHumanist
Aa
Manrope
UI · Paragraph · Decks
300400500600700800
03 · MONOTechnical
Aa
Space Mono
Labels · Codes · Eyebrows
400700
/03.a — Scale
Roles before sizes.
H1
Display · Hero
Take Control
clamp3.2 · 13vw · 15rem
H2
Section
A toolkit. Not a library.
clamp1.9 · 4.6vw · 3.6
H3
Card · Tier
Take-off mechanics
size1.35–2rem
H4
Witness · Name
Gabriel Medina
size1rem
P · LG
Hero deck
A performance coaching system — tuned by tour coaches.
1.1rem · 300
P
Body
The turn that sets up every section. Coached around three failure points.
.95rem · 400
MONO
Eyebrow · Label
/ 01 — THE SYSTEM
.72rem · .14em
MICRO
Caption · Tag
TC 00:47:12:08
.62rem · .14em
/03.b — Treatments
Display moves.
TREATMENT · OUTLINE01
OUTLINE
-webkit-text-stroke2px fgTREATMENT · ACCENT02
Accent.
italic · 300 · signalemphasisTREATMENT · SOLID03
SOLID
800 · fgstatement
/04 — Grid & Space
Structure is visible.
GRID · 12 COLUMNBASE
100% / 12 · 96px rowmix-blend multiplySPACING · 8PT SCALERULER
04
08
16
22
28
40
64
110
4 · 8 · 16 · 22 · 28 · 40 · 64 · 110px
/04.a — Framing Marks
Corner marks and crosshairs.
MARK · CORNER01
22×22 · 1px signalframeMARK · CORNER-SM02
12×12 · inside framesnestedMARK · CROSSHAIR03
1px signal crossregistrationMARK · HAIRLINE04
rgba(10,10,10,.12 / .22)dividers
/05 — Components
Production primitives.
/05.a — Buttons
Four variants. Mono label always.
/05.b — Badges
Mono chips. Caps + tracking.
BADGE · DEFAULT01
Tier III
.badge-mono1px currentBADGE · SIGNAL02
Ocean + Pool
.badge-signalsignal borderBADGE · SOLID03
Comp Pathway
.badge-solidfg fillBADGE · LIVE04
Rolling Release 2026
.badge-liveblink dot/05.c — Data Rows
Chapter markers, timecodes, lists of 3.
01Paddle Read00:00 — 00:22
02Commit Window00:22 — 00:54
03Pop Sequence00:54 — 01:28
/05.d — Module Cards
Curriculum primitives.
Take-Off
MOD/02 · PerformanceINTERMEDIATE
Bottom
Turn Torque
The turn that sets up every section. Coached around three failure points.
MOD/05 · ProTIER III
Aerial
Commit Logic
When to load, when to let go, when to bail. The mental model.
/05.e — Stats Strip
Figures as headlines.
50Technique Modules
3 MINPer Lesson
50 YRSCombined Coaching
3 CTTour Coaches
/05.f — Pricing Tiers
Three tiers. Signal for featured.
All Access
Complete library for the weekend surfer.
INCLUDES- All 50 modules
- Ocean + wave-pool drills
- Quarterly new lessons
Central Resource
Intermediate-to-advanced. Competition-ready.
INCLUDES- Everything in All Access
- Heat strategy + selection
- Quarterly video critique
Pro Tools
Secrets the pros use — from their coaches.
INCLUDES- Everything in Central
- Pro technique archive
- Founder submission
/05.g — Forms & Accordion
Fields as hairline rows.
Required · VIP early-access list
Used to route your starting lesson
01Am I good enough?+
The curriculum is layered — you'll find a starting video that matches what you're doing right now, from first pop-up to tenth top-turn.
02Does this work for wave pools?+
Every technique is coached for ocean and pool using a shared vocabulary.
03Why three minutes?+
Doctrine. Long enough to teach one idea with precision. Short enough to watch in the car-park before a session.
/06 — Imagery
Graded, tagged, framed.
FRAME · S01/F047
ISO 320 · 1/2000
CT · 01
+ KING/AJ
TECH · 03
+ MCN/PM
/06.a — Coach Cards
Portrait + signal tag.
/ 01 — Co-Founder
Andy King
"Kingy" · CT PerformanceOn tour with Gabriel Medina. The coach in the corner for world-title campaigns.
/ 02 — Co-Founder
Mick Cain
"Cainy" · Youth + EliteSoli Bailey's coach since age twelve. A full development pathway.
/ 03 — Co-Founder
Phil McNamara
"Maca" · TechniqueArchitect of the biomechanical framework running through every SPI module.
/06.b — Video Card
Timecode, scanline, signal play.
RECTC 00:47:12:08
Coach · Andy KingMod 01 / Lesson 03
/06.c — Logo
Mark, lockup, reversals.
LOGO · NATURAL01
as suppliedfull colourLOGO · PRIMARY02
on bgdefaultLOGO · REVERSE03
on fgreverseLOGO · SIGNAL04
on signalevent/06.d — Wordmark
The SPI mark-block.
MARK · STACKED02
SPIEST · GOLD COAST · AU
stacked · eventID chipMARK · OUTLINE03
SPI
text-strokedisplay
/07 — Motion
Restrained. Purposeful.
MOTION · BLINK01
REC · LIVE
1.4s steps(2,end)live markersMOTION · TICK02
translateX · 50s lineartickersMOTION · HOVER LIFT03
01Hover me→
translateX(4px) · .25srows + cards/07.a — Marquee
Outline type, infinite scroll.
/07.b — Easing
One curve. Everywhere.
Name
Value
Dur
Use
ease-brand
cubic-bezier(.22, 1, .36, 1)
.9s
Reveal, image transform, nav
ease-fast
ease / 250ms
.25s
Buttons, links, hovers
ease-linear
linear / 50s
50s
Tickers, marquees
/08 — Voice & Tone
Technical. Athletic. Direct.
01
Name the thing
"Rail compression." "Commit window." Technical terms are welcome — they make surfers feel the system is for them.
02
Short sentences. Long nouns.
Fifty techniques. Three minutes. One corner. Keep lines tight. Use compound nouns as anchors.
03
Codes, not decoration
Every eyebrow is a code: /01 — THE SYSTEM. Every card has an index. Every state has a label.
/08.a — Do · Don't
The voice, in rows.
01
Take Control of your Surfing
Unlock your surfing potential today!
02
Fifty techniques. Three minutes each.
A comprehensive library of content
03
The turn that sets up every section.
Master all the advanced moves!
04
Built by the coaches behind Medina.
Learn from world-class experts
05
Register — Free
Sign up now for exclusive access
/08.b — Witness
Quote card, signal mark.
"
He's giving me the confidence to do it, so that's the guy I need in my corner.Gabriel Medina 3× World Champion · on Kingy
"
I've been working with Cainy since I was twelve years old. His influence, advice and direction…Soli Bailey Championship Tour · on Cainy
"
Phil McNamara is a coaching savant, a man known to sculpt masterpieces out of…Surfing World Feature · on Maca