A design system for coaches running youth select baseball from a phone. Every colour comes off the diamond. Every play, sign and lineup is drawn on the field the kids already know.
Design system v1 for review. Tap any part to react.
Green does the work. Chalk keeps it readable in full sun. Clay belongs to the infield drawing, and red is only for the stitches: errors and things that need the coach now.
Archivo at normal width carries the interface. Its condensed heavy cut is the scoreboard: jersey numbers, counts and scores, so numbers read at a glance from the dugout.
Three textures, used sparingly: mow stripes behind the field, chalk lines to divide and point, and stitches only when something needs attention.
Big targets for one thumb, numbers you can read from the third-base box, and the field wherever a decision is spatial.
Green says go. Red is only for things you can't easily undo. Every target is at least 48px.
Green: can play it. Scoreboard with yellow: playing it right now.
First names and numbers only. No last names, photos or birthdays, ever.
Catcher throws through to second. Shortstop covers. Third baseman watches the runner.
11/13 players know it
Darker green means drilled and right. Grey means not tried yet. No red here: not knowing yet isn't an error.
Four places, labelled in words. Today is home, because the coach's question is always "what do I need to do next?"
The system on three real coach screens, at phone size.
Practice at 5:30, Lower Woodland field 3
13 players, 11 ready for Saturday
Runner on first, fewer than two outs
Day is the default: a coach reads this in the sun, so it's white chalk and dark ink. Night game switches to the scoreboard for games under the lights. Try the switch at the top of the page.
Every screen answers the coach's next question. Players and parents get a simpler view of the same system.
Targets are 48px or more and the main action sits within thumb reach. It has to work between pitches.
High contrast by default. Numbers are big and condensed. Nothing depends on colour alone.
Green and white most of the time. Yellow means now, red means you need to look. Nothing blinks.