Apollo
Design System · Court Tactics
Court Tactics · UI Direction Prepared for Adam Friel
Version 1.0 · 2026-05-26
Confidential
A complete product walkthrough

From a Replit prototype
to a market-ready game.

This document is the full visual direction for Court Tactics — the brand, the gameplay screens, the coaching layer, and the academy dashboard. Every screen below is built to one standard: your 4.0 club player would download it, your tour coach would license it, and your 200-academy network would put it on every iPad in their facility.

0 The visual leap

Same logic.
A completely different product in your hand.

Your Replit MVP proved the game works — the tactical loop, the probability engine, the recovery decision. None of that changes. What changes is the part a 4.5 player feels in the first three seconds: clarity, hierarchy, restraint. The "80s video game" look becomes a tool serious players actually trust.

Today · Replit MVP
TENNIS GAME
Choose your shot!!!
★ YOU: 30 / OPP: 15 ★
SERVE!
POWER
SLICE
KICK

Honest about being an MVP

Inconsistent typography, mismatched colors, no visual hierarchy, no breathing room. The logic works — the surface doesn't sell it.

Day 2 · Apollo build
9:41

Set 1 · Game 3

30—15 · Your serve
SERVE
AF
YouAggressive baseliner
3015
Coach AICounter-puncher
AI
WIDE
PICK
Wide to deucePulls AI 4.2m off center
In-box71%
Shot typePower: ▲▲△
🔥Power
🌀Slice
🎯Kick
🪶Soft

Logiclag-grade clarity

Real court geometry. One singular accent color. Tactical info surfaced at every layer — without ever crowding the screen.

1 Brand identity

A serious tool deserves a serious brand.

Court Tactics needs to read as a tournament-grade tool — closer to a Bloomberg terminal than a kids' app. Lime against ink. Tight type. A logo that lives equally on the App Store icon, an academy whiteboard, and a tournament jacket.

The mark

CT
Court TacticsTactical tennis · play the point
CT
CT

The palette

Lime
#C8FF3A
Ink
#0B1208
BG
#06090A
Court
#2A7C4F
Deep
#79A000
Hot
#FF6B6B

One accent. One enemy. Lime carries every action the player takes; hot red is reserved for the AI opponent and warnings. Everything else stays out of the way.

The voice

Match point. Inter · 900
Headlines
Play the point. Inter · 800
Section heads
Wide serve to deuce pulled the AI 4.2m off center. Inter · 500
Body copy
30—15 · 71% SF Mono · 700
Stats & scores
2 Onboarding

A 60-second flow
that shapes every match after.

A player downloads the app at 9:14 PM. By 9:15 PM, they've picked a playing style and a skill tier. By 9:16 PM, they're inside their first match. Every onboarding answer feeds the matchmaking + Coach Sam personalization underneath.

1Splash
9:14
Court Tactics

Tactical tennis · play the point before you play the point

Loading match engine

First touchpoint. One mark. One promise. No carousel of features — the product earns those.

2Pick your style
9:15
Step 1 of 2

How do you play?

Coach Sam tunes every match around this. Change it anytime in your profile.

🔥
Aggressive Baseliner
Big forehand, take time away · Federer / Sinner
🛡
Counter-Puncher
Make every ball, win on errors · Murray / Halep
Serve & Volleyer
First strike, finish at net · Sampras / Rune
🎭
All-Courter
Adapt to every situation · Alcaraz / Świątek
Continue →

Four real archetypes anchored to real pro names — players recognize themselves instantly.

3Pick your level
9:15
Step 2 of 2

What's your level?

Six tactical tiers. Start where you really play — climb after.

Orange Ball
Age 7–10 · Basic patterns
Green Ball
Age 11–12 · Court positioning
Yellow · Junior
Age 13–16 · Pattern play
4.0 Club
Adult rec · Full tactical loop
5.0+ Tournament
College · Open · Advanced AI
Tour Level
Pro · Probabilistic depth
Start your first match →

The full skill ladder. Locked tiers unlock by tactical IQ — clear ladder, clear payoff.

3 The match loop

Three decisions a turn.
That's the whole game.

Pick the zone. Pick the shot. Commit to a recovery. Watch the AI think back. Every turn is one of those four states — and every turn surfaces exactly the right information without overwhelming the player.

AOpponent reveal
9:16
Match · Best of 3
AF
You
Aggressive
Baseliner · 4.0
VS
RJ
"The Wall"
Counter-
Puncher · 4.0
1st Serve %72
61
Topspin RPM2.9k
2.4k
Court coverage68
88
Unforced err / set8
3
Toss for serve →

Real ATP-style stat sheet before every match. You read your opponent the way pros read a draw.

BPick the serve
9:18

Set 1 · Game 3

30—15 · Your serve
SERVE
AF
YouStamina 78%
3015
The WallStamina 84%
RJ
WIDE
ZONE
Wide to deuceDrag & tap a zone
In box71%
Shot type · power locked▲▲△
🔥Power
🌀Slice
🎯Kick
🪶Soft

Court reads like a chess board. One tap, one zone, one shot type.

CRecovery
9:18

Rally · shot 3

Step 2 of 2 · Pick recovery
RECOVERY
You
78%
Opp
84%
F-WIDE
CENTER
B-MID
B-WIDE
DEEP
If you recover centerWin probability shift
NET+12%
In-rally
+12%
Counter risk
−4%
Stamina cost
−2%
Commit · play next shot →

D&D-style math surfaced cleanly. The trade-off is the game.

DAI's turn
9:18

Rally · shot 4

AI considering 3 options
AI
AF
YouCourt center
3015
The WallRight baseline · stretched
RJ
AI · Counter-puncher
Deep middle +8%
Cross-court loop +3%
Slice slow −2%
Get ready to read the shotPREDICTION MODE
🔮Deep mid
🔮Cross
🔮Slice
🔮Drop

Watch the AI weigh its options out loud — turns every AI turn into a coaching moment.

4 Coach Sam · the AI tutorial layer

Every point ends in a coachable moment.

Coach Sam is the monetization. He's also the differentiator. After every point — won or lost — Sam explains what worked, why it worked, and which drill closes the gap. The free tier shows the result. The $4/mo Pro tier unlocks the lesson.

Point won · Coach explains
9:19

Set 1 · Game 3

Point won · 40—15 · Game point
+1
Point won — clean tactical pattern

Wide serve → cross drive

Opened the court by 3.8m. Counter-puncher couldn't recover before your second strike.

S
Coach Sam
Why this worked

Your wide serve to deuce dragged The Wall 4.2m off center. Your follow-up cross-court drive hit a 71% open court — the highest-probability shot at that moment.

This is the serve+1 pattern Federer used against Murray, Djokovic against Medvedev. It's the most reliable winning shape in tennis at your level.

Unlock the serve+1 drill pack5 drills · 18-min session · tuned to your style
PRO · $4/mo
71%
Open court
3.8m
Stretch
+12%
Game win
Play next point →

The paywall is the lesson itself — never blocking play, always offering deeper understanding. Adam's monetization, perfectly placed.

★★Match end · pattern report
9:24

Match complete

You · 6–4, 6–3 · 8 min 22 sec
WIN
Final · Best of 3
You
6 6
The Wall
4 3
Patterns played
Serve + 1
82%
Return + 1
67%
Cross + DTL
38%
Net approach
42%
Tactical IQ

+14 IQ · You leveled up your serve+1 dominance. Your weakness: net transition — drill pack recommended.

Drill weakness →
Share to academy

Every match ends with a pattern report card — the single most shareable artifact for academy coaches.

5 Progression

The reason a player opens the app on day 30.

Tactical IQ score. Style-specific radar. Achievements. Drill library tuned to your weakest pattern. Every loop reinforces the next session — the way Strava reinforces the next run.

PPlayer profile
9:25
AF
Adam Friel
Aggressive Baseliner · 4.0
42 matches · 28 wins · 4-match streak 🔥
Tactical IQ
87
Style radar
Power92
Touch71
Patience64
Defense58
Net42
Serve88
Achievements
🏆
🎯
🔥
🛡
🔒
🔒
🔒

The radar chart shows your real tactical fingerprint — and exactly where to grow next.

DDrill library
9:26

Drill library

Tuned to your weak patterns
PRO
Serve + 1 forehandPattern Federer used against Murray
5 drills15 min4.0+
Return of serve depthNeutralize big servers
6 drills22 min4.0+
Defensive slice resetBuy time when stretched wide
4 drills12 minAll levels
Cross + down-the-lineOpen up the court in 3 shots
5 drills16 min4.0+

Every drill is auto-prioritized by Coach Sam against your radar weaknesses.

6 The B2B side · Academy coach dashboard

The other half of the revenue.
For the coaches who license it.

Same engine, different surface. The academy dashboard is what one of Adam's 200 academies sees on the iPad mounted to their pro shop wall. Squads grouped, drills assigned, weaknesses flagged across 40+ players at once. This is the $99–$499/mo line that compounds.

Today's squad — 8 players

Export PDF
+ Assign drill pack
Active players
8
▲ +2 this week
Avg tactical IQ
76
▲ +4 this month
Drills assigned
14
▲ +3 vs last wk
Squad-wide weakness
Net transition
▼ 42% conv. rate

Squad performance this week

PLAYER TACTICAL IQ WEAKNESS & ASSIGNMENT ACT
EH
Ella Hartman Counter-puncher · 4.5
91
Net transition · 5d
View
MR
Marcus Reyes Aggressive · 4.5
84
Serve+1 · 3d
View
SK
Sophie Kwon All-courter · 4.0
78
Return depth · today
View
DT
Diego Torres Serve+vol · 4.0
72
Cross+DTL · 2d
View
NA
Nadia Alvi Counter · 4.0
68
Defensive slice · 4d
View
JB
Jack Bailey Aggressive · 3.5
61
Net transition · today
View
Squad-wide opportunity
Net transition workshop
6 of 8 players show a sub-50% net conversion rate. Coach Sam recommends a 3-day group drill pack — auto-assigns to weakness profiles.
Assign to whole squad →

Group progress · 30 days

Coaches see exactly the same probability model players do — but aggregated across the squad. Every player's weakness becomes a curriculum data-point.