A marketing site, designed and built, then handed over
athletical.ly gives amateur sports leagues pro-grade tools. The marketing site had to make a small-league product feel major-league without looking templated or generated. One committed monochrome system, ink and paper, so the only colour on the page is the cards and the live-score dots. Sharp, kinetic, sport. Every component on it is custom, and the whole thing is coded by hand.
Restraint reads as premium.
One high-contrast system, executed precisely: dramatic type hierarchy, generous negative space, a light and dark section rhythm as the spine of the page. Three words to hold every screen to: sharp, kinetic, sport.
Motion has to earn its place. A halftone dot field in the hero that flows like the dimples on a ball and fades from paper into ink. A pinned feature carousel. Numbers that count up once. A card marquee. One moment per section, with a full reduced-motion fallback for each.
Every section, designed and built.
I was the only designer on it and I wrote the code in Claude Code, then handed the repo to the team, who deployed it. The product it sells is theirs, and the screens and cards inside the sections are their assets. Everything around them was designed and built here, with the client in the room: nine sections, each with one job and one moment of motion.
01 / 09
Hero
A halftone field that flows like the dimples on a ball and fades from paper into ink, the launch film beside the promise, the sport cards underneath.
Graphics made for the page.
The illustrated sport cards are the site's colour. Six of them, one per league type, drawn as trading cards so the product's collectible player cards had a world to live in. Everything the platform itself shows, the cards, the stats, the awards, is the client's product. The page around it is mine.
The components are the point.
Nothing on the page is a plugin. Every component above is custom: the halftone canvas, the marquees, the pinned carousel, the count-up, the pricing card and its phone, the tabbed revolver, the toolkit switcher, the scheduler. Each one has a reduced-motion fallback and a token behind every value. All of it moves in the walkthrough at the top.
Handed over, running in minutes.
Every value is a token: colour, type, spacing, motion, radius. Self-hosted subset fonts, a preloaded poster for the largest paint, transcoded video, WebP everywhere, WCAG AA. I designed it in Figma with the founder and their team, built it in Claude Code, and delivered a repo. Their engineers cloned it, ran it, and had it working in their environment within minutes. Then they shipped it.
