0 to 1 in two months: one system for athletes and recruiters.

SportsMarkers was conceived as a portfolio pipeline between athletes and recruitment teams. My job was to build the visual identity and the interface system that could hold that whole story together, for two audiences who want very different things from the same page.

The icon is a geometric “M” built from one continuous, unbroken path: the athlete’s progression as a single line. Its thick stroke borrows the gesture of a highlighter or field marker, picking talent out and marking it for the next level. It always sits on a 45° axis, because leveling it would lose the sense of forward motion.

• Horizontal lockup for navigation and headers: icon left, wordmark right, the bold Inter weight matched to the icon’s stroke.
• Standalone icon for favicons, avatars and the “marker” badge on profiles.
• Clear space of half the icon’s height on every side.
• PascalCase only. “SportsMarkers” splits the two words without a space; lowercase versions are not allowed.

Lime is the colour of turf, of a heads-up display, of a go signal, and it cuts through visual noise on black. Dark mode is where athletes are showcased: profiles and public landing pages. Light mode, “Training Day”, swaps lime for Forest Green and is for the long, dense sessions recruiters spend in dashboards.

The theme follows the visitor’s browser setting, so nobody has to find a toggle first. A deep blue appears in only one place, as the blurred background gradient, so the green is the only colour that ever means “act”.

The whole identity runs on Inter. It was drawn for screens, stays clean in stat tables and on small phones, and its neutral tone keeps attention on the numbers. Headlines go bold for athlete names and data headers; body copy gets generous line height so portfolio descriptions scan quickly. Web buttons use Manrope Bold so calls to action read as a distinct voice.

Every colour token is named by what it is and documented by what it does: website background, primary card, stats and strokes, CTAs. Components ask for the role, not the hex, so the same player card renders correctly in either theme without a second version.

The library is built in three tiers, each with a web and a mobile sheet. Atoms are buttons, inputs, tags, avatars and empty states. Molecules combine them into stat tiles, event cards, player cards, pricing, sign-in and payment. Organisms are whole sections: onboarding, highlights, stats and performance, career timelines.

I used shadcn/ui as a reference for a developer-friendly component structure, so engineers would recognise the patterns. The visual language stayed SportsMarkers’ own.

The original deliverable was design documentation. Afterwards I rebuilt the library in React and TypeScript to test the specification in code: Base UI for keyboard and focus behaviour, native inputs for validation and autofill, aria-sort on tables, aria-current on pagination, live regions for form messages, and container queries so parts rearrange to the space they actually get.

Recruiters process a lot of numbers quickly, so legibility is the product. Checking every text pairing against WCAG 2.2 shows the dark theme passes everywhere, including subtext at 55% white. The light theme is closer to the line: Forest Green and the 55% inactive-navigation grey pass for large text and icons, but fall short for small text.

This card is built in code from the same tokens, not a screenshot. Switch themes, or let it follow your device the way SportsMarkers does, and watch the contrast check update.