Teads Brand Design System Deep Dive

1. Brand Overview

Teads is a global player in digital advertising—specializing in outstream video ads—and their brand system reflects a mix of corporate clarity and media energy. You don't get loud neon gradients here; it's all about clean presentation, confident typography, and a restrained palette. The vibe is “professional media tech” rather than “startup chaos.”

From the extracted data, Teads’ design language is minimal in palette (almost no explicit color tokens beyond white for links), heavy reliance on typography for hierarchy, and precise spacing. This suggests two things: their visual identity leans on imagery and video content rather than decorative UI colors, and they maintain a neutral framework to let ad creatives carry the emotional punch.

Typography is HELVETICA—capitalized link elements, solid weights, and measured sizing. This is a safe corporate choice, but it works. Helvetica + uppercase for links signals authority and stability. The absence of whimsical type means the brand remains globally legible, which is critical for a multinational ad network.

Spacing is clearly based on an 8px scale—our data shows values like 10px, 30px, 40px. That’s not pure multiples of 8px across the board, but it’s close enough to indicate modular thinking. The large safe zone in the logo bottom (40px) hints at a preference for balanced white space.

Border radius? One value: 50px. That’s pill territory. It’s used on <a> elements, likely for call-to-action buttons or rounded nav items. This is an odd single-token approach—it means they’ve picked one corner style for their rounded elements, rather than a full range.

No shadows. Flat design. Depth comes from spacing and layout, not drop shadows or glows. That’s consistent with the corporate, media-focused aesthetic—keep the UI flat so the content pops.

If you’re building for Teads, think: flat, neutral, typographically driven, with occasional pill-shaped CTAs. Let the media do the talking. The UI is the stage, not the star.

2. Color System

Data tells us there’s no formal palette extracted except a single link color: rgb(255, 255, 255)—pure white. That’s unusual, but not unheard of for brands that rely on imagery or video backgrounds. White text over dark media is the simplest safe bet.

2.1 Primary Colors

Primary? White. In this context, white is not “brand color” in the traditional sense; it’s the functional color for navigation links and potentially other text over dark surfaces. It’s the high-contrast choice against black or deep imagery.

Psychologically, white is clean, neutral, and non-distracting. For a media company, it lets the ad content dictate mood. Compared to competitors, it’s less “brand-colored” than, say, Taboola’s blues or Outbrain’s orange. Teads is saying: our content partners define the vibe.

2.2 Complete Palette

That’s it. The extracted data shows no other declared colors—suggesting either inline styling at runtime or reliance on imagery for color.

2.3 Color Relationships

With one functional color, contrast ratios are straightforward: white-on-dark is WCAG AAA compliant if the background luminance is low enough. The system likely pairs white text with black, navy, or deep imagery. There’s no data on background colors here, so accessibility depends entirely on background choice.

Dark mode? Essentially, the entire UI could be considered “dark” if the background is media. No separate dark/light tokens are defined.

2.4 Usage Guide

• Use white for links and key text over dark surfaces.
• Avoid white over light backgrounds—it will fail contrast.
• If introducing buttons, ensure background is dark enough for white text to pass WCAG AA.
• For accessibility, pair white with backgrounds of #333333 or darker.

White here is functional, not decorative. The brand identity comes from logo and media, not UI color composition.

3. Typography

Typography is doing heavy lifting in Teads’ system.

3.1 Font Families

• Primary: Helvetica
• Fallbacks: Arial
• Sources: Not from Google Fonts or Adobe Fonts—system fonts.
• Variable Fonts: None.

Helvetica is a global workhorse. Arial fallback ensures compatibility on systems without Helvetica. This choice keeps load times low and ensures predictable rendering.

3.2 Type Scale

No other sizes are extracted. This is minimal—likely the site uses relative scaling for other headings based on CSS but the data shows only these two explicit contexts.

3.3 Hierarchy

H1 at 19.2px is modest—smaller than typical ~32px hero headings. This suggests the imagery carries the hero role, not the text. Link text at 16px and bold weight, uppercase transform—makes nav links assertive and readable.

Hierarchy is minimal: bold uppercase links stand out against lighter-weight headings. Without multiple heading sizes, the system depends on weight and casing for emphasis rather than large jumps in size.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px logic, but not pure multiples.

Values extracted:

• 10px (0.63rem) — used twice
• 30px (1.88rem) — used once
• 40px (2.50rem) — used once

The repetition of 10px suggests it’s a common padding/margin token for small gaps. 30px and 40px are larger section paddings or safe zones.

4.2 Layout

No explicit breakpoints extracted. This implies either inline responsive CSS or server-side media queries. Without breakpoints, we can’t define container widths. Given the minimal tokens, layout is probably image/video-first, with text overlays positioned by percentage or viewport units.

5. Visual Elements

Border Radius

Only one value: 50px — low confidence extraction but tied to <a> elements.
That’s a pill shape. This is not small rounding—it’s large enough to fully round typical button heights.

Shadows

None. This is a flat design system. Depth is from spacing and layering, not shadows.

Borders

No combinations extracted—suggesting minimal border use or purely class-based invisible borders.

6. Components

6.1 Buttons

No explicit button styles in extracted data. The 50px radius on <a> hints at pill-shaped buttons. Without background colors in data, we can infer that buttons probably inherit link styling: white text, no underline, uppercase, bold.

States: Data shows no hover styles for links, so hover may be handled by background change in CSS not captured here.

6.2 Links

Default:

• Color: rgb(255, 255, 255)
• Text-decoration: none
• Font-weight: 700
• Transform: uppercase

Hover: Null in data—likely unchanged or handled via CSS background/motion.

6.3 Forms

No input styles extracted—suggests forms aren’t a design focus on public site or are styled inline.

6.4 Cards

No card-specific data—cards likely come from content blocks with image/video backgrounds and text overlays.

7. Design Tokens

:root {
  /* Colors */
  --color-link-text: #FFFFFF;

  /* Typography */
  --font-primary: Helvetica, Arial, sans-serif;
  --font-heading-1-size: 1.20rem; /* 19.2px */
  --font-heading-1-weight: 400;
  --font-link-size: 1.00rem; /* 16px */
  --font-link-weight: 700;
  --font-link-transform: uppercase;

  /* Spacing */
  --space-10: 0.63rem; /* 10px */
  --space-30: 1.88rem; /* 30px */
  --space-40: 2.50rem; /* 40px */

  /* Border Radius */
  --radius-pill: 50px;

  /* Shadows */
  /* none — flat design */
}

8. AI Coding Assistant Prompt

# Teads Design System Specification

This design system is inspired by Teads' official website. All values, colors, typography, and component styles are extracted from their production site. Use this specification to build UIs that match Teads' visual language.

## System Prompt
You are a Teads design expert. Build UIs matching their visual language exactly.

## Brand Context
Teads is a global digital advertising platform. Their design philosophy is flat, media-first, and typographically clean. UI elements are restrained to let video and imagery carry emotional weight. Navigation is bold uppercase, but headings are modest—content leads, UI supports.

## Colors
- Link Text: #FFFFFF — Links over dark backgrounds

### Color Rules
- Use white only over sufficiently dark backgrounds (#333333 or darker).
- No other colors are defined—backgrounds come from imagery/video.
- Avoid white text over light surfaces for accessibility.
- Primary actions may use pill-shaped backgrounds with white text.

## Typography
- Font families: Helvetica, Arial, sans-serif
- No Google/Adobe fonts—system stack.
- Sizes:
  - Heading-1: 19.2px, weight 400
  - Link: 16px, weight 700, uppercase
- Use headings for content titles, links for navigation and CTAs.

## Spacing & Grid
- Base: 8px logic.
- Tokens:
  - 10px — small gaps, padding between inline items
  - 30px — section padding
  - 40px — safe zone (logo bottom, large gaps)

## Border Radius
- pill: 50px — used for `<a>` elements/buttons.

## Shadows & Depth
Flat design—no shadows. Use spacing for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #000; /* dark enough for contrast */
  color: #FFFFFF;
  padding: var(--space-10) var(--space-30);
  border-radius: var(--radius-pill);
  font-weight: var(--font-link-weight);
  font-size: var(--font-link-size);
  text-transform: var(--font-link-transform);
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #222; }
.btn-primary:focus { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Navigation Links

.nav-link {
  color: var(--color-link-text);
  text-decoration: none;
  font-weight: var(--font-link-weight);
  font-size: var(--font-link-size);
  text-transform: var(--font-link-transform);
}
.nav-link:hover { text-decoration: underline; }

Input Fields

.input {
  border: 1px solid #ccc;
  border-radius: var(--radius-pill);
  padding: var(--space-10);
  font-size: var(--font-link-size);
}
.input:focus { border-color: #000; outline: none; }

Card

.card {
  background: #000;
  border-radius: 0; /* flat corners unless specified */
  padding: var(--space-30);
}

Layout & Responsive Rules

• Max content width: not defined in data—use fluid layout.
• Page padding: 10px (mobile), 30px (desktop) suggested from tokens.
• Grid gap: multiples of 8px, prefer 10px or 30px from tokens.

Interaction Rules

• Transition timing: 150ms ease for hover/focus.
• Focus indicators: 2px solid white on dark surfaces.
• No motion overload—keep transitions subtle.

DO

• Use only defined tokens—white for text, Helvetica stack.
• Maintain spacing from 8px logic.
• Use pill radius only for interactive elements.
• Keep design flat—no shadows.
• Ensure contrast compliance for white text.

DON'T

• Introduce new brand colors without approval.
• Use shadows or gradients.
• Mix sharp and rounded corners inconsistently.
• Use white text over light imagery.
• Change font family from Helvetica stack.

Code Examples

Primary Button

<a href="#" class="btn-primary">Contact Us</a>

Card Example

<div class="card">
  <h1>Media Content</h1>
</div>

Input Example

<input type="text" class="input" placeholder="Search">

---

## 9. Summary

**TL;DR** — Teads’ design system is about restraint: Helvetica typography, flat layout, white text over media, pill-shaped CTAs, and plenty of breathing room. The UI is a frame for content—not a competing visual voice.

**Brand Keywords**:
- media-first
- flat-corporate
- typographic-authority
- pill-cta
- restrained-color