# PlaySport design rules — Ilya Asminkin

Canonical HTML: [PlaySport design rules — Ilya Asminkin](https://asminkin.com/portfolio/playsport-design-rules.html)

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.

[Explore the live product ↗](https://booking.playsport.uz/en) [Read the PlaySport case study ↗](https://asminkin.com/portfolio/index.html#case-playsport)

01 / DIRECTION

### 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.

02 / COLOR

### 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.

**Court Green** `#288D45`

**Confirmation** `#16A34A`

**Warm Stone** `#F5F5F4`

**Badge Sand** `#E7E5E4`

**Primary Ink** `#171717`

**Stone Border** `#D6D3D1`

Cards 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.

03 / TYPOGRAPHY

### 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.

04 / LAYOUT

### 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.

05 / COMPONENTS

### 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.

06 / CONSISTENCY

### 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.