CLAP PRODUCT DESIGN SYSTEM
This is the visual source of truth for the website, authentication, account, Planner, and Coach Tagger. Every example below is rendered from the same tokens the products use.
01 · NORTH STAR
Type and space carry the interface. Color earns a place only as emphasis, status, data, or brand.
THE FEELING
“I always know where I am, what will happen next, and whether my work is safe.”
02 · PRODUCT FAMILY
Planner uses Tool-Light for scanning and printing. Tagger uses Film-Dark so video remains visually dominant. Their typography, spacing, controls, states, and interaction rules stay shared.
03 · PUBLIC + IDENTITY
The public site explains one coaching loop powered by two products. Authentication asks only for what the current task needs and remains operable in every viewport.
PUBLIC POSITIONING
Plan practice. Tag the film. Keep both connected. What you intended, what happened, and what comes next stay together in one easy coaching workspace.
Plan → Coach → Tag → ImproveTeam work stays synced. Film stays private.
Start freeYour plan, your staff, and your film—ready where you left them.
Your work stays private until you choose to share it.Tag the game, review the teaching moments, and build the presentation in one focused workspace.
Sign in with your CLAP account to continue where you left off.
Your work stays private until you choose to share it.04 · TYPOGRAPHY
Geist carries both interface and display work. Geist Mono is reserved for time, keys, measurements, versions, and technical metadata.
Own the season.
64 / 0.94 · 760 · −0.055em
Spacing on the swing
24 / 1.08 · 720 · −0.035em
Sheet layout
17 / 1.25 · 680 · −0.02em
Every choice should make the coach’s next action easier to understand.
14 / 1.55 · 430
05 · COLOR
Swatches below are generated from the live design tokens. Names describe roles, so product code never depends on an accidental hex value.
USE COLOR · COMPARISON DATA
Category hue is useful because several values are being compared at once.
KEEP NEUTRAL · TAXONOMY + SELECTION
No category rail, dot, wash, or repeated accent is needed.
06 · SPACE + SHAPE
Repeated work stays compact. Decisions, navigation, and major transitions receive breathing room.
SPACING SCALE
RADIUS BY RESPONSIBILITY
07 · CONTROLS
One primary action per decision surface. Hover changes tone—not geometry. Every icon control has an accessible name.
BUTTON ROLES
Tab through these controls to inspect the governing focus ring.
FIELDS + CHOICE
INTENT-ORDERED MENU
09 · LIBRARIES + COLLABORATIVE FILM
Libraries share one create-first grammar. Folders are optional shortcuts, explicit scope selection never reorganizes projects, and teammate film rows keep clear coach attribution from timeline through Review.
Name + initials + row label carry attribution; color is secondary.
09A · COACHING EVIDENCE LOOP
A stable practice, block, drill, clip, question, and assignment chain turns film into the next coaching decision. The interface shows the relationship in plain language; identifiers stay quiet.
Smart lists save criteria and derive results. Manual lists preserve the coach’s chosen order.
Status stays attached to the playlist—not in a separate inbox.
09B · PRESENTATION
The coach keeps the rundown, readiness, notes, and controls. The room receives only the teaching surface and the information the coach deliberately enables. A paired phone receives only Now, Next, and the essential transport controls.
Paused
10 · SETTINGS
Settings follow job order, focus one subsection at a time, show scope and save state, and keep a live preview beside the decision.
Changes save automatically to this sheet version.
11 · STATE + FEEDBACK
Saving, offline work, permissions, sharing, and conflicts use the same language everywhere.
Your latest changes are safe for this team.
Keep working. CLAP will show what merges when you reconnect.
The message stays until the coach resolves or dismisses it.
Two versions changed while this device was offline.
10 min · HC · 2 stations
12 min · HC · 3 stations
12 · DRAG + RESIZE
Handle space is reserved, targets are visible, layout never jumps on hover, and every direct manipulation has a keyboard alternative.
Players, labels, source, note, and clip actions remain together.
13 · FOCUSED WORKSPACES
FP1–FP5 preserve the current Planner and Tagger geometry. Primary work stays visible, detail gains one stable home, and power moves behind a searchable layer instead of another toolbar.
Keep: sequence, rail, scale, and bottom work tabs. Refine: what is visible first.
Ball screenPost entryATO
Desktop: scan rows and canvas together. Phone: same order in one column with 44px actions.
Search existing actions. Do not add a permanent row of power buttons.
14 · RESPONSIVE
Names, order, scope, and states survive every breakpoint. Secondary context collapses before primary work is compressed.
15 · LIVING STANDARD
A design change is complete only when the approved decision, law, visual proof, shared implementation, and verification stay linked.
Approved decisionWhat changes · what remains · whyLaw + visual + tokensUpdate every governing layer affectedShared implementationComponents consume the standardGrade + releaseDesktop · phone · keyboard · states16 · GUARDRAILS
“Apple-like” means clarity, coherence, direct manipulation, and craft. It does not mean copying decorative effects.
Choose a role before sending the invitation.
One accent, one primary action, clear scope, stable geometry.
Supercharge collaboration right now.
Multiple accents, decorative effects, vague labels, equal visual volume.
17 · IMPLEMENTATION
The visual page demonstrates the law; the JSON tokens carry the values; generated assets feed every product surface.
cla-design-tokens.jsonReviewed machine sourcebuild-design-system.mjsSingle generatorkit-tokens.cssPlanner + Tagger skinsVisual StandardLiving verification