Outbrain Design System Deep Dive

1. Brand Overview

Outbrain’s visual language is built for trust and clarity in a space that can often feel chaotic — native advertising and content discovery. The vibe is corporate but approachable. They’re selling performance marketing tools to publishers and advertisers, so the design has to feel credible, easy to navigate, and not overloaded with visual gimmicks.

On their site, they’ve gone with a restrained palette. Dark navy (#0c142b) anchors the UI, paired with pure white for high contrast. There’s a lot of black (#000000) in headers and controls, which gives a certain “seriousness” to the layout. Accent colors are minimal — a single saturated blue (#005fcc) shows up for hover/focus states, and an old-school link blue (#0000ee) pops in default HTML link styling. No flashy gradients, no neon. This makes sense: advertisers want a platform that looks reliable, not experimental.

Typography is split between a modern sans — Plus Jakarta Sans — and the classic Georgia serif. Serif in headings adds authority and a touch of editorial style. Sans is used for UI, buttons, and smaller headings. This duality mirrors their audience: half tech platform, half content partner. It’s a smart move.

Spacing is disciplined: multiples of an 8px grid, with occasional half-steps (5px, 13.5px) for fine-tuning. This keeps layouts consistent but allows small tweaks for optical alignment.

The overall feel: clean, structured, minimal color, strong typographic hierarchy. It’s not trying to be “fun.” It’s here to be clear, persuasive, and professional.

2. Color System

2.1 Primary Colors

Primary brand anchor: Dark Navy #0c142b. This is the header background, buttons, and key text areas. It’s a deep hue that communicates authority and stability.

White (#ffffff) is the primary contrast color — used for text on dark backgrounds, button fills, and page backgrounds.

Black (#000000) is used heavily in the header and buttons, sometimes interchangeably with navy for strong contrast.

From a psychology standpoint: navy + white is a safe choice. It’s common in financial, tech, and publishing. Compared to competitors like Taboola (lighter blues) or adtech dashboards (often teal), Outbrain’s navy reads more premium and editorial.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. White on navy or black exceeds WCAG’s AA/AAA easily. Navy (#0c142b) on white is also safe. The only potential accessibility issue is light gray (#d0d0d0) on white — too low contrast for body text, fine for disabled states.

Dark mode? They’re already working in a dark-heavy palette. A “light mode” would invert navy/white, but the current design is already optimized for dark headers and sections.

2.4 Usage Guide

• Use #0c142b for primary action backgrounds, header bars.
• Text on #0c142b should be #ffffff.
• Avoid using #d0d0d0 for essential text — it’s too low contrast.
• #005fcc is for hover/focus outlines or highlighting interactive elements. Don’t use it for static decorations.
• Legacy link blue (#0000ee) is only for unstyled HTML links — most styled links override it.

3. Typography

3.1 Font Families

• Plus Jakarta Sans (Google Fonts) — main UI sans. Fallbacks: Arial.
• Georgia — serif headings, editorial tone.
• icomoon — icon font for buttons and captions.
• Open Sans — appears in captions and some link styles.
• WistiaPlayerInter — video player font (fallback Helvetica).

Variable fonts are enabled for Plus Jakarta Sans.

3.2 Type Scale

3.3 Hierarchy

Georgia’s large sizes dominate top-level headings — editorial credibility. Plus Jakarta Sans takes over for UI and secondary headings, offering modernity and legibility. Sizes step down in logical increments — big jumps for hero areas (63.8px → 58px → ~50px), then smaller steps down to body/caption sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but they use half-steps and odd values for fine control.

4.2 Layout

Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 767px, 896px, 1280px, 1440px, 1700px.

They cover fine-grained mobile thresholds (400–600px) and standard tablet (767px) and desktop sizes (1280px+).

5. Visual Elements

Border Radius

Shadows

They use subtle shadows for depth:

• rgba(0, 0, 0, 0.1) 0px 6px 25px — soft large shadow.
• rgba(0, 0, 0, 0.2) 0px 4px 8px — tighter shadow.
• Inset white: rgb(255, 255, 255) 0px 0px 0px 2px inset — used for inner borders.
• rgba(0, 0, 0, 0.2) 0px 0px 18px — medium spread.

Borders

Mostly 1px solid in dark navy, white, or light gray. Used on buttons and dividers.

6. Components

6.1 Buttons

Three main variants:

CTA Button (.button.cta)

• Default: transparent background, white text, 13.5px vertical / 15px horizontal padding, 100px radius (pill), 1px solid white border.
• Hover: white background, white text (odd — text would disappear unless layered), no border, 4px shadow in #717582.
• Active: dark green background (#2c6415), white text, 1px semi-transparent green border.
• Focus: bright blue background (#1eaedb), white text, 1px black border, 4px shadow.

Register Button (.button.register)

• Default: white background, dark navy text, 16px vertical / 24px horizontal padding, 100px radius, no border.
• Hover/Active/Focus states match CTA (same odd hover behavior).

Primary Button (.button)

• Default: dark navy background, white text, 16px vertical / 24px horizontal padding, 100px radius.
• States same as above.

6.2 Links

Four styles:

• White text, underline default, hover removes underline and turns medium gray.
• Link blue (#0000ee), underline default, hover removes underline and turns medium gray.
• Navy text, underline default, hover removes underline and turns medium gray.
• Light gray text, no underline default, hover turns medium gray.

6.3 Forms

No text inputs styled in data — likely native forms or custom JS components.

6.4 Cards

Radius 16px or 20px. Shadows like rgba(0, 0, 0, 0.1) for subtle lift.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-gray: #d0d0d0;
  --color-dark-navy: #0c142b;
  --color-medium-gray: #575757;
  --color-link-blue: #0000ee;
  --color-saturated-blue: #005fcc;
  --color-swiper-theme: #007aff;

  /* Typography */
  --font-plus-jakarta: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-georgia: Georgia, serif;
  --font-icomoon: icomoon;
  --font-open-sans: 'Open Sans', calibri, Arial, sans-serif;
  --font-wistia-inter: WistiaPlayerInter, Helvetica, sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13_5: 13.5px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-32: 32px;
  --space-40: 40px;
  --space-42: 42px;
  --space-50: 50px;
  --space-56: 56px;
  --space-70: 70px;
  --space-100: 100px;
  --space-160: 160px;
  --space-208: 208px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-60: 60px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-large-soft: rgba(0, 0, 0, 0.1) 0px 6px 25px 0px;
  --shadow-medium-tight: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
  --shadow-inset-white: rgb(255, 255, 255) 0px 0px 0px 2px inset;
  --shadow-medium-spread: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Outbrain Design System Specification

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

## Brand Context
Outbrain’s design is professional, editorial, and minimal. It uses a dark navy and white palette, large serif headings for authority, and modern sans-serif for UI clarity. Spacing is disciplined with an 8px grid, and corners are consistently rounded with pill shapes for CTAs.

## Color Palette
- Black: #000000 — Headers, buttons, text
- White: #ffffff — Text on dark backgrounds, page backgrounds
- Light Gray: #d0d0d0 — Borders, disabled text
- Dark Navy: #0c142b — Primary headers, buttons
- Medium Gray: #575757 — Swiper nav buttons, hover states
- Link Blue: #0000ee — Default HTML links
- Saturated Blue: #005fcc — Hover/focus accents
- Swiper Theme Blue: #007aff — Swiper component theme

## Typography
- Plus Jakarta Sans, Arial — UI, buttons, links
- Georgia — Large headings, editorial text
- icomoon — Icon font
- Open Sans — Captions, small labels
- WistiaPlayerInter — Video player text

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Georgia | 63.8px | 400 | 1.09 | Hero headlines |
| H1 | Plus Jakarta Sans | 58px | 600 | 1.20 | Hero headlines |
| H1 | Georgia | 55.2px | 400 | 1.00 | Section titles |
| H1 | Georgia | 50.6px | 400 | 1.09 | Section titles |
| ... | ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid. Values: 4px, 5px, 8px, 10px, 12px, 13.5px, 15px, 16px, 20px, 24px, 25px, 32px, 40px, 42px, 50px, 56px, 70px, 100px, 160px, 208px.

## Border Radius
- sm: 2px — Small buttons
- sm2: 2.5px — Region tags
- md: 5px — Default corners
- md2: 6px — Images
- lg: 16px — Cards
- xl: 20px — Pictures
- 60px — Circular media controls
- full-pill: 100px — CTA buttons
- full-round: 50% — Round elements

## Shadows & Depth
- Large soft: rgba(0,0,0,0.1) 0px 6px 25px
- Medium tight: rgba(0,0,0,0.2) 0px 4px 8px
- Inset white: rgb(255,255,255) 0px 0px 0px 2px inset
- Medium spread: rgba(0,0,0,0.2) 0px 0px 18px

## Components

### Primary Button
Default:
```css
.btn-primary {
  background-color: #0c142b;
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 100px;
  border: none;
  font-weight: 600;
  font-size: 16px;
}
.btn-primary:hover {
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: #717582 0px 0px 0px 4px;
}
.btn-primary:active {
  background-color: #2c6415;
  border: 1px solid rgba(162,192,169,0.5);
}
.btn-primary:focus {
  background-color: #1eaedb;
  border: 1px solid #000000;
  box-shadow: #717582 0px 0px 0px 4px;
}
```

### Secondary Button (`.button.register`)
Same structure with white background and navy text by default.

### Links
White text links: underline default, turn medium gray on hover, remove underline.

### Cards
Background: white, border-radius: 16px or 20px, shadow: rgba(0,0,0,0.1) 0px 6px 25px, padding: 24px.

## Layout & Responsive Rules
- Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 767px, 896px, 1280px, 1440px, 1700px.
- Max content width: 1280px
- Page padding: 16px mobile, 24px desktop

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: 4px shadow in #717582
- Hover states: background swap + shadow

## DO
- Use only palette colors.
- Keep spacing multiples of 8px (allow 5px, 13.5px exceptions).
- Maintain consistent border-radius per component type.
- Use Georgia for large headings, Plus Jakarta Sans for UI.
- Keep shadows subtle.

## DON'T
- Invent new accent colors.
- Mix sharp corners with pill buttons in same element.
- Use low contrast gray for essential text.
- Remove focus indicators.

## Code Examples

Primary Button:
```css
.button-primary { background:#0c142b; color:#fff; padding:16px 24px; border-radius:100px; font-weight:600; }
.button-primary:hover { background:#fff; color:#fff; box-shadow:#717582 0 0 0 4px; }
```

Card:
```css
.card { background:#fff; border-radius:16px; padding:24px; box-shadow:rgba(0,0,0,0.1) 0 6px 25px; }
```

Link:
```css
a { color:#fff; text-decoration:underline; font-weight:600; }
a:hover { color:#575757; text-decoration:none; }
```

9. Summary

TL;DR — Outbrain’s design system is navy + white, serif + sans, disciplined spacing, pill-shaped CTAs, and subtle shadows. Professional and editorial, not playful.

Brand Keywords — editorial-tech, navy-minimalist, serif-sans-hybrid, grid-disciplined, trust-focused