Design System Inspiration of Dailymotion

Overview

Visual Theme & Atmosphere

“The home for videos that matter.” Dailymotion’s mission page says it is “more than just a video app”: it builds “the next generation of media platforms designed to inspire millions of people to grow and share a diverse and inclusive vision of the world”, putting “listening, discovery, and kindness back at the heart of interactions”. Its legal notice names Dailymotion SA, 50 rue Camille Desmoulins, 92130 Issy-les-Moulineaux, as the service provider in the EEA.

The site is white and light grey (#f8f8f8, #f0f0f0) with near-black text #0d0d0d, and a playful accent world: a deep purple #6200ee, lavender, a pink-lavender gradient on the sign-in button, and lime decorations. Type is ABC Favorit, with DailySans for titles.

What makes it worth reading:

• Gradient borders as tokens. --action-border-active linear-gradient(46deg,#c5a1f9,#f66093), plus lavender, lime, mustard and turquoise variants.
• Layered colour naming. --color-core-* primitives (grayscale, purple, lime, states), --color-currentcolors-* for the current theme, and roles for buttons, interactive states, surfaces and effects.
• Drop shadows as colour tokens. --color-effect-dropshadow-primary-1 … -20 — ink at 1% to 20%.

Primary tasks

• Watch videos for you, explore, follow creators.
• Search; sign in.

Brand Narrative

A French video platform repositioning around nuance, listening and kindness. Its interface keeps neutral surfaces and lets gradients and a deep purple carry the personality.

Principles

• Videos that matter.
• Listening, discovery, kindness.
• Neutral surfaces, colourful accents.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on dailymotion.com/fr: 434 root custom properties — --color-* 158, --rem-* 116, --surface-* 16, --vertical-* 14, --notification-* 10 … All first-party.

Purple and decorative

• Purple (#6200ee) — --color-text-decorative-1, --color-interactive-surface-selected.
• Purple 700 (#8133f1) · Purple deep (#360083) — hover border · Lavender (#c5a1f9).
• Hover surface (#f2ebfe).
• Gradient #fab3f7 → #f682f2 → #a2a2fb · Decorative selected (#fde1fc).
• Magenta text (#8108a6) — active and visited links · Lime (#c2ff80).

Neutrals

• Foreground (#0d0d0d) · Text secondary (#2b2b2b) · Text muted (#767676).
• Canvas (#ffffff) · Surface secondary (#f8f8f8) · Surface tertiary (#f0f0f0) · Input border (#dadada).
• Error (#b72a1a).

Typography

Font family

ABC Favorit (400, 500, 700) for text and DailySans (700) for titles; both load (document.fonts).

Scale

H1 28px/500; card titles 16px/700 DailySans; buttons 14px/500; small follow buttons 12px/500.

Layout

• A slim header with search and sign-in, tabs (Pour toi, Explorer, Suivi), then a feed of video cards with creator follow buttons.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--action-button-shadow 0 0 0.5rem #0d0d0d1f; drop-shadow colour tokens from 1% to 20%.

Motion & Easing

Not measured.

Components

Measured with a hover counted only when :hover matched. Focus showed only the browser’s ring and is not recorded.

• Gradient button — Se connecter: a 228° #fab3f7 → #f682f2 → #a2a2fb gradient, #0d0d0d 14px/500, 6px, 40px. Hover paints a solid #f682f2; press #fde1fc.
• Secondary — Rechercher: #f8f8f8. Hover adds a 0 0 8px rgba(13,13,13,.12) shadow; press #f0f0f0.

Radius

6px on buttons.

States

Hover: the gradient turns solid pink; grey buttons gain a soft shadow. Press: pale pink #fde1fc; grey #f0f0f0. Focus: the browser’s ring (not recorded).

Do’s and Don’ts

Do

• Keep the page neutral and put colour in accents: purple, lavender gradients, lime.
• Use gradient borders for active states.
• Set titles in DailySans and text in ABC Favorit.

Don’t

• Don’t fill large areas with the purple.
• Don’t use pure black; the ink is #0d0d0d.
• Don’t flatten the sign-in gradient to one colour at rest.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#6200ee purple · #c5a1f9 lavender · #f682f2 pink · #fde1fc pale pink · #c2ff80 lime · #0d0d0d ink · #f8f8f8 surface · #8108a6 magenta link

Example Component Prompts

• “A 40px button with a 228° #fab3f7 → #f682f2 → #a2a2fb gradient, #0d0d0d 14px/500 ABC Favorit, 6px radius; hover solid #f682f2, press #fde1fc.”
• “A light grey #f8f8f8 button that gains a soft 8px shadow on hover.”

Governance

Known Gaps

• Contrast, button-gradient. Text #0d0d0d on #00000000 measures 1.08:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.