Components
The UI kit every product screen is built from, shown live with its states. Keyboard through it: focus rings, arrow keys and Esc behave as they do in the app.
Fields
Rectangular 8px controls recessed into the well. Field wires label, help and error to the control for screen readers.
Text, select, date
As it appears on your roster.
Enter a valid email address.
Used only to confirm eligibility.
Search
Choices
Checked state is gold: these are the user's own selections.
Checkbox, radio, switch
Filter chips
Overlays
Focus is trapped in dialogs and sheets, Esc closes, and focus returns to the trigger. Menus support arrows and typeahead.
Dialog and sheet
Dropdown menu, popover, tooltip
Toast
Avatars and badges
Photo, then initials, then a glyph. Badges carry status; semantic color only where it signals something.
Avatar sizes and fallbacks
Badges
Cards
Elevation by lightness plus a hairline. The featured card is the one place a gold glow appears.
Today
Upcoming sessions
Featured
Headline metric
One per screen at most.
92
Sample value
Interactive card
Hover or focus the link for the gold top-line sweep.
Table
44px rows, mono headers, tabular figures, sticky header. Below 768px rows stack into labelled cards. Sample rows for layout only.
| Pos | Status | |||
|---|---|---|---|---|
| Sample Athlete D | SG | 2027 | 21.2 | Pending |
| Sample Athlete A | PG | 2027 | 18.4 | Confirmed |
| Sample Athlete B | SF | 2026 | 14.1 | Pending |
| Sample Athlete C | C | 2028 | 9.7 | Confirmed |
| Athlete | Pos | Class | PPG | Status |
|---|---|---|---|---|
No athletes yet Add athletes to your roster to see them here. | ||||
Loading, empty, error
Error copy always comes from friendlyErrorMessage, never the server's text.
Skeletons and spinner
No sessions yet
Find a coach and request your first session.
Couldn't load
Check your connection and try again.
Paging
Numbered pages for tables; an explicit Load more for feeds (mobile scrolls infinitely).
Pagination and load more
Showing 20 results
Page header and details
Archivo uppercase title with a mono eyebrow. One per page; it is the h1 in product routes.
Page header
Coach
Team
Your roster and athletes you are following.