Adtrafficquality Design System Deep Dive

1. Brand Overview

Adtrafficquality is essentially Google’s public-facing arm for educating advertisers about traffic integrity—click fraud prevention, invalid traffic detection, that kind of thing. The content is highly functional, and the design reflects that. This is not a brand trying to sell a product with emotional storytelling; it’s a trust signal. It’s about authority, clarity, and alignment with the broader Google ecosystem.

The vibe? Corporate-clean. It’s unmistakably Google—Roboto everywhere, Product Sans sprinkled in, and the same blue you see across Search, Gmail, and Ads. The site is lean, with minimal ornamentation. There’s no playful illustration style here. Instead, the design feels like an internal doc polished for external consumption: restrained palette, strict typography hierarchy, and a grid system that doesn’t tolerate sloppiness.

There’s also a sense of meta-branding here—this page is part of a much larger family. You can tell they didn’t reinvent the wheel; they’re plugged into Google’s design language (Material Design and its web variants). The use of Vuetify components confirms this—it’s component-driven, responsive, and reuses patterns across the org.

If you’re designing for Adtrafficquality, you’re designing for consistency within Google’s trust and policy communications. You’re not pushing the envelope. You’re following rules. And those rules are tight: same blue, same greys, same typographic rhythm. They nailed the "we’re serious, but approachable" tone—no gradients, no shadows except for functional depth. I love that it’s disciplined. The odd thing? The palette is almost aggressively muted compared to consumer-facing Google products—probably to avoid distraction from the content’s legal/technical nature.

2. Color System

2.1 Primary Colors

The primary color is #1a73e8 (rgb(26, 115, 232)). This is Google’s signature blue. It’s the same hue you’ll see in Google Docs buttons and Gmail links. It’s vibrant enough to read as interactive, but not so saturated that it feels toy-like. Psychologically, it signals trust and reliability—perfect for a policy page about ad traffic quality. Competitor comparison? Microsoft leans into a darker navy for enterprise trust; Facebook uses a slightly different blue (#1877F2) that’s more saturated. Google’s blue feels more balanced—slightly lighter, which makes it work well on white backgrounds without heavy contrast issues.

2.2 Complete Palette

2.3 Color Relationships

Contrast is decent across the board—#1a73e8 on white has a ratio over 4.5:1, so it’s WCAG AA compliant for normal text. #616161 on white is borderline for small text, so they use it for secondary info only. The hover shift from #1a73e8 to #174ea6 is subtle but noticeable, maintaining contrast while signaling interactivity. Dark mode? Not implemented here—this palette is optimized for light backgrounds. If you tried to invert it, #202124 would dominate and #1a73e8 would still work, but greys might need tweaking.

2.4 Usage Guide

• Do: Use #1a73e8 for links only. Avoid using it for headings—it dilutes the CTA signal.
• Do: Pair #202124 text with #ffffff background for maximum clarity.
• Avoid: Using #616161 on small text below 14px—contrast drops.
• Avoid: Mixing #4285f4 and #1a73e8 in the same UI—they’re too close and confuse users.

3. Typography

3.1 Font Families

Two main families: Roboto (Google Fonts) and Product Sans (Google’s proprietary font). Roboto is the workhorse—headings, body, links. Product Sans is used sparingly for branding flair. Fallbacks: Arial, Helvetica for Roboto; Arial, Helvetica for Product Sans. There’s also Google Sans in smaller UI contexts (links, captions).

3.2 Type Scale

3.3 Hierarchy

They build hierarchy through weight and size, but heavily rely on line height for readability. The 56px H1 with weight 300 is airy—it feels authoritative but not aggressive. The jump from 36px to 22px is steep, which clearly signals a section break. Body text is essentially “link” or “caption” styles scaled up or down. Uppercase transforms on certain captions add visual texture but are used sparingly.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but they also use non-multiples (1px, 7px, 13px). This is classic Material Design with occasional pixel nudges for optical balance.

4.2 Layout

Breakpoints are 600px, 900px, 1024px, 1440px—standard Material breakpoints. Containers stretch to fit, but padding scales down at lower widths. Responsive behavior is baked into Vuetify’s grid system—no custom fluid typography here.

5. Visual Elements

• Border Radius: Only two values—2px (low confidence, possibly a legacy link style) and 50% (avatars, circular icons). This means most elements are square or fully round—no medium-rounded corners.
• Shadows: Very restrained. Two inset shadows: rgb(218, 220, 224) 0px -1px 0px 0px inset (used for dividers) and a combined drop shadow + inset for depth: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset. This is functional depth, not decorative.
• Borders: One combo—top border 1px solid #e0e0e0. Used for section dividers.

6. Components

6.1 Buttons

No explicit button styles extracted—Vuetify likely handles buttons. Given no data, we can’t specify default/hover states here.

6.2 Links

Two link styles:

1. Primary Link:

   • Default: color #1a73e8, no underline, weight 300.
   • Hover: color #202124 (dark), no underline.

2. Secondary Link:

   • Default: color #5f6368 (grey), no underline, weight 400.
   • Hover: color #4285f4 (blue), no underline.

Underline is consistently off—link recognition relies purely on color.

6.3 Forms

Select (select-one) styles:

• Default:

  • Background: #f8f9fa
  • Text: #5f6368
  • Border: none
  • Radius: 0px
  • Padding: 0px 24px 0px 2px
  • Box-shadow: none
  • Outline: none

• Focus:

  • Border-color: #1a1a1a
  • Background: #e8eaed
  • Text: #202124
  • Outline: solid 10px #e8eaed

6.4 Cards

No explicit card styles—likely handled by Vuetify defaults. Shadows suggest minimal depth.

7. Design Tokens

:root {
  /* Colors */
  --color-text-primary: #202124;
  --color-primary-blue: #1a73e8;
  --color-text-secondary: #616161;
  --color-white: #ffffff;
  --color-heading-dark-grey: #414141;
  --color-hover-blue-dark: #174ea6;
  --color-hover-bg-light: #f1f3f4;
  --color-hover-blue-alt: #4285f4;
  --color-border-neutral: #e0e0e0;
  --color-input-bg-default: #f8f9fa;
  --color-input-bg-focus: #e8eaed;
  --color-input-text-default: #5f6368;
  --color-input-text-focus: #202124;

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

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
  --space-70: 70px;
  --space-80: 80px;

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

  /* Shadows */
  --shadow-inset-light: rgb(218, 220, 224) 0px -1px 0px 0px inset;
  --shadow-combo: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Adtrafficquality Design System Specification

You are an Adtrafficquality design expert. Build UIs matching their visual language exactly.

## Brand Context
Adtrafficquality is part of Google's trust and policy communications. Design is disciplined, functional, and aligned with Google's Material Design language. Colors and typography follow Google's brand rules, with restrained use of blue for interactive elements and grey for secondary content.

## Color Palette
- Dark Text: #202124 — Primary text, header background
- Primary Blue: #1a73e8 — Links, CTAs
- Medium Grey: #616161 — Secondary text
- White: #ffffff — Page background
- Dark Grey Heading: #414141 — Section headings
- Deep Blue Hover: #174ea6 — Link hover/focus
- Light Grey Hover BG: #f1f3f4 — Hover/focus surfaces
- Accent Blue Alt: #4285f4 — Secondary link hover
- Neutral Grey Border: #e0e0e0 — Dividers
- Input BG Default: #f8f9fa — Form fields default
- Input BG Focus: #e8eaed — Form fields focus
- Input Text Default: #5f6368 — Form text default
- Input Text Focus: #202124 — Form text focus

## Typography
- Roboto, Arial, Helvetica — headings, body text
- Product Sans, Arial, Helvetica — small headings
- Google Sans, Roboto, Arial, Helvetica — captions, UI labels

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 Large | Roboto | 56px | 300 | 1.14 | Page titles |
| H1 Medium | Roboto | 36px | 300 | 1.22 | Section titles |
| H1 Small | Product Sans | 22px | 400 | 1.44 | Subtitles |
| H1 Small Alt | Roboto | 22px | 300 | 1.44 | Subtitles |
| H1 X-Small | Roboto | 18px | 100 | 1.54 | Fine headings |
| Link Large | Roboto | 18px | 100 | 1.54 | Prominent links |
| Link Medium | Roboto | 16px | 400 | — | Standard links |
| Link Small | Google Sans | 14px | 300 | 1.44 | UI links |
| Caption | Google Sans | 14px | 300 | 1.44 | Metadata |
| Link Small Bold | Google Sans | 14px | 400 | 1.86 | Emphasized UI links |
| Caption Uppercase | Roboto | 14px | 400 | 1.44 | Labels |
| Link Small Regular | Roboto | 14px | 400 | 1.57 | Inline links |
| Button | Roboto | 10px | 300 | — | Button text |
| Link Tiny | Roboto | 10px | 300 | 1.44 | Small UI links |
| Caption Tiny | Roboto | 10px | 300 | 1.44 | Microcopy |

## Spacing & Grid
Base: 8px grid
Values: 1, 2, 4, 6, 7, 9, 10, 12, 13, 15, 16, 20, 30, 40, 60, 70, 80 px
Use multiples where possible; 1px, 7px, 13px for optical adjustments.

## Border Radius
- sm: 2px — minimal rounding
- full: 50% — avatars, circular icons

## Shadows & Depth
- --shadow-inset-light: rgb(218, 220, 224) 0px -1px 0px 0px inset
- --shadow-combo: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset

## Component Specifications

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

### Secondary Link
```css
.link-secondary {
  color: #5f6368;
  font-weight: 400;
  text-decoration: none;
}
.link-secondary:hover {
  color: #4285f4;
  text-decoration: none;
}
```

### Select Input
```css
.select-default {
  background-color: #f8f9fa;
  color: #5f6368;
  border: none;
  border-radius: 0;
  padding: 0 24px 0 2px;
  box-shadow: none;
}
.select-default:focus {
  border-color: #1a1a1a;
  background-color: #e8eaed;
  color: #202124;
  outline: solid 10px #e8eaed;
}
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: <600px
- Tablet: 600–900px
- Small Desktop: 900–1024px
- Large Desktop: >1440px

## Interaction Rules
- Hover color shifts only, no underline
- Outline for focus on inputs: solid 10px matching background
- Transition timing: 150ms ease for hover/focus

## DO
- Use only palette colors
- Maintain 8px grid
- Keep borders 1px solid #e0e0e0 for dividers
- Use Roboto for headings/body
- Reserve Product Sans for brand-specific headings
- Keep shadows minimal and functional

## DON'T
- Add decorative shadows
- Mix corner radii—only square or full circle
- Underline links
- Use custom blues outside #1a73e8 and #4285f4

## Code Examples

### Primary Link
```css
<a href="#" class="link-primary">Learn More</a>
```

### Secondary Link
```css
<a href="#" class="link-secondary">Privacy Policy</a>
```

### Select Input
```css
<select class="select-default">
  <option>Option 1</option>
</select>
```

9. Summary

TL;DR: Adtrafficquality’s design is a disciplined subset of Google’s Material language—tight palette, strict typography, minimal shadows. It’s functional, trustworthy, and visually consistent with Google’s policy pages.

Brand Keywords: google-disciplined, policy-functional, trust-first, minimal-interactive