Own product · Selected design documentation
PlaySport
design rules
A warm, legible interface for choosing a court, making a booking and running a sports club. These rules connect the product’s visual identity with its everyday controls.
The warm clubhouse
Warm stone surfaces, serif headings and a court-green accent give the product a calm, familiar character. The interface should make a practical decision easy: where to play, when to arrive and what it costs.
- Keep the page quiet. Use borders and small changes in surface tone to organize information.
- Give prices, times and booking states a clear hierarchy.
- Carry the same typography, spacing and controls from the player journey into club operations.
Each color has a job
Use green for identity and primary actions, a separate confirmation green for successful states, and warm neutrals for the surrounding structure. The following values are the web application’s light-theme tokens.
#288D45#16A34A#F5F5F4#E7E5E4#171717#D6D3D1Cards use white; recessed booking panels use #ECE7DE. Dark mode uses separate surface and accent tokens, including #171717 for the page, #262626 for cards and #34A354 for the brand accent.
Usage rule: Keep primary-action and confirmation roles separate. Derive tints from the active theme token so a component can follow the selected theme consistently.
Character with clarity
The product pairs a distinctive serif with a readable sans-serif and aligned numeric data.
Bona Nova · headings and titles
Use the serif for the main reading hierarchy. Available weights are 400 and 700; create quieter distinctions through size and color. Use lining numerals so digits sit naturally beside letters in venue names.
Golos Text · body and labels
Use the sans-serif for instructions, forms and interface labels. Latin and Cyrillic support keeps the visual rhythm consistent across the product’s languages.
Geist Mono · comparable figures
Use tabular numerals for prices, times, scores and durations. Align information that people need to compare in a column.
A repeatable rhythm
Separate the readable content rail from deliberately wide marketing stages. Reuse shared spacing and component dimensions instead of inventing a slightly different size on each page.
| Element | Rule |
|---|---|
| Spacing scale | 4 / 8 / 12 / 16 / 24 / 32 px |
| Readable content | 1152 px maximum; 16 px side padding, then 24 px from 640 px |
| Wide marketing stage | 1480 px maximum; 12 px side padding, then 16 px from 640 px |
| Card padding / radius | 24 px / 10 px |
| Standard input | 40 px height / 8 px radius |
| Button sizes | 32 px small / 40 px standard / 48 px large |
Allow layouts to stack on small screens. Keep safe-area spacing for notched phones and stable page gutters so centered content does not jump between pages.
Familiar, specific controls
The banner button
Filled and outline actions use an elongated hexagonal banner with softly rounded tips. Keep that silhouette consistent as the button changes width. Ghost and link actions stay visually lighter. Primary controls use the brand accent and a visible keyboard-focus ring.
Cards and panels
Default cards use a thin border, a white surface and a 10 px radius. Separate resting cards with borders and tone. Reserve stronger elevation for floating surfaces such as menus and dialogs.
Inputs and interaction states
Standard inputs use 16 px text on phones and 14 px from the small-screen breakpoint upward. Keep focus visible with a 2 px ring and 2 px offset. Disabled fields show an inactive state, and motion follows the user’s reduced-motion preference.
Rules for new screens
- Start with shared color roles, type families and spacing values.
- Use warm stone, sand and ink when adding neutral surfaces.
- Keep the meaning of a status clear in text as well as color.
- Check the hierarchy with real prices, dates and long venue names.
- Review light and dark states, mobile layouts and keyboard focus together.