Taboola Brand Design System Deep-Dive

1. Brand Overview

Taboola’s design language is unapologetically corporate-tech with a glossy marketing sheen. This is a platform for advertisers, publishers, and data-savvy marketers — and the UI makes sure you know it. The site feels like a high-conversion SaaS landing page: bold CTAs, crisp typography, and a very controlled palette.

The vibe: confident, functional, a little playful in accents but grounded in blues and deep navy. You’re not here to browse — you’re here to click a button, read a stat, and move to the next step. The design system doubles down on clarity: clear hierarchy in type, strong color contrast, predictable patterns.

Philosophy-wise, Taboola leans on a “trust + action” combo. The deep blues convey authority and reliability, while the brighter cyan/mint and yellow accents inject energy. Their primary blue (#0056f0) is the hero — it’s in buttons, links, focus states. Secondary deep navy (#002852) anchors content and gives interactive elements a safe base.

Rounded shapes (50px pill buttons everywhere) tell you this isn’t a stodgy finance dashboard — it’s a modern marketing tool. The typography mix of Poppins and Verdana is interesting: Poppins handles most headings and UI text, Verdana pops up in some buttons — likely for legacy or specific emphasis.

Overall, Taboola’s system is built for speed: consistent spacing (8px scale), minimal shadows (border-based depth), and a responsive grid that jumps at common breakpoints (576px, 768px, 992px, 1200px, 1400px). This is a professional toolkit with just enough personality to avoid feeling cold.

2. Color System

2.1 Primary Colors

The primary brand color: rgb(0, 86, 240) → #0056f0.

This is a saturated, assertive blue. Psychologically, it’s authority-meets-action. It’s bright enough to feel energetic without slipping into “cheap web blue” territory. Competitor-wise, it’s closer to Facebook’s blue than LinkedIn’s, but with a touch more saturation. Against deep navy backgrounds (#002852), it jumps out cleanly. Against white, it’s bold but readable.

They use it on:

• Primary buttons
• Link hover states
• Focus outlines
• Active borders

This is the “do something” color. They don’t dilute it much — hover states often go darker or transparent rather than lightening.

2.2 Complete Palette

2.3 Color Relationships

Primary blue against white: ~6.5:1 contrast ratio — safe for WCAG AAA for text. Deep navy on white: even higher contrast. Mint (#00f0d6) on deep navy is fine (~4.6:1), borderline for small text but acceptable for buttons.

They’re not doing dark mode here — everything is light background, dark text. Accent colors (mint, yellow) are used sparingly to avoid accessibility issues.

2.4 Usage Guide

Works well:

• Primary blue (#0056f0) with white text — strong CTA.
• Mint with deep navy text — fun accent, still readable.
• Yellow (#d5ff7e) with dark text — high-energy CTA.

Avoid:

• Mint on white — low contrast.
• Link blue (#0000ee) on mint backgrounds — vibrates visually.
• Primary blue text on deep navy — too close in luminance.

3. Typography

3.1 Font Families

Main stack:

• Poppins (Google font), fallbacks: Helvetica, Arial. Used for headings, body, links, most buttons.
• Verdana, fallback: Geneva. Used in some buttons and headings — possibly for legacy emphasis.

No variable fonts. No Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

They stack big headings (56px, 42px) for hero sections. Secondary headings drop to 28px or 24px. Body and UI text sits between 16–18px. Buttons vary — large hero CTAs at 24px Verdana/Poppins, smaller nav buttons at 15px Poppins.

Line heights are tight on big headings (1.0–1.2) for impact, looser on body (1.5–1.6) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale. Most values are multiples of 8, with occasional oddballs (9px, 25px, 38.03px, 73px).

4.2 Layout

Breakpoints: 576px, 768px, 800px, 992px, 1200px, 1400px. This aligns with Bootstrap-like logic — mobile first, scaling up.

5. Visual Elements

Border Radius

They love big curves:

• Pills: 50px — buttons
• Large cards: 30px
• Small rounding: 4px — some buttons
• Odd cases: 200px — decorative divs
• Full circles: 50% — avatars

List:

• 0px (various)
• 4px
• 20px
• 25px
• 30px
• 32px
• 50px
• 200px
• 50%

Shadows

One shadow: rgba(0,0,0,0.2) 0px 0px 5px 0px — barely used. Flat design with borders doing the depth work.

Borders

A lot of border usage:

• 1px solid #002852 — outline buttons
• 1px solid #0056f0 — primary buttons
• 1px solid #d5ff7e — yellow buttons
• 2px solid #043a69 — div accents
• Table dividers: 1px solid #dee2e6

6. Components

6.1 Buttons

They have several styles. Let’s break them down.

INDshortcutBtn (Black solid)

• Default: bg #000, text #fff, padding 8px 16px, radius 4px, border 1px solid #fff
• Hover: bg rgba(50,50,50,0.9), text rgba(43,51,63,0.75)
• Focus: bg rgba(115,133,159,0.5), custom shadow

Outline Deep Navy

• Default: bg transparent, text #002852, padding 9px 30px 8px, radius 50px, border 1px solid #002852
• Hover: translate(2px), bg rgba(50,50,50,0.9), no border
• Active: bg #fff, text #0d6efd
• Focus: bg rgba(115,133,159,0.5), border 1px solid #002852

Primary Blue Pill

• Default: bg #0056f0, text #fff, radius 50px, border 1px solid #0056f0
• Hover: same as outline — darker transparent bg
• Active: bg #fff, text #0d6efd

Hello Yellow

• Default: bg #d5ff7e, text #1d393d, radius 50px, border 1px solid #d5ff7e

Grealize Green

• Default: bg #005645, text #fff, radius 50px, border same color

Mint

• Default: bg #00f0d6, text #002852, radius 50px, border same color

All share:

• Pill radius for most
• Hover translates 2px
• Focus uses var(--tbla-accordion-btn-focus-box-shadow)

6.2 Links

Variants:

• Link blue (#0000ee), underlined — hover to #0056f0
• Deep navy (#002852), no underline — hover to #0056f0
• White, no underline — hover to #0056f0
• Dark teal (#1d393d), no underline — hover to primary blue

6.3 Forms

No input styles in extracted data — form colors exist (--tbla-form-invalid-color, --tbla-form-valid-border-color).

6.4 Cards

No explicit card data — implied by border colors and subtle backgrounds.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-deep-navy: #002852;
  --color-link-blue: #0000ee;
  --color-mint: #00f0d6;
  --color-primary-blue: #0056f0;
  --color-medium-blue: #005fcc;
  --color-warning-bg-subtle: #fff2cd;
  --color-emphasis-text: #000000;
  --color-code-accent: #d63384;
  --color-warning-text: #664d03;
  --color-secondary-text: rgba(33,37,41,.75);
  --color-secondary-bg: #e9ecef;
  --color-danger-text: #58151b;
  --color-swiper-theme: #007aff;
  --color-dark-bg-subtle: #ced4da;
  --color-border: #dee2e6;
  --color-success-text: #0a3621;
  --color-light-text-emphasis: #495057;
  --color-form-invalid: #dc3545;
  --color-form-valid-border: #198754;
  --color-link-hover-blue: rgb(10,88,202);
  --color-secondary-text-emphasis: rgb(43,47,50);
  --color-primary-text-emphasis: rgb(5,44,101);
  --color-border-translucent: rgba(0,0,0,.175);
  --color-body-bg: #ffffff;
  --color-focus-ring: rgba(13,110,253,.25);
  --color-secondary-bg-subtle: rgb(226,227,229);
  --color-info-bg-subtle: rgb(207,244,252);
  --color-danger-bg-subtle: rgb(248,215,218);
  --color-light-bg-subtle: rgb(251,252,253);
  --color-primary-bg-subtle: rgb(207,226,255);
  --color-info-text: rgb(5,81,96);
  --color-success-bg-subtle: rgb(209,231,221);

  /* Typography */
  --font-poppins: 'Poppins', Helvetica, Arial, sans-serif;
  --font-verdana: Verdana, Geneva, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-25: 25px;
  --space-38: 38.0312px;
  --space-45: 45px;
  --space-48: 48px;
  --space-64: 64px;
  --space-73: 73px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-pill: 50px;
  --radius-xl: 200px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.2) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Taboola Design System Specification

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

## Brand Context
Taboola’s visual language is corporate-tech with a marketing polish. Heavy use of primary blue for CTAs, deep navy for anchors, and rounded pill buttons. Minimal shadows — depth via borders. Typography is clean sans-serif with Poppins as the hero font.

## Color Palette
- Primary Blue: #0056f0 — CTAs, primary buttons, focus outlines
- Deep Navy: #002852 — Outline buttons, headings, text
- Link Blue: #0000ee — Default link text
- Mint: #00f0d6 — Accent buttons
- Medium Blue: #005fcc — Hover/focus borders
- White: #ffffff — Backgrounds, text on dark
- Yellow: #d5ff7e — Accent buttons
- Dark Green: #005645 — Accent button background
- Warning BG Subtle: #fff2cd — Alert backgrounds
- Danger BG Subtle: #f8d7da — Error backgrounds
- Success BG Subtle: #d1e7dd — Success backgrounds
- Border: #dee2e6 — Dividers
- Form Invalid: #dc3545 — Validation errors
- Form Valid Border: #198754 — Success borders

## Typography
- Headings: 'Poppins', Helvetica, Arial
- Buttons: 'Poppins' or Verdana, Geneva
- Sizes:
  - H1: 56px, 500, 1.0
  - H1 alt: 42px, 700, 1.2
  - H2: 36px, 700, 1.5
  - H2 alt: 36px, 600, 1.2
  - H3: 28px, 700, 1.5
  - Body: 16px, 500, 1.5
  - Button Large: 24px, 700, Verdana
  - Button Medium: 18px, 500, Poppins
  - Caption: 14px, 300, 1.5

## Spacing & Grid
Base: 8px grid.  
Scale: 1px, 2px, 4px, 8px, 10px, 16px, 24px, 48px, 64px, 80px.  
Buttons: padding 8px–10px vertical, 16px–30px horizontal.  
Sections: 48px–80px gaps.

## Border Radius
- None: 0 — tables
- sm: 4px — small buttons
- md: 20px — cards
- lg: 30px — large cards
- pill: 50px — buttons
- round: 50% — avatars

## Shadows & Depth
Flat design — minimal shadows. Use borders for emphasis.

## Component Specifications

### Primary Button
Default: bg #0056f0, text #fff, padding 9px 30px 8px, radius 50px, border 1px solid #0056f0, font-weight 500, font-size 15px.  
Hover: translate(2px), bg rgba(50,50,50,0.9), border none, text rgba(43,51,63,0.75)  
Active: bg #fff, text #0d6efd  
Focus: border #002852, bg rgba(115,133,159,0.5)

### Outline Button
Default: bg transparent, text #002852, border 1px solid #002852, radius 50px.  
Hover: translate(2px), bg rgba(50,50,50,0.9), border none.  
Active: bg #fff, text #0d6efd

### Navigation Link
Default: #0000ee, underline. Hover: #0056f0.

## Layout & Responsive Rules
Breakpoints: 576px, 768px, 800px, 992px, 1200px, 1400px.  
Mobile padding: 16px. Desktop padding: 48px.

## Interaction Rules
State changes: 150ms ease.  
Focus: 1px solid primary blue or deep navy.  
Hover: translate(2px) on buttons.

## DO List
- Use only palette colors
- Maintain 8px grid
- Use pill radius for primary CTAs
- Keep headings tight line heights
- Use Poppins for most text
- Keep hover translate consistent

## DON'T List
- Add custom shadows
- Mix sharp and rounded corners in same element
- Use colors outside palette
- Overuse mint — keep it accent

## Code Examples

```css
.btn-primary {
  background: #0056f0;
  color: #fff;
  padding: 9px 30px 8px;
  border-radius: 50px;
  border: 1px solid #0056f0;
  font-weight: 500;
  font-size: 15px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  transform: translate(2px);
  background: rgba(50,50,50,0.9);
  border: none;
  color: rgba(43,51,63,0.75);
}
.btn-primary:focus {
  border: 1px solid #002852;
  background: rgba(115,133,159,0.5);
}
```

```css
.btn-outline {
  background: transparent;
  color: #002852;
  border: 1px solid #002852;
  border-radius: 50px;
  padding: 9px 30px 8px;
  transition: all 150ms ease;
}
.btn-outline:hover {
  transform: translate(2px);
  background: rgba(50,50,50,0.9);
  border: none;
}
```

```css
.card {
  background: #fff;
  border-radius: 30px;
  padding: 24px;
  border: 1px solid #dee2e6;
}
```

9. Summary

TL;DR: Taboola’s design system is a controlled corporate-tech palette anchored in deep blues and pill-shaped CTAs. Minimal shadows, strong borders, an 8px grid, and Poppins typography make it clean and predictable.

Brand Keywords:

• corporate-confident
• pill-shaped-CTA
• border-over-shadow
• blue-dominant
• poppins-powered