athletical.ly — Marketing Website
Overview
A from-scratch marketing site for athletical.ly, a platform that gives amateur sports leagues pro-grade tools — stats, player cards, live scoring, and league operations. The goal was to make a small-league product feel major-league: a committed, monochrome system where the product screens and illustrated player-card art do most of the talking.
Highlights
- Built a strict monochrome system — ink, paper, and white — so color is spent only where it counts: the full-color player cards and small live-score dots. The restraint reads as premium and sidesteps the generic SaaS look.
- Designed and coded a signature hero: an animated halftone dot field (Canvas) with a subtle football-dimple flow that fades from paper into solid ink, paired with a custom video player with muted autoplay and hand-built controls.
- Introduced motion with restraint: a pinned horizontal feature carousel, scroll-locked revolving-card sections, numbers that count up on load, and a player-card marquee — one deliberate moment per section, with full reduced-motion fallbacks.
- Sharpened the product story with evidence: looping UI videos that play only when centered, a hover-to-reveal pricing phone, and crisp before/after comparisons that make the value obvious in seconds.
- Tokenized the entire system — color, type, spacing, motion, and radius — so nothing is a magic number and the build stays consistent and handoff-ready.
- Optimized for performance and craft: self-hosted subset fonts, a preloaded LCP poster, transcoded and compressed video, WebP assets, and WCAG-AA accessibility.
Role
Sole designer and developer. Took it end to end, from the Figma source of truth to the production build. The two founders partnered on direction, copy, and final approvals.
Notes
This project was about making an amateur-league product feel major-league. The hard requirement was that it not look templated or AI-generated, so I committed to one confident, high-contrast system and executed it precisely: dramatic type hierarchy, generous negative space, and a light/dark section rhythm as the spine of the page. Every screen had to hold to three words — sharp, kinetic, sport — and earn its motion. The result leads with craft and clarity so the story lands fast: what the platform does, who it is for, and why it feels a tier above.
Tools
Figma, Claude Code, Adobe Illustrator, Adobe Photoshop
Framework
Next.js, React, TypeScript, Tailwind
Library
GSAP + ScrollTrigger, Lenis, Canvas 2D
athletical.ly — Marketing Website
Overview
A from-scratch marketing site for athletical.ly, a platform that gives amateur sports leagues pro-grade tools — stats, player cards, live scoring, and league operations. The goal was to make a small-league product feel major-league: a committed, monochrome system where the product screens and illustrated player-card art do most of the talking.
Highlights
- Built a strict monochrome system — ink, paper, and white — so color is spent only where it counts: the full-color player cards and small live-score dots. The restraint reads as premium and sidesteps the generic SaaS look.
- Designed and coded a signature hero: an animated halftone dot field (Canvas) with a subtle football-dimple flow that fades from paper into solid ink, paired with a custom video player with muted autoplay and hand-built controls.
- Introduced motion with restraint: a pinned horizontal feature carousel, scroll-locked revolving-card sections, numbers that count up on load, and a player-card marquee — one deliberate moment per section, with full reduced-motion fallbacks.
- Sharpened the product story with evidence: looping UI videos that play only when centered, a hover-to-reveal pricing phone, and crisp before/after comparisons that make the value obvious in seconds.
- Tokenized the entire system — color, type, spacing, motion, and radius — so nothing is a magic number and the build stays consistent and handoff-ready.
- Optimized for performance and craft: self-hosted subset fonts, a preloaded LCP poster, transcoded and compressed video, WebP assets, and WCAG-AA accessibility.
Role
Sole designer and developer. Took it end to end, from the Figma source of truth to the production build. The two founders partnered on direction, copy, and final approvals.
Notes
This project was about making an amateur-league product feel major-league. The hard requirement was that it not look templated or AI-generated, so I committed to one confident, high-contrast system and executed it precisely: dramatic type hierarchy, generous negative space, and a light/dark section rhythm as the spine of the page. Every screen had to hold to three words — sharp, kinetic, sport — and earn its motion. The result leads with craft and clarity so the story lands fast: what the platform does, who it is for, and why it feels a tier above.
Tools
Figma, Claude Code, Adobe Illustrator, Adobe Photoshop
Framework
Next.js, React, TypeScript, Tailwind
Library
GSAP + ScrollTrigger, Lenis, Canvas 2D
