Criteo Design System Deep Dive

1. Brand Overview

Criteo’s site feels corporate-tech, but not sterile. This is a B2B ad-tech giant, so the design language is about credibility first, performance second. It’s not here to entertain—it’s here to close deals, explain complex products, and look global. No playful illustrations or ultra-soft palettes—the focus is on clean geometry, high-contrast typography, and a restrained but confident color system.

The vibe: professional, slightly futuristic, but approachable. They’re not pushing ultra-minimalism; there’s enough rounded corners and subtle shadows to keep things human. The primary blue (#006cd6) and deep violet (#3d1ef8) are the workhorses—both bold and saturated, instantly catching the eye in CTAs. White (#ffffff) dominates as the background, which keeps everything fresh and legible.

Typography is all Graphik LC Web with occasional Mona Sans for uppercase labels. Graphik is a good choice here—neutral, modern, versatile. It’s a typeface that doesn’t scream “look at me” but still gives a tech-savvy edge.

Spacing is on an 8px grid, predictable and easy to scale. Buttons have generous padding, which makes them feel substantial. Radii range from tight 4px to a dramatic 100px for large curves—this mix keeps the system flexible.

Overall: This is a design system for a global SaaS platform that sells to marketers and brands. It’s not experimental—it’s consistent, legible, and scalable. The audience is business decision-makers, so clarity and trust are front and center.

2. Color System

2.1 Primary Colors

The hero color is deep violet (#3d1ef8). It’s used in primary buttons, highlighted links, and some borders. Psychologically, violet suggests creativity and premium quality—fitting for a brand selling ad intelligence. The secondary strong player is blue (#006cd6), a more conventional tech color, used for links and footer branding.

White (#ffffff) is the default background—safe, neutral, perfect contrast with the saturated primaries. The secondary semantic color is a lavender (#d8d2fe), which softens the palette when needed—often in secondary buttons.

Compared to competitors (think Google Ads, The Trade Desk), Criteo’s palette leans more into violet than pure blue, which gives them a slightly more distinctive visual hook.

2.2 Complete Palette

2.3 Color Relationships

Violet (#3d1ef8) on white is high-contrast—passes WCAG AAA. Blue (#006cd6) is also strong enough for body text or links. Lavender (#d8d2fe) on white is subtle—it’s not for text, only background fills.

The hover/focus tints are all variations of #edf7ff at different opacities. They keep interaction feedback soft, avoiding harsh color changes.

No dark mode in sight. This palette is optimized for light backgrounds.

2.4 Usage Guide

• Primary actions: Use #3d1ef8 with white text.
• Secondary actions: Use #d8d2fe with black text—don’t use violet here, it’ll compete with primary.
• Links: Default #006cd6, hover #1883fd (from states).
• Hover states: Apply #edf7ff overlays—opacity varies.
• Avoid mixing violet and lavender in the same button—they blur hierarchy.
• Never use #cccccc for text—it’s for borders/dividers only.

3. Typography

3.1 Font Families

Main font: Graphik LC Web. No Google or Adobe font source—it’s self-hosted. Fallbacks occasionally list Mona-Sans-RegularWide for uppercase captions.

Graphik is sans-serif, geometric but humanist enough for readability. Mona Sans is used for wide uppercase context, giving labels a distinct voice.

3.2 Type Scale

3.3 Hierarchy

The jump from 60px to 45px H1 sizes gives flexibility for hero vs section titles. Multiple 20–18px levels for headings and links keep smaller sections readable. The uppercase Mona Sans captions are perfect for meta labels—think “CASE STUDY” above a headline.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints range from 360px mobile up to 1600px wide desktop. This is a granular system—over 30 different breakpoints for fine-tuned responsive adjustments. Definitely not a “just 3 breakpoints” approach—this is pixel-perfect control.

5. Visual Elements

Border Radius: From 0px (square) to 100px (big pill shapes). Key points:

• 8px: default for buttons and images.
• 12px: common for cards and divs.
• 20px: used for larger containers/dialogs.
• 100px: extreme curves—probably avatars or decorative shapes.

Shadows: Minimal use. Mostly low-opacity black shadows with small blurs, e.g., rgba(0,0,0,0.1) 0px 2px 10px.

Borders: Light greys for dividers (rgba(0,0,0,0.1)), violet borders on buttons, occasional semantic borders (#d8d2fe).

6. Components

6.1 Buttons

Primary Button (#3d1ef8):

• Default: white text, 16px vertical padding, 8px radius, 1px violet border.
• Hover: same color, 0.7 opacity, scale(1.1), subtle shadow.
• Active: green background (#009c6b), black text, scale(0.85).
• Focus: sky blue background (#1eaedb), white text, 0.7 opacity.

Secondary Button (#d8d2fe):

• Default: black text, 20px vertical padding, 8px radius, lavender border.
• Hover: no background change, translateY(3px).
• Active: green background, black text.
• Focus: sky blue background, 0.7 opacity.

Text Button:

• Default: transparent background, black text.
• Hover: dark grey background.
• Active: dark grey background, white text.
• Focus: darker grey background.

Small Dark Button:

• Default: black background, white text, 4px radius.
• Hover: translateY(3px).
• Active: green background, black text.
• Focus: sky blue background, 0.7 opacity.

6.2 Links

Four variants:

• White text → hover to blue (#1883fd)
• Transparent text → hover blue
• Blue (#006cd6) → hover blue (#1883fd)
• Violet (#3d1ef8) → hover blue (#1883fd)

No underlines in default state—hover states keep it clean.

6.3 Forms

Inputs use 1px borders in black or light grey, with small radii (4px–8px). Focus states use color changes rather than heavy outlines.

6.4 Cards

Mostly white backgrounds, 12px or 20px radii, minimal shadows—depth comes from light borders.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-blue: #006cd6;
  --color-grey-mid: #cccccc;
  --color-violet: #3d1ef8;
  --color-lavender: #d8d2fe;
  --color-lightblue-tint: #edf7ff;

  /* Typography */
  --font-graphik: "Graphik LC Web", sans-serif;
  --font-mona-sans: "Mona-Sans-RegularWide", var(--font-graphik);

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --space-72: 72px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-xxl: 100px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
  --shadow-hover: rgba(0, 0, 0, 0.18) 0px 3px 22px 1px;
}

8. AI Coding Assistant Prompt

# Criteo Design System Specification

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

## Brand Context
Criteo is a global ad-tech company. Their design language is corporate-tech with a confident violet primary and clean white backgrounds. Typography is modern sans-serif, spacing is on an 8px grid, and components use rounded corners with minimal shadows.

## Color Palette
- Primary Violet: #3d1ef8 — Primary buttons, highlighted links
- Blue: #006cd6 — Links, footer logo
- White: #ffffff — Background
- Mid Grey: #cccccc — Borders, dividers
- Lavender: #d8d2fe — Secondary buttons, soft fills
- Light Blue Tint: #edf7ff — Hover/focus backgrounds

## Typography
- Headings: "Graphik LC Web"
- Captions: "Mona-Sans-RegularWide"
- Sizes:
  - H1: 60px / 500 / 1.10
  - H1 small: 45px / 500 / 1.20
  - Button large: 40px / 700 / 1.00
  - H2: 32px / 500 / 1.20
  - Caption: 14px / 500 / 1.30 uppercase

## Spacing & Grid
Base: 8px
Scale: 4px, 5px, 8px, 16px, 24px, 48px, 72px

## Border Radius
- none: 0px — tables
- sm: 4px — inputs
- md: 8px — buttons
- lg: 12px — cards
- xl: 20px — modals
- full: 100px — pill shapes

## Shadows & Depth
Minimal shadows:
- Hover shadow: rgba(0, 0, 0, 0.18) 0px 3px 22px 1px

## Components

### Primary Button
Default: bg #3d1ef8, color #fff, padding 16px 24px, radius 8px, border 1px solid #3d1ef8
Hover: opacity 0.7, scale 1.1, shadow hover
Active: bg #009c6b, color #000, scale 0.85
Focus: bg #1eaedb, color #fff, opacity 0.7

### Secondary Button
Default: bg #d8d2fe, color #000, padding 20px 24px, radius 8px, border #d8d2fe
Hover: translateY(3px)
Active: bg #009c6b, color #000
Focus: bg #1eaedb, opacity 0.7

### Navigation Links
Default: color #006cd6, no underline
Hover: color #1883fd

### Inputs
Border: 1px solid rgba(0,0,0,0.1), radius 4px–8px
Focus: border-color #3d1ef8

### Cards
bg #fff, radius 12px–20px, border rgba(0,0,0,0.1), padding 16px–24px

## Layout & Responsive Rules
Breakpoints: 360px, 425px, 768px, 1024px, 1200px, 1600px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: color change + border

## DO List
- Use only palette colors
- Maintain 8px spacing grid
- Use Graphik LC Web for all headings/body
- Keep hover states subtle
- Use correct radius per component

## DON'T List
- Don't invent new colors
- Don't mix sharp corners with rounded
- Don't use heavy shadows
- Don't alter hover opacity rules

## Code Examples

.btn-primary {
  background: #3d1ef8;
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #3d1ef8;
  transition: all 150ms ease;
}
.btn-primary:hover {
  opacity: 0.7;
  transform: scale(1.1);
  box-shadow: rgba(0,0,0,0.18) 0px 3px 22px 1px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.1);
}

9. Summary

TL;DR — Criteo’s design system is clean, corporate-tech, and violet-forward. Graphik LC Web keeps typography crisp, the palette is limited but confident, and the 8px grid plus consistent radii make it easy to scale.

Brand Keywords: violet-tech, corporate-clean, grid-disciplined, modern-sans