Today · Tue 14 Oct
17:00 B3 · Court 24/4
18:00 C1 · Court 12/4
19:00 Private · JoseNo court
Renewals due7
Office
Owners & front desk
Web app on Glass. Dense but calm. What needs attention sits at the top.
Brand guidelines · v2 · October 2026 · Pista Academy OS
Run the academy. Calmly.
Pista is the operating system for padel academies worldwide: students, groups, coaches, plans, payments and messages in one place, connected to whatever the club already uses. These guidelines set how Pista looks, sounds and behaves on every screen, message, invoice and deck, so anyone can build it the same way.
01 · Why this exists
Software people trust with their money.
An academy owner hands Pista their students, their schedule and their income. The brand has to feel like a well-run club office: quiet, exact, and ready before you arrive. It should never look like a booking app shouting about deals.
So owners trust the numbers
Pista is where renewals, payments and coach hours are counted. A calm, precise look makes every figure feel checked. Loud colour and marketing tone would undercut that.
So it feels at home in a good club
The padel clubs opening across Bangkok, Bali, Jakarta and Singapore are premium spaces. Pista should sit next to a nice front desk without looking cheap, and next to Playtomic or Stripe without looking like a copy.
So anyone can build it
Alvaro, a designer, a contractor or Claude should be able to make a Pista screen, LINE message or deck without asking. Every rule here comes with its reason, so new cases can be decided the same way.
02 · Principles
Five principles.
Every rule on this page comes from one of these. When a case is not covered, decide it with them.
Calm control.
Owners open Pista when something needs doing. Show what needs attention first, keep everything else quiet, and never make a normal day look like an emergency.
Exact, always.
Every amount, count and date is real and reconciles. Show units and currency. Use tabular numbers. If we do not know, say so.
Open by default.
Pista connects to the club's booking system, payment provider, POS and chat app. We never lock data in. Export and APIs are part of the product.
One move per moment.
One ultramarine action per view. One clear next step in every message. Coaches on court get one big button.
Local, everywhere.
Built for every padel market: WhatsApp, LINE or SMS depending on the country; SEPA, ACH, mada or PromptPay; local formats and laws. Built for 20 languages, each one written to read as if it came first.
03 · Name
Pista. The court.
Pista is what Spanish and Italian players call the court: pista de pádel. It is short, easy to say in Thai, Bahasa and English, and it points at the one place every academy session happens. Academy OS is the descriptor, used when people need to know what Pista is.
Write it like this
Not like this
Pista · in sentences, capital P
PISTA, pista. (in text), Pista's App
pista · only as the drawn wordmark
A typed lowercase "pista" pretending to be the logo
Pista Academy OS · first mention, titles, sales
PistaOS, Pista-OS, Pista Padel Software
pistahq.com · pista.asia · domains to secure first
Product names per module ("Pista Pay Pro Max")
Checked 6 Oct 2026: whois shows pistahq.com, pistaos.com and pista.asia as unregistered, and no padel software called Pista showed up in search. pista.com and pista.club are taken. Register the domains and run a trademark search before spending on the brand.
Open decision: a padel club called Pista has just opened in Bangkok. That isn't a legal problem (different services, common word), but clubs are our buyers, and some may read the software as that club's product. Decide before launch: keep the name and speak to the club, or rename. The logo is generated from code, so a new name costs about an hour.
04 · Mark
The court is the dot.
The wordmark is Pista in Instrument Serif Italic, drawn as outlines so it never depends on a font. One detail makes it ours: the dot of the i is a tiny padel court seen from above, net across the middle, leaning with the italic. The same court sits beside an italic P to make the app icon, so the two always belong together.
- Why a court: every academy session happens inside one. It is small enough to stay quiet and specific enough that nobody else has it.
- Clear space: the height of the P on every side. Nothing else enters that box.
- Minimum size: wordmark 64 px wide on screen, 18 mm in print; below that, use the icon. Icon minimum 16 px.
- Colour: Ink letters with an Ultramarine court on light grounds; Bone letters with a light-ultramarine court on Night; all white on Ultramarine. The court is the only part that may carry the accent.
- Co-branding with a club: the club's logo leads, then a hairline, then "Powered by Pista" in 11 px caps. Pista never sits bigger than the club.
- Files:
brand/assets/(SVG, nine variants), regenerated from the font withpython3 brand/tools/make_assets.py. Never retype the wordmark.
Don't straighten or re-slant it
Don't recolour the court or letters
PistaDon't type it: the court dot is the logo
Don't stretch, outline or add effects
05 · Colour
Glass, ink, ultramarine.
The palette comes from a padel court at night: cool glass walls, a deep blue-black sky, white lines, and the ultramarine turf that so many new courts are laid with. Click a colour to copy its hex code.
Rough proportion on any screen: 70 glass and surface · 20 ink · 7 night · 3 ultramarine. If ultramarine covers more than a button and a link or two, something is shouting.
PaidDueOverdueTrialPaused
Status colours are functional, never decoration: green means settled, amber means coming up, red means act now. Each is paired with a word, so the meaning survives colour blindness and greyscale print. All text pairs pass WCAG AA in light and dark (checked 6 Oct 2026; Slate on Glass 4.9:1, white on Ultramarine 7.6:1).
Never use: gradients; neon or lime "padel ball" yellow-green; the colours of brands we connect to (Playtomic, LINE green, WhatsApp green, Stripe purple) outside their own logos.
06 · Type
One sans that works. One serif that speaks.
Instrument Sans does the work: interface, tables, numbers, documents. Instrument Serif in italic appears once per block, for the phrase that should sound human. Both are free (SIL Open Font License) and served by Google Fonts.
Instrument Sans · 400 / 500 / 600
Aa 12
Headlines at 500, text at 400, labels and the wordmark at 600. Tabular figures for every number that sits in a column.
Instrument Serif · italic
Aa
One phrase per block, never a full paragraph, never in the product's working screens. Greetings, section titles, one word in a hero.
Display · 500 · −5%
November, sorted.
H2 · 500 · −3.5%
42 lessons this week
H3 · 500 · 19px
Group B3 · Intermediate · Court 2
Body · 400 · 16.5px
Mai's Growth plan renews on 1 November. Two of her four group classes were missed this month, so Pista marked her as at risk and told her coach.
Numbers · tabular
฿6,400 · Rp 2.400.000 · S$180.00 · 17:00–18:30
Label · 600 · caps · +20%
Due this week
Thai and Bahasa
ไทย: IBM Plex Sans Thai · Bahasa uses Instrument Sans. CJK falls back to the system font. Never fake a Thai look with a Latin display face.
07 · Icons & drawings
Drawn like court lines.
Icons are 1.5 px outlines on a 24 px grid with rounded joins, the same weight as the court lines in the mark. No filled icons, no 3D, no illustrations of people. When we need a picture of a schedule or a session, we draw the court.
Court
Schedule
Student
Group
Payment
Message
Connect
Checked in
08 · Interface
Hairlines, not boxes.
Screens are built from 1 px hairlines, 6 px corners and an 8 px spacing grid. Cards only where an object really is separate. Shadows only on things that float (menus, dialogs). Status always has a word and a colour.
Renewals · November
| Student | Plan | Status | Amount |
|---|---|---|---|
| Mai Suksawat | Growth · B3 | Due 1 Nov | ฿6,400 |
| Daniel Ortega | Performance · A1 | Paid | ฿11,800 |
| Kanya Lertpan | Starter · C2 | Overdue 6 days | ฿4,200 |
| Rizky Pratama | Pack · 10 classes | Trial | ฿1,200 |
| Hana Ito | Growth · B1 | Paused to Dec | ฿0 |
Example rows. Amounts right-aligned with tabular figures; status as word plus colour.
Buttons
One primary per view. Labels say exactly what happens, in sentence case.
Charged on the 1st. Students who join mid-month pay the remaining weeks.
Spacing & shape
8 px grid (8 · 16 · 24 · 32 · 48 · 64). Corners 6 px on controls, 10 px on panels, round on pills only. Hairline 1px rgba(13,20,36,.13).
09 · Motion
The stage moves. The office stays still.
Where Pista sells, it may move like a premium brand: the website, demo intros and social reels each get one orchestrated moment per section. Where owners work all day, motion is only feedback. Nobody wants a renewals table that dances.
Stage · website, demo, reels
One moment per section
Headlines rise line by line from a mask. The court draws itself behind the hero. Statuses turn to Paid one by one. The agent chain lights up step by step. 0.8 to 1.4 s, expo.out, 40 to 90 ms stagger, scroll-triggered once.
Office · the product
Feedback only
A button presses (scale 0.97, 160 ms). A row confirms. A drawer slides from its edge. 150 to 250 ms, cubic-bezier(0.23, 1, 0.32, 1), transform and opacity only, hover only on real pointers. Keyboard actions never animate.
- Never: loops that don't end, parallax for its own sake, scroll-jacking, bounce on data.
- Always: complete at rest, readable with motion off, and nothing at all when the device asks for reduced motion.
- Stack: GSAP 3.15 with ScrollTrigger, SplitText, DrawSVG and Flip, plus Lenis for smooth scroll, on the stage. CSS transitions in the product.
10 · Surfaces
One core, five rooms.
Pista talks to five kinds of people in five places. The core (mark, type, hairlines, ultramarine action) never changes. Each room only changes its ground, its density and its tone.
17:00 · Group B3Court 2 · 90 min
Mai S.
Arun P.
Lena K.
Tom W.
Save check-in
Court
Coaches on court
Phone app on white, readable in sun. 18 px text, 48 px targets, one big button.
LINE · Pad Thai Padel Academy
Hi Mai, your November Growth plan is ready. 4 group classes, 2 privates, 1 video review.
฿6,400 due 1 Nov.Pay with PromptPay
฿6,400 due 1 Nov.Pay with PromptPay
Home
Students & parents
LINE, WhatsApp, portal, email. The club's name leads. First names, one link, local language.
// webhook · signed
POST /hooks/pista
{
"type": "plan.renewed",
"academy": "aca_8Kd2",
"student": "stu_31Qz",
"amount": {
"value": 640000,
"currency": "THB"
}
}
Open
Developers & partners
Docs and API on Night. Mono for code only. Precise, short, versioned.
Pista Academy OS
Every class paid for. Every coach on time.
Connects to Playtomic, LINE, Xendit, Stripe and more.
Stage
Sales & marketing
Website, decks, social. Ultramarine grounds, one big statement, real club photos.
11 · Voice
Like a good club manager.
Warm, exact, short. We write the way a manager who knows every student by name would talk at the front desk: no hype, no jargon, no blame. Every message says what happened, what it costs, and the one thing to do next.
Say
Don't say
Mai's plan renews on 1 Nov. ฿6,400 due.
Subscription renewal pending!! Act now
Court 2 is booked in Playtomic at 18:00. Pick another court.
Error 409: resource conflict
Payment received. ฿6,400 from Mai, by PromptPay.
Woohoo! 🎉 Cha-ching!
Lena missed 2 classes in 15 days. Check in with her?
Churn risk detected for customer #3112
Connect your booking system
Configure third-party integration endpoints
Words we use
Student (not customer or user) · Plan for monthly, Pack for class credits, Drop-in, Private · Class is one session, Group is the people who train together · Due, Overdue, Paid, Paused · Connect for integrations.
Formats
24-hour time (17:00). Dates as Tue 14 Oct. Local money with its own symbol and separators: ฿6,400 · Rp 2.400.000 · S$180.00 · ₱3,500. Never round a money amount in the product.
Languages
English, Thai and Bahasa Indonesia from day one, Vietnamese next. Each language is written by a native speaker, not machine output pasted in. Thai messages use ค่ะ/ครับ to match the club's sender.
Never
Emoji in the product or in invoices. Exclamation marks in errors. "Oops". Blaming the student for a failed payment. Promising a feature or integration that doesn't exist yet.
12 · Channel recipes
Where it shows up.
Short recipes for the places Pista appears most. If a channel is missing, start from the closest one and the five principles.
Product
Glass ground, white panels, hairlines. A sticky header with the academy name and a search. Attention list first, detail on click. Light and dark modes, with the dark mode built on Night.
Check: one ultramarine button per view, every number tabular.
WhatsApp, LINE & SMS
Sent in the club's name, signed "Pista" nowhere. Under 300 characters, first name, the amount, one button. Flex message cards on LINE use white, Ink and one Ultramarine button.
Check: works in Thai first, reads fine as a phone notification.
Invoices & receipts
A4 and phone-width PDF. Club logo top-left, "Powered by Pista" in the footer. Tax details per country (Thai VAT, Indonesian e-Faktur if registered). Amounts right-aligned.
Check: the student can pay from the PDF in one tap.
Website
Stage room: ultramarine statement hero, real club photography, a plain-language product tour, prices on the page. One call to action: "Start free trial".
Check: a club owner knows the price in 10 seconds.
Decks & documents
16:9, Glass ground, one idea per slide, the italic serif for one phrase per title. Numbers carry their source and date. Cover and closing slides may use Night or Ultramarine.
Check: every claim on a slide has a source.
Photography
Real academies, from Madrid to Miami to Bangkok: coaches' hands, a ball against the glass, the court lines from above, evening lights. Natural colour, no heavy filters. No stock, no other brands' logos in shot, no posed handshakes.
Check: could it only have been taken at a padel academy?
14 · Tokens
Copy, paste, build.
The same tokens power this page, the product map and the product itself. Use them as CSS variables. If a value you need is missing, add it here first, then use it.
How we build (design skills, review steps, release checklist) lives with the code in docs/DESIGN-WORKFLOW.md, not in this guide. The guide says what Pista looks and sounds like; the workflow says how we check it.
:root {
/* colour */
--pista-glass: #EEF1F2; /* ground */
--pista-surface: #FFFFFF; /* cards, tables, documents */
--pista-ink: #0D1424; /* text, mark */
--pista-ink-2: #3C4658; /* secondary text */
--pista-slate: #5F697B; /* captions, labels */
--pista-ultra: #2B3FD4; /* the one accent */
--pista-night: #0B1328; /* dark ground */
--pista-line: rgba(13,20,36,.13);
/* status (functional only) */
--pista-ok: #1E7A52; --pista-warn: #8F5B00; --pista-bad: #B3261E;
/* dark mode */
--pista-dark-ground: #0A0F1C; --pista-dark-surface: #111829;
--pista-dark-ink: #E9ECF2; --pista-dark-ultra: #8C98FF;
/* type */
--pista-sans: 'Instrument Sans', system-ui, sans-serif;
--pista-serif: 'Instrument Serif', Georgia, serif; /* italic, one phrase */
--pista-thai: 'IBM Plex Sans Thai', system-ui, sans-serif;
/* shape */
/* motion */
--pista-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* product feedback, 150–250 ms */
--pista-press: scale(0.97); /* 160 ms */
--pista-radius: 6px; --pista-radius-lg: 10px; --pista-space: 8px;
}
Start with their pain.
Our buyers are academy owners, directors and head coaches, not players. Every post opens on a problem they lived this week, in their own words, then shows how a well-run academy handles it. The product appears as the answer, with example data labelled, and the call to action is always the demo or the pilot.
Hooks that work
"Who trained this month without paying?" · "Your group of two is costing you a court." · "The student who paid and stopped coming." · "Bank slips are a real payment method." · "Did your academy grow last month?" Short, specific, from the owner's week. Full list:
docs/strategy/06-social-content-system.md.Layout
Kicker top-left, one headline with one italic phrase, a single supporting element (rows, a court, four numbers), wordmark bottom-left, page count bottom-right. Glass and Night for teaching posts, Ultramarine for covers and announcements. Formats: 1080×1350 carousel, 1080×1920 story and reel, 1200×627 LinkedIn.
Rules
No invented numbers, customers or quotes. Screens and figures from the demo are labelled "Example". No emoji, no stock photos, no lime balls. Captions under 60 words, one call to action. Write in plain English that translates cleanly; keep idioms out.