ESPN Fantasy Football

Overview

ESPN Fantasy Football is a competitive sports analytics platform that transforms real-time draft data into actionable intelligence for fantasy enthusiasts. The design system embodies 'Institutional Clarity'—a modernist aesthetic that prioritizes information hierarchy, rapid scanning, and decisive action over decorative flourishes. The brand serves serious players who demand precision, speed, and trustworthiness; the UI evokes the confidence of a professional trading floor, where every pixel serves data comprehension. The emotional response is one of control and mastery: users feel equipped to make winning decisions.

The voice is direct, authoritative, and unadorned. ESPN speaks in active verbs and concrete numbers—never hedging, never apologizing. Vocabulary favors sports terminology (draft, trend, pick, league) over generic tech jargon. Tone is competitive but not aggressive; the brand assumes the user is serious and respects their time. Example sentence: 'Track live draft trends and adjust your strategy in real time.'

Colors

The color palette is built on a neutral, high-contrast foundation (#edeef0 surface, #151617 text) that ensures data legibility across tables, charts, and live feeds. Primary (#2dcc30, a vibrant sports-green) is reserved exclusively for actionable elements: the accent bar atop content cards, success states, and the 'Sign Up' CTA. This green is ESPN's signature accent—it appears in navigation hover states (inset 0 -3px 0 #2dcc30) and signals active, winning moments. Secondary (#0066cc, a professional blue) supports secondary CTAs and link states, maintaining visual hierarchy without competing with primary. Tertiary (#dd0000, ESPN's red) marks errors, alerts, and critical information—used sparingly in error containers and validation states. The surface stack (#edeef0 → #dcdddf → #ffffff) crea

Typography

The type system uses a single, system-native font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) to ensure consistent rendering across devices and eliminate web font latency—critical for a live-data platform. Display (48px, 700 weight, -0.02em tracking) anchors hero sections; headline-lg (32px, 700, -0.01em) titles major sections; headline-md (24px, 700) marks card headers like 'ESPN Live Draft Trends'. Body-md (16px, 400) is the workhorse for table cells and descriptive text, set at 24px line-height for comfortable scanning. Label-md (14px, 600, 0.01em tracking) is applied to buttons, table headers, and UI labels—the 600 weight and tight tracking create visual distinction without increasing size. Small labels (12px, 500) appear in support text and metadata. All headin

Layout

The layout uses a fixed 12-column grid with a max-width of 1220px (container-max-width: 1220px), centered on the page with symmetric gutters of 24px. The page rhythm is driven by a 'data-first' philosophy: content cards (border-radius: 10px, padding: 12px) are stacked vertically with 24px (md spacing) separation, allowing users to scan trends without cognitive overload. The accent bar (height: 6px, background-color: #2dcc30, border-radius: 10px 10px 0 0) sits atop each card, creating a visual anchor that draws the eye to key sections. Tables use 12px padding on cells (.Table__TH, .Table__TD { padding-left: 12px }) with 1px borders (#dcdddf) separating rows and columns—this creates a grid-like structure that aids rapid data parsing. White-space is generous: the page background (#edeef0) pro

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): the page background (#edeef0) with no shadow. Level 2 (Standard Card): white background (#ffffff) with 1px solid border (#dcdddf) and box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3)—this soft shadow lifts cards slightly from the surface. Level 3 (Elevated/Hover): same card with box-shadow: 0 8px 12px rgba(0, 0, 0, 0.12) on hover, creating a sense of interactivity. Navigation elements use box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3) to separate the secondary nav from the page. The accent

Shapes

The shape philosophy is 'Functional Modernism'—rounded corners are used strategically to soften hard edges and improve touch targets, but never to excess. Cards and containers use border-radius: 10px (1rem), creating a friendly but professional appearance. Buttons use border-radius: 10px for consistency with cards, ensuring visual cohesion. Input fields use border-radius: 4px (0.5rem, the DEFAULT token), a tighter radius that signals form elements without mimicking card containers. Badges and pills use border-radius: 50% (full token) for circular emphasis. The accent bar uses border-radius: 10

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background-color: #2dcc30, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 10px, and typography label-md (14px, 600 weight). On hover, background shifts to #1fa323 (a darker green) with a 100ms transition. Button-secondary uses a transparent background with a 1px border in #0066cc, same padding and height, and text-color: #0066cc. On hover, background becomes #d4e4ff (secondary-container) with text remaining #0066cc. Both buttons use cursor: pointer and transition: background-color 100ms ease-in-out.

Containers & Surfaces Cards are the primary content container. Standard card: background-color: #ffffff, border-radius: 10px, padding: 12px, border: 1px solid #dcdddf, box-shadow: 0 4px

Do's and Don'ts

**Do**

• Do use the green accent (#2dcc30) exclusively for primary CTAs, success states, and active navigation—it's ESPN's signature and must remain distinctive.
• Do maintain 1px solid borders (#dcdddf) on all cards and table cells to create clear content boundaries and aid rapid scanning.
• Do apply the accent bar (6px green bar atop cards) to highlight important content sections like live draft trends.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) to ensure fast rendering and consistent rendering across devices—no web fonts.
• Do keep padding consistent: 12px for cards and table cells, 24px for section spacing, 40px for major section breaks.
• Do use box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3) for standard cards and 0 8px 12px rgba(0, 0, 0, 0.12) for elevated/hover states to create subtle depth.

**Don't**

• Don't use the green (#2dcc30) for secondary elements or backgrounds—reserve it for high-priority interactive moments only.
• Don't exceed border-radius: 10px on cards or buttons; tighter radii (4px) are for inputs only, and 50% is reserved for badges.
• Don't add decorative shadows or gradients; all shadows must serve functional depth (Level 1 → Level 2 → Level 3).
• Don't use colors outside the defined palette—no custom hex values in components. Always reference {colors.x} tokens.
• Don't reduce padding below 12px on cards or table cells; this compromises scannability and touch targets.
• Don't mix font weights within a single text element; use 700 for headings, 600 for labels, 400 for body text—no in-between weights.