ppv.st

Overview

ppv.st is a live sports streaming aggregator designed for fans who demand instant access to premium events—boxing, UFC, basketball, football, darts, and more—without friction. The platform serves a global audience of sports enthusiasts who value speed, clarity, and multi-view capability over ornamental design. The aesthetic is **Functional Minimalism with High-Contrast Drama**: a near-black canvas (#010208) punctuated by a vivid red accent (#fa1c16) that signals urgency and action, paired with cool blue accents (#206694) for secondary information hierarchy. The UI evokes the feeling of a sports ticker or live-event control room—dense, purposeful, and optimized for rapid scanning. Users should feel they're accessing insider information, not browsing a consumer app.

The brand voice is direct, energetic, and sports-native. Vocabulary leans into live-event terminology: "Live now," "Mirror list update," "Multiview," "24/7 Streams." Sentences are short and action-oriented, never apologetic. Example: "The mirror list has moved to mirrors.st—bookmark it so you always have a way to find the site." Tone is confident without arrogance, helpful without hand-holding. The design system prioritizes information density and task completion over whitespace or visual breathing room.

Colors

The color system is built on a **high-contrast dark foundation** optimized for extended viewing and rapid event scanning. Surface (#010208) is nearly pure black, creating maximum contrast against light text (on-surface: #e0e3f0, a cool off-white at ~88% lightness). This 15:1+ contrast ratio ensures legibility even in bright environments and reduces eye strain during live-event marathons.

**Primary (#fa1c16)** is a vivid red-orange used exclusively for call-to-action buttons, live indicators, and critical alerts. It appears on the "Live now" section header, primary CTAs, and the live-stream badge (red dot). This color is never used for passive elements—every instance signals actionability. On hover, primary darkens to #e01810 (20% darker) to provide tactile feedback without losing the acce

Typography

The type system uses **Public Sans** exclusively, a geometric sans-serif optimized for screen legibility and neutral tone. The hierarchy is steep: display (56px, 700 weight) for hero moments, headline-lg (32px, 700) for section titles like "Live now" and "American Football," and headline-md (24px, 700) for card titles. Body text sits at 16px (body-lg) for primary content and 14px (body-md) for secondary information like league names and viewer counts. Labels are 14px (label-md, 600 weight) for buttons and 12px (label-sm, 500 weight) for badges and metadata.

Weight distribution is deliberate: headings use 700 to command attention in a dense layout, body text uses 400 for neutral readability, and interactive elements (buttons, labels) use 600 to signal clickability. Letter-spacing is tight

Layout

The page uses a **fluid 12-column grid** with a max-width of 1600px, allowing the layout to scale from mobile to ultra-wide displays. The gutter is 16px, providing breathing room between columns without sacrificing information density. Sections are separated by 24px (lg spacing) vertically, creating clear rhythm: header (64px height), alert banner (56px with 16px padding), category chips (56px with 16px vertical padding), and card grid (variable height based on content).

The hero section ("Jump to category") uses a horizontal scroll or flex layout with 8px gaps between chips, allowing users to quickly navigate sports categories. Cards in the "Live now" section are arranged in a 4-column grid on desktop (1600px viewport), collapsing to 2 columns on tablet and 1 on mobile. Each card is 280p

Elevation & Depth

Depth is conveyed through **layered surfaces and subtle shadows** rather than dramatic drop-shadows. The base layer is the surface (#010208), which serves as the canvas. Cards sit on surface-container (#0f1428), creating a 1-level lift. On hover, cards transition to surface-container-high (#1a2235) and gain a shadow: 0 3px 8px rgba(0, 0, 0, 0.15), signaling interactivity without overwhelming the dark aesthetic.

Live-event cards use a border-based elevation system: a 1px border at rgba(250, 28, 22, 0.25) creates a glowing effect that suggests urgency and separates the card from the background.

Shapes

The shape philosophy is **Geometric Precision with Minimal Ornamentation**: rounded corners are used functionally to soften hard edges and improve touch targets, not for aesthetic softness. Buttons and inputs use 0.375rem (6px) border-radius, a subtle curve that feels modern without appearing playful. Cards use 0.75rem (12px) for slightly more visual distinction. Category chips and badges use 0.5rem (8px) to sit between buttons and cards in the hierarchy.

The full-radius (9999px) is reserved for badges and pill-shaped elements (e.g., the live indicator or count badges), where the circular for

Components

Action Elements

**Buttons** come in three variants: primary (red background, white text, 40px height, 8px 16px padding, 6px radius), secondary (transparent with 1px outline, 40px height), and ghost (no border, minimal padding, 36px height). Primary buttons use {colors.primary} (#fa1c16) and transition to #e01810 on hover with a 150ms ease-out timing. Secondary buttons gain a {colors.surface-container-high} background on hover. All buttons use {typography.label-md} (14px, 600 weight) and maintain a minimum 44px touch target height for accessibility.

Containers & Surfaces

**Cards** are the primary container for events and content. Standard cards use {colors.surface-container} (#0f1428) with 1px border at {colors.outline-variant}, 16px padding, and 12px border-radius. On hover, the

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fa1c16) exclusively for actionable elements—buttons, live indicators, and critical alerts—to maintain urgency and clarity.
• Do maintain the 15:1+ contrast ratio between surface (#010208) and on-surface (#e0e3f0) for all body text to ensure legibility during extended viewing.
• Do apply 200ms ease-out transitions on hover states (background-color, box-shadow) to provide smooth, responsive feedback without lag.
• Do use the 8px spacing unit consistently (4px, 8px, 16px, 24px, 32px) to maintain vertical and horizontal rhythm across the layout.
• Do reserve full border-radius (9999px) for badges and pill-shaped elements to signal atomic, distinct information.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) on small labels over gradient backgrounds to ensure contrast.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs—reserve {colors.primary} for actions that demand immediate attention.
• Don't exceed 12px border-radius on cards or containers; the geometric aesthetic requires precision, not softness.
• Don't add drop-shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.20)); the dark aesthetic relies on surface-based elevation, not shadow depth.
• Don't use whitespace as a design principle; information density and rapid scanning are prioritized over breathing room.
• Don't apply animations longer than 300ms or easing functions other than ease-out; the sports-ticker aesthetic demands snappy, responsive interactions.
• Don't mix font families; Public Sans is the exclusive typeface across all text, headings, and labels.