GameChanger

Overview

GameChanger is the #1-rated youth sports platform delivering live streaming, team management, and scorekeeping to coaches, players, and fans. The design system embodies "Neon-Dark Minimalism"—a bold aesthetic that pairs a near-black canvas (#07081b) with a vivid neon-green accent (#00f092) to create an energetic, action-oriented digital experience. The interface evokes the intensity of live sports: high contrast, rapid visual feedback, and an uncluttered focus on the moment. The brand personality is direct, confident, and youth-forward—speaking to the next generation of athletes and coaches with clarity and enthusiasm. Voice: energetic yet grounded, technical but accessible. Example: "Stream live, score instantly, connect your team—all in one app."

Colors

The color system is built on a dark-first philosophy with strategic neon accents. Primary (#00f092) is the signature neon-green used exclusively on call-to-action buttons, active states, and brand highlights—it commands attention against the dark surface and signals interactivity. Secondary (#0070c8) is a deep sports blue reserved for secondary actions and data visualization. Tertiary (#006554) is a muted teal used for status indicators and supporting UI elements. The surface stack ranges from #050612 (surface-dim, for recessed elements) to #25273d (surface-container-highest, for elevated modals). On-surface text is pure white (#ffffff) for maximum contrast and legibility on dark backgrounds. Error red (#f01d39) is used sparingly for destructive actions and validation states. All interacti

Typography

The type system combines two distinct families: Acumin Pro (semi-condensed weight 900) for display and headline scales, delivering impact and modernity; Aktiv Grotesk for body and label scales, providing clarity and warmth. Display (80px, weight 900, line-height 88px) is reserved for hero headlines and sets the energetic tone. Headline-lg (56px, weight 700) is used for section titles and major CTAs. Body-md (16px, weight 400, line-height 24px) is the default for body copy and ensures 1.5x line-height for readability on dark backgrounds. Label-md (16px, weight 600) is applied to button text with 0.02em letter-spacing for crisp, scannable UI labels. All headlines use negative letter-spacing (-0.02em to -0.01em) to tighten the visual weight and create a premium, condensed feel. On dark backgr

Layout

The layout follows a 12-column grid with a max-width of 1400px, maintaining a fluid layout on mobile and tablet with a fixed container on desktop. Section spacing uses the lg token (40px) for major section breaks, creating a rhythm that feels spacious without being wasteful. The gutter (24px) is applied consistently to all horizontal padding, ensuring alignment across cards, inputs, and text blocks. Container padding is md (24px) on tablet and lg (40px) on desktop. Hero sections use full-bleed backgrounds with centered content constrained to the container max-width. Card grids typically use 3 columns on desktop, 2 on tablet, and 1 on mobile, with md (24px) gap between cards. Whitespace is intentional: the dark background (#07081b) acts as a visual rest, so content breathing room is critica

Elevation & Depth

Depth is conveyed through layered shadows and background color shifts rather than bright highlights. Level 1 (Base): surface (#07081b) with no shadow, used for the page background and flat UI elements. Level 2 (Standard Card): surface-container (#0f1028) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, modals, and floating elements. Level 3 (Elevated/Hover): surface-container-high (#1a1b2f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), applied on card hover and modal overlays. Interactive elements (buttons, inputs) use a subtle inset shadow on focus: inset 0 0 0 2px rgba(0, 24

Shapes

The shape philosophy is "Soft-Technical"—combining rounded corners with geometric precision to balance approachability and modernity. Buttons and chips use full (100rem) border-radius, creating pill-shaped affordances that feel friendly and clickable. Cards and containers use lg (1rem / 16px) border-radius, softening the edges without appearing overly organic. Input fields use DEFAULT (0.5rem / 8px) border-radius for a more structured, form-like appearance. Modals and elevated surfaces use xl (1.5rem / 24px) border-radius to signal prominence. Small UI elements (badges, tags) use full (100rem)

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background: {colors.primary} (#00f092), text-color: {colors.on-primary} (#07081b), padding: 12px 24px, height: 48px, border-radius: 100rem, font-weight: 600. On hover, transition to background: {colors.primary-container} (#00d97f) with a 200ms ease-out timing. The secondary button is transparent with a 2px border in primary green, same padding and height, used for non-destructive actions. Tertiary buttons use a subtle outline (1px solid {colors.outline}) and surface-container-high background on hover. All buttons include a 4px focus ring in rgba(0, 240, 146, 0.3) for keyboard navigation. Containers & Surfaces Cards are the primary content container: background: {colors.surface-container} (#0f1028),

Do's and Don'ts

**Do**

• Do use primary green (#00f092) exclusively on CTAs, active states, and brand-critical interactive elements—it is the visual signature and must not be diluted.
• Do maintain high contrast: white text (#ffffff) on dark surfaces (#07081b) achieves WCAG AAA compliance and ensures readability in bright sunlight.
• Do apply full (100rem) border-radius to buttons and chips to signal affordance and friendliness—this is a brand signature.
• Do use the lg (40px) spacing token for section breaks and the md (24px) token for component padding to maintain rhythm and breathing room.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for a responsive, polished feel.
• Do layer shadows (0 3px 8px, 0 8px 24px) to create depth without using bright highlights—the dark background is the canvas.

**Don't**

• Don't use primary green on non-interactive elements or as a background color—reserve it for CTAs and active states only.
• Don't apply border-radius smaller than lg (1rem) to cards or major containers; it breaks the soft-technical aesthetic.
• Don't use light gray or near-white text on dark backgrounds without testing contrast; aim for pure white (#ffffff) or near-white (#c4c7c8) only.
• Don't mix rounded and sharp corners within a single component; maintain consistency (e.g., all buttons use full, all cards use lg).
• Don't add drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadow depth conflicts with the minimalist aesthetic.
• Don't use secondary colors (blue, teal) on primary CTAs; primary green is non-negotiable for the most important actions.