Tapad Design System Deep Dive

1. Brand Overview

Tapad positions itself in the ad-tech and data connectivity space, but the visual language on their site doesn’t scream “corporate spreadsheet.” It’s clean, modern, and surprisingly playful in spots. The palette hints at tech credibility but with soft, human touches. Their typography choice—Futura PT—is a statement: geometric, rational, but still approachable. This isn’t a serif-heavy financial institution look. It’s more “we know the math, but we speak human.”

The vibe: tech-confidence anchored in precision, sprinkled with moments of color that feel almost editorial. The deep navy (#120841) grounds the system, while bright blues (#007bff, #2c96ff) energize interactions. Then there’s the unexpected light pink (#ffbccc), which adds warmth and disrupts the usual blue/grey monotony in tech branding. You rarely see this exact pink in ad-tech—it’s a deliberate differentiator.

Typography is consistent and disciplined—Futura PT across headings, links, captions, buttons. No secondary typeface. That consistency is a power move; they avoid the “body font” drift that happens with multi-font stacks. The scale is large but balanced—70px H1s are bold but not screaming thanks to light weights (200–300 in spots).

Layout-wise, it’s an 8px grid with some oddball values (3px, 9px, 10px) indicating micro-adjustments for optical balance. Breakpoints are numerous—they’re clearly optimizing at multiple device widths, not just the standard mobile/tablet/desktop trio.

Overall philosophy: geometric consistency meets approachable tech. Every design decision feels like it’s meant to reduce friction while keeping the brand from feeling cold. They’re not trying to look like a startup with neon gradients. They’re not aiming for the hyper-minimalism of a SaaS dashboard. It’s a hybrid—functional UI with editorial touches.

2. Color System

2.1 Primary Colors

The main interactive blue is #007bff (RGB 0,123,255). This is a classic “Bootstrap blue” but here it’s crisp and saturated. It reads as confident, tech-forward, and works well on light backgrounds. Compared to competitors in ad-tech, many lean on teal or purple—Tapad’s blue feels more direct and less “creative agency.” They pair it with #2c96ff for hover states and active CTAs. This creates a clear visual rhythm: deep blue for primary, lighter blue for hover, without muddying the brand.

The deep navy #120841 acts as the brand anchor—navigation, primary text in high-importance areas. This is the “trust” color. Then there’s the pink #ffbccc. It’s a wildcard—likely used in hero backgrounds or accent areas to soften the heavy tech palette.

2.2 Complete Palette

Note: The link hover color isn’t in the palette list but appears in link states (rgb(199, 201, 73) → #c7c949). This is an unusual choice—yellow-green on navy text—makes hover states unmistakable.

2.3 Color Relationships

Contrast:

• #007bff on #ffffff — WCAG AA compliant for text at 14pt+ (contrast ~4.5:1).
• #ffffff on #007bff — high contrast (~7:1), safe for buttons.
• #ffbccc on #ffffff — low contrast (~1.3:1), not safe for text; should be background only.
• #120841 on #ffffff — very high contrast (~12:1), perfect for navigation and headers.

Dark mode: Not present. All colors are optimized for light backgrounds. #120841 could serve in a dark mode, but #ffbccc would need adjustment.

2.4 Usage Guide

• Works well:

  • #007bff buttons on #ffffff background.
  • #120841 text on #ffffff background for nav.
  • #ffbccc backgrounds with #120841 text for feature highlights.

• Avoid:

  • #ffbccc for body text—it fails contrast.
  • #2c96ff on #ffffff without bold weight—it can look washed out.
  • #c7c949 on #ffffff for hover—it’s accessible but clashes with the rest of the palette if overused.

3. Typography

3.1 Font Families

• Primary: futura-pt
• Source: Adobe Fonts (confirmed by adobeFonts: true)
• No fallbacks listed—likely handled via CSS stack but not in data.

This is a geometric sans with strong personality. Works well for tech brands aiming for clarity without going full Helvetica.

3.2 Type Scale

3.3 Hierarchy

They use size + weight + transform for hierarchy. Large H1s are light (200–300), letting size carry weight without feeling heavy. Links often get uppercase + tracking (up to 3px) for brand crispness. Captions have extreme line heights (up to 6.92), likely for spaced-out footer or meta text.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. They break it with some micro-spacings (3px, 4px, 9px, 10px) for optical tweaks.

Odd values (7px, 9px, 15px) appear rarely—likely for alignment fixes.

4.2 Layout

Breakpoints are granular: 98px to 1900px. This isn’t a “3 breakpoint” system—it’s tuned for many devices. 768px, 992px, 1200px are the big ones (Bootstrap-like), but others like 415px, 545px, 860px suggest specific component reflows.

5. Visual Elements

• Border Radius: Minimal—1px and 2px. This is near-square corners; no pills, no heavy rounding.
• Shadows: One shadow: rgba(0,0,0,0.1) 0px 0px 17px 0px. Very subtle, likely for cards or modals.
• Borders: Rare—only one combo (0px 0px 0px 1px solid #6d6e70). Used as side dividers.

6. Components

6.1 Buttons

Only one defined variant (btn btn-lg btn-hero), bold (900 weight), small size (14px), uppercase.

Default:

• Background: rgb(248,249,250) (~#f8f9fa)
• Color: #000000
• Padding: 20px 20px 18px
• Border radius: 0px
• Border: none
• Shadow: none
• Transform: none

Hover:

• Color: #ffffff
• Background: #2c96ff
• Box shadow: rgb(113,173,55) 3px -3px 0px 2px inset (odd—green inset highlight)
• Transform: scale(1.3) — aggressive for hover
• Border: 1px solid #2c96ff

Active:

• Background: #2c96ff
• Color: #ffffff
• Box shadow: rgba(52,58,64,0.5) 0px 0px 0px 0.2rem
• Border: 1px solid #2c96ff

Focus:

• Background: #1d2124
• Color: #1d2124 (matches background—probably a bug?)
• No shadow

6.2 Links

Four styles, all no underline by default, hover to #c7c949.

Primary nav link:

• Default: #120841, bold (500)
• Hover: #c7c949

Transparent links:

• Default: transparent text
• Hover: #c7c949

Grey links:

• Default: #6d6e70
• Hover: #c7c949

Blue links:

• Default: #007bff
• Hover: #c7c949

6.3 Forms

No inputs defined—likely styled via Vuetify defaults.

6.4 Cards

No explicit card component in data, but shadow suggests minimal depth.

7. Design Tokens

:root {
  /* Colors */
  --color-pink-accent: #ffbccc;
  --color-white: #ffffff;
  --color-blue-primary: #007bff;
  --color-navy-anchor: #120841;
  --color-black: #000000;
  --color-blue-hover: #2c96ff;
  --color-link-hover-yellowgreen: #c7c949;
  --color-grey: #6d6e70;

  /* Typography */
  --font-primary: 'futura-pt';
  --heading-h1-size: 4.38rem;
  --heading-h1-weight: 300;
  --heading-h1-lineheight: 1.14;
  --button-font-size: 0.88rem;
  --button-font-weight: 900;
  --caption-font-size: 0.81rem;
  --caption-font-weight: 500;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-30: 30px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 2px;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 0px 17px 0px;
}

8. AI Coding Assistant Prompt

# Tapad Design System Specification

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

## Brand Context
Tapad blends tech precision with approachable design. The system is geometric, disciplined, and consistent—minimal rounded corners, bold uppercase CTAs, and a controlled palette. It’s meant to feel confident but not cold.

## Colors
- Accent Pink: #ffbccc — backgrounds, editorial highlights
- White: #ffffff — page backgrounds
- Primary Blue: #007bff — CTAs, primary buttons
- Anchor Navy: #120841 — navigation, headings
- Black: #000000 — text, icons
- Hover Blue: #2c96ff — hover states for buttons
- Link Hover Yellow-Green: #c7c949 — link hover color
- Grey: #6d6e70 — borders, secondary text

## Typography
Font: 'futura-pt' (Adobe Fonts)
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 70px (4.38rem) | 300 | 1.14 | Page titles |
| H1 alt | 35px | 400 | 1.50 | Section intros |
| H1 small cap | 33px | 300 | 1.21 | Subheaders |
| H1 thin | 32px | 200 | 1.25 | Light headlines |
| Button | 14px | 900 | 1.00 | CTA buttons |
| Caption | 13px | 400–500 | 1.50–2.86 | Meta text |

## Spacing & Grid
Base: 8px grid
Scale: 3px, 4px, 8px, 10px, 12px, 20px, 30px, 60px, 80px
Map:  
- Button padding: 20px vertical  
- Card padding: 30px  
- Section gaps: 60px–80px

## Border Radius
- sm: 1px — minimal rounding for divs
- md: 2px — slightly rounded for other elements

## Shadows & Depth
Shadow: rgba(0,0,0,0.1) 0px 0px 17px 0px — use sparingly for cards/modals.

## Components

### Primary Button
```css
.btn-primary {
  background: #f8f9fa;
  color: #000000;
  padding: 20px 20px 18px;
  border-radius: 0px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #2c96ff;
  color: #ffffff;
  box-shadow: rgb(113,173,55) 3px -3px 0px 2px inset;
  transform: scale(1.3);
  border: 1px solid #2c96ff;
}
.btn-primary:active {
  background: #2c96ff;
  color: #ffffff;
  box-shadow: rgba(52,58,64,0.5) 0px 0px 0px 0.2rem;
  border: 1px solid #2c96ff;
}
.btn-primary:focus {
  background: #1d2124;
  color: #1d2124;
  outline: none;
}
```

### Navigation Links
```css
.nav-link {
  color: #120841;
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover {
  color: #c7c949;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 2px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 17px 0px;
}
```

## Layout & Responsive Rules
Max content width: not defined in data — follow breakpoints.
Breakpoints: 98px, 414px, 545px, 575px, 768px, 992px, 1200px, 1900px — optimize per breakpoint.

## Interaction Rules
- Transition timing: 150ms ease for hover/active states
- Hover scale: up to 1.3 for buttons
- Focus: remove outline, change background

## DO
- Use exact hex values from palette
- Maintain 8px grid
- Keep corners square or near-square
- Use uppercase for buttons and key links
- Keep text weights consistent with scale

## DON'T
- Add extra shadows
- Round corners beyond 2px
- Use colors outside palette
- Lower contrast for text
- Overuse hover scale effects

## Code Examples

### Button Example
```css
<button class="btn-primary">Click Me</button>
```

### Card Example
```css
<div class="card">
  <h2>Title</h2>
  <p>Content</p>
</div>
```

### Link Example
```css
<a href="#" class="nav-link">Home</a>
```

9. Summary

TL;DR: Tapad’s design system is disciplined, geometric, and minimal on curvature. The palette balances tech blues with a warm pink accent, typography is single-family Futura PT with precise hierarchy, and the grid is 8px with micro-adjustments. Buttons are bold and uppercase, links are clean with unexpected hover colors.

Brand Keywords: tech-confident, geometric-consistent, minimal-curvature, warm-accent, responsive-focused