IPL T20

Overview

IPL T20 is the official digital home of the Indian Premier League, the world's premier T20 cricket tournament. The design system serves millions of passionate cricket fans seeking live scores, match updates, team standings, and exclusive video content. The aesthetic is **Dynamic Sports Authority**—combining the gravitas of deep navy (#19398a) with the electric energy of a vibrant red-orange (#ef4123) that commands attention on every call-to-action. The brand personality is confident, fast-paced, and fan-centric: every interaction celebrates the sport's intensity while maintaining clarity under high-traffic conditions. Voice: energetic yet authoritative, never sensational. Example: "Siraj's 5-wide over shifts momentum—watch the replay in 4K."

Colors

The IPL color system is built on a **High-Contrast Sports Model** that prioritizes legibility and emotional impact. Primary (#ef4123) is the signature accent—used exclusively on CTAs, live-score highlights, and critical interactive states. It appears on the Play button, primary action buttons, and active navigation items, creating a visual pulse throughout the interface. Secondary (#19398a) is the brand's authoritative navy, establishing trust and professionalism; it anchors the header, navigation bar, and secondary buttons. Tertiary (#ffc107) is the accent highlight for badges, match status indicators, and celebratory moments—think "Player of the Match" or "Milestone Reached." The surface stack uses a clean white (#ffffff) base with carefully calibrated grays (surface-container-low: #e9ec

Typography

The type system centers on **Bricolage Grotesque**, a geometric sans-serif that conveys modern energy and sports dynamism. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like "IPL Exclusive" or tournament announcements. Headline-lg (40px, 700 weight) anchors major section titles and match cards. Headline-md (28px, 700 weight) is used for match summaries and player spotlights. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for match descriptions and news articles. Body-md (16px, 400 weight, 24px line-height) handles form labels, metadata, and secondary content. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to buttons, badges, and navigation items—the 0.02em

Layout

The layout follows a **12-column fluid grid** with a maximum container width of 1320px, ensuring responsive scaling from mobile (320px) to ultra-wide displays (1920px+). The gutter spacing is consistently 24px (md spacing unit), creating rhythm between sections. Hero sections use full-width backgrounds (no container constraint) with overlay content positioned at 40px (lg spacing) from edges. Card grids use 24px gaps between items. The page rhythm alternates between dense content zones (match cards, live scores) and breathing room (40px lg spacing between major sections). Navigation and header use 12px (sm spacing) for internal padding; buttons use 12px vertical × 24px horizontal padding to maintain 48px minimum touch target height. Container max-width of 1320px ensures readability on large

Elevation & Depth

Depth is conveyed through a **Layered Clarity Model** using subtle shadows and strategic layering, not darkness. Level 1 (Base): white background (#ffffff) with no shadow—the canvas for all content. Level 2 (Standard Cards): 0 4px 12px rgba(0,0,0,0.08) shadow with 1px border in surface-variant (#e9ecef), creating a soft lift. Level 3 (Elevated/Modals): 0 16px 40px rgba(0,0,0,0.12) shadow with 1px border in outline-variant (#adb5bd), signaling modal importance. Interactive elements (buttons, chips) use context-specific shadows: primary buttons get 0 4px 12px rgba(239, 65, 35, 0.25) to reinforce

Shapes

The shape philosophy is **Geometric Precision with Approachability**—sharp enough to feel modern and athletic, rounded enough to feel welcoming. Buttons use 0.75rem (12px) border-radius, balancing the geometric grid with soft corners that invite interaction. Cards use 1rem (16px) for standard content cards, 1.5rem (24px) for elevated/modal cards—the increased radius signals importance. Input fields use 0.5rem (8px) for subtle definition without distraction. Badges and chips use full (9999px) border-radius to create pill shapes that feel energetic and distinct. The rationale: sports interfaces

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** (background: #ef4123, text: white, 48px height, 12px × 24px padding, 12px radius) is used for all critical CTAs: Play video, Book tickets, Submit form. On hover, background shifts to #d63a1f with shadow expansion (0 8px 20px rgba(239, 65, 35, 0.35)) and a 200ms transition. Active state darkens further to #c63318 with reduced shadow (0 2px 8px rgba(239, 65, 35, 0.2)). **Button-secondary** (background: #19398a, text: white, 48px height) is used for secondary actions like "View More" or "Filter Results." **Button-ghost** (transparent background, 2px border in #ef4123, text: #ef4123) is used for tertiary actions and navigation links; on hover, background becomes rgba(239, 65, 35, 0.08) with no border change. Al

Do's and Don'ts

**Do**

• Do use primary (#ef4123) exclusively on CTAs and live-action elements—never on passive backgrounds or body text.
• Do maintain 48px minimum touch target height on all interactive elements (buttons, chips, list items).
• Do apply 24px gutter spacing between sections and 12px padding within cards for consistent rhythm.
• Do use Bricolage Grotesque at 700 weight for all headlines to convey energy and authority.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.4) on small labels over video backgrounds for legibility.
• Do transition all interactive states over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, purposeful motion.
• Do use the full rounded token (9999px) for badges and chips to create distinct, energetic shapes.
• Do layer cards with 0 4px 12px rgba(0,0,0,0.08) shadow and 1px border in #e9ecef for subtle depth.

**Don't**

• Don't use primary color on passive elements like section backgrounds or body text—reserve it for interactive moments.
• Don't create touch targets smaller than 48px height or 44px width; cricket fans interact on mobile at speed.
• Don't introduce arbitrary spacing values outside the defined scale (xs, sm, md, lg, xl); maintain grid discipline.
• Don't apply drop-shadows to body text or small labels except over video backgrounds; it reduces legibility.
• Don't use secondary (#19398a) as a hover state for primary buttons—always darken the primary color itself.
• Don't exceed 1320px container max-width; wider layouts reduce readability and dilute focus on match data.
• Don't mix border-radius values across similar components; use the rounded token scale consistently.
• Don't animate shadows on non-interactive elements; reserve shadow transitions for buttons, cards, and hover states.