Doubleclick Design System Deep Dive

1. Brand Overview

Doubleclick, now absorbed into Google's Marketing Platform, carries the DNA of Google’s design language but with a sharper enterprise focus. This isn’t a consumer-facing playground — it’s a data-heavy, results-driven environment aimed squarely at marketers, agencies, and analysts who live in dashboards and reports. The vibe here is clean, structured, and direct. It’s “you’ve got work to do” design.

There’s zero fluff. The visual language borrows heavily from Google’s Material Design principles but strips away the softer, more playful touches. Primary blue (#1a73e8) dominates as the call-to-action and link color — no gradients, no embellishment. Neutrals are cool and controlled: deep grays (#414141, #202124), mid-tone grays (#5f6368), and subtle dividers (#dadce0). This creates a clear hierarchy between interactive elements and content.

Typography is utilitarian. Google Sans and Roboto lead, with weights tuned for clarity rather than flourish. You’ll see big, bold type for hero headings (96px, 500 weight), and lighter weights for body and UI labels (300–400). The line height choices keep the text blocks breathable without feeling lazy.

Spacing is disciplined. They stick to an 8px base grid, with some quirks (like 13.333px values) that hint at responsive adjustments or inherited Material defaults. Borders are minimal: 1px solid lines, subtle radii (2px), and occasional full-radius circles for avatars or icons. Shadows barely exist — when they do, they’re faint, functional, and mostly inset.

This is a brand system that says “precision over personality.” Perfect for an enterprise tool, but it’s not trying to win hearts — it’s trying to keep your eyes on the data. And it works.

2. Color System

2.1 Primary Colors

Primary: #1a73e8 (rgb(26, 115, 232))
This is classic Google Blue. It’s bright enough to command attention but not neon. Psychologically, it reads as trustworthy and competent — exactly what you want in a tool that handles millions in ad spend. Compared to competitors (Adobe’s reds, Facebook’s deeper blues), Doubleclick’s blue feels slightly more optimistic. It’s the workhorse color: buttons, links, primary actions.

Secondary: Transparent (rgba(0, 0, 0, 0)) — essentially “no secondary” in the traditional sense. This reinforces the minimal palette approach.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. Primary blue (#1a73e8) on white passes WCAG AA easily for normal text and large text. Black (#202124) and dark gray (#414141) on white are well above ratios. The only potential low-contrast pairing: mid gray (#5f6368) on white for small text — borderline for AAA but fine for AA.

Dark mode isn’t explicitly implemented here — the palette is tuned for light backgrounds. If you invert, the dark grays become background, and blue still pops, but light gray (#dadce0) becomes too faint for dividers.

2.4 Usage Guide

• Use #1a73e8 only for interactive elements — links, buttons, icons that trigger actions.
• Pair #ffffff text with #1a73e8 backgrounds for CTA clarity.
• Avoid using #1a73e8 for large text blocks — it’s meant to draw clicks, not to read.
• Dividers and borders should stick to #dadce0 — anything darker clutters the interface.
• Keep text in #202124 or #414141 for primary reading; reserve #5f6368 for secondary or disabled states.

3. Typography

3.1 Font Families

• Google Sans — Primary headings. Fallbacks: Roboto, Arial, Helvetica.
• Product Sans — Occasional headings (22px). Fallbacks: Arial, Helvetica.
• Roboto — Body, links, buttons. Fallbacks: Arial, Helvetica.

Source: Google Fonts for Roboto. Google Sans and Product Sans are proprietary to Google.

3.2 Type Scale

3.3 Hierarchy

They use size jumps for clear hierarchy: 96 → 56 → 44 → 22 → 18 → 16 → 14. This gives enough differentiation without crowding. Lighter weights (300) soften UI labels and links, while 500 weight headings punch through.

Line heights are tight on big headings (1.17–1.18) to keep them compact, looser on body text (1.44–1.67) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. They stick to multiples, with some exceptions (13.333px) likely for responsive scaling.

4.2 Layout

Breakpoints are dense: from 414px up to 1441px. This suggests fine-tuned responsive behavior. They’re not just doing mobile/tablet/desktop — they’re adjusting at ~10+ widths. Likely driven by Vuetify’s grid system.

5. Visual Elements

• Border Radius: 2px for buttons (sharp but not harsh), 50% for avatars/icons.
• Shadows: Rare. When present, they’re subtle: rgba(0,0,0,0.12) combos and inset shadows with #dadce0.
• Borders: 1px solid #dadce0 for dividers. Minimalistic.

6. Components

6.1 Buttons

Primary Button (h-c-button--primary):

• Default: bg #1a73e8, text #ffffff, padding 17px 24px, radius 2px, border none.
• Hover: bg #055524 (odd — deep green), text #174ea6, shadow rgba(0,0,0,0.12) 0px 2px 4px.
• Active: bg #174ea6, text #174ea6 (text color matches bg — questionable contrast).
• Focus: bg rgba(32,33,36,0.06), text #174ea6, border 2px solid #174ea6.

6.2 Links

Four variants:

1. Blue (#1a73e8 → #202124 hover), weight 300.
2. Gray (#5f6368 → #dadce0 hover), weight 400.
3. Black (#000000 static), weight 400.
4. White (#ffffff → #174ea6 hover), weight 500.

No underlines anywhere.

6.3 Forms

Select-one input:

• Default: bg #f8f9fa, text #5f6368, padding 0 24px 0 2px.
• Focus: bg #e8eaed, text #202124, outline #e8eaed solid 10px.

6.4 Cards

Not explicitly defined, but likely using 1px borders (#dadce0) and 24px padding based on spacing data.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #1a73e8;
  --color-secondary: transparent;
  --color-dark-gray: #414141;
  --color-mid-gray: #5f6368;
  --color-near-black: #202124;
  --color-white: #ffffff;
  --color-light-gray-divider: #dadce0;

  /* Typography */
  --font-google-sans: "Google Sans", Roboto, Arial, Helvetica;
  --font-product-sans: "Product Sans", Arial, Helvetica;
  --font-roboto: Roboto, Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13-3333: 13.3333px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-inset-light-gray-top: rgb(218, 220, 224) 0px -1px 0px 0px inset;
  --shadow-raised-inset: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset;
  --shadow-small: rgba(0, 0, 0, 0.12) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px;
  --shadow-inset-light-gray-bottom: rgb(218, 220, 224) 0px 1px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Doubleclick Design System Specification

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

## Brand Context
Doubleclick’s design is enterprise-focused and precision-driven. It inherits Google’s Material principles but strips back playful elements. Expect clean layouts, tight grids, and minimal decoration.

## Color Palette
- Primary Blue: #1a73e8 — CTAs, primary buttons, interactive links
- Secondary (Transparent): transparent — no color, used for neutral states
- Dark Gray: #414141 — headings, hero text
- Mid Gray: #5f6368 — secondary text, placeholders
- Near-Black: #202124 — body copy
- White: #ffffff — page background, button text
- Light Gray Divider: #dadce0 — borders, dividers

## Typography
- Heading Font: "Google Sans", Roboto, Arial, Helvetica
- Secondary Heading: "Product Sans", Arial, Helvetica
- Body/Links: Roboto, Arial, Helvetica

| Element     | Size      | Weight | Line Height | Use For |
|-------------|-----------|--------|-------------|---------|
| H1          | 96px      | 500    | 1.17        | Hero titles |
| H2          | 56px      | 400    | 1.18        | Section headings |
| H3          | 44px      | 400    | 1.30        | Sub-headings |
| H4          | 22px      | 400/500| 1.36–1.44   | UI headings |
| Body        | 18px      | 300–500| 1.44–1.67   | Body text |
| Small       | 16px      | 300–700| 1.44–2.75   | Labels, buttons |
| Caption     | 14px      | 400    | 1.57–1.86   | Small text |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 4px, 5px, 8px, 9px, 10px, 12px, 13.3333px, 15px, 16px, 17px, 18px, 20px, 24px, 26px, 30px, 40px, 50px, 80px

## Border Radius
- sm: 2px — buttons
- full: 50% — avatars/icons

## Shadows & Depth
Minimal shadows. Use:
- rgb(218, 220, 224) 0px -1px 0px 0px inset
- rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset

## Component Specifications

### Primary Button
Default:  
- bg: #1a73e8  
- text: #ffffff  
- padding: 17px 24px  
- radius: 2px  
- border: none  
- font-weight: 500  
- font-size: 16px  

Hover:  
- bg: #055524  
- text: #174ea6  
- shadow: rgba(0,0,0,0.12) 0px 2px 4px  

Active:  
- bg: #174ea6  
- text: #174ea6  

Focus:  
- bg: rgba(32,33,36,0.06)  
- text: #174ea6  
- border: 2px solid #174ea6  

### Links
Blue variant: #1a73e8 → #202124 hover, weight 300, no underline.  
Gray variant: #5f6368 → #dadce0 hover.  
Black static: #000000.  
White variant: #ffffff → #174ea6 hover, weight 500.

### Input Fields (select-one)
Default:  
- bg: #f8f9fa  
- text: #5f6368  
- padding: 0 24px 0 2px  

Focus:  
- bg: #e8eaed  
- text: #202124  
- outline: #e8eaed solid 10px  

## Layout & Responsive Rules
Breakpoints: 414px, 470px, 480px, 500px, 568px, 600px, 601px, 620px, 767px, 768px, 900px, 1024px, 1180px, 1218px, 1299px, 1300px, 1344px, 1440px, 1441px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: 2px solid primary or focus color
- No underlines on links

## DO List
- Use ONLY defined palette colors
- Maintain 8px grid
- Keep button radius at 2px
- Use Google Sans for headings
- Keep link text-decoration none

## DON'T List
- Add custom shadows
- Use colors outside palette
- Mix rounded and sharp corners inconsistently
- Apply gradients

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #1a73e8;
  color: #ffffff;
  padding: 17px 24px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #055524;
  color: #174ea6;
  box-shadow: rgba(0,0,0,0.12) 0px 2px 4px;
}
.btn-primary:focus {
  background: rgba(32,33,36,0.06);
  color: #174ea6;
  border: 2px solid #174ea6;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Link
```css
.link-blue {
  color: #1a73e8;
  text-decoration: none;
  font-weight: 300;
}
.link-blue:hover {
  color: #202124;
}
```

### Input Field
```css
.select-one {
  background: #f8f9fa;
  color: #5f6368;
  padding: 0 24px 0 2px;
  border: none;
}
.select-one:focus {
  background: #e8eaed;
  color: #202124;
  outline: #e8eaed solid 10px;
}
```

9. Summary

TL;DR — Doubleclick’s design system is Google’s enterprise mode: tight grids, minimal palette, functional typography, and zero nonsense. It’s built for clarity and speed, not for flair.

Brand Keywords

• enterprise-minimalist
• grid-disciplined
• data-first
• google-material-stripped
• precision-focused