FFPC

Overview

FFPC (Fantasy Football Players Championship) is a competitive pay-to-play fantasy football platform serving serious players and casual enthusiasts alike. The brand identity centers on 'Competitive Clarity'—a design philosophy that combines authoritative navy-and-blue color blocking with high-contrast white typography to convey trustworthiness, professionalism, and the stakes of competitive play. The aesthetic draws from sports broadcasting and financial services UI: bold sans-serif headlines (Interstate at 56px, 800 weight), clean geometric layouts, and strategic use of accent colors (vibrant blue #4293f6 for CTAs, lime green #7ac000 for secondary actions) that signal opportunity and energy. The emotional response is one of confidence and inclusion: whether you're joining a $35 league or a $5.7M tournament, the interface speaks to your ambition without gatekeeping.

The brand voice is direct, accessible, and outcome-focused. Vocabulary patterns emphasize choice ('Find Your Game', 'Join Today'), prize pools (always stated in dollars), and entry-level accessibility ('starting at just $35'). The tone avoids hype-speak; instead, it grounds players in concrete facts: league structures, prize breakdowns, platform features. Example sentence in brand voice: 'Join a $100 Empire League startup and compete for your share of the prize pool—drafts start weekly.'

Colors

The FFPC color system is built on a foundation of high-contrast, sports-broadcast-inspired palettes. Primary (#4293f6, a vivid medium blue) is the signature accent—deployed on all CTAs ('JOIN NOW' buttons), active navigation states, links, and focus indicators. This blue is never used for body text or backgrounds; it exists to draw the eye to actionable moments. Secondary (#7ac000, a bright lime green) supports primary actions and highlights, particularly on alternative CTAs and success states, creating a complementary energy that signals 'go' and 'play'. Tertiary (#00359f, a deep navy) anchors the header and hero section, establishing authority and competitive seriousness.

The surface stack is deliberately minimal and light: white (#ffffff) is the default canvas, with subtle grays (#e9ec

Typography

The type system is anchored in Interstate, a geometric sans-serif from Adobe Typekit that conveys sports-broadcast authority and modern professionalism. The hierarchy spans from Display (56px, 800 weight, -0.02em letter-spacing) for hero headlines down to Label-sm (12px, 600 weight) for form hints and badges. Headline-lg (40px, 700 weight) is used for section titles and major content breaks, while Body-md (16px, 500 weight, 24px line-height) serves as the default reading size—deliberately generous at 1.5x the font size to ensure legibility on mobile and desktop. All labels are uppercase with 0.05em letter-spacing, reinforcing the competitive, structured nature of the brand. When small labels (12px) appear over busy backgrounds or dark sections, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.

Layout

FFPC uses a 12-column fluid grid with a max-width of 1280px (1280px in pixels), centered on the viewport. The page rhythm is built on a semantic spacing scale: {spacing.lg} (40px) separates major sections (hero from featured leagues, featured leagues from 'Find Your Game'), {spacing.md} (24px) separates cards and subsections within a container, and {spacing.sm} (12px) is used for internal padding within components. The gutter between columns is 24px, consistent with {spacing.md}. Container max-widths vary by section (1300px for hero, 1215px for content areas, 940px for narrower feature blocks), but all respect the 1280px design constraint. White-space is generous but purposeful: the hero section uses 40px top/bottom padding to create breathing room around the headline and CTA, while card c

Elevation & Depth

Depth in FFPC is conveyed through a restrained shadow system and strategic background color shifts, avoiding the flat aesthetic while maintaining clarity. The elevation scale consists of three levels: Level 1 (Base) uses no shadow—white surfaces on white backgrounds rely on 1px solid borders in #e8e8e8 to define edges. Level 2 (Standard Cards, Dropdowns) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates the card from the background without visual drama. Level 3 (Modals, Popovers, Elevated Containers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a soft

Shapes

The shape philosophy is 'Functional Minimalism'—border-radius is used sparingly and consistently to signal interactivity without introducing organic or playful aesthetics. The default radius is 4px ({rounded.DEFAULT}), applied to all buttons, inputs, and small components. This tight radius conveys precision and control, aligning with the competitive, structured nature of fantasy football. Larger containers (cards, modals) use 12px (1rem, {rounded.lg}) to soften edges slightly while maintaining geometric clarity. Badges and pill-shaped elements use {rounded.full} (9999px) for a fully rounded ap

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (blue background, white text, 4px radius, 10px 20px padding, 44px height), secondary (transparent background, blue border and text, same dimensions), and green (lime #7ac000 background, white text, for secondary CTAs like 'Contact Us'). All buttons use Interstate 700 weight, uppercase labels with 0.05em letter-spacing. On hover, primary buttons darken to #0056b3 and secondary buttons invert (blue background, white text), both with transition: all 0.3s ease 0s. The 'JOIN NOW' CTA is always primary blue; 'SIGN IN' is secondary (outline style). Button groups (e.g., filter toggles) use transparent backgrounds with 1px borders at #e8e8e8; the active button in a group gets #001c5d background wit

Do's and Don'ts

**Do**

• Do use Interstate 700 weight for all button labels and uppercase them with 0.05em letter-spacing—this reinforces the competitive, structured brand voice.
• Do apply the primary blue (#4293f6) exclusively to CTAs, active states, and focus indicators; never use it for body text or passive backgrounds.
• Do maintain 40px vertical padding in section containers and 24px padding inside cards to create generous white-space that aids scannability.
• Do use the shadow formula 0 3px 8px rgba(0, 0, 0, 0.15) for all standard elevation; never exceed this softness or introduce multiple shadow layers.
• Do keep border-radius at 4px for buttons and inputs, and 12px for larger containers—sharp corners signal authority and precision.
• Do apply transition: all 0.3s ease 0s to all hover state changes (background color, shadow, border) for smooth, predictable interactions.

**Don't**

• Don't use the primary blue (#4293f6) as a background color for large content areas or the hero section—reserve it for interactive elements only.
• Don't mix font families; Interstate is the only typeface used in the system. Never introduce system fonts or serif alternatives.
• Don't apply border-radius greater than 12px to any component; the brand relies on geometric sharpness, not organic softness.
• Don't use shadows greater than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadow depth contradicts the clean, broadcast-quality aesthetic.
• Don't lowercase button text or remove the uppercase text-transform; this breaks the visual hierarchy and brand consistency.
• Don't introduce new accent colors beyond primary blue, secondary green, and tertiary navy; the palette is intentionally constrained to maintain focus.