Design comps for review before any code. They are not the product, they change no data or rules, and the synced Front Office stack is untouched. Colors are the Front Office's own palette. Tap the controls: they work.
Direction
FontMarket overflowWidth
Try Tab and Enter on a phone keyboard or a desktop: the focus ring is yellow. Every selected choice shows a ✓ and a heavier weight in A and B, not color alone.
Roster
Roster → Players
Roster columns
Group players
Filter the list
Player
Pts
PPG
Rank
Prescott, Dak
141.4
23.6
#14 QB
Market
Market: browse the player pool, then narrow it
Browse players
Swipe or tap › for more: Other teams, All players
Filter the list
Trade finder
Trades → the all-team table
Compare by
Measure
Contracts & Cap
Contracts & Cap → Cap plan
Cap plan view
Activity
Activity → moves
Show moves for
How the directions differ
Today
12 px muted chips; a view choice looks like a filter.
No group label.
Selected = a faint blue fill; no scroll cue on Market.
A · Filled blue
Choice sits in a labeled track; selected segment is solid #5b8dff with dark text (about 7:1), bold and ✓.
15 px text, 44 px targets.
Filters stay small, quiet and separate under "Filter the list".
B · Neutral + blue marker
High-contrast track; the selected segment inverts to light with dark text (about 17:1), a blue ✓ and a thick blue bar underneath.
Reads in grayscale and for color-blind users; blue is only the marker.
Same sizes and focus ring.
Both directions share: a visible group label ("Roster columns", "Browse players", "Compare by", "Measure"), 44 px touch targets, 15 px text, a yellow keyboard focus ring, a ✓ on the selected choice, and on Market a fade plus a › button, with the selected choice scrolled into view, instead of silently cutting off "All players".