Dailymotion Design System Deep Dive

1. Brand Overview

Dailymotion has been around long enough to know exactly what it is — a video-first platform with a global audience, but a very European design sensibility. The current visual language is stripped down, functional, and dark-interface-forward. No candy gradients. No hyper-polished skeuomorphism. This is a brand that believes the content is the hero, and the UI's job is to stay out of the way.

The vibe: utilitarian, but not cold. They use minimal ornamentation, a restrained palette, and typography that feels modern and editorial without screaming for attention. ABCFavorit and DailySans are not your default web fonts — they give Dailymotion a distinct typographic voice. There's a hint of playfulness in the letterforms (especially DailySans's heavier weights) but the layouts keep everything tight and controlled.

The audience? Heavy content consumers, creators, and partners. The site has to work for someone watching a music video at 2am and for a partner uploading branded content. That means the design system must be flexible: buttons that read clearly in both light and dark contexts, links that signal interactivity without overpowering, and a spacing rhythm that can adapt from mobile to widescreen without breaking.

Philosophy-wise, this is a brand that leans on consistency over novelty. The 8px grid is everywhere. Border radii are predictable. Colors are reused in precise roles. And there's almost zero decorative shadowing — depth is handled with contrast and occasional light borders, not fuzzy drop shadows. It’s closer to the design systems of utilitarian tools (think GitHub) than entertainment giants like Netflix.

I like that. It means their UI is maintainable. It means fewer one-off styles. It means developers can build new pages without hunting for “that special blue” or “that weird button shape.” The rules are visible in the code, not just in a PDF brand guide.

2. Color System

2.1 Primary Colors

The primary brand color here isn’t a saturated brand blue or red — it’s white (#ffffff) in semantic tokens for both primary and secondary. That’s unusual. It means the brand’s “primary” designation is about semantic role, not a specific hue. In practice, the interface’s dominant color for text and background interplay is rgb(13, 13, 13) (#0d0d0d) — a near-black — and rgb(0, 0, 238) (#0000ee) — the default link blue.

This works because Dailymotion’s UI is meant to be content-led. They let text and standard browser link blue carry the interaction cues. The dark near-black background is high-contrast against white text for accessibility. Compared to YouTube’s brand red, Dailymotion’s choice is more understated — it doesn’t brand every clickable element, it lets content thumbnails and creators’ visuals bring the color.

2.2 Complete Palette

This palette is tight. Most colors are functional neutrals. The hover/focus states are the only pops of chroma beyond the link blue.

2.3 Color Relationships

Contrast is strong. #0d0d0d against #ffffff is a WCAG AAA-level combination for text. #0000ee on white is also AAA, though the hue can be fatiguing if overused. The hover blue #005fcc deepens saturation without breaking contrast. Light greys #dadada and #e8e8e8 are close in luminance — they’re used for subtle layering, not for major separation.

There’s no explicit dark mode toggle because the base UI is already dark-background-first. Accessibility-wise, the link blue stands out clearly against both white and light grey; against #0d0d0d it’s slightly less vibrant but still passes.

2.4 Usage Guide

• Primary combinations: White text on near-black background. Link blue on white background.
• Avoid: Link blue on light grey — low contrast, looks washed out.
• Hover states: Shift from #0000ee to #005fcc for a more intentional feel. Dark grey hover (#414141) works for icons or neutral buttons.
• Accents: Pink hover (#fab3f7) is rare — keep it for special promo UI, not general buttons.
• Borders: Use #dadada or #e8e8e8 for light separators; true black only for strong emphasis.

3. Typography

3.1 Font Families

Two core families:

• ABCFavorit — Modern grotesk, clean but with personality. Used across headings, body, links, and buttons. Fallbacks: Arial, Helvetica.
• DailySans — Custom brand sans, heavier and more editorial. Used for key headings and captions. Fallbacks: ABCFavorit, Arial, Helvetica.

No Google Fonts or Adobe Fonts — these are custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

The scale is compressed — the jump from 28px to 16px is huge, then most body/UI text sits at 14px or 12px. That keeps the interface tight and dense, which suits a content grid. The heavier weights in DailySans at key headings demand attention without needing massive size.

Links often get bold (700) to signal interactivity. Captions range from 400 to 700 weight, with 12px used for metadata. The lack of large display sizes (> 28px) shows they’re not doing huge hero headlines — video thumbnails are the hero, not text banners.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, with occasional 4px increments for tighter control.

4.2 Layout

No explicit breakpoints in data, but the scale suggests responsive design on an 8px grid. Large fixed dimensions (129px, 408px) likely map to thumbnail sizes at certain breakpoints. Page padding probably uses 12px/24px increments.

5. Visual Elements

Border Radius

They stick to a few key radii: 6px for most UI controls, 9px for larger blocks, 50% for avatars/badges.

Shadows

Only two instances:

• rgba(13, 13, 13, 0.19) 0px 0.85008px 3px 0px
• rgba(0, 0, 0, 0.2) 0px 2px 4px 0px

Very restrained — most UI is flat.

Borders

Various 1px solids (#0d0d0d, #f8f8f8, rgba blue at 0.1 alpha) plus rare 2px outset/inset. Borders are functional, not decorative.

6. Components

6.1 Buttons

Search Button
Default:

• Background: #f8f8f8
• Color: #0d0d0d
• Padding: 0px 16px
• Radius: 6px
• Border: 1px solid #f8f8f8
• Font: ABCFavorit, 14px, weight 500

Primary Button
Default:

• Background: #0d0d0d
• Color: #ffffff
• Padding: 0px 16px
• Radius: 6px
• Border: 1px solid #0d0d0d
• Font: ABCFavorit, 14px, weight 500

App Promotion Button
Default:

• Background: #ffffff
• Color: #0d0d0d
• Padding: 6px 14px 6px 6px
• Radius: 12px
• Border: none
• Font: ABCFavorit, 14px, weight 400

Hover/active/focus states are not defined in data — likely minimal changes.

6.2 Links

Three styles:

1. #0d0d0d, underline, weight 700
2. #0000ee, no underline, weight 400
3. #000000, no underline, weight 500

Underline is reserved for dark text links; blue links rely on color alone.

6.3 Forms

No text input styles in data — likely default browser styles with brand font and radius.

6.4 Cards

No explicit card component in data, but 9px radius and light grey backgrounds suggest card-like containers.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black-near: #0d0d0d;
  --color-link-blue: #0000ee;
  --color-black-true: #000000;
  --color-grey-light-1: #dadada;
  --color-grey-light-2: #e8e8e8;
  --color-white: #ffffff;
  --color-blue-hover: #005fcc;
  --color-grey-hover: #414141;
  --color-pink-hover: #fab3f7;

  /* Typography */
  --font-primary: "ABCFavorit", Arial, Helvetica;
  --font-secondary: "DailySans", "ABCFavorit", Arial, Helvetica;
  --font-size-h1: 28px;
  --font-size-body-lg: 16px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --line-height-tight: 1.14;
  --line-height-body: 1.25;
  --line-height-caption: 1.60;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 20px;
  --space-section: 24px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: rgba(13, 13, 13, 0.19) 0px 0.85008px 3px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
}

8. AI Coding Assistant Prompt

# Dailymotion Design System Specification

You are a Dailymotion design expert. Build UIs matching their visual language exactly.

## Brand Context
Dailymotion's design is utilitarian, dark-interface-first, with a restrained palette and modern sans-serif typography. Content is the hero; UI elements are functional and minimal.

## Color Palette
- Near Black: #0d0d0d — Backgrounds, primary text
- Link Blue: #0000ee — Links
- True Black: #000000 — Borders, text
- Light Grey 1: #dadada — Dividers, subtle backgrounds
- Light Grey 2: #e8e8e8 — Surfaces
- White: #ffffff — Text on dark, backgrounds
- Brand Blue Hover: #005fcc — Hover/focus for interactive elements
- Dark Grey Hover: #414141 — Hover/focus for neutral elements
- Pink Accent Hover: #fab3f7 — Special accents

## Typography
- Primary Font: "ABCFavorit", Arial, Helvetica
- Secondary Font: "DailySans", "ABCFavorit", Arial, Helvetica

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 (ABCFavorit) | 28px | 500 | — | Page titles |
| H1 (DailySans) | 28px | 700 | 1.14 | Section headings |
| Body Large | 16px | 500/700 | — | Subheadings, metadata |
| Body | 14px | 400/500/700 | 1.25 | UI text |
| Caption | 12px | 500 | 1.60 | Metadata, labels |

## Spacing & Grid
Base: 8px. Scale: 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px.  
Use multiples of 8px for layout; 12px for button padding; 24px for section spacing.

## Border Radius
- xs: 2px — Dialogs, small buttons
- sm: 6px — Buttons, inputs
- md: 9px — Cards, images
- lg: 12px — Special buttons
- xl: 14px — Large buttons
- full: 50% — Avatars, badges

## Shadows & Depth
Minimal:  
- Light: rgba(13, 13, 13, 0.19) 0px 0.85008px 3px 0px  
- Medium: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px

## Components

### Primary Button
```css
.btn-primary {
  background: #0d0d0d;
  color: #ffffff;
  padding: 0px 16px;
  border-radius: 6px;
  border: 1px solid #0d0d0d;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
}
.btn-primary:hover { background: #005fcc; }
.btn-primary:focus { outline: 2px solid #005fcc; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button (Search)
```css
.btn-secondary {
  background: #f8f8f8;
  color: #0d0d0d;
  padding: 0px 16px;
  border-radius: 6px;
  border: 1px solid #f8f8f8;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
}
```

### Link
```css
.link {
  color: #0000ee;
  text-decoration: none;
  font-weight: 400;
}
.link:hover { color: #005fcc; }
```

### Card
```css
.card {
  background: #e8e8e8;
  border-radius: 9px;
  padding: 12px;
}
```

## Layout & Responsive Rules
- Max content width: not defined; use fluid grid with 8px base
- Mobile padding: 12px; desktop: 24px
- Grid gap: 8px–24px depending on context

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: 2px solid hover color
- Avoid heavy shadows; use borders for depth

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use ABCFavorit for UI text; DailySans for headings
- Keep hover states subtle
- Use consistent border radius per component type

## DON'T List
- Don't introduce new colors
- Don't mix sharp and rounded corners
- Don't use heavy shadows
- Don't break spacing rhythm
- Don't overload text sizes beyond defined scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0d0d0d;
  color: #ffffff;
  padding: 0px 16px;
  border-radius: 6px;
  border: 1px solid #0d0d0d;
}
```

Card:
```css
.card {
  background: #e8e8e8;
  border-radius: 9px;
  padding: 12px;
}
```

Input:
```css
.input {
  border: 1px solid #dadada;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
}
.input:focus { border-color: #005fcc; }
```

9. Summary

TL;DR — Dailymotion’s design system is dark, minimal, and content-first. Tight palette, custom sans-serif typography, 8px grid, and consistent corner radii make it predictable and easy to extend.

Brand Keywords

• content-first-minimalism
• dark-ui-functional
• typographically-distinct
• restrained-interactions
• utilitarian-consistency