Skip to main content

Earth ground and clay primary

Visual evidence for fantasy-web-ui#207, under the Trades UX epic.

Captured at 1440 × 1100 in headless Chromium with reduced motion. App pages use synthetic league, roster, waiver, and trade-context responses; no production league data or write requests are involved. Storybook shows the BadgeSlot tooltip story, including library chrome and controls. The before image uses the development manager, which also displays onboarding; the after image uses the production Storybook build.

ViewBeforeAfter
LineupLineup beforeLineup after
WaiversWaivers beforeWaivers after
TradesTrades beforeTrades after
Waivers Select dropdown—Open Position dropdown after review
Input states—Default, filled, disabled, unstyled, and Select input states
Menu hover—Menu hover with lighter clay ink
StorybookStorybook beforeStorybook after

The product design-system reference lives in fantasy-web-ui/docs/design-system.md. Page layouts and component APIs are unchanged; existing semantic projected, incoming, outgoing, warning, and error colors retain their base values.

The after images include the PM review fixes: distinct earth neutrals, solid muted text, and overlay surface/border tokens on dropdowns. The open Waivers Position dropdown includes a keyboard-highlighted option with dark text on clay and is also checked in Chromium for computed #382f26 background and #6b5c4c border. Overlay clay ink is #cd926f (4.95:1); the separate muted token on the page ground is 5.77:1. Input placeholders and chevrons on the explicit surface fill are 5.26:1. Menu hover/focus uses the raised surface, where overlay clay ink is 5.62:1. Input-state and native Menu-hover captures document these follow-up fixes.