CANAL+

Overview

CANAL+ is a premium French streaming platform delivering live sports, series, films, and TV content to millions of viewers. The design system embodies a bold, entertainment-forward aesthetic rooted in "High-Contrast Decisiveness"—a visual language that prioritizes clarity, urgency, and immediate action. The brand personality is confident, direct, and sports-centric: the interface celebrates live moments, breaking news, and premium content with vivid accent colors that cut through dark backgrounds. Voice: energetic yet authoritative, never apologetic. Example: "Vibrez au cœur des plus grandes compétitions en live" (Feel the pulse of the greatest live competitions).

The UI philosophy rejects subtlety in favor of purposeful contrast. Every interactive element—from primary CTAs to status indicators—uses the signature red-pink (#dc314e) to signal importance and drive engagement. The dark canvas (rgb(14, 14, 14)) provides a cinema-like viewing experience, while typography in the proprietary Canal font and Hind creates a modern, sports-broadcast aesthetic. The system is built for rapid scanning and decisive interaction, reflecting the real-time nature of live streaming.

Colors

CANAL+ employs a dark-first color strategy optimized for video content and live sports. The surface stack anchors at #0e0e0e (surface), descending to #050505 (surface-dim) for recessed elements and ascending to #2c2c2c (surface-container-highest) for elevated modals and overlays. All surfaces use near-black tones (rgb(14, 14, 14) to rgb(44, 44, 44)) to minimize distraction from hero imagery and video players.

Primary (#dc314e, rgb(220, 49, 78)) is the brand's signature accent—a bold red-pink deployed on all primary CTAs, active states, and live indicators. This color appears on the "NOS OFFRES" button, subscription prompts, and any element demanding immediate user attention. Secondary (#3f8964, rgb(63, 137, 100)) is a muted forest green used sparingly for success states and partner badges

Typography

The type system pairs the proprietary Canal font (a bold, geometric display typeface) with Hind (a humanist sans-serif) to create a broadcast-meets-digital aesthetic. Canal is deployed exclusively for headlines (display, headline-lg, headline-md) at weights 600–700, delivering the brand's distinctive voice at large scales. Hind handles all body copy, labels, and UI text at weights 400–600, ensuring legibility at small sizes and rapid scanning.

Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight, -0.02em tracking) titles content sections and modals. Body-md (16px, 400 weight) is the baseline for all body copy and form labels, set at 24px line-height for comfortable reading over dark backgrounds. Label-md (14px, 600 weigh

Layout

CANAL+ uses a fluid 12-column grid with a max-width of 1280px (container-max-width: 1280px), allowing content to scale responsively from mobile to desktop. The page rhythm is driven by lg spacing (40px) for section separation, creating breathing room between hero, content rows, and footer. Gutter spacing (24px) defines the horizontal margin on all sides, ensuring content never touches viewport edges.

The hero section occupies full viewport height with a dark overlay (rgba(0, 0, 0, 0.7)) over video or image backgrounds, allowing typography and CTAs to float above rich media. Content rows below the fold use md spacing (24px) for internal padding and sm spacing (12px) for item-to-item separation within carousels and grids. Modal dialogs and overlays apply lg spacing (40px) for internal paddi

Elevation & Depth

Depth in CANAL+ is conveyed through layered shadows and strategic background color shifts rather than blur or transparency. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and borders, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.25)) for modals and floating panels. Cards in content rows use md elevation by default, transitioning to lg on hover to signal interactivity. Modal overlays layer a backdrop-filter: blur(4px) with background: rgba(0, 0, 0, 0.7) to create visual separation from

Shapes

CANAL+ employs a "Broadcast-Sharp" shape philosophy: minimal, geometric border-radius values that evoke the precision of live sports graphics and broadcast design. Buttons and inputs use sm radius (0.25rem / 4px), creating crisp, nearly-square corners that feel technical and authoritative. Cards and larger containers use md radius (0.75rem / 12px), providing subtle softness without compromising the bold aesthetic. Modals and floating panels use lg radius (1rem / 16px) to distinguish them as elevated, premium surfaces. Badges and pills use full radius (9999px) for a modern, app-like appearance.

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #dc314e background with white text, 44px height, 12px vertical / 24px horizontal padding, and sm border-radius (4px). On hover, the background shifts to #ec3654 (primary-container) with a 200ms ease-out transition. Active/pressed state applies inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) and shifts to #d80c2e (inverse-primary) to signal engagement. Secondary buttons use transparent background with a 1px solid border at #757575 (outline), maintaining the same height and padding. On hover, secondary buttons fill with #242424 (surface-container-high) and border shifts to #d6d6d6 (on-surface-variant). All button text uses label-md typography (14px, 600 weight) and applies font-weight: 600 for emphasis.

#

Do's and Don'ts

**Do**

• Do use primary (#dc314e) exclusively for CTAs, live indicators, and active states—never for decorative elements or backgrounds.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lg elevation (0 8px 24px rgba(0, 0, 0, 0.25)) to modals to maintain clear visual hierarchy.
• Do set line-height to 24px or greater for body-md text over dark backgrounds to ensure comfortable reading and reduce eye strain.
• Do use Canal font exclusively for headlines (display, headline-lg, headline-md) at 600–700 weight; never use it for body copy or labels.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels (label-sm, label-md) when they appear over video or busy imagery.
• Do transition all interactive states (hover, focus, active) over 200ms using ease-out timing to feel responsive without jarring.

**Don't**

• Don't use primary color (#dc314e) for backgrounds, surfaces, or non-interactive text—reserve it for actions and live indicators only.
• Don't apply border-radius greater than lg (16px) on any component; the brand aesthetic demands sharp, geometric precision.
• Don't use system fonts (system-ui, -apple-system, BlinkMacSystemFont) for headlines; always load Canal font via @font-face or preload links.
• Don't set line-height below 24px for body text on dark backgrounds; this causes readability issues and violates WCAG contrast requirements.
• Don't mix Canal and Hind fonts within the same headline or body paragraph; maintain clear separation by role (display/headline vs. body/label).
• Don't apply shadows with blur radius greater than 24px; CANAL+ uses sharp, defined shadows that reflect broadcast design, not soft glassmorphism.