02 — Logo
The wordmark
A rounded play triangle followed by PLAI in all-caps geometric. Monochrome by default — tints from the surrounding color so it works on any background. The triangle is the play button. The letters are the name. Together they're the brand. Lifted directly from ios/Plai/Views/WordmarkVector.swift — what ships on the App Store is what ships on the site.
Brand mark — the play triangle
The mark, alone
The play triangle lifted from the wordmark — a single, recognizable glyph that doubles as the app icon, favicon, and loading state. Coral by default because it's a play button; the play button is an action; action is coral. Same path data as the iOS app, so what ships on TestFlight matches what ships on the web.
The triangle
Rounded play arrow. Coral by default. Scales from 12px to 256px from the same SVG.
iOS — dark
120×120 rounded square (iOS continuous radius). Coral triangle on a dark gradient chassis. The default app icon.
iOS — coral
Inverted: coral chassis, white triangle. For limited or seasonal treatments — a wink, not the default.
At small sizes
Same SVG, no simplification — the rounded play triangle holds its silhouette down to 9px tall. Same brand at every size.
Waking up
Inward rings collapse onto the mark — app launching, clip uploading, the review spinning up. Use exactly once per session.
Across sizes
One shape, four sizes. Because the play triangle is geometric and convex, the silhouette never breaks — no special small-size variant needed.
03 — Hero composition
The home page, composed
Every layer in service. Hex backdrop, slow-rotating polar grid behind the phone, corner brackets locked on the device, sonar pulsing inside the screen, an animated finding card sliding up from the bottom. The reticle next to the eyebrow is the smallest visible signal that the review is live.
iOS · Free in beta
Your sports clips,
reviewed closely.
Drop a clip in. Get a coach back.
Process — three steps
How it works, visualized
Three frames. FX rises at step two — the moment Plai is actively reviewing — and pulls back at step three when the review is done and the findings are yours. The visual language tracks the work; the visitor reads the curve without thinking about it.
Add a clip.
From the share sheet or your library. Whatever you've already shot — bring it in. No FX yet; Plai hasn't started its review.
Plai reviews.
Every frame, end to end. Usually under 30 seconds. Brackets lock on, sonar pulses, polar grid spins. The full FX vocabulary.
You see what it saw.
Findings in plain language, pinned to the frame they came from. Reticles mark the where; the card tells the what.
Playback — built for the replay
A player that earns the second look
Every clip deserves a second look. The third time, frame by frame. The fourth, looped on one tap. Plai's player was built for the replay — haptic ticks on every keyframe, loop handles that snap to findings, slow-motion to 0.25× by pinch. The interactions are the value.
Feedback — the coaching moment
A coach in a card
Plai doesn't grade. It notices. Then it tells you what to try — in the voice of someone who's actually held a bat. Every finding has three parts: what we saw, what to try, and the frame it came from. Below is what one looks like, full-size, exactly as it appears in the app.
a real finding · spelled out
Feedback that sounds
like a person.
Specific. Actionable. Kind in tone. The opposite of a grade.
Your hips opened late.
On the swing at 0:14, your hips started rotating after your hands had already begun moving forward. That sequence usually shows up as a "cast" — power leaks out the back of the swing because the body isn't firing in order.
A few slow-motion swings tomorrow. Start the rotation from your back foot, let the hips lead, and feel your hands stay back. Three reps before your next at-bat.
This is what every finding looks like — three parts, plain language, pinned to the frame.
App in pieces — UI shapes you can borrow
Lifted from the iOS app
Four real UI shapes — library tile, filter chip bar, tag pills, processing bar — pulled from the app source. Use them on the marketing site for the moments that need to show "this is what's inside." Same geometry as ios/Plai/Views/Library/; same color tokens as the rest of the system.
Library tile
Square card, dark gradient, accent finding-count badge. The grid uses these at ~160px wide. Lift the shape for "what's in your library" sections on marketing.
Filter chips
Pill-shaped, horizontally scrolling. Active in accent; inactive in surface tint. Used for sport / category / age filters in the library.
Tag pills
Smaller, mono caption, in cyan scan. For inferred metadata — sport, skill, age. Quiet because they're observations, not actions.
Processing bar
Cyan scan-fill with pulsing glow and mono caption. Label rotates with state — "loading", "reviewing", "almost there", "wrapping up".
App in pieces — the processing sheet
Analyzing, full surface
A direct web port of ios/Plai/Views/Library/ProcessingSheet.swift. Looping clip backdrop, halftone scan veil dense at the edges and sparse in the center, sweeping scanline, layered vignettes, and a giant percent counter that climbs in real time. The dismissed AnalyzingPill sits below — what re-opens the sheet while a review keeps running in the background. Everything is driven from a single --progress custom property so the percent text, backdrop dim, and halftone intensity all track together.
04 — Color
Two themes, one accent
Hex values below resolve from the currently active theme — toggle with the button in the top-right and every swatch updates. Tokens with translucent fills also show their alpha, so the value you copy is the one you ship.
Surface
Text
Borders
Accent — coral
FX scan — cyan
Semantic
Coral pairs with cyan
Coral marks what you do. Cyan marks what Plai does. They sit on opposite sides of the wheel so they never compete — one's the verb, the other's the witness.
Tap analyze.
Drawing on the frame.
Both themes, side by side
Hex/alpha for every token in dark and light. The accent shifts darker on light for contrast; semantics shift to WCAG-AA-friendly variants; FX cyan deepens from sky to ocean.
| Token | Dark | Light |
|---|---|---|
| --canvas | #0A0A0F | #FAFAF8 |
| --surface | #14141A | #FFFFFF |
| --surface-elevated | #1C1C24 | #FFFFFF |
| --text-primary | #F5F5F7 | #0A0A0F |
| --text-secondary | #F5F5F7 · α 0.72 | #0A0A0F · α 0.68 |
| --text-tertiary | #F5F5F7 · α 0.48 | #0A0A0F · α 0.46 |
| --text-disabled | #F5F5F7 · α 0.32 | #0A0A0F · α 0.28 |
| --border-subtle | #FFFFFF · α 0.06 | #0A0A0F · α 0.06 |
| --border-default | #FFFFFF · α 0.12 | #0A0A0F · α 0.12 |
| --border-strong | #FFFFFF · α 0.20 | #0A0A0F · α 0.22 |
| --accent | #FF6A3D | #E55A2F |
| --accent-hover | #FF8158 | #FF6A3D |
| --accent-press | #E0531F | #C84A22 |
| --accent-soft | #FF6A3D · α 0.15 | #E55A2F · α 0.10 |
| --accent-glow | #FF6A3D · α 0.30 | #E55A2F · α 0.18 |
| --fx-scan | #7DD3FC | #0284C7 |
| --fx-scan-soft | #7DD3FC · α 0.20 | #0284C7 · α 0.14 |
| --fx-scan-faint | #7DD3FC · α 0.08 | #0284C7 · α 0.06 |
| --success | #34D399 | #15803D |
| --warning | #FBBF24 | #B45309 |
| --error | #F87171 | #B91C1C |
| --info | #60A5FA | #1D4ED8 |
05 — Typography
Eight sizes, three faces
Display uses Archivo — geometric, blocky, modernist, picked to sit close to the wordmark's industrial weight. Body uses DM Sans for legibility at 14–18px. The web wordmark uses Instrument Sans for its italic-`i`. All three on Google Fonts, free. The iOS wordmark renders as SVG path data and doesn't need a font at all.
Type faces
Scale
Type pairing in context
A real composition — display headline, body lede, helper. This is what the home page hero looks like as words on canvas.
Now what?
07 — Badges
Pills, small and purposeful
Default, accent, and a live variant for real-time signals. See the green dot pulse.
08 — Cards
Feature tiles
Hover any tile to see the 4px lift and border strengthen. Light theme adds a soft shadow on hover; dark theme uses the border alone.
09 — Spacing
8px grid, with one exception
Every measurement aligns to 8px, with a documented 4px space-px for tight insets — badge padding, icon-to-text within a button.
10 — Analyzing FX
In-app FX, as web assets
Translations of the SkeletonFXVariant catalog — eleven in-app effects rebuilt as pure CSS / inline SVG, none over 2KB. Names mirror the iOS enum cases. The --fx-scan cyan is the review color: it shows where Plai is at work. Pairs with coral without competing — coral for what you do, cyan for what Plai does.
Corner focus
Camera-AF lock-on. Corners approach from outside, hold on target, then expand back out — 2.8s cycle. Use to frame the hero phone, the App Store badge, the showpiece moment.
Sonar
Concentric pulses outward, no center dot. Three rings staggered on a 2.4s cycle. Use behind a CTA, behind the live counter, or as the loading state while Plai is reviewing a clip.
Polar grid
Concentric circles plus radial lines, slowly rotating. Backdrop for hero sections, the review step, the showpiece scroll.
Hex · wireframe
Honeycomb tile pattern. Faint texture for any section that needs depth without an image. Tiles infinitely; zero file weight.
Field warp
Evenly spaced dots — the field Plai looks through. Used heavily in-app. Weightless texture; works as a backdrop for almost any section that needs a sense of structure.
Reticles
Targeting crosshairs at multiple scales. Bullets in lists, markers next to findings, decorative accents on key headlines.
Target lock
Square frame with corner brackets and a center crosshair. More assertive than corner focus — use it the moment the review lands on something, not while it's still working.
Halftone full
Graduated dot density with a radial fade — comic-book / risograph energy. Use as a hero backdrop or anywhere a section needs warmth without an image.
Radar
A rotating arm with a trailing fade. The most "actively scanning" visual in the catalog — 5-second rotation, continuous. Three faint range rings underneath.
Thirds grid
Composition grid with cyan crosshairs at the four intersection points. Quiet signal that the frame is being read like a photograph.
Corner arcs
Expanding quarter-circle ripples from each corner, staggered. 3.6s cycle. Softer cousin of corner focus — for moments where right angles feel too tactical.
Two accents, two jobs
Coral for what you do — buttons, links, CTAs. Cyan for what Plai does — corner brackets, sonar, the scan grid. Never mix the two in the same element.
In service — a framed moment
Three FX composed: a hex wireframe backdrop, a polar grid centered behind the headline, corner brackets framing the headline itself. Reads as "the review is happening here."
Record Plai Review.
Section — the shift
A single-sentence moment
After the hero, before the features. Five words, oversized. The gap between "you filmed it" and "you reviewed it" is the whole reason Plai exists. A halftone backdrop fades from the center; a thumbnail strip scrolls slowly behind the headline at 10% opacity — felt, not read.
You filmed it.
Now what?
This is the part Plai fixes.
Trust strip — quiet proof
Numbers and one quote
Three elements, muted, separated by hairlines: App Store rating, live count of clips reviewed this week, one quote with attribution. Ship without this section entirely if you don't have real numbers yet — better silent than seeded.
Manifesto — why this exists
A short founder note
200–400 words, max. The reason Plai exists, in the voice of someone who'd actually say it at a dinner party. Anchors the brand emotionally; doubles as press / about-page content. Optional team row at the bottom — small team is a feature, not a liability.
The clips on your phone deserve a coach.
Most kids will never have access to a private coach. Most adults stopped playing the sport they loved because there was no one to tell them what they were doing wrong.
We built Plai for the millions of clips already sitting on phones — recreational games, backyard practice, weekend pickup. Clips that nobody replays because nobody knows what to look for.
Plai reviews every frame and tells you what it sees, in the voice of someone who's actually played. Not a grade. Not a leaderboard. Just the things you might want to try next time.
No team dashboards. No social feeds. No "AI-powered sports analytics platform." Just a coach for your clips.
Pricing — the honest current state
Free, with a known endpoint
Don't dodge the price question. Answer it briefly, in the same voice as everything else. The full /pricing page expands; the homepage version just acknowledges so visitors don't go looking.
FAQ — things people ask us
Five questions, answered
The questions every visitor has. Plain language, two sentences max. Click any to expand. The "Is this Photos?" answer is the one that converts the skeptics.
Is Plai a video editor?
No. We don't help you cut highlights for Instagram. We help you understand the clip — what happened, what to try next.
Do I need to record clips with Plai?
No. Use your phone's camera the way you always do. Plai works on whatever's already in your library.
What sports does Plai understand?
Today: baseball, softball, basketball, soccer. Coming next: tennis, golf, swimming. We add a new sport every couple of months.
Will my clips be used to train AI models?
No. Your clips are yours. We don't use them for training, and we don't share them.
How is this different from Photos?
Photos organizes by when. Plai organizes by what happened.
Changelog — recent updates
Three most recent entries
A condensed strip showing momentum. Three entries — date, version, headline, two-sentence body. Link to the full /changelog at the top right. Cursor's changelog is the model: each entry small, dated, specific.
What's new in Plai
All updates →Smart trim lands on the moment.
For clips over 60 seconds, the trim handles now snap to the most-active window automatically. Tap once, the right 8 seconds are already selected.
Findings now pinned to frames.
Each finding card includes a thumbnail of the exact frame it came from. Tap to jump straight to that moment in the player.
Tennis support, in beta.
Forehand, backhand, serve — Plai now reviews tennis clips. Still figuring out which findings matter most for amateur play, so we're labeling these "beta" until the feedback loop settles.
Press kit — for journalists, mostly
Brand assets, downloadable
Quiet section, off the main scroll. Bundles every brand asset a journalist or partner might need. Skip building this until someone asks for it — but when they do, the link should already exist.
Plai press kit
Everything you need to write about, post about, or feature Plai. All files SVG or PNG, commercial-safe, no attribution required.
For press inquiries, photos, or quotes: press@plai.app
Final CTA — the last beat
Bring your worst clip
Full-bleed. One sentence. One action. No second link, no newsletter, no "or read our blog." Just the offer. The accent glow pulses on a 4-second cycle so the section feels alive even at rest.
About the fonts. The wordmark is the real PLAI SVG, lifted from ios/Plai/Views/WordmarkVector.swift — no font involved, no licensing question. Display headlines use Archivo — geometric and blocky, picked to sit close to the wordmark's industrial weight. Body copy uses DM Sans for legibility at 14–18px. Both on Google Fonts, free for commercial use, single CDN. Nothing to license before shipping.