01 · Start Here

Field Mobile — Designer Brief

Everything you need to design Field's mobile app in 4 weeks. Read this section once. Refer back to the rest as needed.

The vibe

Whoop × Strava, for racquet sports

Field is to athletic identity what Whoop is to recovery and Strava is to running. Calm, confident, data-dense. Closer to a sterile clinic than a playground. No mascots. No cartoon trophies. Numbers feel personal, not corporate.

What this is

The complete design brief for Field's native iOS/Android app — a sports platform for clubs across Portugal (expanding into Spain) that combines bookings, competitions, video, and athletic identity. You're designing the player-facing app. Not the club admin backoffice.

Engagement

Scope	P0 screen list — ~66 unique screens (see Section 6)
Duration	4 weeks, fixed-price
Deliverable	Hi-fi Figma file with components, variants, dev mode handoff
Reviews	Daily async Loom + 2 live syncs per week (Mon + Thu)
Tech stack	React Native 0.83 + Expo SDK 55 + NativeWind + Expo Router + Firebase
iOS baseline	iPhone 16 Pro — 402 × 874 logical pt (primary Figma frame). Validate small-screen edge at iPhone SE 375 × 667.
Android baseline	360 × 800 dp standard. Validate up to 440 dp. Visual mirror of iOS — same components, OS-appropriate affordances (back gesture, system fonts fallback).

How to read this brief

Section 2 (Vision) sets the emotional north star. Read once. Refer when stuck on tone.
Section 3 (Personas) tells you who you're designing for. Reference per screen.
Section 4 (Decisions) answers every "should we…" question. Don't ask, look here first.
Sections 5–7 are the structural map: IA, screen list, flows.
Section 8 (Screen Specs) is your daily reference — one page per P0 screen.
Section 9 (Visual System) is the design foundation — tokens, type, components.
Section 10 (Content) is the copy — every CTA, label, error message in English. Use this verbatim.

Rule of thumb: If you're inventing something that isn't in this brief, stop. Either it's already specified (look harder), or it's a decision that needs to be made (ask, get an answer within 24h, document it in Section 4).

02 · Vision

Vision Brief

The emotional north star, what we're building toward, and what success feels like.

What Field is becoming

Field started as a booking tool for racquet sports clubs. It's becoming a sports platform — the place where players live their athletic life, not where they reserve a court for 90 minutes. Three product pillars carry the transformation:

Competition — Americanos, mixes, ladders, box leagues, brackets. Real format variety with a Glicko-based rating that actually means something.
Video — Clutch cameras at every Field club. Every match recorded. Highlights auto-cut in hours, shareable in one tap.
Identity — Athletic profiles, stats, rankings, achievements, rivalries. The player's level isn't a tag in a booking — it's their story.

Bookings remain the practical floor, but they don't define the product. A player who opens Field doesn't think "I need to reserve a court." They think "what's happening tonight, who's playing, what's my level looking like."

The vibe

Whoop × Strava, for racquet sports

Dark by default. Data-forward. Numbers feel personal, not corporate. The interface is calm and confident — closer to a sterile clinic than a playground. Whoop's genius: "your strain score is 14.2" isn't a spreadsheet, it's an identity statement. Strava's genius: seeing your friends' activity creates motivation and FOMO. Field combines both — your number, your friends' progress, the social pull that gets you back on court.

The five design principles

1. Identity over activity

The hero of every surface is you, not what's available. Home opens on "here's who you are this week" — your μ, your streak, your last match. Not a feed of bookings. Other booking apps open on "Find a match" because they're booking apps. Field opens on identity because Field is an athletic identity app.

2. Dark is the default, not an option

Dark isn't a setting toggle in v1. Dark is Field's identity. Light surfaces appear where they serve a purpose — discovery, booking flows, social feeds, account management. Dark dominates where it matters most — the Home identity hero, competition live screens, video, stats deep-dives, achievements. The mode follows the purpose of the surface, not the OS setting.

3. Data as personality

Numbers are not metrics. They're statements about who the player is. The Glicko μ rating, the 7-day streak, the win rate, the rally win %, the level delta — each one carries narrative weight. Oswald handles big athletic display readouts; Barlow tabular-nums handles inline numerics. A score row should feel like a verdict, not a spreadsheet cell.

4. Social proof as gravity

Friends' activity, kudos, leaderboards, "who's playing tonight at your club" — these create the motivational loop that drives retention. Strava's kudos loop is their #1 retention primitive. Field's equivalent is the feed of friend matches, competition wins, and badge unlocks. Make it visible. Make it tap-able.

5. Motion is meaningful, not decorative

Every animation answers a question. A bar fills → spots are filling up. A number ticks → this value just changed. A dot pulses → this estimate is still firming up. No bounce-into-place icons. No "delight" micro-animations on every tap. Motion is signal, not garnish.

The cold-start moment

The two seconds after a player taps the Field icon are the most important seconds in the product. The OS splash hands off → Field boot loader (dark, branded) → Home loads. On Home, the dark identity card is the first thing the eye lands on. It contains their sport label, their μ, their streak.

Get this moment right and Field feels like a sports app. Get it wrong and Field feels like a booking website with a dark theme. Everything else in the design system serves this moment.

What success looks like

A player opens Field at 18:47 on a Wednesday.

They see their μ — 3.8. They see their streak — 🔥 2-win. They see tonight's Americano at their club — 12/16 spots, starts in 13 minutes, three friends already in. They tap into the recap of their last match — Clutch highlight plays, 6-4 win against Pedro and João.

They tap Join. Pay €5 with MB WAY. Done in 30 seconds.

They put the phone down and go grab their racquet. That feeling — "this is my sports life" — is the design target.

Equally important: a player shows Field to a friend at the club. The friend says "this looks sick" — not "ok where do I book a court."

Native affordances Field should embrace

Haptics — Subtle taps on score entry, payment success, kudos, tab switching. Apple's selection and impact.light equivalents. Used as confirmation, never as decoration.
Push notifications — Designed surfaces, not raw text. Match reminders, results pending, waitlist spots, friend activity. Each one is a designed mini-screen with deep-link routing.
Native video — Clutch playback is native, not a web embed. Autoplay muted on load, tap to unmute, pinch to fullscreen. 16:9 aspect, scrubber, frame-stepping.
System share sheet — Highlight clips and match results share via OS share sheet (WhatsApp, Stories, Messages). One tap.
Biometric auth — Face ID / Touch ID / fingerprint to re-auth for payment confirmation.

Reference test: Every screen passes three checks. The Slicker test — would a user of any other racquet-booking app say "this is slicker than mine" within 3 seconds? The Strava test — does this feel like an athlete's app, not a booking app? The Whoop test — does this surface tell me something about me, or just show me data? If any test fails, the screen needs work.

What Field is NOT

Hard boundaries to keep the work focused:

Not a generic booking marketplace — no nested tabs that each try to do four jobs, no profile sprawl, no maze of nav depth.
Not Duolingo — no mascots, no cartoon trophies, no rainbow palette, no streak guilt-trips.
Not a fitness tracker — no clinical biometric chart porn, no heart rate dashboards, no "recovery scores."
Not a betting app — no shouty CTAs, no glowing buttons, no urgency animations everywhere.
Not a banking app — wallet exists but doesn't dominate; money is plumbing, not the point.
Not Strava replica — no GPS maps, no elevation charts, no kudos as the only social mechanic.

The one-line summary

Field is the operating system for sports clubs. The mobile app is how athletes carry that with them. Design it so they feel like athletes, not customers.

03 · Audience

Personas + Jobs

Three players. Five jobs each. Reference per screen.

Tiago — Casual Player

~60% of base

Plays padel 1–2× a week with the same group of friends. Doesn't care obsessively about ranking. In it for the fun, the social, the drink after.

Age

28–42

Frequency

4–8 / mo

Level

2.5–4.0

Spend

€40–80 / mo

Book a court Friday night with my regular group, in under 30 seconds.
Find an open match this weekend when one of my friends bails.
Split the court cost so I don't have to chase three people for €8.
See who from my club is playing tonight — maybe join their match.
Share tonight's match with the WhatsApp group in one tap.

Design implication: Booking, joining open matches, and split-pay must be ≤3 taps each. WhatsApp share is a primary CTA, not an afterthought. Identity stats matter less — show them, don't push them.

Ana — Competitive Climber

~25% of base

Plays 3–5× a week. Lives for tournaments, ladders, and her Glicko rating. Watches her last match's highlights the same night. Has rivals she tracks.

Age

22–38

Frequency

12–20 / mo

Level

3.8–5.5

Spend

€150–300 / mo

Sign up for the next Americano at my level, fast, before it fills.
Check my μ trend and where I rank vs. people I beat last week.
Watch my last match's Clutch highlights — share the best clip on Instagram.
See my head-to-head record against my rival before our next match.
Challenge someone above me on the ladder with one tap.

Design implication: Home identity hero is built for her. μ, streak, last match, friends' feed — these are the surfaces she opens the app for. Competition flows must surface skill-level and seat-availability immediately. Video is a daily reflex, not a feature.

Pedro — Field Pass Tourist

~15% of base

Travels for work across Lisbon, Porto, Madrid, Barcelona. Plays at multiple clubs. Subscribes to Field Pass for the booking window edge. Transactional and time-poor.

Age

32–50

Frequency

6–12 / mo

Level

3.0–4.5

Spend

€100–200 / mo

Find a good club in a city I'm visiting this week and book a slot tonight.
Use my Field Pass advance window to grab the 19:00 slot before non-members.
Pay across multiple clubs without re-entering my card details every time.
Find an open match in a city where I don't know anyone.
See my cashback balance and credits across all the clubs I've played at.

Design implication: Club discovery (location-based, multi-city) must work cleanly. Field Pass benefits must be visible inside the booking flow ("you're seeing this 3 days early because of Field Pass"). Wallet and cross-club payments are core, not buried in Settings.

Who Field is not designed for (v1)

Pure spectators — Field is for people who play, not people who only watch. Spectator features (live scoreboards as a destination, public match watching) are post-v1.
Children < 16 unsupervised — Junior academy use cases route through a parent account with child profile switcher. No standalone kids' UX.
Casual gym-goers — Field is racquet sports + football. Not yoga, not gym, not running. Stay focused.

04 · Foundation

Decisions Locked

Every product decision answered. Designer doesn't ask, designer looks here.

How to use this section: Before starting any screen, scan the decisions. Anything not listed here is either still open (flag it) or already specified in another section. Re-opening a locked decision requires explicit approval.

Launch platforms

iOS + Android, simultaneous launch

Designer ships both platforms in one engagement. Primary frame is iOS (iPhone 16 Pro, 402×874 pt). Android designed as a visual mirror with OS-appropriate affordances: back gesture, Material 3 system fonts as fallback, Android share sheet pattern. Component library must handle both safe-area inset systems.

⚠ Implication: adds ~20–25% design time vs. iOS-only. Factored into the 80-screen scope decision below.

Languages at launch

EN only

Single-language content sheet. All UI copy, push notifications, error messages, empty states, and marketing copy in English. PT-PT / ES translations deferred to post-launch i18n pass. Designer assumes EN for all design comps and prototypes.

⚠ Implication: existing PT user base will see English UI on launch. Consider in-app explainer or onboarding moment that signals "we're going international, translations coming soon."

Email + Apple + Google + Magic Link

Four auth pathways. Sign-up screen (A2) hosts all four as primary surface. Login screen (A3) mirrors. Magic Link is the passwordless fallback (email-only flow). Forgot Password (A4) and Email Verification (A5) standard. Biometric re-auth (Face ID / Touch ID / fingerprint) for sensitive actions like payment confirmation.

Field Pass paywall placement

3 contextual entries

Field Pass surfaces in exactly three places:
1. Home smart nudge — appears after the user completes 2+ bookings. Dismissible.
2. Greyed booking slot explainer (PB15) — modal shown when user taps a slot outside their window. Explains the +3 day benefit with upsell.
3. Account → Field Pass entry — permanent Account tab section, soft self-serve.
No paywall during onboarding. No interstitial mid-booking-flow. No homepage takeover. Subtle, non-pushy.

Onboarding length

5 steps

Sequence: O1 Sports (multi-select padel / tennis / football) → O2 Level (per-sport slider or 4-question quiz) → O3 Location + follow clubs (geolocation → nearby list) → O4 Notifications rationale (skippable, fires native prompt) → O5 Done (confetti, deep-link to Home). Target completion under 90 seconds. No Field Pass sell during onboarding.

Dark / light mode strategy

Per-surface, no toggle in v1

Dark dominates: Home identity hero, all competition LIVE screens, Watch video, stats deep-dives, achievements, onboarding step O4. Light dominates: discovery (Compete listing, Book listing), booking flows, social feeds, Account admin, settings. No user-facing toggle in v1. Mode follows surface purpose, not OS setting. Both modes must be designed for every component — even if a component only appears on one mode in v1, the dark/light variant must exist for v2.

Design scope (screen count)

~80 screens (full P0 + key P1)

Full P0 list (~66 screens) plus pulled-forward key P1 surfaces: Watch tab (W1–W4 highlights + library + match player), Social feed expanded (H5–H8), Friends / find friends (M13, M14), Achievements + head-to-head (M6, M7, M8). Skip: Wrapped (G5), padel-specific stats (W9), clip editor (W5) — these stay v1.1.

AutoActions in mobile design scope

No — admin-side only

AutoActions is configured by club managers in the backoffice. The system dispatches WhatsApp / email / internal alerts. The mobile app design has no AutoActions configuration UI. Player-facing residue is minimal and already covered: push notification templates (part of standard notification design), deep-link landing screens (standard P0 flows), and the Notification Center H9 (already in P0).

Player Intelligence module in mobile design

Yes — already in the Account tab

Player Intelligence surfaces are the existing Account-tab P0/P1 screens: M2 Full Stats (8 insight tiles), M3 Rankings (per-club + global), M4 Competition History, M5 Match History, M8 Head-to-Head Rivalry. No additional screens needed beyond the Account-tab inventory in Section 6. Strategy and PRDs inform the content of these screens, not new ones.

Device baseline

iPhone 16 Pro (402 × 874) + Android 360 × 800 dp

Primary Figma frame: iPhone 16 Pro logical 402 × 874 pt with current safe-area insets. Small-screen edge validated at iPhone SE 375 × 667. Android baseline 360 × 800 dp standard, validated up to 440 dp. Devs test on real devices, not Figma frames — design system must be responsive across this range, not pixel-fixed.

Color palette

Mint #2DD4A0 + true black

Primary mint #2DD4A0 with full 9-step tonal scale. Secondary pure black #000000 with full greyscale. Surfaces white + grey-100. Coral #F97316 reserved for slot-fill urgency on progress bars approaching capacity. Mint reads as confident sports-tech — Whoop / Robinhood territory, not generic SaaS. Document tones in Figma variables. Full tokens in Section 9.

Typography

Oswald (display) + Barlow (body)

Headlines and display numerics: Oswald 400/500/600/700 — condensed editorial grotesque, athletic-magazine feel. Body, labels, captions, inline numerics: Barlow 400/500/600/700 — humanist sans with slight slab character, highly readable. Both free on Google Fonts. Numerics in Barlow use font-feature-settings: 'tnum' for tabular alignment. Full type scale in Section 9.

Decisions still open (flag if blocking)

Nothing structural. If something comes up during design that isn't covered here or in Section 8, flag it — answers within 24 hours. Document the resolution back into this section.

05 · Structure

Information Architecture

Four tabs. One job each. Strict depth rules.

The tab bar

Screen content

⚡

Home

🎾

Play

🎬

Watch

👤

Account

Tab	One-sentence purpose	Default mode	Deep-link root
Home	Your athletic identity, today's plan, recent match, social pulse.	Light (with dark identity hero)	`field://home`
Play	Find a match, find a partner, book a court, join academy.	Light (discovery) · Dark (live competition)	`field://play`
Watch	Full match videos, auto-highlights feed, your clip library.	Dark (video-first)	`field://watch`
Account	Profile, stats deep-dives, wallet, Field Pass, memberships, settings.	Light	`field://account`

Why 4 tabs, not 5 or 3. Strava runs 5 (Home / Maps / Record / Groups / You). Most racquet-booking apps run 3 (Play / Community / Profile). Field splits the difference. Four keeps thumb reach comfortable while giving Watch the real estate it needs as Field's video differentiator. Academy doesn't earn a tab — it's a segmented filter in Play and a section in Account.

Persistent top-nav (every tab)

Left: user avatar → tap routes to Account
Right: bell (notifications) + chat icon (messages), each with unread badge
Center: contextual to tab (tab-specific title or filter chips)

Second-level navigation inside a tab

Tabs do not have their own nested tab bars. Inside any tab, structure is one of four patterns:

Scrolling sections — Home is one long scroll, never a sub-tab. Sections appear in priority order.
Segmented controls at top — used only where scope genuinely changes. The Play tab uses a 3-segment control:

Compete

Book

Academy

Sticky during scroll. Selection remembered across sessions. Default for first-time users: Compete (pushes the pillar).

Modal flows — used for wizards: booking flow, sign-up for competition, academy enrollment. Full-screen modal, dismissible, with explicit step counter.
Bottom sheets — used for secondary actions: filters, share, edit, confirm. Slide up from bottom, dismissible by drag-down.

Depth rules (non-negotiable)

No screen has more than two levels of nested navigation. The maximum depth chain:

Home

→

Section

→

Detail

→

Anything deeper is a design smell. If a flow requires deeper nesting, the IA is wrong — restructure rather than add depth.

Why Compete and Book share a tab (the booking-marketplace mistake)

Most booking apps split booking and competitions into separate tabs. Result: users must decide what kind of thing they're doing before they even know what's available. That's cognitive overhead.

In reality, a user wants to play Friday at 7pm. Sometimes that's a booked court with friends. Sometimes it's an Americano at their club. Sometimes it's a public match someone else is hosting. The Play tab treats "I want to play" as one intent. The segmented control scopes from there.

One canonical path per screen

No duplicate entry points. Every screen has one canonical reachable path. The Booking Window explainer is only reachable from a greyed slot — not from a menu item. The Field Pass paywall has exactly three entries (see Section 4, Decision 04). Avoid the multi-entry pattern of "you can get there 5 different ways" — it makes documentation, analytics, and IA all messy.

State-based layouts over duplicate screens

Competition-detail-LIVE is one screen with state-switched layouts, not six separate screens. The wrapper is identical; only the central "Now" section changes by format (Americano grid vs. Ladder card vs. Bracket vs. Round-robin standings). This pattern repeats across the app — prefer one screen with mode switches over multiple near-duplicates.

Reference test (Strava): "Does this navigation feel like an athlete's app, or like a SaaS booking marketplace?" If it feels like the latter, the IA needs to compress.

06 · Scope

Screen List

~80 screens grouped by surface. Each with mode, priority, and acceptance criteria.

Total in scope

P0 — must ship

Key P1 — in scope

Surfaces

How to read this list

ID — Stable identifier, used in commits, messages, dev handoff. Don't rename.
Mode — Dark · Light · Mixed (one surface, both modes used inside it).
Status — P0 ship in v1. P1 key P1 pulled forward into this engagement per Decision 07.
Done means — One-line acceptance criteria. Designer ticks when delivered.

6.1 Splash · Auth · Onboarding · Permissions

14 screens · all P0

First-time and returning user entry. Sets visual tone for entire app.

ID	Screen	Mode	Status	Done means
S1	Native OS splash	Dark	P0	Native iOS/Android launch image with Field logo on ink background.
S2	Field boot loader	Dark	P0	300ms–2s branded loader bridging OS splash to first screen.
S3	Update / migration gate	Dark	P0	Forced-update screen with single CTA to App Store / Play Store.
A1	Welcome carousel	Mixed	P0	4 swipeable slides (Compete · Watch · Track · Play) + sticky [Create account] / [Log in] footer.
A2	Sign up	Light	P0	Email + password form + Apple + Google + Magic Link + Terms checkbox. All 4 auth paths visible.
A3	Log in	Light	P0	Same 4 paths as A2 + Forgot Password link + lockout warning after 5 attempts.
A4	Forgot password	Light	P0	Email input → success state ("Check your email"). Error states for unknown email.
A5	Email verification	Light	P0	Soft gate: can browse, blocked from book/enroll until verified. Resend CTA + "verified" success.
O1	Onboarding — sports	Light	P0	Multi-select padel/tennis/football. ~10s to complete. Skip disabled.
O2	Onboarding — level	Light	P0	Per-sport level slider OR 4-question quiz fallback. Numeric output (Glicko μ).
O3	Onboarding — location + follow	Light	P0	Geolocation rationale → permission → nearby clubs list → multi-select follow.
O4	Onboarding — notifications	Dark	P0	Rationale screen with Continue (fires native prompt) + Not now. Skippable.
O5	Onboarding — done	Light	P0	Confetti moment + deep-link to Home. ~3s before auto-dismiss.
PR1	Permission rationale (6 variants)	Dark	P0	One template, six copy variants (Location, Push, Camera, Photos, Contacts, Calendar). Denied-state variant included.

6.2 Home — Identity dashboard

12 screens · 6 P0 + 6 P1

The anchor surface. Identity hero card + today's plan + last match + friends feed + recommendations.

ID	Screen	Mode	Status	Done means
H1	Home dashboard	Mixed	P0	Dark identity hero card on light page. Today strip + Last Match + Friends (3 items) + Recommended (3 cards). Pull-to-refresh.
H2	Identity card expanded	Dark	P0	Full identity story: μ + confidence + 30-day line chart + matches block + edges narrative + partners + rival.
H3	Today detail	Light	P0	Today + tomorrow's events listed chronologically with deep-link entries to each.
H4	Recent match (with Clutch)	Dark	P0	Full-bleed video player + score row + highlights carousel + Clutch stats + social block + share.
H5	Social feed expanded	Light	P1	Full scrollable feed. Filter chips (All/Friends/Clubs/Comps). Infinite scroll. 7 feed item types.
H6	Post detail	Light	P1	Single feed item full view with all kudos, comments, replies.
H7	Kudos list	Light	P1	List of users who kudoed a match/post. Tap user → public profile.
H8	Weekly summary	Light	P1	7-day rollup (μ, matches, W/L, hours, partners). Shareable as story.
H9	Notification center	Light	P0	Grouped by day. Swipe-to-dismiss. Category tabs (All / Activity / System).
H10	Notification deep-link router	Mixed	P0	Invisible interstitial handling notification taps. Edge-case messaging for stale/invalid deep links.
H11	Recommendations see-all	Light	P1	Full algorithmic rec list. Each card has reason-chip ("same club", "your level", "nearby").
H12	Streak detail	Dark	P1	Gamified streak story — why streak matters, how to keep it.

6.3 Play — Compete

17 screens · 14 P0 + 3 P1

Competition discovery, registration, live screens, match results, ladder challenges, find-partner.

ID	Screen	Mode	Status	Done means
PC1	Compete discovery	Light	P0	My competitions (LIVE first) + Upcoming + Find partner entry + For you (3 algorithmic).
PC2	Competition detail — registration open	Light	P0	Hero + status chip + info rows + participants + rules + eligibility + sticky [Sign Up] CTA.
PC3	Competition detail — LIVE	Dark	P0	One screen, 5 state variants (Americano/Ladder/Box/Bracket/Round-robin). Tabs: Now/Standings/Matches/Info.
PC4	Competition detail — completed	Dark	P0	Winner card + final standings + your result + share.
PC5	Registration — solo vs duo	Light	P0	Two big cards. Solo → algorithmic match. Duo → next step PC6.
PC6	Registration — invite partner	Light	P0	Search by name/phone/email. Pending state until partner accepts.
PC7	Registration — payment	Light	P0	Individual-pay or organizer-pays. Wallet/Card/MB WAY/Multibanco. Reuses PB8 payment component.
PC8	Registration — confirmation	Light	P0	Summary + Add to calendar + Invite friends + Share.
PC9	Match result — simple	Dark	P0	Americano-style. Two totals. ≤10s input. Team A → Team B → Submit.
PC10	Match result — set-by-set	Dark	P0	Bracket-style. Three set inputs per team + super-tiebreak toggle.
PC11	Result confirmation / dispute	Dark	P0	Counterparty confirms. Dispute path: reason picker + free text → club admin.
PC12	Ladder challenge	Dark	P0	Pick opponent → suggest 3 date windows → optional note → send. Push to opponent with 3-button response.
PC13	QR check-in	Light	P0	Camera full-screen. Haptic on scan. Success card + manual-code fallback.
PC14	Initial level assessment	Light	P0	Same as O2. Standalone entry from Compete tab for users skipping onboarding's level step.
PC15	Find partner — board	Light	P1	Filter chips + list of partner-request cards + Message / Pair-up CTAs.
PC16	Find partner — post request	Light	P1	Form: sport, level range, date window, clubs, note → Post.
PC17	Competition recap modal	Dark	P1	Post-event auto-modal: your finish + μ change + share CTA.

6.4 Play — Book (slot-first, match-first)

14 screens · all P0

Open Matches feed is the default surface. Hosting forks into Public vs Private. Club detail is secondary.

ID	Screen	Mode	Status	Done means
PB1	Book home — Open matches + Host CTA	Light	P0	Top: [+ Host a match] CTA. My bookings strip if any. Open Matches Near You list (My level / All sub-segment).
PB2	Open matches — full list	Light	P0	Sticky filter row (Sport/Level/Time/Club/Distance) + sort toggle + infinite scroll.
PB3	Open match detail	Light	P0	Match info + level gate (qualifies/outside range) + players (3/4) + your share + [Join match] CTA.
PB4	Join-match checkout	Light	P0	Summary + payment method + Field Pass line + [Pay €X] CTA. Single screen.
PB5	Host a match — Public vs Private	Light	P0	Two big cards. Fork happens at step 1, not deep in flow.
PB6	Host — club + time + court + sport	Light	P0	Merged 4-in-1 vertical-stack screen. Each block collapses to summary row when chosen. Embeds Booking Window.
PB7	Host setup (Public/Private variant)	Light	P0	State-variant. Public: level slider + auto-approve. Private: invite friends + per-seat split row.
PB8	Host checkout	Light	P0	Pay organizer share or full court. Field Pass benefit line. Method picker.
PB9	Booking confirmation (Public/Private)	Light	P0	Success state with summary + invite/share CTAs + add to calendar.
PB10	Club detail (secondary path)	Light	P0	Club info + courts + open matches at this club + members + competitions hosted.
PB11	My bookings	Light	P0	Tabs: Upcoming / Past / Cancelled. Sort newest first.
PB12	Booking detail (Public/Private)	Light	P0	Variant by visibility. Inline split-payment status row (4 circles paid/pending).
PB13	Cancel + refund preview	Light	P0	Confirm modal with refund amount + policy explanation + final CTA.
PB15	Booking window explainer	Light	P0	Modal triggered by tapping a "Member only" or "Beyond window" slot. Field Pass upsell. No mid-flow paywall route.

6.5 Play — Academy (key flows only)

6 of 10 screens · selected P1

Discovery + enrollment + ongoing-student surfaces. Coach approval, child profiles, and insurance fee defer to v1.1.

ID	Screen	Mode	Status	Done means
PA1	Academy discovery	Light	P1	Play tab segment. Program cards by sport + level + age group.
PA2	Program detail	Light	P1	Hero + coach + schedule + price + spots + level fit + [Enroll] CTA.
PA3	Enrollment — player details + child switcher	Light	P1	Player or child selection + contact + medical disclaimer.
PA4	Enrollment — schedule + plan	Light	P1	Schedule confirm + plan picker (monthly/quarterly/annual).
PA6	My academy — overview	Light	P1	Active program + next session + attendance summary + plan status.
PA8	Payments / plan	Light	P1	Plan terms + auto-renew toggle + change plan CTA + payment history.

6.6 Watch — Video + Highlights

7 screens · pulled forward to P1 per Decision 07

Clutch playback, vertical highlights feed, library, match player, share. Clip editor (W5) and padel-specific stats (W9) defer.

ID	Screen	Mode	Status	Done means
W1	Watch home — your feed	Dark	P1	Vertical feed of latest match highlights (yours + friends'). Tap → W4 viewer.
W2	My library	Dark	P1	All your videos chronologically. Filter by sport / club / date.
W3	Match player (full match)	Dark	P1	Full match with scrubber, frame-step, score-mark jumps. Pinch fullscreen.
W4	Highlights viewer (vertical swipe)	Dark	P1	TikTok-style vertical swipe per clip. Auto-advance to next clip.
W6	Share sheet	Dark	P1	9:16 preview card with clip + score + avatar. iOS/Android share sheet trigger.
W7	Club Clutch feed	Dark	P1	Embedded in Club Detail (PB10). Latest highlights from this club.
W8	Match stats screen	Dark	P1	Clutch data native: rally win %, avg rally length, smash success, court coverage. Per-match.

6.7 Account — Profile / Identity

14 screens · 5 P0 + 9 P1

Account tab covers identity deep-dives, stats, achievements, friends. Child profiles defer to v1.1.

ID	Screen	Mode	Status	Done means
M1	Account overview	Light	P0	Avatar + name + level chip + sections: Profile, Wallet, Field Pass, Memberships, Settings. Single scroll.
M2	Full stats (Insights, 8 tiles)	Dark	P1	Whoop-style insight tiles: win rate, streak, level trend, peak μ, hours, partners, edges, rival.
M3	Rankings (per club + global)	Dark	P0	Toggleable scope (your club / your sport / global). Position + delta + rivals near you.
M4	Competition history	Light	P0	Chronological list of all competitions entered + final placement + μ change.
M5	Match history	Light	P1	All matches: date, opponents, score, μ delta. Filter by sport / club / outcome.
M6	Achievements grid	Light	P1	Grid of earned + locked badges. Geometric abstract icons, no cartoon trophies.
M7	Achievement detail	Dark	P1	Single achievement story: criteria, when earned, who else has it, share CTA.
M8	Head-to-head rivalry	Dark	P1	Opponent profile + W-L record + last 5 matches + rivalry intensity score.
M9	Public profile (other player)	Mixed	P1	Light page + dark stats card. Their μ, achievements, recent matches. Follow / challenge CTAs.
M10	Edit profile	Light	P0	Form: name, email, phone, avatar, level (locked if assessed), favourite sport, bio.
M12	Followed clubs	Light	P0	List of clubs you follow. Tap → PB10 club detail. Unfollow swipe action.
M13	Friends / followers	Light	P1	Tabs: Friends / Followers / Following. Tap user → M9 public profile.
M14	Find friends	Light	P1	Contacts permission rationale + matched users + search + invite via WhatsApp.
M15	My feed posts	Light	P1	Your public activity timeline. Edit / delete actions per post.

6.8 Account — Wallet

5 screens · all P0

Cross-club wallet balance, credits, transactions, embedded in checkout.

ID	Screen	Mode	Status	Done means
MW1	Wallet home	Light	P0	Total balance + per-club breakdown + recent transactions + top-up CTA.
MW2	Transaction history	Light	P0	Chronological list. Filter by club, type (booking/refund/cashback), date range.
MW3	Credit detail	Light	P0	Single credit: source, amount, expiry, terms.
MW4	Expiration warning modal	Light	P0	Triggered when credits expire in <14 days. "Use it or lose it" CTA → discover.
MW5	Wallet-in-checkout	Light	P0	Embedded component (not standalone screen). Apply wallet balance toggle + remaining-to-pay.

6.9 Account — Field Pass

5 screens · pulled forward P1

Field Pass paywall, plan selection, active benefits, manage, cashback history.

ID	Screen	Mode	Status	Done means
MF1	Paywall	Dark	P1	Hero benefit + 3 key features + price + [Start free month] CTA. No dark patterns.
MF2	Plan select	Dark	P1	Monthly / Annual / cancel anytime. Trial info. Clear cancellation policy.
MF3	Active benefits dashboard	Dark	P1	Subscribed-state Home. Cashback YTD + booking window + status badge.
MF4	Manage	Light	P1	Pause, cancel, change plan, billing. Apple/Google subscription deep-link.
MF5	Cashback history	Light	P1	List of cashback events. Total YTD + per-club breakdown.

6.10 Account — Memberships

4 screens · pulled forward P1

Club memberships (distinct from Field Pass — each membership is club-specific).

ID	Screen	Mode	Status	Done means
MM1	Membership offer (inline)	Light	P1	Component shown inside Club Detail (PB10). Member benefits + price + CTA.
MM2	Enrollment	Light	P1	Member form + auto-renew + payment + terms.
MM3	My memberships list	Light	P1	All active memberships across clubs. Status, renewal date, manage CTA.
MM4	Membership detail	Light	P1	Single membership: benefits, terms, renewal, cancel, history.

6.11 Account — Payments

3 screens · all P0

Stored payment methods. SIBS card + MB WAY are the main rails for Portugal.

ID	Screen	Mode	Status	Done means
MP1	Payment methods list	Light	P0	Cards + MB WAY + Multibanco history. Set default. Swipe delete.
MP2	Add card (SIBS)	Light	P0	Card form (number, expiry, CVC) + SIBS validation + 3DS challenge.
MP3	Add MB WAY	Light	P0	Phone number form + MB WAY app verification flow.

6.12 Account — Settings / Legal

9 screens · all P0 (3 deferred to P1)

Account management, legal, help. Notification matrix and Privacy hub move to P1. App appearance is post-v1.

ID	Screen	Mode	Status	Done means
MS1	Settings home	Light	P0	List of sections: Account, Notifications, Privacy, Language, Data, Help, Legal.
MS2	Account (email/phone/password)	Light	P0	Change email + phone + password. Each action requires re-auth.
MS5	Language & region	Light	P0	Language picker (EN only at launch, structure for PT/ES). Region: timezone, currency.
MS7	Data & storage + delete account	Light	P0	Cache mgmt + download my data + delete account (with confirmation friction).
MS8	Help & support	Light	P0	FAQs + contact form + email support + version info.
MS9	Terms of Service	Light	P0	Full ToS rendered in-app. Scrollable. Last-updated date.
MS10	Privacy Policy	Light	P0	Full Privacy Policy. Scrollable. Last-updated date.
MS11	Cookie / tracking prefs	Light	P0	Toggle analytics, ad tracking, third-party SDK. GDPR-compliant default off.
MS12	Licenses	Light	P0	Open-source library acknowledgments. Auto-generated list.

6.13 Split Payment

1 screen · P0

Consolidated to a single surface. Setup happens inline on PB7; status inline on PB12.

ID	Screen	Mode	Status	Done means
SP1	Pay-my-share	Light	P0	Single screen shown to invited player from push/chat link. Cash-at-club toggle. Payment method picker.

6.14 Global — Messaging, Engagement, Errors

9 screens · 4 P0 + 5 P1

Cross-app surfaces: chat, recaps, share, error pages, offline banner, maintenance.

ID	Screen	Mode	Status	Done means
G1	Conversation list	Light	P1	Threads with users / groups. Unread badges. Search.
G2	Chat screen (1:1 + group)	Light	P1	Message bubbles + typing indicator + match invitations as inline cards.
G3	New chat composer	Light	P1	Recipient search + multi-select for group. First message field.
G4	Competition recap (modal)	Dark	P1	Post-event auto-trigger: your placement + clip + share.
G6	Achievement share sheet	Dark	P1	9:16 story card + iOS/Android share trigger.
G7	Offline banner (reused)	Mixed	P0	Persistent top banner: "Offline. Showing last seen data." Auto-dismisses on reconnect.
G8	Empty state (template)	Mixed	P0	Centered line icon + copy + primary CTA. Used across the app (Section 9 component).
G9	Generic error	Mixed	P0	Friendly error + retry CTA + report-bug link. Never dead-end.
G11	Server maintenance	Light	P0	Maintenance page with ETA + status page link. Cannot bypass.

Final tally

Splash/Auth/Onboarding 14 · Home 12 · Compete 17 · Book 14 · Academy 6 · Watch 7 · Profile 14 · Wallet 5 · Field Pass 5 · Memberships 4 · Payments 3 · Settings 9 · Split Payment 1 · Global 9 = 120 unique items in scope, ~80 of which are unique designed screens (remaining are state variants of single canonical screens, reusable components, and inline modals — PR1 alone is 6 variants of one template).

Designer's daily ritual: Open this section. Filter by surface. Pick the next P0. Open the matching screen spec (Section 8). Design it. Mark it shipped via Figma comment. Repeat.

07 · Journeys

User Flows

Thirteen critical journeys. Internalize these before designing any screen — they're how the screen list connects.

How to read these

Rectangles = screens, labelled with their ID from Section 6 (e.g., PB1, H4).
Diamonds = decision points or eligibility gates.
Rounded shapes = events, actions, or system triggers (push notifications, payment success, etc.).
Every flow ends at a stable terminal state — confirmation, a deep-linked destination, or a feed update.

Flow 1 — Onboarding (first-time user)

Screens: 14 (Splash + Auth + Onboarding) Target time: <90 seconds Drop-off risk: O2 (level), O3 (location prompt)

flowchart TD Start([App install / first launch]) --> S1[S1 OS Splash] S1 --> S2[S2 Field boot loader] S2 --> A1[A1 Welcome carousel] A1 --> Choice{New or existing?} Choice -->|New| A2[A2 Sign up] Choice -->|Existing| A3[A3 Log in] A2 --> A5[A5 Verify email — soft gate] A5 --> O1[O1 Pick sports — multi-select] O1 --> O2[O2 Set level — slider or quiz] O2 --> O3[O3 Location + follow clubs] O3 --> O4[O4 Notifications rationale] O4 --> NativePerm{Native push prompt} NativePerm -->|Allow| O5 NativePerm -->|Skip| O5 O5[O5 Done — confetti] --> H1[H1 Home dashboard] A3 --> H1

Flow 2 — Host a public match

Screens: 7 Target time: <2 minutes Critical moment: PB5 fork is step 1, not deep in flow

flowchart TD Start([Intent: I want to host]) --> PB1[PB1 Book home] PB1 --> HostCTA([Tap + Host a match]) HostCTA --> PB5{PB5 Public or Private?} PB5 -->|Public| PB6[PB6 Sport / Club / Time / Court — merged 4-in-1] PB5 -->|Private| PB6 PB6 --> PB7P[PB7 Host setup — level range + auto-approve + per-seat split] PB7P -->|Public variant| PB8[PB8 Host checkout] PB6 --> PB7V[PB7 Host setup — invite friends + per-seat split] PB7V -->|Private variant| PB8 PB8 --> PaymentH{Payment success?} PaymentH -->|Yes| PB9[PB9 Confirmation] PaymentH -->|No| PB8 PB9 -->|Public| Feed([Match visible in Open Matches feed]) PB9 -->|Private| Invites([Invited friends get push + chat DM]) Feed --> Joiners([Other players can join via PB3]) Invites --> SeatFill([Seats fill as friends pay via SP1])

Flow 3 — Join an open match

Screens: 4 Target time: <30 seconds Multi-entry: 3 valid entry points converge on PB3

flowchart TD EntryA([Home: 'Open matches near you' card]) --> PB3 EntryB([Push: 'New match at your club']) --> PB3 EntryC([Play / Book tab]) --> PB1[PB1 Book home] PB1 --> PB2[PB2 Open matches list — filters + sort] PB2 --> PB3[PB3 Open match detail] PB3 --> LevelGate{Level qualifies?} LevelGate -->|Yes, auto-approve| PB4[PB4 Join checkout] LevelGate -->|Outside range| Request([Sends request to host]) Request --> HostDecision{Host approves?} HostDecision -->|Yes| PB4 HostDecision -->|No| Decline([Push: 'Host declined — try another']) PB4 --> PaymentJ{Payment success?} PaymentJ -->|Yes| PB9V[PB9 Confirmation — 'You joined Ana's match'] PaymentJ -->|No| PB4 PB9V --> Chat([Auto-joined to match chat thread])

Flow 4 — Enter a competition (full lifecycle)

Screens: 11 Spans multiple sessions: registration → event day → result Critical: result entry never leaves PC3 — modal overlay

flowchart TD Start([Intent: I want to compete]) --> PC1[PC1 Compete discovery] PC1 --> PC2[PC2 Competition detail — registration open] PC2 --> Eligible{Eligibility — level, club, Field Pass?} Eligible -->|No| Locked([Reason shown — adjust or leave]) Eligible -->|Yes| PC5{PC5 Solo or Duo?} PC5 -->|Solo| PC7[PC7 Payment] PC5 -->|Duo| PC6[PC6 Invite partner] PC6 --> PartnerAccepts{Partner accepts?} PartnerAccepts -->|Yes| PC7 PartnerAccepts -->|Pending| Wait1([Awaiting partner — visible on PC2]) PC7 --> PC8[PC8 Confirmation + Add to calendar] PC8 --> Wait2([Wait for event day]) Wait2 --> PC13[PC13 QR check-in at venue] PC13 --> PC3[PC3 LIVE — Now / Standings / Matches / Info] PC3 --> Play([Play match]) Play --> Result{Result entry} Result -->|Simple| PC9[PC9 Match result simple] Result -->|Set-by-set| PC10[PC10 Match result set-by-set] PC9 --> PC11{PC11 Counterparty confirms?} PC10 --> PC11 PC11 -->|Confirms| Update([μ updates, standings refresh]) PC11 -->|Disputes| Admin([Routed to club admin]) Update --> MoreRounds{More rounds?} MoreRounds -->|Yes| PC3 MoreRounds -->|No| PC4[PC4 Completed — final standings] PC4 --> Share([Share result → G6])

Flow 5 — Watch last match

Screens: 5 Target time-to-video: <3 taps Hero moment: autoplay on H4 entry

flowchart TD EntryA([Push: 'Your highlights are ready']) --> H4 EntryB([Home — Last Match card]) --> H4 EntryC([Watch tab]) --> W1[W1 Watch home — your feed] W1 --> H4[H4 Recent match detail] H4 --> Video([Autoplay muted on load]) Video --> Interact{User intent} Interact -->|Tap| Unmute([Unmute — audio on]) Interact -->|Pinch| FullScreen([Full-screen player]) Interact -->|Scrub| ScoreJump([Tap score row to jump]) H4 --> HighlightsRow[Highlights carousel — 5–10 clips] HighlightsRow --> W4[W4 Highlights viewer — vertical swipe] H4 --> StatsRow[Clutch stats: rally %, smash %, coverage] StatsRow --> W8[W8 Full match stats] H4 --> SocialRow[Kudos / comments] H4 --> ShareCTA([Share highlight]) ShareCTA --> ShareSheet([OS share sheet: WhatsApp, Stories, Messages])

Flow 6 — Book a court

Screens: 4–5 (depending on split or not) Target time: <30 seconds for the default path Default path: Pick court → pay it all → done. Split is an optional branch.

flowchart TD Start([Intent: I want a court at 19:00]) --> PB1[PB1 Book home] PB1 --> CTA([Tap Book a court]) CTA --> PB6[PB6 Sport / Club / Time / Court — 4-in-1 picker] PB6 --> Review[Review: Court 3, Padel Club Porto, Fri 19:00–20:00, €32] Review --> PayChoice{How to pay?} PayChoice -->|Pay it all myself — default| PB8Full[PB8 Pay full €32] PayChoice -->|Split with friends| PB7[PB7 Add seats + per-seat split row] PB8Full --> PayCheck{Payment success?} PayCheck -->|Yes| PB9[PB9 Booking confirmation] PayCheck -->|No| PB8Full PB9 --> Done([Visible in PB11. Calendar reminder. Optionally invite friends later.]) PB7 --> PB8Split[PB8 Pay your share] PB8Split --> PaySplit{Payment success?} PaySplit -->|Yes| PB9S[PB9 Confirmation — invites sent] PaySplit -->|No| PB8Split PB9S --> SP1[SP1 Each invitee pays their share] SP1 --> SettleLoop([Status reflected live in PB12]) SettleLoop --> Done

Why this is simpler than Flow 2: Hosting a public match (Flow 2) publishes to the feed and uses level-range matching. Booking a court is just reserving a slot. Pay-all-myself is the default — split is optional, opt-in. The PB7 Private variant only appears if the user chooses to split.

IA note: This flow has a primary "Book a court" CTA on PB1. The PB1 layout supports it alongside the secondary "+ Host a match" entry — Book is the default action, Host is the publish-to-feed variant.

Flow 7 — Join an Academy program

Screens: 6 + ongoing-student return Variants: Single class · Clinic · Course Key fork: PA2 type drives PA3 / PA4 scope

flowchart TD Start([Intent: I want lessons]) --> Play[Play tab] Play --> AcademySeg([Switch to Academy segment]) AcademySeg --> PA1[PA1 Academy discovery] PA1 --> Filter([Filter: sport / level / age group / type]) Filter --> PA2[PA2 Program detail] PA2 --> Type{Program type?} Type -->|Single class — drop-in| PA3S[PA3 Enrollment — self or child + medical disclaimer] Type -->|Clinic — 2–4 sessions| PA3C[PA3 Enrollment — self or child + medical disclaimer] Type -->|Course — multi-week recurring| PA3O[PA3 Enrollment — self or child + medical disclaimer] PA3S --> PA4S[PA4 Confirm single session date + €X price] PA3C --> PA4C[PA4 Pick clinic days + €X total] PA3O --> PA4O[PA4 Pick weekly schedule + plan: monthly / quarterly / annual] PA4S --> Pay[PB8 component — pay one-time] PA4C --> Pay PA4O --> PayR[PB8 component — pay first month + auto-renew] Pay --> Confirm[Enrollment confirmation] PayR --> Confirm Confirm --> PA6[PA6 My Academy overview] PA6 --> Reminders([Auto-reminders: 24h + 2h before each session]) PA6 --> OngoingType{Program type?} OngoingType -->|Single class| Done([Done after the class]) OngoingType -->|Clinic| ClinicEnd([Done after final session]) OngoingType -->|Course| PA8[PA8 Payments / plan — recurring billing visible] PA8 --> Renewal{Auto-renew?} Renewal -->|On| NextCycle([Next monthly charge, no action needed]) Renewal -->|Off| EndsAt([Plan ends at current period — confirmation])

Designer note for the 3 variants: PA2, PA3, and PA4 are the same screens for all three types — but PA2's program metadata changes (single session vs. clinic dates vs. recurring schedule), PA4's plan picker changes (one-time vs. recurring), and PA6's overview changes (one event vs. ongoing). State variants, not separate screens. Reuse the same components with different content.

Flow 8 — Subscribe to Field Pass

Screens: 4 + IAP Entry points: 3 contextual (per Decision 04) Monetization-critical

flowchart TD Entry1([Home smart nudge — after 2+ bookings]) --> MF1 Entry2([PB15 explainer — tapped 'Beyond window' slot]) --> MF1 Entry3([Account → Field Pass row]) --> MF1 MF1[MF1 Paywall — dark, 3 key benefits, price] --> Sold{Interested?} Sold -->|Dismiss| Dropped([Logged for re-marketing — no aggressive retry]) Sold -->|Yes| MF2[MF2 Plan select — Monthly / Annual] MF2 --> Trial{Trial eligible?} Trial -->|Yes — first time| FreeMonth[Start free month CTA] Trial -->|No — trial used| PaidStart[Subscribe €X/month or €Y/year] FreeMonth --> StoreKit[Apple App Store / Google Play Billing] PaidStart --> StoreKit StoreKit --> Verify{Subscription confirmed?} Verify -->|Yes| Activate[Benefits applied: +3d window, cashback, no fees] Verify -->|Failed| MF2 Activate --> MF3[MF3 Active benefits dashboard] MF3 --> Push([Welcome push + email with onboarding tips])

Flow 9 — Cancel a booking + refund

Screens: 3 Refund variants: Full / Partial / None — driven by timing Universal edge case — every user hits this

flowchart TD Start([Need to cancel]) --> PB11[PB11 My bookings] PB11 --> PB12[PB12 Booking detail] PB12 --> CancelTap([Tap Cancel booking]) CancelTap --> PB13[PB13 Cancel + refund preview] PB13 --> Timing{Cancellation timing vs club policy} Timing -->|>24h before — free window| FullRefund[Full refund to wallet + payment method] Timing -->|2h–24h — partial| PartialRefund[Partial refund — % per club policy] Timing -->|<2h — no refund| NoRefund[No refund — booking still cancelled] FullRefund --> ConfirmStep{Final confirm?} PartialRefund --> ConfirmStep NoRefund --> ConfirmStep ConfirmStep -->|No| PB12 ConfirmStep -->|Yes| Process[Process refund + release seats] Process --> SplitCheck{Other paid co-payers?} SplitCheck -->|Yes| RefundAll([Refund each co-payer + push notify each]) SplitCheck -->|No| SoloRefund([Refund only you]) RefundAll --> Done([Booking cancelled. Refund in MW2 within 5 business days.]) SoloRefund --> Done

Flow 10 — Join a club membership

Screens: 4 Entry: Club Detail PB10 (only) Per-club, recurring billing

flowchart TD Start([Want member benefits at this club]) --> PB10[PB10 Club detail] PB10 --> MM1[MM1 Membership offer — inline component] MM1 --> SeeBenefits([Member booking window, discount %, exclusive access]) SeeBenefits --> Decide{Enroll?} Decide -->|Not now| PB10 Decide -->|Yes| MM2[MM2 Enrollment form — contact + emergency + auto-renew + terms] MM2 --> Pay[PB8 component — enrollment fee + first period] Pay --> PayCheck{Payment success?} PayCheck -->|Yes| Active[MM4 Membership active] PayCheck -->|No| MM2 Active --> Unlock([Member-only booking window unlocks immediately]) Unlock --> PB10v[PB10 now shows Member badge + discount in checkout] PB10v --> RenewalSet{Auto-renew on?} RenewalSet -->|Yes| AutoCharge([Charged at end of period. Push reminder T-7d.]) RenewalSet -->|No| ExpiryPush([Push at T-30d: 'Renew or lose member benefits'])

Flow 11 — Receive + respond to a ladder challenge

Screens: 2 + auto-booking Multi-actor async loop Persona: Ana — Competitive Climber

flowchart TD Trigger([Challenger uses PC12 to send challenge]) --> Push([Push: 'Tiago challenged you for Friday']) Push --> Entry{Tap notification?} Entry -->|Yes — direct| ChallengeView[Challenge detail — 3 proposed windows + note] Entry -->|Later — open app| H9[H9 Notification Center] H9 --> ChallengeView ChallengeView --> Decision{Pick response} Decision -->|Accept window A| AcceptA[Accept Friday 18:00] Decision -->|Accept window B| AcceptB[Accept Saturday 10:00] Decision -->|Accept window C| AcceptC[Accept Sunday 16:00] Decision -->|None work| Counter[Propose alternative window] Decision -->|Decline| DeclineFlow[Decline + optional reason] AcceptA --> AutoBook[Auto-create booking at chosen window] AcceptB --> AutoBook AcceptC --> AutoBook AutoBook --> SplitDefault[Default 50/50 split — both pay via SP1] SplitDefault --> Confirmed([PB12 booking detail visible to both players]) Counter --> CounterPush([Push to challenger: 'Pedro proposed different window']) CounterPush --> Loop{Challenger accepts counter?} Loop -->|Yes| AutoBook Loop -->|No| Expired([Challenge expires after 48h — both notified]) DeclineFlow --> NotifyChallenger([Challenger notified: declined + reason if shared])

Flow 12 — Find friends + invite to Field

Screens: 2–3 + permission rationale Growth flow Reward: Optional invitee-played-1-match credit

flowchart TD Start([Want to find people I know]) --> Entry{Entry point} Entry -->|Account → Find friends| M14 Entry -->|Empty social feed CTA| M14 Entry -->|Recommended user| M14 M14[M14 Find friends] --> Granted{Contacts permission?} Granted -->|Not yet| PR1[PR1 Permission rationale — Contacts variant] PR1 --> Native{Native dialog} Native -->|Allow| Match[Match contacts vs. Field users] Native -->|Deny| ManualOnly[Manual search only] Granted -->|Yes| Match Match --> Display[3 groups: On Field / Invited / Not on Field] Display --> Action{User action} Action -->|Tap user on Field| Follow[Follow / friend request → M13] Action -->|Tap user not on Field| WAInvite[Open WhatsApp share — pre-filled link] Action -->|Search manually| SearchRes[Search by name / username / phone] WAInvite --> Sent[Send WhatsApp invite] Sent --> Track([Logged + reward credited if invitee signs up + plays 1 match]) SearchRes --> Action Follow --> Connected([Friend appears in M13])

Flow 13 — Dispute a match result

Screens: 2 + admin queue (out of mobile scope) High-stakes edge case Default: Confirm (μ updates) · Dispute opens reason picker

flowchart TD Start([Opponent entered result you disagree with]) --> PC11[PC11 Result confirmation prompt] PC11 --> View[See: opponent's submitted score] View --> Choice{Action} Choice -->|Score is correct| Confirm[Confirm — μ updates instantly] Choice -->|Score is wrong| DisputeTap[Tap Dispute] DisputeTap --> Reason{Pick dispute reason} Reason -->|Wrong score| ScoreFix[Submit your correct score] Reason -->|Wrong opponent| OppFix[Flag wrong opponent assigned] Reason -->|Didn't play| NoShow[Flag no-show / forfeit] ScoreFix --> Queue[Routed to club admin queue — backoffice] OppFix --> Queue NoShow --> Queue Queue --> AdminReview([Admin sees both submissions + dispute reason]) AdminReview --> Verdict{Admin verdict} Verdict -->|Side A wins| ResolveA[Admin sets official result] Verdict -->|Side B wins| ResolveB[Admin sets official result] Verdict -->|Cannot resolve| Replay([Schedule replay or void match]) ResolveA --> Notify([Both players notified — μ updates / corrects]) ResolveB --> Notify Replay --> Notify Notify --> Resolved([Match status: Resolved in PC3 / M5])

What's not diagrammed here

These thirteen flows cover the highest-traffic and highest-stakes journeys. Smaller flows (top up wallet, edit profile, switch language, forgot password, leave a competition mid-event, switch child profile) live in Section 8 as part of each screen's spec — they're single screens or 2–3 step linear paths that don't need a diagram. If you need an end-to-end view of a less-common flow, ask and we'll add it to this section.

Designer's check before designing any screen: trace it back to one of these five flows. Which flow does it belong to? What screen comes before it? What screen comes after? If you can't place a screen in a flow, ask before designing — the screen may not need to exist.

08 · Specs

Screen Specs

Per-screen design briefs. Two tiers: 15 anchor screens get full deep-dives. The rest get compact specs.

How to use this section

Anchor screens (15) set the visual tone. Read these carefully first. If you nail these, the rest follow naturally.
Compact specs cover the remaining ~65 screens grouped by surface. Reference daily as you design.
Every spec has Acceptance criteria — Figma frame is "done" only when these are met. Include in your handoff checklist.

Anchor screens — jump to

H1 Home H2 Identity H4 Recent match PC2 Comp open PC3 Comp LIVE PB1 Book home PB3 Open match PB6 Host slot PB7 Host setup PB15 Booking window M1 Account M3 Rankings MW1 Wallet MF1 Field Pass G8 Empty state

Anchor deep-dives

H1 Home dashboard P0

The anchor screen of the entire app. Answers "who am I as an athlete right now, and what's next?" in under 2 seconds of scroll. Dark identity hero card on a light page is Field's signature contrast.

Layout

┌──────────────────────────────┐ │ [Avatar] Good evening, 🔔💬│ 56pt top nav │ {firstName} │ ├──────────────────────────────┤ │ ████ IDENTITY CARD ███████ │ dark hero (16:9) │ ██ ██ │ μ 3.8 · 7-day dots │ ██ PADEL ██ │ +0.3 this week │ ██ 3.8 ●●● ██ │ 🔥 2-win streak │ ██ +0.3 this week ██ │ [See full story →] │ ██ ● ● ● ● ● ● ○ ██ │ │ ██ 3W 1L · 🔥 2 streak ██ │ │ █████████████████████████ │ ├──────────────────────────────┤ │ TODAY │ next 48h events │ ┌── upcoming card ────┐ │ competition / booking │ └────────────────────┘ │ ├──────────────────────────────┤ │ LAST MATCH 🎬 │ Clutch thumbnail │ ┌── video card ─────┐ │ score + W/L + μ delta │ └──────────────────┘ │ [Watch highlights →] ├──────────────────────────────┤ │ FRIENDS │ 3 feed items + see all ├──────────────────────────────┤ │ RECOMMENDED │ 3 horizontal cards └──────────────────────────────┘

Sections in order

Top nav (56pt): avatar left, greeting center-left, bell + chat right with unread badges.
Identity card (dark, full-bleed, 16:9 ratio): sport label, μ in Oswald 48pt, 3-dot confidence row, delta line ("+0.3 this week" green / "-0.1" amber), 7-day match dots (W/L/rest), week count, streak emoji + label, [See full story →] CTA. Multi-sport users get horizontal swipe between sport cards.
Today strip: 1–3 upcoming items within 48h (competition + booking + academy auto-merged chronologically). Empty state: "Nothing on your plate. Find a match →".
Last Match: Clutch thumbnail with play overlay, score row, μ delta, win indicator. Processing state if <3h ago: "Highlights coming in ~2h".
Friends feed: 3 inline items, [See all →] to H5. Feed item types: friend won comp, friend earned badge, friend played a match with clip, friend joined club, friend challenged you.
Recommended: 3 horizontal cards, each reason-chip tagged ("Same club", "Your level", "Nearby").

States

Cold (new user, no matches): Identity card shows "Build your identity — play your first match" + CTA.
Mid-cold (1–3 matches): "Early days — we're still learning your level" message; confidence σ shown as dot pulse.
Warm (4+ matches): Full hero as shown.
Loading: skeleton shimmer respecting card layouts.
Offline: Top banner "Offline. Showing last seen data." Feed hides Kudos actions.
Error per section: inline retry, never blocks whole screen.

Data

μ rating + 7-day match outcomes + week W/L + streak + delta + sport list · Today events (competitions, bookings, academy within 48h) · Last completed match with Clutch payload · Friend activity feed (3 latest items) · Algorithmic recommendations (3 reason-tagged). All fetched in parallel.

Interactions

Tap identity card → H2 expanded story.
Swipe left/right on identity card → next sport (multi-sport users only).
Tap Today item → relevant detail (PC2 / PB12 / PA6).
Tap Last Match card → H4 recent match detail.
Tap feed item → H6 post detail. Tap Kudos → toggle. Tap Comment → focused composer.
Tap Recommended card → PC2.
Pull-to-refresh → re-fetch all sections in parallel.

Done means

Dark identity hero renders correctly on light background with no z-index issues. All section cold/mid-cold/warm states visualised. Pull-to-refresh haptic + spinner. Skeleton loading state for each section. Offline banner reuses G7. All Oswald numerics tabular and aligned. Accessibility: WCAG AA contrast for identity hero white-on-ink, body grey on white.

H2 Identity card expanded ("See full story") P0

The Whoop "Monthly Performance Assessment" equivalent. Tells the story behind the hero μ number. Dark full-screen.

Sections

Hero: sport + μ + confidence + delta. Sticky on scroll.
Level history graph: 30-day μ line chart with Glicko σ confidence band shaded. Points = matches. Tap point → match info popover. Oswald 11pt axis labels.
Peak μ this month: number + date achieved.
Matches block: count, win rate, hours on court.
Your edges (narrative): 1–2 sentences. "You're winning 73% on your own serve, losing 60% of tiebreaks. Tiebreak practice is your edge." AI-generated if data supports; else static per-sport default.
Partners played with: 4 avatars + "more" link.
Toughest rival block → tap to M8 head-to-head.
Share your story button → G6 share sheet.

States

Loading (skeleton with shimmer over dark) · Cold (less than 4 matches: narrative replaced with "Play 4+ matches to unlock your edges") · No rival yet · Offline (cached snapshot).

Interactions

Scrollable. Graph: tap data point for popover. Partner avatar → public profile (M9). Rival → M8. Share → G6.

Done means

All states visualised. Graph renders with σ band. Narrative text gracefully handles cold state. Oswald on all numerics. Dark surface high-contrast typography passes WCAG AA.

H4 Recent match detail (Clutch native surface) P0

The critical Clutch surface #1. Watch the match + see stats + see social — all in one screen. Native video, not a web embed.

Sections

Full-bleed video player (16:9). Autoplay muted on load. Tap to unmute. Pinch to fullscreen. Scrubber + play/pause + frame-step.
Match meta: date, round, format, club, court.
Score row: team A vs team B, set-by-set columns, final score, W/L badge.
Highlights carousel: 5–10 auto-cut clips (10–20s each). Tap clip → W4 vertical viewer.
Stats block: rally win %, avg rally length, smash success, court coverage. [See full stats →] to W8.
Social block: 👏 kudos count, 💬 comments count. Top comment preview. [Give kudos] / [See all] CTAs.
Share: [Share highlight] + [Share result] buttons.

States

Video processing: show score + "Video ready in ~45 min" placeholder where player would be.
Clutch not available (non-Clutch club): no video, stats hidden, show score + social only.
Offline: cached video plays if previously downloaded, else "Come back online to watch."
Disputed result: warning banner "Result pending confirmation" above score.

Interactions

Video: tap unmute, pinch fullscreen, tap score row to jump. Highlights: tap → W4. Stats: tap → W8. Kudos: tap to give. Comment: tap to focus composer. Share: native OS share sheet.

Done means

All 4 states (processed, processing, no Clutch, disputed) designed. Video autoplay state default. Highlights carousel scrubbing smooth. Share preview is 9:16 with clip + score + avatar. Oswald on score row, tabular-nums aligned.

PC2 Competition detail — registration open P0

The sign-up entry screen. Must convey availability, eligibility, and social proof fast enough to drive a [Sign Up] tap.

Sections

Hero: club/format image, status chip ("Registration open — 12/16 spots", or "Almost full — 14/16").
Info rows: format, date, club + court count, level range, price, duo/solo requirement, spots remaining.
Description (from club): rich text.
Participants: avatar chips (+N more). Social proof.
Rules: expandable accordion.
Eligibility check: inline pass/fail (level qualifies, club member status, Field Pass requirement).
Sticky footer: [Sign Up — €5] primary CTA (disabled with reason if ineligible).

States

Spots filling (amber banner at 80%) · Full (CTA = "Waitlist", lower weight) · Past registration deadline (CTA = "Closed") · Already registered (CTA = "View your registration" → PC2 confirmation variant) · Ineligible (level mismatch, missing Field Pass) — inline explainer.

Interactions

Tap rules → expand. Tap participant avatar → M9 public profile. Tap [Sign Up] → PC5 wizard. Tap [Waitlist] → confirm modal. Share button → OS share sheet.

Done means

All 5 states designed. Eligibility logic visible with clear copy. Sticky footer survives scroll. Price visible always (free explicit). Participant chips align consistently.

PC3 Competition detail — LIVE (state-switched, 5 formats) P0

One screen, 5 layout variants by format. Wrapper identical; central "Now" section differs. Replaces the v2 mistake of 6 separate screens.

Wrapper (same across formats)

Top: comp name + status (LIVE chip). Sticky tab bar: Now / Standings / Matches / Info.

"Now" variants

Americano / Mexicano / KoC: current round courts grid. Each court card = team A vs team B + live score + [Enter Result] if participant.
Ladder: your position card + challengeable players (≤3 above you) + your ladder match history.
Box League: your box card + box standings table + pending matches to schedule.
Single Elimination Bracket: horizontal scroll bracket, pinch-zoom, your match highlighted.
Round Robin: standings table + cross-table grid + your remaining matches at top.

Other tabs

Standings: flat leaderboard, always available. Matches: all matches grouped by round. Info: rules, schedule, participants.

States + push signals

Round started (push) · Your court ready (push) · Result pending (banner) · Disputed match (warning) · Competition complete → routes to PC4.

Done means

All 5 "Now" variants designed. Tab persistence on scroll. Live indicator pulses. Result entry triggers PC9/PC10 as modal overlay — never leaves PC3.

PB1 Book home — slot-first feed P0

Answers "what can I play right now?" — NOT "which club has free courts?". The Open Matches feed pattern, Field-branded.

Sections

[+ Host a match] — primary CTA, ink fill, at top.
My Bookings strip (only if any upcoming) — most imminent booking with payment status.
Open matches near you — sub-segment chip row (All / My level). Card list. Each card: time, sport, club, distance, level range, spots filled, avatars, share price, [Join →].
[See all open matches →] → PB2.

States

Empty (no nearby matches): "No open matches in your radius right now. Be the first — host one." + [+ Host a match]. Loading: skeleton cards. Offline: cached last view with banner.

Interactions

[+ Host a match] → PB5. Sub-segment chip toggles My level filter. Card tap → PB3. [See all] → PB2. Pull-to-refresh.

Done means

Empty state designed with strong host CTA. My Bookings strip conditional. Card variant for level-qualifies vs outside-range visible. Sub-segment defaults to My level when level known.

PB3 Open match detail P0

The join decision screen. Must show eligibility, social proof (other players), and total cost transparency before tapping Join.

Sections

Header: sport, date/time, club name, court, small map thumbnail. Share icon top right.
Level range: 3.5–4.2 with your level inline (green check if qualifies / amber warning if outside).
Players (3/4 with one empty seat): host row (with [host] tag, level, match count), then other players, then "1 spot left — that's you" placeholder.
Your share: €8 (court total €32 ÷ 4). Inline explainer if your share differs from base (Field Pass discount).
Cancellation note: "If you cancel, seat returns to the feed."
Primary CTA: [Join match →] → PB4.

States

Qualifies (green check, instant join) · Outside range (amber, becomes request — needs host approval) · Match full (waitlist option) · Match cancelled (cannot join) · Past deadline · You're already in (CTA = "View booking" → PB12).

Done means

Level gate logic visible in 2 variants (qualifies, outside-range). Share calculation transparent (court total ÷ seats). Cancellation policy inline, no buried legalese. Sticky footer CTA.

PB6 Host setup — Sport + Club + Time + Court (4-in-1) P0

Replaces the old 5-step wizard. One scrollable screen with 4 collapsible blocks. Each block collapses to summary row once filled.

Sections

Sport picker — pills (Padel default if user's primary). Auto-collapses on selection.
Club picker — horizontal card row (Followed clubs first, then Nearby). Search expands modal. Auto-collapses on selection.
Date + Time — embeds the Booking Window surface (see PB15 spec). Auto-collapses on selection.
Court + Duration — cards per court for selected slot. Clutch badge per court. Duration toggle (60 / 90 / 120 min) where supported.
Bottom-docked [Continue →] enabled when all 4 complete.

Behavior

Each block collapses to a single-line summary row once filled ("Padel ✓", "Padel Club Porto ✓", "Fri 21 · 18:30 ✓", "Court 3 · 90 min ✓"). Tap row to expand and change. Bottom validation: "You're booking Court 3 at Padel Club Porto, Friday 18:30, 90 min. Court total €32."

States

All blocks expanded (start) · Progressive collapse · All complete (CTA enabled) · No slots in window (block 3 shows greyed slots, links to PB15) · No courts available for slot.

Done means

Auto-collapse on selection works smoothly. Summary row legible. Booking Window component embedded correctly with date scroll + slot pill states. CTA disabled state has clear message ("Pick a court to continue").

PB7 Host setup — state-variant (Public vs Private) P0

Renders differently based on matchVisibility from PB5. Common wrapper. Different middle section.

Common

Summary of PB6 choices (compact, 2 lines). Self is always seat 1, labelled "Host". Seat count derives from sport (4 padel doubles / 2 singles / 14 football).

Public variant

WHO CAN JOIN: level range dual-thumb slider with your level marked inline. Auto-approve toggle (on by default). Verified-players-only toggle (off by default). SPLIT: court total ÷ seats = per-player share. You row only (other seats pay on join). Your method picker: [Pay via Field] / [Pay at club].

Private variant

INVITE FRIENDS: [+ Add friend] + [+ From chat]. Per-seat rows: seat 1 (you, host) + invited friends + empty [+ Add friend] placeholders. Each seat has 3 payment options: [Pay €X via Field] / [Pay at club] / [I'll cover (organizer)]. Inline note: "Invited friends get push + chat DM to pay their share."

Done means

Both variants share the wrapper visually. Split row inline (no SP1 modal). Friend chips display correctly. Level slider shows your level marker. Continue CTA visible at bottom in both variants.

PB15 Booking window explainer (modal) P0

Modal triggered when user taps a greyed slot ("Member only" or "Beyond window"). The Field Pass contextual paywall entry #2.

Triggering slots

"Member only" slot → modal explains member-only window; CTA: become a member (→ MM2) OR view membership offer.
"Beyond window" slot → modal explains base window; CTA: get +3 days with Field Pass (→ MF1).

Sections

Modal header with close button. Friendly explainer copy (no shame: "You can book courts up to N days ahead. Want a longer window?"). Visual: 3-tier comparison: Base · Member · Field Pass. Primary CTA + dismiss link.

Done means

Both trigger variants designed (member-only, beyond-window). Copy is informative not aggressive. 3-tier comparison visualised. Modal dismissible via swipe-down + close button + tap outside.

M1 Account overview P0

The Account tab hub. One scroll. Sections to identity, stats, wallet, Field Pass, memberships, settings.

Sections

Identity strip: avatar (tap to edit), name, level chip per sport, member-since date.
Profile section: rows for Stats (→ M2), Rankings (→ M3), Competition history (→ M4), Match history (→ M5), Achievements (→ M6), Friends (→ M13), Followed clubs (→ M12), Edit profile (→ M10).
Money section: Wallet balance preview (→ MW1), Field Pass status (→ MF3 or MF1), Memberships (→ MM3), Payment methods (→ MP1).
Settings section: rows for Account, Notifications, Privacy, Language, Help, Legal, Sign out.

Done means

Section grouping clear. Wallet balance preview live. Field Pass row shows "Active" badge when subscribed; soft upsell when not. Settings rows compact with chevron right.

M3 Rankings (per club + global) P0

Ana's surface. Where competitive climbers check where they stand. Toggleable scope.

Sections

Scope picker: tabs or segmented (Your club / Your sport / Global).
Your position card: dark hero. Position number (Oswald large), sport, delta this week, your name, μ.
Leaderboard list: avatar + name + μ + position. Players near you highlighted (3 above, 3 below).
Filter chips: All / Friends only / My club / My level ±0.5.

Interactions

Tap user row → M9 public profile. Scope toggle re-fetches. Pull-to-refresh updates rankings.

Done means

3 scope variants designed (club / sport / global). Position highlights (3 above + you + 3 below) clear. Dark surface contrast passes WCAG. Oswald on all positions.

MW1 Wallet home P0

Cross-club wallet balance + per-club breakdown + recent transactions + top-up. Pedro's surface (Field Pass Tourist).

Sections

Total balance hero card: Oswald large €X.XX. Subtitle: "Across N clubs".
Per-club breakdown: each club gets a row with logo, name, balance, expiry warning if <14 days.
Recent transactions: 5 most recent. [See all] → MW2.
[Top up wallet] CTA.

States

Zero balance (welcome state with explainer) · Expiring credits (amber warning at top) · Single club (collapsed per-club row).

Done means

Cross-club aggregation clear. Expiring credit warning prominent without being scary. Tap any row → MW3 credit detail. Top up flow opens drawer.

MF1 Field Pass paywall P1

The monetization moment. Dark. Confident. No dark patterns. Lands from PB15 / Home nudge / Account.

Sections

Hero: short headline + supporting subhead. No urgency timers.
3 key benefits: +3 days booking window · Cashback on every booking · No booking fees. Each row: icon + benefit + 1-line explainer.
Price block: Monthly OR Annual (annual highlighted with savings). Free trial CTA if eligible.
Social proof: "Trusted by N players at M clubs" (only if numbers are meaningful — else skip).
FAQ accordion: cancel anytime, how cashback works, when it activates.
Primary CTA: [Start free month] or [Subscribe €X/month].
Secondary: [Not now] dismiss link.

States

First-time view · Returning to paywall (different copy: "Still thinking?") · Trial already used (no free trial CTA) · Already subscribed (this screen should not appear — guard in routing).

Done means

No countdown timers. No "limited offer" badges. Clear pricing. Dismiss option respected. Apple/Google StoreKit subscription terms visible.

G8 Empty state template P0

Reused across the entire app. One template, many contexts. No dead ends — every empty state has a primary action.

Structure

Vertically centered. Single line icon (Phosphor 32px) → 1-line headline (H3 weight) → 1–2 line body (text.secondary) → primary CTA (brand.green) → optional secondary text link.

Voice rules

Headline names the absence ("No matches yet" / "No bookings on your plate"). Body explains how to fix it. CTA is an action verb ("Find a match" / "Book a court"). Never use sad emoji or pity language.

Variants designed

Light + dark backgrounds. Tablet width responsive. With illustration (none in v1, abstract icon only).

Used by

H1 cold state, H5 empty feed, PB1 no nearby matches, PC1 no comps, M4 no comp history, M5 no match history, M6 no achievements yet, MW1 zero balance, W1 no videos, G1 no conversations.

Done means

Single component definition. All 10+ usage contexts documented. Voice rules visible to designer. No dead ends — every variant has a CTA.

Compact specs (by surface)

Remaining ~65 screens. Each gets purpose, layout, key states, and reference back to Section 6 acceptance criteria.

Splash · Auth · Onboarding

S1Native OS splashP0

Native iOS LaunchScreen.storyboard / Android splash drawable. Ink background + Field logo centered.

States: single. Watch out: must use OS-native APIs (not animated) for first-frame compliance.

S2Field boot loaderP0

Branded bridge between OS splash and first screen. Lasts 300ms–2s. Dark, logo centered with subtle motion (slow fade or pulse, not bounce).

States: fast (<500ms — no animation), slow (1–2s — show loading dots). Don't: show progress bars (looks broken if it stalls).

S3Update / migration gateP0

Forced-update screen. Single CTA → App Store / Play Store. Cannot bypass.

States: update required · migration in progress (data being upgraded). Copy tone: calm, not alarming.

A1Welcome carouselP0

4 swipeable slides — Compete, Watch, Track, Play. Sticky footer with [Create account] + [Log in]. Slides 1–3 dark, slide 4 (Play) light.

States: per-slide (4). Interactions: swipe + dot indicators + tap footer CTAs anytime.

A2Sign upP0

Email + password form + Apple + Google + Magic Link entries. Terms checkbox required. Lockout after 5 failed attempts.

States: empty · validation errors · loading · success · existing-email error → A3 redirect. Done: all 4 auth paths visible as primary surface, not buried.

A3Log inP0

Mirrors A2 — same 4 paths + Forgot password link. Biometric prompt for returning users with stored credentials.

States: first-time · returning (offer biometric) · locked out (after 5 attempts, 15-min cooldown). Done: Face ID / Touch ID rationale on first biometric offer.

A4Forgot passwordP0

Email input → success state ("Check your email"). Unknown-email error stays generic ("If that email exists, we'll send a reset link") for security.

States: input · loading · success · error. Done: no email enumeration leakage in error states.

A5Email verificationP0

Soft gate: can browse Home/Play discovery but blocked from Book/Compete signup until verified. Resend CTA + persistent banner across app.

States: unverified (banner) · verifying · verified (success toast). Done: banner reuses G7 pattern.

O1Onboarding — sportsP0

Multi-select Padel / Tennis / Football. Big tap targets. ~10s to complete. Skip disabled.

States: empty (no selection — Continue disabled) · 1+ selected · all selected. Done: minimum 1 selection enforced.

O2Onboarding — levelP0

Per-sport: either "I know my level" slider (2.0–6.0) OR 4-question quiz fallback. Both produce a Glicko μ estimate with high σ (confidence).

States: slider mode · quiz mode · quiz-in-progress (question N of 4) · result. Done: both paths land on same data shape.

O3Onboarding — location + follow clubsP0

Location permission rationale → permission grant → nearby clubs list → multi-select follow.

States: permission ask · permission denied (fall back to manual search) · loading clubs · clubs list · 0 nearby clubs (offer manual). Done: denial path doesn't dead-end.

O4Onboarding — notificationsP0

Rationale screen (dark) — explains push categories before firing the native prompt. [Continue] fires native; [Not now] skips.

States: rationale · native prompt (system) · allowed · denied. Done: denied state proceeds to O5 (never blocks).

O5Onboarding — doneP0

Confetti moment + "You're in" headline + auto-dismiss to Home after 3s. Single CTA: [Take me to Home].

States: default. Done: confetti is restrained (not Duolingo). Auto-dismiss optional via tap.

PR1Permission rationale (6 variants)P0

One template, 6 copy variants — Location, Push, Camera, Photos, Contacts, Calendar. Each: line icon → H2 title → 2–3 line body → [Continue] + [Not now]. Denied-state variant: copy rewritten to "You turned this off" + [Open Settings].

States per variant: initial · denied → reopen. Done: all 6 variants designed (12 screens total with denied variants).

Home

H3Today detailP0

Today + tomorrow events expanded into full chronological list. Tap any → relevant detail screen.

States: empty (nothing today) · 1+ events · 10+ events (long list). Done: reuses Today strip card pattern from H1.

H5Social feed expandedP1

Full scrollable feed. Filter chips: All / Friends / My clubs / Competitions I'm in. Infinite scroll. 7 feed item types each with avatar, verb-first headline, detail, timestamp, inline kudos + comment row.

States: empty (no friend activity yet → CTA "Find friends") · loading · offline · end of feed. Done: Instagram-density skim, not compute-heavy.

H6Post detailP1

Single feed item full view — all kudos, comments, replies. Threaded comments. Tap user → M9.

States: 0 comments · <10 · 10+ (load more). Done: comment composer sticky at bottom.

H7Kudos listP1

List of users who gave kudos to a match/post. Tap user → M9 public profile.

States: <20 (simple list) · 20+ (paginate). Done: follow/follow-back CTAs inline.

H8Weekly summaryP1

7-day rollup: μ change, matches played, W/L, hours on court, partners. Shareable as 9:16 story.

States: insufficient data (<3 matches: skip summary) · standard. Done: share preview is on-brand and template-stable.

H9Notification centerP0

Grouped by day. Swipe-to-dismiss per item. Category tabs: All / Activity (matches, comps) / System (account, billing).

States: empty · unread (visual emphasis) · read · old (>30d auto-archive). Done: deep-link from notification → correct screen.

H10Notification deep-link routerP0

Invisible interstitial. Handles edge cases: stale deep link, deleted resource, user logged out, version mismatch.

States: routing · stale (friendly "this match no longer exists" → fallback Home) · auth needed · version gate. Done: never crashes; always lands somewhere coherent.

H11Recommendations see-allP1

Full algorithmic rec list. Reason chips per card: "Same club", "Your level", "Nearby", "Friends are in".

States: populated · loading · empty (no recs → CTA to broaden filters). Done: reason chip is the differentiator; never an opaque list.

H12Streak detailP1

Gamified streak story. Why streak matters, how to keep it, longest historic streak. Dark.

States: active streak · broken (encouragement, not shame) · never had one. Done: loss-streak gets cold messaging "🧊 Ready to break the streak" not "you suck."

Play — Compete

PC1Compete discoveryP0

Play tab Compete segment. My competitions horizontal carousel (LIVE first, red dot). Upcoming vertical scroll. Find a Partner entry. For You algorithmic.

States: no competitions joined · LIVE in progress · empty discovery nearby. Done: filters reachable via bottom sheet.

PC4Competition detail — completedP0

Winner card (avatars + trophy abstract icon). Final standings table. Your result: final position, μ change, W/L. Share + "Next one at this club" link.

States: you won · you placed · you didn't play. Done: abstract trophy (no cartoon).

PC5Registration — Solo vs DuoP0

Two big cards. Solo: auto-matched at R1 by algorithm. Duo: continue to PC6 partner invite.

States: default · duo unavailable for this format (hide). Done: equally weighted card visuals.

PC6Registration — invite partnerP0

Search by name / phone / email. Recently played partners as quick chips. Selected → [Send invite]. Pending state until accept.

States: empty search · results · selected · sent (pending) · partner accepted · partner declined. Done: pending state visible on PC2 for both parties.

PC7Registration — paymentP0

Individual-pay or organizer-pays toggle. Method picker (Wallet / Card / MB WAY / Multibanco). Reuses PB8 payment component.

States: standard · wallet has balance (default selected) · payment failure. Done: uses same component as PB8.

PC8Registration — confirmationP0

Summary + [Add to calendar] + [Invite friends] + [Share].

States: standard. Done: calendar permission rationale (PR1 variant) on first use.

PC9Match result — simpleP0

Americano-style. Two team totals. ≤10s input. Team A avatars + input + Team B avatars + [Submit]. Modal over PC3.

States: input · loading · success (returns to PC3). Done: haptic on submit. Oswald on score input.

PC10Match result — set-by-setP0

For brackets. Three set inputs per team. Super-tiebreak toggle. Modal over PC3.

States: input · super-tiebreak active · validation (invalid sets). Done: set validation visible (can't have 6-6 without TB).

PC11Result confirmation / disputeP0

Counterparty receives push + sees result on PC3 with [Confirm] / [Dispute]. Dispute: reason picker + free text → club admin.

States: pending confirmation · confirmed · disputed (admin queue) · auto-flagged (both parties entered different scores). Done: dispute reasons standardized (wrong score / wrong opponent / didn't play).

PC12Ladder challengeP0

Pick opponent → suggest 3 date windows → optional note → [Send]. Opponent gets push with 3 buttons: accept a window / propose different / decline.

States: compose · sent (pending) · accepted (auto-creates booking) · declined · counter-proposal. Done: challenge expiry visible (48h to respond).

PC13QR check-inP0

Camera full-screen. Haptic + success card on scan ("Checked in — Court 3, Round 1 starts in 4 min"). Manual code entry fallback.

States: camera permission · scanning · success · invalid QR · manual entry · already checked in. Done: permission rationale via PR1 before native camera ask.

PC14Initial level assessmentP0

Same as O2 but accessible standalone from Compete tab for users who skipped during onboarding. Slider or 4-question quiz.

States: identical to O2. Done: shared component with O2.

PC15Find partner — boardP1

Filter chips (sport / level / date / club). List of partner-request cards with avatar, name, level, availability, note. CTAs: [Message] / [Pair up for X].

States: empty (no requests in your filters) · populated · your own request highlighted. Done: level proximity highlighted (±0.3).

PC16Find partner — post requestP1

Form: sport, level range, date window, clubs (multi-select), free-text note → [Post].

States: compose · posted · expired (auto after 7d). Done: request visible to user under "Your posts" in M15.

PC17Competition recap modalP1

Auto-trigger after competition completes. Your placement + μ change + key moment clip + [Share my result].

States: single. Done: dismissible without sharing. Triggered once per competition.

Play — Book

PB2Open matches — full listP0

Sticky filter pill row (Sport · Level · Time · Club · Distance). Same card shape as PB1. Sort toggle top-right: Nearest / Soonest / Lowest level / Highest level.

States: populated · empty per filter combo (CTA: clear or host one yourself) · loading · offline. Done: filter chips reflect counts when applied ("Padel 12").

PB4Join-match checkoutP0

Summary row (date, club, share, total) + payment method (Wallet default if balance) + Field Pass line ("€0 fee — waived by Field Pass" OR "€0.50 fee. Waive with Field Pass →"). [Pay €X] CTA.

States: standard · wallet covers full · partial wallet + card · payment failure. Done: success → PB9 with "You joined Ana's match" variant.

PB5Host a match — Public vs PrivateP0

Two big cards. Public: anyone at your level can join. Private: only invited friends. Fork at step 1, not buried.

States: default. Done: equal visual weight on both cards.

PB8Host checkoutP0

Pay your share or full court (organizer-covers). Method picker. Field Pass benefit line.

States: per-share · full court · payment failure. Done: success → PB9 host variant.

PB9Booking confirmation (Public / Private)P0

Success state. Public variant: "You hosted a match — visible in feed". Private: "Invited 3 friends, awaiting payment". Joiner variant: "You joined Ana's match".

States: 3 variants (host public · host private · joiner) · partial-payment private. Done: [Add to calendar] + [Invite friends] + [Share] CTAs.

PB10Club detailP0

Hero photo + club info (sports, courts, indoor/outdoor, surface, amenities) + open matches at this club + memberships offered + Club Clutch feed (W7 embed) + competitions hosted.

States: followed · not followed · member · non-member. Done: follow toggle persistent.

PB11My bookingsP0

Tabs: Upcoming / Past / Cancelled. Newest first. Each row: date, club, status (paid / pending / cancelled).

States: empty per tab · populated. Done: empty state uses G8 template.

PB12Booking detail (Public / Private)P0

Booking summary + court + time + players + inline split-payment status (4 circles paid/pending) + actions (cancel, share, chat).

States: public · private · all paid · partial paid · all cancelled. Done: split status row inline, no separate modal.

PB13Cancel + refund previewP0

Confirm modal with refund amount + policy explanation + final CTA. Refund varies by timing vs cancellation window.

States: within free window · partial refund · no refund · already cancelled. Done: policy explainer not buried.

Play — Academy

PA1Academy discoveryP1

Play tab Academy segment. Program cards by sport + level + age group + schedule + price.

States: empty (no programs nearby) · populated · child mode (showing child-specific). Done: filter by age group / sport / level.

PA2Program detailP1

Hero + coach profile + schedule + price + spots remaining + level fit + [Enroll].

States: spots available · waitlist · closed. Done: coach details linked.

PA3Enrollment — player + child switcherP1

Self or child selection (if child profiles configured) + contact + medical disclaimer checkbox.

States: self · child · multiple children. Done: child switcher reuses M11 component.

PA4Enrollment — schedule + planP1

Schedule confirm + plan picker (monthly / quarterly / annual) + recurring billing terms.

States: schedule conflict (warning) · standard. Done: plan terms transparent.

PA6My academy — overviewP1

Active program card + next session + attendance summary + plan status + coach contact.

States: active · paused · ending. Done: session reminders set automatically.

PA8Academy payments / planP1

Plan terms + auto-renew toggle + change plan CTA + payment history + next charge date.

States: standard · payment failed (banner). Done: change plan triggers prorated billing modal.

Watch

W1Watch home — your feedP1

Vertical scrolling feed of latest match highlights (yours + friends'). Each card: thumbnail with play overlay, player names, match meta, kudos count.

States: empty (no matches recorded yet → CTA "Play at a Clutch club") · populated · loading. Done: dark, video-first density.

W2My libraryP1

All your videos chronologically. Filter by sport / club / date range. Grid view.

States: empty · populated · loading more. Done: grid responsive to screen width.

W3Match player (full match)P1

Full match playback with scrubber, frame-step, score-mark jumps (tap score row to jump to that point), pinch fullscreen.

States: loading · playing · paused · buffering · error. Done: score-mark jumps work as anchor navigation.

W4Highlights viewer (vertical swipe)P1

TikTok-style vertical swipe through clips. Auto-advance to next clip. Tap to pause. Swipe up for share. Swipe right for next.

States: playing · paused · end of feed. Done: autoplay muted on enter, unmute via tap.

W6Share sheetP1

9:16 preview card with clip + score + avatar + Field watermark. Triggers iOS/Android share sheet.

States: preview · rendering · ready. Done: consistent preview template across share contexts.

W7Club Clutch feedP1

Embedded inside Club Detail (PB10). Latest 5 highlights from this club. [See all] → club-filtered W1.

States: populated · empty (club not Clutch-equipped) · loading. Done: embed not full-screen.

W8Match stats screenP1

Full Clutch stats: rally win %, avg rally length, smash success, court coverage, longest rally. Per-match.

States: data available · partial data · no data (sport without Clutch). Done: Oswald tabular nums throughout.

Account — Profile

M2Full stats (Insights, 8 tiles)P1

Whoop-style 8-tile grid: win rate, streak, level trend, peak μ, hours, partners, edges, rival. Tap any tile → detail.

States: cold (less than 4 matches: tiles greyed with unlock criteria) · warm. Done: dark surface, tabular Oswald numerics.

M4Competition historyP0

Chronological list of all competitions entered + final placement + μ change.

States: empty (uses G8) · populated. Done: tap row → PC4 or PC2 depending on completion.

M5Match historyP1

All matches: date, opponents, score, μ delta. Filter by sport / club / outcome. Tap row → H4 if Clutch, else summary.

States: empty · populated · filter empty. Done: infinite scroll. Oswald numerics.

M6Achievements gridP1

Grid of earned + locked badges. Abstract geometric icons (no cartoon trophies). Earned: color. Locked: grey with hint.

States: none earned (cold) · some · many. Done: grid 3 columns on mobile.

M7Achievement detailP1

Single achievement story: criteria, when earned, who else has it (% of users), share CTA → G6.

States: earned · locked (preview). Done: dark, hero abstract icon.

M8Head-to-head rivalryP1

Opponent profile + W-L record + last 5 matches + rivalry intensity score + your average μ delta when playing them.

States: sufficient matches (≥3) · insufficient (CTA: "Play them again"). Done: dark surface, Oswald.

M9Public profile (other player)P1

Light page with dark stats card. Their μ, achievements, recent matches, follow / challenge CTAs.

States: follower · not following · self (route to M1) · blocked. Done: privacy respected (profile visibility setting).

M10Edit profileP0

Form: name, email, phone, avatar, level (locked if assessed), favourite sport, bio.

States: standard · validation errors · saving · saved. Done: email/phone change requires re-verification.

M12Followed clubsP0

List of clubs you follow. Tap → PB10 club detail. Swipe to unfollow.

States: empty (uses G8) · populated. Done: follow toggle reflects on PB10 instantly.

M13Friends / followersP1

Tabs: Friends (mutual) / Followers / Following. Tap user → M9.

States: empty per tab · populated. Done: unfollow + remove friend swipe actions.

M14Find friendsP1

Contacts permission rationale → matched users on Field → search → invite non-users via WhatsApp.

States: permission ask · permission denied (manual search only) · loading matches · matched · not matched. Done: non-Field contacts get [Invite] WhatsApp deep link.

M15My feed postsP1

Your public activity timeline. Edit / delete actions per post.

States: empty · populated. Done: reuses H6 post detail on tap.

Account — Wallet

MW2Transaction historyP0

Chronological list. Filter by club, type (booking / refund / cashback / topup), date range.

States: empty · populated. Done: infinite scroll. Filter chips persistent.

MW3Credit detailP0

Single credit: source (cashback / refund / topup / promo), amount, expiry, terms, usable-at clubs.

States: active · expired (greyed) · partially used. Done: expiry visible prominently.

MW4Expiration warning modalP0

Triggered when credits expire in <14 days. Modal with "Use it or lose it" framing + [Discover what to book] CTA → PB1.

States: single expiring credit · multiple. Done: max once per session.

MW5Wallet-in-checkout (embedded)P0

Embedded component (not standalone). Apply wallet balance toggle + remaining-to-pay computed live.

States: wallet covers full · wallet partial · wallet zero (toggle disabled). Done: reused across PB4, PB8, PC7.

Account — Field Pass

MF2Field Pass — plan selectP1

Monthly / Annual cards. Annual highlighted with savings tag. Trial info if eligible. Clear cancellation policy.

States: default · trial eligible · trial used. Done: Apple/Google IAP terms visible.

MF3Field Pass — active benefitsP1

Subscribed-state. Cashback YTD + booking window status + member-only privileges + status badge.

States: active monthly · active annual · paused · expiring soon · grace period after payment failure. Done: renewal date visible.

MF4Field Pass — manageP1

Pause, cancel, change plan, billing details. Apple / Google subscription deep-link.

States: standard · cancelling (in grace period). Done: cancellation reasons captured.

MF5Field Pass — cashback historyP1

Chronological list of cashback events. Total YTD + per-club breakdown.

States: empty (just subscribed) · populated. Done: "How cashback works" link inline.

Account — Memberships

MM1Membership offer (inline component)P1

Component shown inside Club Detail (PB10) for non-members. Member benefits + price + [Enroll] CTA.

States: not member · member (component hidden) · member of another club. Done: not a full screen.

MM2Membership enrollmentP1

Member form (name, contact, emergency contact) + auto-renew toggle + payment + terms acceptance.

States: standard · validation · payment failure. Done: terms acceptance required.

MM3My memberships listP1

All active memberships across clubs. Each row: club, status, renewal date, [Manage].

States: empty (uses G8) · 1 · multiple. Done: tap → MM4 detail.

MM4Membership detailP1

Single membership: benefits, terms, renewal, cancel, history of charges.

States: active · cancelling · expired. Done: benefits clearly listed.

Account — Payments

MP1Payment methods listP0

Cards + MB WAY history. Set default. Swipe delete (with confirm). Add new entry.

States: empty (CTA add) · 1 method (default auto) · multiple. Done: card last-4 visible, type icon (Visa / MC).

MP2Add card (SIBS)P0

Card form (number, expiry, CVC, cardholder name) + SIBS validation + 3DS challenge.

States: input · validating · 3DS · success · failed. Done: input via Apple/Google Pay autofill where available.

MP3Add MB WAYP0

Phone number form + MB WAY app verification flow (push to user's bank app for confirmation).

States: input · awaiting confirmation · success · timeout · failure. Done: 60s timeout with retry.

Account — Settings

MS1Settings homeP0

List of sections: Account · Notifications · Privacy · Language · Data · Help · Legal · Sign out.

States: default. Done: consistent row pattern with chevron right.

MS2Account settingsP0

Change email · change phone · change password. Each action requires re-auth (biometric or password).

States: read · editing · saving · re-auth required · success. Done: email/phone changes re-trigger A5 verification.

MS5Language & regionP0

Language picker (EN only at launch, structure for PT-PT / ES) + region (timezone, currency).

States: default · language selected (restart prompt). Done: change triggers app restart prompt.

MS7Data & storage + delete accountP0

Cache management (clear cache) + download my data (GDPR) + delete account (with confirmation friction).

States: standard · delete confirmation 1 (type "DELETE") · delete confirmation 2 (re-auth) · deleted. Done: delete is destructive; multiple confirmations.

MS8Help & supportP0

FAQs + contact form + email support + version info + diagnostic info copy.

States: default · submitting · sent. Done: version info copyable for support.

MS9Terms of ServiceP0

Full ToS rendered in-app. Scrollable. Last-updated date.

States: default. Done: markdown rendered legibly.

MS10Privacy PolicyP0

Full Privacy Policy. Scrollable. Last-updated date.

States: default. Done: matches MS9 pattern.

MS11Cookie / tracking prefsP0

Toggle analytics, ad tracking, third-party SDK. GDPR-compliant default off for non-essential.

States: default · saving. Done: toggle changes effective immediately.

MS12LicensesP0

Auto-generated list of open-source library acknowledgments.

States: default. Done: generated from package.json, not manually maintained.

Split Payment

SP1Pay-my-shareP0

Single screen shown to invited player tapping the pay-link from push/chat. Summary + payment method + cash-at-club toggle.

States: standard · cash-at-club selected · paid · payment failed · link expired · match cancelled. Done: cash toggle is inline, not separate modal.

Global

G1Conversation listP1

Threads with users / groups. Unread badges. Search across messages.

States: empty · populated · unread count > 99. Done: sort by recent activity.

G2Chat screen (1:1 + group)P1

Message bubbles + typing indicator + inline match invitation cards + pay-share reminders.

States: 1:1 · group · with pay-share embed · with match invite. Done: inline cards tappable.

G3New chat composerP1

Recipient search + multi-select for group + first message field.

States: selecting · ready to send. Done: create group requires ≥3 members.

G4Competition recap (modal)P1

Post-event auto-trigger. Your placement + clip + share. Dark modal.

States: single. Done: shows once per competition.

G6Achievement share sheetP1

9:16 story card with abstract badge icon + headline + Field watermark + OS share trigger.

States: preview · rendering · sharing. Done: reuses preview template logic from W6.

G7Offline banner (reused)P0

Persistent top banner: "Offline. Showing last seen data." Auto-dismisses on reconnect with success toast.

States: offline · reconnecting · reconnected (success toast). Done: banner respects light/dark of host screen.

G9Generic errorP0

Friendly error message + retry CTA + report-bug link. Never dead-end.

States: 4xx · 5xx · network · unknown. Done: retry preserves prior state.

G11Server maintenanceP0

Maintenance page with ETA + status page link. Cannot bypass.

States: active · ending (CTA to retry). Done: ETA from server header, not hardcoded.

What's missing on purpose: per-component specs (Card, Button, Chip, etc.) live in Section 9, not here. Per-screen API contracts live in the engineering dev-reference, which the designer doesn't need. Push notification templates live in Section 10 (Content Sheet). If you need anything not here, ask and we'll add to Section 8.

09 · System

Visual System

Tokens, type, spacing, components. Rendered live.

This section is the design foundation. Tokens, type scale, spacing, components — all rendered live in the brief itself so you can verify visual decisions in real time. Match these exactly in your Figma file. The whole engagement depends on a consistent system.

Color tokens

Tonal system. Each color exposes a full 9-step scale (50 → 900). Components reference a token, never raw hex. Update Figma variables to these exact values.

Primary — Mint

Base: mint.400 · #2DD4A0. Used for primary CTAs, active states, identity highlights.

mint.50

#E8FBF3

mint.100

#C7F4DD

mint.200

#95E8C0

mint.300

#62D9A0

mint.400 ★

#2DD4A0

mint.500

#21B689

mint.600

#1A9573

mint.700

#15745B

mint.800

#105944

mint.900

#0A3D2E

Secondary — Ink (greyscale)

Base: ink · #000000. Used for dark surfaces, primary text on light, high-contrast UI.

ink ★

#000000

grey.900

#171717

grey.800

#262626

grey.700

#404040

grey.600

#525252

grey.500

#737373

grey.400

#A3A3A3

grey.300

#D4D4D4

grey.200

#E5E5E5

grey.100

#F5F5F5

Surfaces

mist

#F5F5F5

mist.card

#FFFFFF

mist.divider

#E5E5E5

Semantic + signal

coral.progress

#F97316

amber.warning

#F59E0B

red.live

#DC2626

green.win

#2DD4A0

Coral progression: Used on slot-fill bars as they approach capacity. Mint at start, coral as urgency rises. Tension drives joining behaviour.

Text

Token	Hex	Usage
text.primary.light	`#0A0A0A`	Primary text on light backgrounds
text.secondary.light	`#596173`	Secondary text on light
text.tertiary.light	`#8891A3`	Disabled / placeholder on light
text.primary.dark	`#FFFFFF`	Primary text on dark backgrounds
text.secondary.dark	`#A1A1AA`	Secondary text on dark
text.tertiary.dark	`#6B7280`	Disabled / placeholder on dark

Sport accents (used one per screen, never mix)

sport.padel

#2DB8A3

sport.tennis

#F28C28

sport.football

#DC2626

Single-accent rule: Each surface uses one accent. Home identity hero → brand.green. Competition LIVE → red (urgency). Watch player → no accent (the video carries color). Stats deep-dive → sport-specific. Don't combine three colors decoratively on one screen.

Typography

Typefaces

Family	Weights	Use
Oswald	400 · 500 · 600 · 700	All headlines, screen titles, large display numerics (μ rating, big scores), section labels.
Barlow	400 · 500 · 600 · 700	Body text, labels, captions, micro, inline numerics (use `tabular-nums` feature). All UI text below H3.

Hard rule: Oswald for headlines and big athletic display numerics. Barlow for everything else. No third typeface. No serif fallback. The condensed character of Oswald + humanist sans of Barlow is the "High Performance Athletic" signature — don't dilute it.

Both fonts are free on Google Fonts. Load with this single line: <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">

Type scale

Role	Size / line-height	Weight	Family	Example
Display	56 / 60	700	Oswald	Identity hero μ "3.8" — big athletic readout
H1	32 / 38	600	Oswald	Screen title
H2	24 / 30	600	Oswald	Section title
H3	18 / 24	600	Oswald	Card title
Section label (caps)	13 / 18 · letter-spacing 0.08em	600	Oswald	"COMPETE THIS WEEK", "OPEN MATCHES"
Body	16 / 22	400	Barlow	Paragraph
Body bold	16 / 22	600	Barlow	Emphasized body
Label	14 / 18	500	Barlow	Form label, chip
Caption	12 / 16	500	Barlow	Timestamp, helper
Micro	11 / 14	500	Barlow	Legal, badge count
Stat (inline)	varies	500–700	Barlow tabular-nums	"12 matches", "+0.3 delta", "€32"
Stat (display)	varies (28pt+)	600–700	Oswald	Big hero numerics, identity card μ, win rate "67%"

Type scale rendered

3.8

Screen title (H1) — Oswald 32/38 600

Section title (H2) — Oswald 24/30 600

Card title (H3) — Oswald 18/24 600

SECTION LABEL — OSWALD CAPS 0.08EM

Body — Field is the operating system for sports clubs. The mobile app is how athletes carry that with them. Barlow 16/22 400.

Body bold — Emphasized phrase inline. Barlow 16/22 600.

LABEL — FORM FIELD · Barlow 14/18 500

Caption · 2 hours ago · Barlow 12/16 500

Spacing & layout

Spacing scale (pt / dp)

Use only these values. Never invent a 7pt or 13pt margin.

Standard distances

Element	Value
Screen edge padding	20 pt
Card internal padding	16 pt
Section vertical spacing	24 pt
Tab bar height	56 pt + safe area
Top nav height	56 pt + status bar
Tap target minimum	44 × 44 pt

Radius, elevation, borders

Element	Radius
Pill / chip	4 pt
Input field	8 pt
Card	12 pt
Hero card	16 pt
Fully rounded (avatar, pill button)	999 pt

Elevation on light: 0 1 2 rgba(0,0,0,0.06) for cards. Secondary cards use a 1px mist.divider border with no shadow.

Elevation on dark: No shadows. Use ink.soft lift to indicate elevation.

Iconography

Use Phosphor icon set, 1.5-stroke weight, rounded style. One weight across the entire app. Never mix Phosphor with another icon library.

Size	Use
16 pt	Inline with body text, label icons
20 pt	Buttons, list rows
24 pt (default)	Tab bar, nav, primary actions
32 pt	Hero / empty state lead icon

Base components

Eight primitives. Build these as Figma components with variants. Everything else composes from these.

1. Button

4 variants × 4 states. Primary (mint fill, ink text), Secondary (grey-100 fill), Inverted (ink fill, white text), Outlined (white fill, ink stroke). All pill-rounded (999pt radius). States: default · pressed · disabled · loading.

2. Card

2 variants. Light: mist.card background, 1 px mist.divider border or subtle shadow, 12 pt radius. Dark: ink.soft background, no shadow, 12 pt radius.

Light card

mist.card · 12 pt radius · 1px divider

Dark card

ink.soft · 12 pt radius · no shadow

3. Chip / Pill

3 variants: neutral, status (semantic-colored), sport-tagged. Always 4 pt radius. Inter 12pt 500 weight.

Neutral Available Live Full Padel

4. Avatar chip

3 sizes: small (24pt), medium (32pt), large (48pt). 999 pt radius. Optional border (2pt brand.green for "host" / "active" indicator).

5. Progress bar

Slot-fill indicator. Uses brand.green for filled portion, mist.divider for empty. Optional amber tint as fill approaches 100% (urgency).

3/4 players

11/16 spots

2/8 spots — early

6. Stat block

Used in identity tiles, match cards, profile stats. Oswald tabular nums. Top label + big number + delta line.

μ Rating

3.8

+0.3 this week

Win rate

67%

Last 30 days

Matches

8 wins · 4 losses

7. Tab bar (bottom nav)

56 pt height + safe-area inset. Background: mist.card on light / ink.soft on dark. Icon 24 pt + label 11 pt Inter 500. Active: brand.green icon + label + 3 pt rounded pill beneath. Haptic selection on tab change.

Screen content

⚡

Home

🎾

Play

🎬

Watch

👤

Account

8. Form input

4 states: default, focused, error, disabled. 8 pt radius. 48 pt minimum height. Floating label or top-aligned label.

Password

Phone (error)

Phone number must contain only digits.

Permission rationale screen template

One template, six copy variants (Location, Push, Camera, Photos, Contacts, Calendar). Always dark mode. Centered line icon, H2 title, 2–3 line body, primary [Continue], secondary [Not now]. Denied-state variant: body rewritten to "You turned this off. Open Settings to change it" + [Open Settings] deep link.

📍

Find clubs near you

Show clubs closest to you. We never track in the background.

10 · Copy

Content Sheet

Every CTA, label, empty state, error, and push notification. English. Reference verbatim — designer doesn't invent copy.

Voice principles

Field's voice is confident, direct, and athletic. Closer to Whoop's clipped utility than Duolingo's chatty encouragement. Never apologizes for itself. Never shouts.

Do Verb-first CTAs in Title Case.
"Book a court", "Find a partner", "Watch highlights"

Don't Generic action words.
"Continue", "OK", "Submit", "Go"

Do Sentence case for body, periods at end.
"Your usual Friday slot is open."

Don't Exclamation points except confetti moments (O5, achievement unlocks).
"Your slot is open!"

Do Cold messaging for loss streaks — never shame.
"Ready to break the streak."

Don't Negative framing.
"You're on a losing streak", "You haven't won in 3 matches"

Do Plain language errors that name the fix.
"We couldn't process that payment. Try a different card."

Don't Technical error codes or apologies.
"Error 500. We're sorry for the inconvenience."

Do Numerals always.
"3 spots left", "12 matches", "€8 per player"

Don't Spelled-out numbers.
"three spots left", "twelve matches"

Formatting rules

CTAs: Title Case (capitalize Major Words). Max 3–4 words. Verb first.
Section labels (all caps): Use for "OPEN MATCHES", "TODAY", "LAST MATCH". Oswald 12–13pt with 0.08em letter-spacing.
Body: Sentence case. Periods at end of sentences.
Numbers: Numerals always. Currency symbol before number (€8 not 8€). Date format "Fri, Oct 24 · 18:30".
Emojis: Only as functional indicators (🔥 streak, ✓ check, ▶ play). Never decorative.
Names: First name + last initial in social contexts ("Ana M."). Full name in profile.

10.1 Splash · Auth · Onboarding

Screen	Element	English copy	Notes
A1	Carousel slide 1 title	Real competitions. Real rankings.	Dark
A1	Carousel slide 1 subtitle	Americanos, ladders, box leagues. With a rating that actually means something.
A1	Carousel slide 2 title	Every match recorded.	Dark
A1	Carousel slide 2 subtitle	Clutch cameras at every Field club. Highlights in hours. Shareable in one tap.
A1	Carousel slide 3 title	Your level. Your story. Your rivals.	Dark
A1	Carousel slide 3 subtitle	Every match counted. Every trend visible. Every rival on your card.
A1	Carousel slide 4 title	Book. Play. Repeat.	Light
A1	Carousel slide 4 subtitle	Courts, partners, academies — one app.
A1	Primary CTA	Create account
A1	Secondary CTA	Log in
A2	Screen title	Create your Field account
A2	Email label	Email
A2	Email placeholder	you@example.com
A2	Password label	Password
A2	Password helper	At least 8 characters with one number.
A2	Terms checkbox	I agree to Field's Terms of Service and Privacy Policy.	Links inline
A2	Primary CTA	Create account
A2	Divider	or continue with
A2	Apple button	Continue with Apple
A2	Google button	Continue with Google
A2	Magic link button	Email me a magic link
A2	Error — email exists	An account already exists with this email. Log in instead.	Inline CTA
A2	Error — weak password	Password needs at least 8 characters and one number.
A3	Screen title	Welcome back
A3	Forgot password link	Forgot password?
A3	Primary CTA	Log in
A3	Error — wrong creds	Email or password doesn't match. Try again.	Generic for security
A3	Error — locked out	Too many attempts. Try again in 15 minutes.
A3	Biometric prompt	Use Face ID to sign in	iOS · "Touch ID" / "Fingerprint" variants
A4	Screen title	Reset your password
A4	Body	Enter the email on your account. We'll send a reset link.
A4	Primary CTA	Send reset link
A4	Success message	If that email exists, we sent a reset link. Check your inbox.	Generic for security
A5	Banner — unverified	Verify your email to book courts and join competitions.	Persistent banner
A5	Banner CTA	Resend verification
A5	Success toast	Email verified. You're all set.
O1	Screen title	What do you play?
O1	Subtitle	Pick all that apply.
O1	Continue CTA disabled	Pick a sport to continue
O2	Screen title	What's your level?
O2	Slider mode subtitle	Drag the slider to your level. Not sure?	Link to quiz mode
O2	Quiz mode trigger	Take a quick quiz instead
O2	Quiz question 1	How long have you played?
O2	Quiz question 2	How often do you play in a typical month?
O2	Quiz question 3	Can you hit a topspin consistently?	Sport-specific
O2	Quiz question 4	Have you played in a tournament before?
O3	Screen title	Find clubs near you
O3	Permission body	Show clubs closest to you. We never track in the background.
O3	Follow CTA per club	Follow
O3	Continue CTA	Continue with {N} clubs	Variable count
O3	Skip link	Skip for now
O4	Screen title	Stay in the loop	Dark
O4	Body	Match reminders, results, waitlist spots, friend activity.
O4	Primary CTA	Continue	Fires native prompt
O4	Secondary	Not now
O5	Screen title	You're in.	One of the only periods + confetti moments
O5	Subtitle	Time to play.
O5	Primary CTA	Take me home
PR1	Location title	Find clubs near you
PR1	Location body	Show clubs closest to you. We never track in the background.
PR1	Push title	Stay in the loop
PR1	Push body	Match reminders, results, waitlist spots, friend activity.
PR1	Camera title	Scan to check in
PR1	Camera body	Scan the court QR to check in. Or pick from your library.
PR1	Photos title	Add a photo
PR1	Photos body	Pick a photo for your profile or a match highlight.
PR1	Contacts title	Find friends on Field
PR1	Contacts body	Find teammates on Field. We only check names you share.
PR1	Calendar title	Add matches to your calendar
PR1	Calendar body	Add matches and competitions to your calendar automatically.
PR1	Continue CTA (all variants)	Continue
PR1	Skip CTA	Not now
PR1	Denied state body	You turned this off. Open Settings to change it.
PR1	Denied state CTA	Open Settings

10.2 Home

Screen	Element	English copy	Notes
H1	Top greeting (morning)	Good morning, {firstName}	5am–11am
H1	Top greeting (afternoon)	Good afternoon, {firstName}	11am–6pm
H1	Top greeting (evening)	Good evening, {firstName}	6pm–11pm
H1	Top greeting (night)	Up late, {firstName}	11pm–5am
H1	Identity card sport label	PADEL	All caps, Oswald
H1	Identity card delta (+)	+{X.X} this week	Mint color
H1	Identity card delta (–)	{X.X} this week	Amber, no minus
H1	Identity card week count	{W}W {L}L	Oswald, tabular
H1	Streak label (active)	🔥 {N}-win streak
H1	Streak label (cold)	🧊 Ready to break the streak	Never "you're losing"
H1	Identity card CTA	See full story	Arrow icon
H1	Identity cold state title	Build your identity	New user, no matches
H1	Identity cold state body	Play your first match to start tracking your level.
H1	Identity cold state CTA	Find a competition
H1	Identity mid-cold note	Early days — we're still learning your level.	1–3 matches
H1	Section label — Today	TODAY	Oswald caps 0.08em
H1	Today see-all link	See all
H1	Today empty state	Nothing on your plate. Find a match.	Inline link "Find a match"
H1	Today event card — countdown (hours)	In {N} hours · {filled}/{total} spots
H1	Today event card — countdown (tomorrow)	Tomorrow {time} · {filled}/{total} spots
H1	Section label — Last Match	LAST MATCH
H1	Last Match CTA (with video)	Watch highlights
H1	Last Match CTA (processing)	Highlights ready in ~2h	Greyed state
H1	Last Match — no Clutch club	Played at {clubName} — no video at this club yet.
H1	Section label — Friends	FRIENDS
H1	Friends empty state	No friend activity yet. Find friends to fill your feed.	CTA "Find friends"
H1	Friends see-all link	See all
H1	Section label — Recommended	RECOMMENDED
H1	Rec reason chip — same club	Same club
H1	Rec reason chip — your level	Your level
H1	Rec reason chip — nearby	Nearby
H1	Rec reason chip — friends in	Friends are in
H1	Offline banner	Offline. Showing last seen data.	Top banner
H1	Reconnected toast	Back online.
H2	Screen title	Your identity	Or "Your story" — match brand voice
H2	Section — peak μ	Peak this month
H2	Section — your edges	Your edges
H2	Edges fallback (insufficient data)	Play more matches to unlock your edges.
H2	Section — partners	Top partners
H2	Section — rival	Toughest rival
H2	Share CTA	Share your story
H4	Match meta line	{Day} · R{N} {format}	e.g., "Wed · R3 Americano"
H4	Win badge	WIN	Oswald, mint background
H4	Loss badge	LOSS	Oswald, grey background — no shame
H4	Section — highlights	HIGHLIGHTS
H4	Section — stats	STATS
H4	Stats CTA	See full stats
H4	Section — social	SOCIAL
H4	Kudos CTA	Give kudos
H4	Kudos given toast	Kudos sent.
H4	Share highlight CTA	Share highlight
H4	Share result CTA	Share result
H4	Video processing state	Video ready in ~{N} min
H4	No Clutch state	No video — this club doesn't have Clutch cameras yet.
H4	Disputed result banner	Result pending confirmation	Amber banner
H9	Screen title	Notifications
H9	Empty state	You're all caught up.
H9	Tab — all	All
H9	Tab — activity	Activity
H9	Tab — system	System
H9	Mark all read	Mark all read	Top right action

10.3 Play — Compete

Screen	Element	English copy	Notes
PC1	Top greeting	Play	Tab title
PC1	Segment — Compete	Compete
PC1	Segment — Book	Book
PC1	Segment — Academy	Academy
PC1	Section — Live now	LIVE NOW	Red dot
PC1	Section — My competitions	MY COMPETITIONS
PC1	Section — Upcoming	UPCOMING
PC1	Section — Find a partner	Looking for a duo?	CTA below
PC1	Find partner CTA	Find players at your level
PC1	Section — For you	FOR YOU
PC1	Empty — no comps nearby	No competitions in your radius. Broaden the search or tell your club admin you want one.
PC1	Empty CTA	Broaden search
PC2	Status — open	Registration open · {filled}/{total} spots
PC2	Status — closing soon	Closing in {time}
PC2	Status — full	Full · waitlist open
PC2	Status — closed	Registration closed
PC2	Info row — Format	Format
PC2	Info row — When	When
PC2	Info row — Where	Where
PC2	Info row — Level	Level
PC2	Info row — Price	Price
PC2	Info row — Partners	Partners
PC2	Section — About	About
PC2	Section — Participants	Participants
PC2	Eligibility pass	You're eligible to join	Green check
PC2	Eligibility fail — level	This is for level {min}–{max}. You're at {μ}.
PC2	Eligibility fail — member	Club members only. Become a member to join.	CTA inline
PC2	Eligibility fail — Field Pass	Field Pass holders only.	CTA inline
PC2	Primary CTA — sign up	Sign up · €{price}
PC2	CTA — waitlist	Join waitlist
PC2	CTA — already signed up	You're in	Greyed
PC2	Share CTA	Share
PC3	Status chip — LIVE	LIVE · ROUND {N}/{total}	Red dot
PC3	Tab — Now	Now
PC3	Tab — Standings	Standings
PC3	Tab — Matches	Matches
PC3	Tab — Info	Info
PC3	Enter result CTA	Enter result
PC3	Waiting state	Waiting for score	Greyed
PC4	Section — Final standings	FINAL STANDINGS
PC4	Your result label	Your result
PC4	Position label	Finished {place} of {total}	e.g., "Finished 2nd of 16"
PC4	μ delta line	{±X.XX} μ	Oswald
PC4	Share CTA	Share my result
PC4	Next competition link	Next one at {clubName}
PC5	Screen title	How are you playing?
PC5	Solo card title	Solo
PC5	Solo card body	We match you with a partner at round 1.
PC5	Duo card title	Duo
PC5	Duo card body	Pick a partner. You play every round together.
PC6	Screen title	Pick your partner
PC6	Search placeholder	Search by name, phone, or email
PC6	Recent partners label	Recent partners
PC6	Send invite CTA	Send invite
PC6	Pending state	Waiting for {firstName} to accept
PC6	Accepted state	{firstName} accepted	Mint check
PC6	Declined state	{firstName} can't make this one. Pick someone else.
PC7	Screen title	Pay your share
PC7	Pay-mode — individual	Each player pays their share
PC7	Pay-mode — organizer	I'm covering everyone
PC7	Total label	You pay
PC7	Primary CTA	Pay €{amount}
PC8	Success title	You're in.
PC8	Success subtitle	See you {dayOfWeek} at {time}.
PC8	Add to calendar CTA	Add to calendar
PC8	Invite friends CTA	Invite friends
PC8	Share CTA	Share
PC9	Screen title	Enter result	Modal over PC3
PC9	Submit CTA	Submit result
PC10	Super-tiebreak toggle	Super-tiebreak in set 3
PC11	Confirm prompt title	Confirm result?
PC11	Confirm body	{opponent} submitted: {score}
PC11	Confirm CTA	Confirm
PC11	Dispute CTA	Dispute
PC11	Dispute reason — wrong score	Wrong score
PC11	Dispute reason — wrong opponent	Wrong opponent assigned
PC11	Dispute reason — no-show	Didn't play / no-show
PC11	Dispute submitted	Sent to club admin. We'll let you know.
PC12	Screen title	Challenge {firstName}
PC12	Date windows label	Pick 3 windows that work
PC12	Note placeholder	Add a note (optional)
PC12	Send CTA	Send challenge
PC12	Expires note	Expires in 48 hours if no response.
PC13	Screen instruction	Point the camera at the court QR
PC13	Manual entry link	Type the code instead
PC13	Success title	Checked in
PC13	Success subtitle	Court {N}. Round {R} starts in {time}.
PC13	Error — invalid QR	That QR isn't valid for this competition. Try again or check in at the desk.
PC13	Error — already checked in	You're already checked in.

10.4 Play — Book

Screen	Element	English copy	Notes
PB1	Primary CTA	Book a court
PB1	Section — My bookings	MY BOOKINGS	Conditional
PB1	Section — Open matches	OPEN MATCHES NEAR YOU
PB1	Sub-segment — All	All
PB1	Sub-segment — My level	My level
PB1	Card — time today	Today {time}
PB1	Card — time tomorrow	Tomorrow {time}
PB1	Card — share price	€{amount} per player
PB1	Card — spots row	{filled}/{total} players
PB1	Empty state	No open matches near you. Be the first — host one.
PB1	Empty CTA	Host a match
PB1	See all CTA	See all open matches
PB2	Filter — Sport	Sport
PB2	Filter — Level	Level
PB2	Filter — Time	Time
PB2	Filter — Club	Club
PB2	Filter — Distance	Distance
PB2	Sort — Nearest	Nearest first
PB2	Sort — Soonest	Soonest first
PB2	Sort — Level lowest	Lowest level first
PB2	Sort — Level highest	Highest level first
PB2	Empty (filtered)	Nothing matches these filters. Clear them or host one yourself.
PB2	Clear filters CTA	Clear filters
PB3	Eligibility — qualifies	You qualify · Your level {μ} is in range.	Mint check
PB3	Eligibility — outside range	Your level {μ} is outside the range. The host can still approve you.	Amber
PB3	Players section	PLAYERS · {filled}/{total}
PB3	Host tag	Host	Mint outline pill
PB3	Empty seat label	1 spot left — that's you
PB3	Share line	Your share
PB3	Share breakdown	Court total €{total} ÷ {players}
PB3	Cancellation note	If you cancel, your seat returns to the feed.
PB3	Primary CTA — qualifies	Join match · €{amount}
PB3	Primary CTA — needs approval	Request to join
PB4	Method label	Pay with
PB4	Field Pass line (waived)	€0 booking fee — covered by Field Pass	Mint check
PB4	Field Pass line (offer)	€0.50 booking fee. Waive it with Field Pass.	Link
PB4	Primary CTA	Pay €{amount}
PB4	Error — declined	That card was declined. Try a different method.
PB5	Screen title	Who's this match for?
PB5	Public card title	Public
PB5	Public card body	Anyone at your level can join. Faster to fill.
PB5	Private card title	Private
PB5	Private card body	Only the friends you invite can join.
PB6	Sport block label	Sport
PB6	Club block label	Club
PB6	Date block label	Date & time
PB6	Court block label	Court & duration
PB6	Followed clubs label	Your clubs
PB6	Nearby clubs label	Nearby
PB6	Booking window banner (in window)	You can book {N} days ahead.
PB6	Booking window banner (Field Pass)	Get +3 days with Field Pass	Link to MF1
PB6	Slot — available	Available	Mint pill
PB6	Slot — booked	Booked	Grey
PB6	Slot — member only	Member only	Amber pill, taps PB15
PB6	Slot — beyond window	Beyond window	Grey, taps PB15
PB6	Continue CTA	Continue	Bottom-docked
PB6	Summary line	Court {N} at {club}, {day} {time}, {duration} min. Total €{amount}.
PB7	Section — Who can join (public)	WHO CAN JOIN
PB7	Level range label	Level range
PB7	Your level note	Your level {μ} is inside this range
PB7	Auto-approve toggle	Auto-approve players in range
PB7	Verified toggle	Verified players only
PB7	Section — Split (public)	SPLIT
PB7	Split summary	Court total €{total} ÷ {seats} = €{share} each
PB7	Section — Invite (private)	INVITE FRIENDS
PB7	Add friend CTA	Add friend
PB7	From chat CTA	From chat
PB7	Seat row — pay via Field	Pay €{share} via Field
PB7	Seat row — pay at club	Pay at the club
PB7	Seat row — organizer covers	I'll cover this seat	Private only
PB7	Invite note	Invited friends get a push and a chat with the pay link.
PB7	Continue CTA	Continue to payment
PB9	Success title (public host)	Match is live.
PB9	Success body (public)	Players can join from the feed.
PB9	Success title (private host)	Court locked.
PB9	Success body (private)	{N} friends invited. We'll let you know as they pay.
PB9	Success title (joiner)	You joined {hostFirstName}'s match.
PB11	Tab — Upcoming	Upcoming
PB11	Tab — Past	Past
PB11	Tab — Cancelled	Cancelled
PB11	Empty — Upcoming	No bookings on your plate. Book a court.
PB11	Empty — Past	No past bookings yet.
PB11	Empty — Cancelled	Nothing cancelled.
PB12	Section — Players & payment	PLAYERS & PAYMENT
PB12	Seat status — paid	Paid	Mint dot
PB12	Seat status — at club	Pay at club	Grey dot
PB12	Seat status — pending	Pending	Amber dot
PB12	Open chat CTA	Open chat
PB12	Cancel CTA	Cancel booking	Red, bottom
PB13	Screen title	Cancel this booking?
PB13	Refund — full	Full refund · €{amount} returns to your wallet	Mint
PB13	Refund — partial	Partial refund · €{amount} returns to your wallet	Amber
PB13	Refund — none	No refund · Cancellation is too late per club policy	Grey
PB13	Confirm CTA	Cancel booking
PB13	Keep CTA	Keep booking
PB15	Title — member only	This slot is for members
PB15	Body — member only	{clubName} opens this time only to members. Become a member to book.
PB15	CTA — become member	See membership
PB15	Title — beyond window	That's beyond your booking window
PB15	Body — beyond window	You can book {N} days ahead. Field Pass adds 3 more.
PB15	CTA — get Field Pass	Get Field Pass
PB15	Dismiss link	Pick another time

10.5 Play — Academy

Screen	Element	English copy	Notes
PA1	Section — Single classes	SINGLE CLASSES
PA1	Section — Clinics	CLINICS
PA1	Section — Courses	COURSES
PA1	Empty state	No academy programs nearby. Tell your club admin you're interested.
PA2	Type — single class	Single class	Tag
PA2	Type — clinic	Clinic · {N} sessions
PA2	Type — course	Course · {duration}
PA2	Primary CTA	Enroll
PA3	Medical disclaimer	I confirm I have no medical conditions that prevent me from playing.	Checkbox
PA3	Child switcher	Enrolling for
PA3	Add child link	Add a child profile
PA4	Plan — monthly	Monthly · €{amount}/mo
PA4	Plan — quarterly	Quarterly · €{amount}/quarter (save {pct}%)
PA4	Plan — annual	Annual · €{amount}/year (save {pct}%)
PA6	Next session label	Next session
PA6	Attendance label	Attendance
PA6	Plan status — active	Active · Renews {date}
PA6	Plan status — paused	Paused

10.6 Account — Profile, stats, friends

Screen	Element	English copy	Notes
M1	Section — Profile	PROFILE
M1	Section — Money	MONEY
M1	Section — Settings	SETTINGS
M1	Sign out CTA	Sign out
M2	Tile — μ rating	μ rating
M2	Tile — win rate	Win rate
M2	Tile — matches	Matches
M2	Tile — hours	Hours on court
M2	Tile — partners	Top partner
M2	Tile — rival	Toughest rival
M2	Tile — streak	Best streak
M2	Tile — peak	Peak μ
M3	Scope — your club	Your club
M3	Scope — your sport	Your sport
M3	Scope — global	Global
M4	Empty state	No competitions yet. Sign up for one.
M5	Empty state	No matches yet. Find one.
M6	Empty state	No achievements yet. Keep playing.
M8	H2H title	You vs {firstName} {lastInitial}.
M8	Insufficient data	Play {firstName} {lastInitial}. {N} more times to unlock this view.
M9	Follow CTA	Follow
M9	Unfollow CTA	Following	State toggle
M9	Challenge CTA	Challenge
M10	Section — Display	How you appear on Field
M10	Field — bio placeholder	A line about your game (optional)
M10	Save toast	Saved.
M13	Tab — Friends	Friends
M13	Tab — Followers	Followers
M13	Tab — Following	Following
M14	Section — On Field	ON FIELD · {N}
M14	Section — Invited	INVITED · {N}
M14	Section — Not on Field	NOT ON FIELD · {N}
M14	Invite via WhatsApp	Invite via WhatsApp
M14	Invite message template	I'm playing on Field — a sports app that's actually good. Join me: {inviteLink}	Pre-filled

10.7 Account — Wallet, Field Pass, Payments

Screen	Element	English copy	Notes
MW1	Total label	Total balance
MW1	Subtitle — across N clubs	Across {N} clubs
MW1	Section — Per club	PER CLUB
MW1	Recent transactions section	RECENT TRANSACTIONS
MW1	Top up CTA	Top up wallet
MW1	Zero state	Your wallet is empty. Credits land here from cashback, refunds, and top-ups.
MW3	Source — Cashback	Cashback
MW3	Source — Refund	Refund
MW3	Source — Top up	Top up
MW3	Source — Promo	Promo
MW3	Expiry — soon	Expires {date}	Amber if <14d
MW4	Modal title	You have credits expiring soon
MW4	Modal body	€{amount} expires {date}. Use it to book or join a match.
MW4	Primary CTA	Discover what to book
MW4	Dismiss link	Dismiss
MF1	Paywall title	Field Pass
MF1	Paywall subtitle	Play more. Pay less. Book sooner.
MF1	Benefit 1	Book courts 3 days earlier
MF1	Benefit 1 body	Skip the rush. Lock in prime time before anyone else.
MF1	Benefit 2	Get cashback on every booking
MF1	Benefit 2 body	{pct}% back to your Field wallet. Use anywhere.
MF1	Benefit 3	No booking fees
MF1	Benefit 3 body	Other players pay a small fee per booking. You don't.
MF1	Trial CTA	Start free month
MF1	Paid CTA	Subscribe · €{amount}/mo
MF1	Dismiss link	Not now
MF1	Fine print	Cancel anytime. Trial converts to paid unless cancelled before the month ends.
MF3	Status badge	Active	Mint
MF3	Cashback YTD label	Cashback this year
MF3	Window status	You can book {N} days ahead.
MF3	Renewal label	Renews {date}
MF4	Pause CTA	Pause subscription
MF4	Cancel CTA	Cancel subscription	Red
MF4	Cancel modal title	Mind sharing why?
MF4	Cancel reason — too expensive	Too expensive
MF4	Cancel reason — not using	Not using it enough
MF4	Cancel reason — switching	Found something else
MF4	Cancel reason — other	Something else
MF4	Cancel confirm	You'll keep Field Pass benefits until {date}, then it ends.
MP1	Empty state	No payment methods yet.
MP1	Add method CTA	Add a payment method
MP1	Default tag	Default	Pill
MP1	Set default CTA	Set as default	Swipe action
MP1	Delete CTA	Delete	Swipe action red
MP2	Card number label	Card number
MP2	Expiry label	Expiry
MP2	CVC label	CVC
MP2	Cardholder label	Cardholder name
MP2	Save CTA	Save card
MP2	3DS message	Confirming with your bank…
MP3	Phone label	Phone number
MP3	Awaiting confirmation	Open MB WAY on your phone to confirm.
MP3	Timeout error	MB WAY didn't confirm in time. Try again.

10.8 Account — Settings & Legal

Screen	Element	English copy	Notes
MS1	Row — Account	Account
MS1	Row — Notifications	Notifications
MS1	Row — Privacy	Privacy
MS1	Row — Language	Language & region
MS1	Row — Data	Data & storage
MS1	Row — Help	Help & support
MS1	Row — Legal	Legal
MS1	Row — Sign out	Sign out	Red
MS2	Change email CTA	Change email
MS2	Change phone CTA	Change phone
MS2	Change password CTA	Change password
MS2	Re-auth prompt	Confirm it's you
MS5	Language label	App language
MS5	Region label	Region
MS5	Restart note	The app will restart to apply the new language.
MS7	Clear cache CTA	Clear cache
MS7	Download data CTA	Download my data
MS7	Delete account CTA	Delete account	Red
MS7	Delete title	Delete your Field account?
MS7	Delete body	This is permanent. You lose your stats, matches, wallet, and competition history. Wallet credits are not refunded.
MS7	Delete confirmation input	Type DELETE to confirm
MS7	Delete final CTA	Permanently delete account
MS8	Contact label	Email support
MS8	Version label	App version
MS11	Section — Analytics	Analytics
MS11	Analytics body	Anonymous usage data helps us improve Field.
MS11	Section — Tracking	Ad tracking
MS11	Tracking body	Off by default. We never sell your data.

10.9 Global — Errors, empty states, banners

Screen	Element	English copy	Notes
G7	Offline banner	Offline. Showing last seen data.
G7	Reconnected toast	Back online.
G8	Generic empty template	{Headline names absence}. {Body: 1 sentence path forward}.	Pattern
G9	Error — generic 4xx	Something didn't work. Try again.
G9	Error — server 5xx	Field is having a moment. Try again in a sec.
G9	Error — network	Can't reach Field. Check your connection.
G9	Retry CTA	Try again
G9	Report CTA	Report this
G10	Forbidden / locked	This is private.
G10	Forbidden body	You don't have access to this. If that's a mistake, tell us.
G11	Maintenance title	Field is getting a tune-up
G11	Maintenance body	Back at {time}. Status updates at status.field.app.

10.10 Push notification library

≤80 characters per body. Verb-first when possible. No exclamation points except confetti moments. Title is the trigger; body is the personal hook.

Trigger	Title	Body	Notes
P01	Match starts soon	Match in {N} hours	{Day} {time} at {clubName}. Bring water.	Deep-link → PB12
P02	Highlights ready	Your highlights are ready	{Score} vs {opponentFirstName}. Watch the clips.	→ H4
P03	Open match nearby	New open match near you	{Sport} {day} {time} at {clubName}. {N} spots left.	→ PB3
P04	Result to confirm	Confirm match result	{opponentFirstName} entered {score}. Confirm or dispute.	→ PC11
P05	μ rating up	Your level just moved	{firstName}, your μ is now {newμ} ({+delta}). See the story.	→ H2
P06	Streak milestone	{N}-win streak	Three in a row, {firstName}. Keep it going.	→ H12
P07	Friend played	{friendFirstName} just played	{Score} at {clubName}. Give kudos.	→ H6
P08	Friend joined Field	{friendFirstName} is on Field	Wave hi or challenge them.	→ M9
P09	Friend won competition	{friendFirstName} won {compName}	Top of the {compType}. Send kudos.	→ H6
P10	Challenge received	{firstName} challenged you	Pick a window or counter-propose.	→ PC12 mirror
P11	Challenge accepted	{firstName} accepted	{Day} {time} at {clubName}. Booking is live.	→ PB12
P12	Challenge declined	{firstName} can't make it	Find another opponent at your level.	→ M3
P13	Partner invitation	{firstName} invited you	Duo for {compName} on {day}. Accept?	→ PC6
P14	Partner accepted	{firstName} is in	You're paired for {compName}. Pay your share.	→ PC7
P15	Pay your share	{hostFirstName} invited you to play	{Sport} {day} {time}. Your share: €{amount}.	→ SP1
P16	Pay reminder T-24h	Still need your share	{hostFirstName}'s match is tomorrow. €{amount} due.	→ SP1
P17	Booking confirmed	Court locked	{Day} {time} at {clubName}. Court {N}.	→ PB12
P18	Booking cancelled	Booking cancelled	{Day} {time} at {clubName}. Refund: €{amount} to wallet.	→ PB11
P19	Waitlist spot opened	You got a waitlist spot	{compName} on {day}. You're in.	→ PC2
P20	Competition starts	{compName} starts soon	{Time at clubName}. Check in with the court QR.	→ PC13
P21	Round ready	Your court is ready	Court {N}. Head over.	→ PC3
P22	Competition done	{compName} is over	You finished {place}. {±delta} μ.	→ PC4
P23	Wallet credit expires	€{amount} expires in {N} days	Use it on a booking or competition.	→ MW3
P24	Field Pass trial ending	Free month ends in 3 days	You'll be charged €{amount} on {date}. Manage anytime.	→ MF4
P25	Smart booking nudge	Your usual {day} slot is open	{Time at clubName}. Book it before it's gone.	→ PB6 pre-filled
P26	Kudos received	{N} kudos on your last match	See who.	→ H7
P27	Achievement unlocked	New badge: {achievementName}	{1-line description}.	→ M7
P28	Disputed result resolved	Result resolved	{compName}: official score is {score}. μ adjusted.	→ M5
P29	Academy session reminder	Class in 2 hours	{coachFirstName} at {clubName}. Court {N}.	→ PA6
P30	Membership renewing	{clubName} membership renews soon	€{amount} on {date}. Manage anytime.	→ MM4

Variables convention: Curly-brace placeholders ({firstName}, {amount}, {clubName}) in this sheet are populated at runtime. Maintain them exactly as named — engineering wires them to the same keys. Don't rename or add new ones without coordinating.

What's deferred: Tooltips, onboarding educational overlays, marketing email templates, and SMS one-time-codes are not in this sheet — they're separate workstreams. If you need a copy moment that isn't here, write it in the brief voice and flag it for canonical adoption.

End of brief

Now go design.

You have the vision, the audience, the decisions, the structure, the screens, the flows, the specs, the visual system, and the copy. Everything you need to ship Field's mobile app is in this document. If you find a gap, that's a real gap — flag it and we'll close it together.

Field is built with clubs. Now it's built with you too.

Field Mobile App

Field Mobile — Designer Brief

Whoop × Strava, for racquet sports

What this is

Engagement

How to read this brief

Vision Brief

What Field is becoming

Whoop × Strava, for racquet sports

The five design principles

1. Identity over activity

2. Dark is the default, not an option

3. Data as personality

4. Social proof as gravity

5. Motion is meaningful, not decorative

The cold-start moment

What success looks like

Native affordances Field should embrace

What Field is NOT

The one-line summary

Personas + Jobs

Who Field is not designed for (v1)

Decisions Locked

Decisions still open (flag if blocking)

Information Architecture

The tab bar

Persistent top-nav (every tab)

Second-level navigation inside a tab

Depth rules (non-negotiable)

Why Compete and Book share a tab (the booking-marketplace mistake)

One canonical path per screen

State-based layouts over duplicate screens

Screen List

How to read this list

6.1 Splash · Auth · Onboarding · Permissions

6.2 Home — Identity dashboard

6.3 Play — Compete

6.4 Play — Book (slot-first, match-first)

6.5 Play — Academy (key flows only)

6.6 Watch — Video + Highlights

6.7 Account — Profile / Identity

6.8 Account — Wallet

6.9 Account — Field Pass

6.10 Account — Memberships

6.11 Account — Payments

6.12 Account — Settings / Legal

6.13 Split Payment

6.14 Global — Messaging, Engagement, Errors

Final tally

User Flows

How to read these

Flow 1 — Onboarding (first-time user)

Flow 2 — Host a public match

Flow 3 — Join an open match

Flow 4 — Enter a competition (full lifecycle)

Flow 5 — Watch last match

Flow 6 — Book a court

Flow 7 — Join an Academy program

Flow 8 — Subscribe to Field Pass

Flow 9 — Cancel a booking + refund

Flow 10 — Join a club membership

Flow 11 — Receive + respond to a ladder challenge

Flow 12 — Find friends + invite to Field

Flow 13 — Dispute a match result

What's not diagrammed here

Screen Specs

How to use this section

Anchor screens — jump to

Anchor deep-dives

Compact specs (by surface)

Splash · Auth · Onboarding

Home

Play — Compete

Play — Book

Play — Academy

Watch

Account — Profile

Account — Wallet

Account — Field Pass

Account — Memberships