Blitz.gg

Overview

Blitz.gg is a competitive gaming intelligence platform that transforms billions of match data into actionable overlays, statistics, and meta insights for esports players. The design system embodies **High-Contrast Competitive Minimalism**—a visual language that prioritizes clarity, speed, and decisiveness in high-stakes gaming environments. The aesthetic combines a near-black canvas (rgb(14, 16, 21)) with vibrant accent colors (neon pink #ff003d, electric orange #f59511, cyan #00d4ff) that signal urgency, interactivity, and status hierarchy. The UI evokes the precision of professional esports broadcasts: every element is intentional, every color carries semantic weight, and every interaction is instantaneous.

The brand voice is authoritative yet accessible—speaking to both casual players and esports professionals with equal confidence. Tone: direct, data-driven, never condescending. Vocabulary favors gaming terminology (overlay, meta, tier, rank) and technical precision. Example sentence: 'Your live stats update every 3 seconds—stay ahead of the meta.'

Colors

The color system is built on a **dark-first, accent-driven hierarchy** optimized for extended screen time and competitive focus. The surface stack anchors around near-black (surface: #0e1015, surface-dim: #0a0c10) with carefully calibrated container layers (surface-container: #21242d, surface-container-high: #2d3039) that provide visual separation without introducing visual fatigue. Text defaults to high-contrast light gray (on-surface: #ebecf0, rgb(235, 236, 240)) for 16px body text, ensuring WCAG AAA compliance at 18:1 contrast ratio.

Primary (#ff003d) is the brand's signature accent—a neon pink used exclusively on CTAs (Download Blitz button), active states, and critical interactive elements. It appears in a linear gradient on primary buttons: linear-gradient(155deg, lch(59% 93.6 19.17

Typography

The type system uses a single typeface—Inter—across all scales, prioritizing legibility and consistency in data-dense interfaces. Display (60px, 700 weight, -0.04em tracking) anchors hero headlines like 'Overlays, Personalized Stats, and Meta Insights Powered by Billions of Matches' (rendered at 36px, 725 weight on-page). Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure section hierarchies with tight -0.02em and -0.01em letter-spacing respectively, creating visual compression that signals importance. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle descriptive copy and stat labels with generous line-height for readability. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.015em track

Layout

The page uses a fluid 12-column grid with a max-width container of 1280px, responsive to viewport breakpoints at 1100px, 1000px, and 800px. The hero section spans full-width with 70dvh height (display: grid, place-content: center, gap: clamp(1.25rem, 4vw, 2rem)), creating a breathing room that scales with viewport. Content padding uses semantic tokens: gutter (24px) for standard sections, reduced to 12px (sm) on tablets and 8px (xs) on mobile. The main content area applies scrollbar-gutter: stable and scrollbar-width: thin with scrollbar-color: var(--shade6) transparent to preserve layout stability. Article grids use grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) with row-gap: 0.5rem for responsive card layouts. Footer applies margin-block-start: 12rem (192px) on desktop, red

Elevation & Depth

Depth is conveyed through a **layered shadow and backdrop-filter system** that mimics glass and atmospheric depth. Level 1 (Base Canvas): solid background rgb(14, 16, 21) with no shadow. Level 2 (Standard Cards): background rgb(21, 24, 30) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and border: 1px solid rgba(61, 68, 73, 0.3). Level 3 (Elevated Panels/Glass): background rgba(33, 36, 45, 0.8) with backdrop-filter: blur(32px), border: 1px solid rgba(255, 255, 255, 0.1), and box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), 0 0 30px 10px rgba(0, 0, 0, 0.3). The game-nav panel uses the most aggressive s

Shapes

The shape system follows **Competitive Precision**—a philosophy that balances technical sharpness with approachability. Buttons use rounded: lg (16px) for primary CTAs and secondary actions, creating a modern, friendly appearance while maintaining clear tap targets (48px height minimum). Cards and panels use rounded: xl (24px) for softer, more inviting containers that house game artwork and stats. Input fields and small interactive elements use rounded: DEFAULT (8px) for technical precision. Game icon badges and small status indicators use rounded: sm (4px) for compact, grid-friendly appearanc

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses backgroundColor: {colors.primary} (#ff003d), textColor: white, padding: 12px 24px, height: 48px, rounded: lg (16px), with typography: label-md (14px, 600 weight). On hover, transition to backgroundColor: {colors.primary-fixed-dim} (#e6003d) over 200ms cubic-bezier(0.25, 1, 0.5, 1). The primary button applies a linear gradient background: linear-gradient(155deg, lch(59% 93.6 19.17), oklch(65% .29 24.77)) for visual depth. **button-secondary** uses backgroundColor: rgba(245, 149, 17, 0.15), textColor: #f59511, same padding and height, with fontWeight: 575 (medium-bold). Hover state increases opacity to rgba(245, 149, 17, 0.25). **button-ghost** is a tertiary pattern with backgroundColor: rgba(53, 57, 64,

Do's and Don'ts

**Do**

• Do use primary (#ff003d) exclusively on CTAs and active states—never on passive text or backgrounds.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) on small labels (12px) over game artwork to maintain 4.5:1 contrast.
• Do use the glass-panel pattern (backdrop-filter: blur(32px), rgba bg) for floating UI that overlays game content.
• Do maintain 48px minimum height on all interactive buttons and 40px on secondary actions for mobile tap targets.
• Do apply transition: background-color 200ms cubic-bezier(0.25, 1, 0.5, 1) on all hover states for consistent motion.
• Do use rounded: xl (24px) on cards and rounded: lg (16px) on buttons to create visual hierarchy by radius.
• Do preserve the 18:1 contrast ratio between on-surface (#ebecf0) and surface (#0e1015) for accessibility.

**Don't**

• Don't use primary (#ff003d) on body text or non-interactive elements—it's reserved for actions and status.
• Don't apply rounded-full (9999px) to anything except badges and avatars; it breaks the competitive precision aesthetic.
• Don't reduce button padding below 12px or height below 48px on desktop—esports players need reliable tap targets.
• Don't mix backdrop-filter: blur with solid backgrounds; use glass-panel pattern (rgba + blur) for layered depth.
• Don't apply shadows deeper than 0 8px 60px rgba(0, 0, 0, 0.5) on standard cards—it creates visual chaos.
• Don't use secondary (#f59511) on primary CTAs; reserve it for secondary actions and game-specific branding.
• Don't animate opacity transitions on buttons; use background-color and transform only for 200ms motion.