Adblock Plus Design System Deep Dive

1. Brand Overview

Adblock Plus is unapologetically functional. It’s not here to entertain you with whimsical gradients or delight you with micro-interactions. It’s here to block ads. That focus bleeds into the design system: utilitarian, straightforward, and tuned for clarity over decoration.

The vibe? Trustworthy and no-nonsense. The color palette is stripped back to a handful of neutrals with blue and green accents for interactive elements. Typography is consistent—one family across everything—and the scale is tight. Buttons are clear, links behave predictably, and spacing adheres to an 8px-derived scale.

This is a product for people who want control. The design reflects that: minimal distractions, high-contrast UI elements, and predictable states. There’s a subtle friendliness in the rounded corners (4px–8px) and soft shadows on buttons, but it’s not overplayed. You’re not going to find a lot of decorative icons or illustrative fluff here.

What’s interesting is that despite being a browser extension with a technical audience, the site doesn’t lean into “developer aesthetic” (monospace fonts, terminal colors). Instead, it adopts a clean, consumer-friendly tone. Source Sans Pro is legible and neutral. Blues and greens signal action and success, while neutrals keep the rest of the interface calm.

Navigation is simple, breakpoints are standard, and the grid is clearly responsive-first. The design system feels like it’s optimized for clarity across devices rather than pushing any visual envelope. And that works—this is a brand that sells trust through consistency.

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(88, 88, 88) (#585858), used for text and key neutral elements. Odd choice for a “primary”—most brands pick their most saturated accent—but here, “primary” refers to the core neutral tone anchoring the site.

Secondary semantic color: rgb(247, 247, 247) (#f7f7f7), essentially a light background.

Action colors come from the palette, not the semantic set—blues (#0779d0 and #00a1de) for CTAs, greens (rgb(10, 173, 3)) for success.

Psychology: Blue here signals trust and technology; green signals “go” or “success.” The grey primary feels stable and unintrusive.

Competitor comparison: uBlock Origin leans more into blue-grey tech tones; Adblock Plus is slightly warmer in its neutrals and uses more saturated blues.

2.2 Complete Palette

2.3 Color Relationships

Contrast: White-on-blue (#ffffff on #0779d0) is high contrast. Grey-on-white (#555555 on #ffffff) meets WCAG AA easily. Black-on-light-grey is bulletproof.

Accessibility: States are differentiated by both color and shadow (hover/focus use inset shadows). No dark mode is evident—palette is fixed.

2.4 Usage Guide

• Works well: Blue #0779d0 for primary actions with white text—clear, accessible.
• Avoid: Grey text on grey backgrounds (#717171 on #ececec)—could get low contrast.
• Keep green (rgb(10, 173, 3)) for success actions/download prompts—don’t mix into navigation.
• Use semantic neutrals (#585858 and #f7f7f7) for base layout; accents for actions only.

3. Typography

3.1 Font Families

One font family for everything: Source Sans Pro, fallback Arial. No Google Fonts or Adobe Fonts sources indicated—likely self-hosted.

This is a safe choice: humanist sans, good x-height, works for both headings and body. It’s unobtrusive.

3.2 Type Scale

3.3 Hierarchy

They’re using multiple heading-1 contexts with different sizes—likely responsive adjustments. The scale is tight: smallest body text is 10.8px, largest heading is 50px. This keeps hierarchy clear without huge jumps. Buttons sit at 18px–21.6px, making them feel substantial.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px-derived (values like 4.05px, 9px, 18px, 36px). Common values:

4.2 Layout

Breakpoints: 452px, 480px, 575px, 576px, 767px, 768px, 889px, 890px, 991px, 992px, 1023px, 1024px, 1200px.

This is a standard responsive set—mobile-first, with tablet and desktop ranges. No fluid typography indicated, but multiple heading sizes suggest responsive type.

5. Visual Elements

Border Radius

Values:

• 0px 0px 4px 4px — menus
• 4px — buttons, divs
• 5px — buttons
• 6px — buttons, links
• 6.3px — spans (slightly odd precision)
• 8px — badges

Rounded corners are consistent and small—nothing pill-shaped.

Shadows

Shadows are used sparingly:

• rgba(0,0,0,0.15) 0px 5px 20px — buttons
• rgb(244,244,244) 0px 1px 0px 1px — subtle divider
• rgba(0,0,0,0.16) 0px 3px 3px — buttons
• rgba(0,0,0,0.1) 0px -5px 20px — top shadows
• rgba(0,0,0,0.16) 0px 10px 20px — depth

Borders

Minimal:

• Solid 1px #666666 — links
• Nav divider: 1px solid #212121 bottom

6. Components

6.1 Buttons

Blue CTA

• Default: bg rgb(7,151,225), color #ffffff, padding 12.6px 54px, radius 6px, shadow rgba(0,0,0,0.15) 0px 5px 20px, font-weight 700, font-size 18px.
• Hover: bg #0679b4, inset shadow rgb(0,93,128) 0px 0px 0px 3px, opacity 0.3.
• Active: same as hover without opacity change.
• Focus: same as hover.

Green Download

• Default: bg rgb(10,173,3), color white, padding 14px 18px 14px 72px, radius 5px, shadow rgba(0,0,0,0.16) 0px 3px 3px, font-size 16px, font-weight 700.
• Hover/Active/Focus: bg #0679b4, same inset shadow.

Black Cookie

• Default: bg black, color white, padding 9px 27px, radius 4px, font-weight 400, font-size 18px, no shadow.
• Hover/Active/Focus: bg #0679b4, inset shadow.

6.2 Links

Variants:

• White text (footer): no underline, underline on hover.
• Black text: underline on hover, changes to white.
• Blue #0779d0 links: underline on hover.
• Grey #555555 text links: underline on hover.
• Underlined black links: retain underline.

6.3 Forms

No text input specs extracted—likely minimal styling.

6.4 Cards

No explicit card component data—but shadows suggest depth use in modals or sections.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-grey: #ececec;
  --color-blue-1: #0779d0;
  --color-dark-grey: #555555;
  --color-mid-grey: #717171;
  --color-grey-160: #a0a0a0;
  --color-grey-214: #d6d6d6;
  --color-blue-2: #00a1de;
  --color-blue-hover: #0679b4;
  --color-semantic-primary: #585858;
  --color-semantic-secondary: #f7f7f7;
  --color-green-download: rgb(10,173,3);

  /* Typography */
  --font-family-base: "Source Sans Pro", Arial;
  --font-size-h1-lg: 50px;
  --font-size-h1-md: 42px;
  --font-size-h1-sm: 36px;
  --font-size-h1-xs: 32px;
  --font-size-button-lg: 21.6px;
  --font-size-button-md: 18px;
  --font-size-caption: 14px;

  /* Spacing */
  --space-1: 1px;
  --space-1_8: 1.8px;
  --space-3: 3px;
  --space-4_05: 4.05px;
  --space-4_5: 4.5px;
  --space-9: 9px;
  --space-10_8: 10.8px;
  --space-12_6: 12.6px;
  --space-13_5: 13.5px;
  --space-18: 18px;
  --space-21_6: 21.6px;
  --space-27: 27px;
  --space-32_4: 32.4px;
  --space-36: 36px;
  --space-54: 54px;
  --space-72: 72px;
  --space-90: 90px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-6_3: 6.3px;
  --radius-8: 8px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.15) 0px 5px 20px;
  --shadow-sm: rgba(0,0,0,0.16) 0px 3px 3px;
  --shadow-divider: rgb(244,244,244) 0px 1px 0px 1px;
  --shadow-top: rgba(0,0,0,0.1) 0px -5px 20px;
  --shadow-xl: rgba(0,0,0,0.16) 0px 10px 20px;
}

8. AI Coding Assistant Prompt

# Adblock Plus Design System Specification

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

## Brand Context
Adblock Plus values clarity, trust, and functionality. The design system is minimal, with a neutral base and strong accent colors for actions. Rounded corners and subtle shadows add approachability without sacrificing efficiency.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark
- Black: #000000 — Text, buttons
- Light Grey: #ececec — Footer surfaces
- Blue 1: #0779d0 — CTAs, app store buttons
- Dark Grey: #555555 — Secondary text
- Mid Grey: #717171 — Secondary text
- Grey 160: #a0a0a0 — Neutral UI
- Grey 214: #d6d6d6 — Low-emphasis elements
- Blue 2: #00a1de — Link buttons
- Blue Hover: #0679b4 — Hover/focus states
- Semantic Primary: #585858 — Base text
- Semantic Secondary: #f7f7f7 — Background
- Green Download: rgb(10,173,3) — Download/success actions

## Typography
Font family: "Source Sans Pro", Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Large | 50px | 600 | 1.30 | Hero titles |
| H1 Medium | 42px | 600 | 1.40 | Section titles |
| H1 Small | 36px | 600 | 1.20 | Subsection titles |
| H1 XS | 32px | 600 | 1.40 | Compact headings |
| Button LG | 21.6px | 400 | 1.40 | CTA buttons |
| Button MD | 18px | 400 | 1.40 | Secondary buttons |
| Caption | 14px | 300 | 1.50 | Labels, captions |

## Spacing & Grid
Base: 8px-derived scale
Values: 4.05px, 9px, 12.6px, 18px, 27px, 36px, 54px, 72px, 90px
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 4px — small buttons
- md: 5px — medium buttons
- md-plus: 6px — primary buttons
- precise: 6.3px — spans
- lg: 8px — badges

## Shadows & Depth
- Large: rgba(0,0,0,0.15) 0px 5px 20px — primary buttons
- Small: rgba(0,0,0,0.16) 0px 3px 3px — secondary buttons
- Divider: rgb(244,244,244) 0px 1px 0px 1px

## Component Specifications

### Primary Button
Default: bg #0797e1, color #ffffff, padding 12.6px 54px, radius 6px, shadow var(--shadow-lg), font-weight 700, font-size 18px.
Hover: bg #0679b4, inset shadow #005d80 0px 0px 0px 3px, opacity 0.3.
Active: same as hover without opacity change.
Focus: same as hover.

### Secondary Button (Green Download)
Default: bg rgb(10,173,3), color white, padding 14px 18px 14px 72px, radius 5px, shadow var(--shadow-sm), font-size 16px, font-weight 700.
Hover/Active/Focus: bg #0679b4, inset shadow #005d80.

### Black Button (Cookie)
Default: bg black, color white, padding 9px 27px, radius 4px, no shadow, font-weight 400, font-size 18px.
Hover/Active/Focus: bg #0679b4, inset shadow #005d80.

### Navigation Links
Default: color varies (white, black, blue), no underline.
Hover: underline, color may change to white.

## Layout & Responsive Rules
Breakpoints: 452px, 480px, 575px, 576px, 767px, 768px, 889px, 890px, 991px, 992px, 1023px, 1024px, 1200px
Mobile-first, adjust type sizes per breakpoint.

## Interaction Rules
- Transition timing: 150ms ease for hover/focus
- Hover states: change bg + shadow
- Focus indicators: inset shadow

## DO List
- Use ONLY colors from the palette
- Maintain 8px-based spacing
- Keep button radii consistent per spec
- Use Source Sans Pro for all text
- Keep hover states distinct

## DON'T List
- Don’t invent new accent colors
- Don’t mix sharp and rounded corners
- Don’t reduce button padding below spec
- Don’t remove focus styles

## Code Examples

```css
.btn-primary {
  background: #0797e1;
  color: #ffffff;
  padding: 12.6px 54px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  box-shadow: rgba(0,0,0,0.15) 0px 5px 20px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #0679b4;
  box-shadow: #005d80 0px 0px 0px 3px inset;
  opacity: 0.3;
}
.btn-primary:focus {
  background: #0679b4;
  box-shadow: #005d80 0px 0px 0px 3px inset;
}
```

```css
.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 27px;
  box-shadow: rgba(0,0,0,0.15) 0px 5px 20px;
}
```

```css
.input {
  border: 1px solid #666666;
  border-radius: 4px;
  padding: 9px;
  font-size: 16px;
  background: #ffffff;
}
.input:focus {
  border-color: #0679b4;
  outline: none;
}
```

9. Summary

TL;DR — Adblock Plus’ design system is minimal, neutral-heavy, with saturated blues and greens for actions. One font family, tight spacing, small-radius corners, and predictable hover/focus states make it feel trustworthy and functional.

Brand Keywords — trust-first, utilitarian-clean, neutral-accented, action-saturated, grid-disciplined