Pixabay Brand Design System Deep Dive

1. Brand Overview

Pixabay is one of those brands that doesn't need to shout. It's a platform for free stock photos, illustrations, vector graphics, and videos — the kind of utility site where design has to do two things: stay out of the way, and make the experience frictionless. You come here to find an image fast, not to marvel at the UI. And they know it.

The vibe: clean, utilitarian, with a touch of friendliness. That friendliness comes almost entirely from their primary green (#00ab6b), which sits in contrast to the otherwise restrained dark neutral (#191b26) and generous white space. This isn't a brand chasing "cool" gradients or micro-interactions — it's about clarity. The design philosophy feels like: “Make it easy, make it fast, don't distract.”

What's interesting is how they balance minimalism with enough visual cues to guide you. Buttons are big pill shapes with 100px border-radius — a choice that feels approachable. Shadows are used sparingly (rgba(25, 27, 38, 0.08) 0px 4px 12px) and mostly for elevation cues, not decoration. Typography is locked down to Open Sans, a workhorse sans-serif, with a consistent fallback stack across all contexts.

Their audience is broad — anyone from a blogger looking for a quick header image to a designer downloading vector assets. The design system reflects this: nothing is niche, everything is safe and accessible. The palette has high-contrast combinations, the spacing system is predictable (8px base), and breakpoints cover everything from tiny mobile (352px) up to ultra-wide (2400px).

In short: Pixabay's design system is the visual equivalent of a well-organized toolbox. You know exactly where everything is, and you can get to it fast. And that’s exactly the point.

2. Color System

2.1 Primary Colors

Their primary brand color is rgb(0, 171, 107) (#00ab6b). This is the green you see in the logo, primary buttons, and accent UI elements. It’s a mid-saturated teal-green — fresh, energetic, but not neon. Psychologically, green here reads as trust and go, which works beautifully for a resource-sharing platform. It says “free to use” without needing words.

Compared to competitors (Unsplash’s monochrome black/white, Pexels’ deep teal), Pixabay’s green is warmer and more saturated, which makes it more visible in CTAs.

2.2 Complete Palette

Note: Some colors are only visible in specific states — e.g., #005fcc is a hover/focus accent for certain interactions.

2.3 Color Relationships

Contrast is solid. Dark text (#191b26) on white is > 12:1 — well above WCAG AA. Primary green (#00ab6b) on white is ~3:1, which just edges AA for large text, but they use it mostly for buttons with white text (contrast ~4.5:1). Hover states often darken green to rgb(0, 130, 81) to improve contrast against white backgrounds.

Dark mode variants exist — white text (rgba(255,255,255,0.88)) on dark backgrounds — with hover accents in blue (#3860be).

2.4 Usage Guide

• Green (#00ab6b): Reserve for primary actions (CTAs, "Download" buttons), logo accents, and highlighted links.
• Dark Neutral (#191b26): Use for core text, headers, and icons.
• White (#ffffff): Dominant background color for content surfaces.
• Accent Blue (#005fcc): Use sparingly for link hovers and focus rings.
• Avoid pairing green with blue — too close in saturation, they compete.
• For dark mode, keep rgba(255,255,255,0.88) for text; avoid pure white for body copy.

3. Typography

3.1 Font Families

Everything is Open Sans. Fallback stack:

Open Sans, Arial, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue

No Google Fonts import detected here — likely self-hosted or CDN.

Two families exist: Open Sans for text, pixabayicons for icon glyphs.

3.2 Type Scale

3.3 Hierarchy

Titles jump from 32px bold down to 20px semi-bold, with body and links in the 14–16px range. It’s a compact scale — nothing oversized — which suits a content-heavy platform. Line heights are generous (1.5–1.6) for readability. Buttons are often 14px/600 weight — clear enough without shouting.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px. Common values:

4.2 Layout

Breakpoints from 352px mobile to 2400px ultra-wide. Notably:

• Mobile: < 600px
• Tablet: 768px–1024px
• Desktop: > 1280px
• Extra-wide: 1800px+

They’re covering everything, likely with fluid container widths rather than fixed max-width.

5. Visual Elements

Border Radius

Everything is rounded, often extremely. Highlights:

• 100px — used for pill buttons and forms
• 8px — common on cards, overlays, menus
• 50% — perfect circles for avatars/icons
• Small radii (2px, 4px) for badges

Consistent rounding — no sharp corners in interactive elements.

Shadows

Primary shadow: rgba(25, 27, 38, 0.08) 0px 4px 12px — subtle depth for dropdowns, modals. Other shadows exist but rare — clearly not a "material design" heavy-drop-shadow brand.

Borders

Mostly 1px solid lines in semi-transparent colors (rgba(25,27,38,0.08), rgba(255,255,255,0.24)) for separation. No chunky borders.

6. Components

6.1 Buttons

They have multiple variants:

Primary

Default: background: #00ab6b, white text, padding 4px 16px 4px 8px, border-radius 100px, no border. Hover darkens to rgb(0, 130, 81). Focus swaps background to rgb(30, 174, 219), adds 1px solid #191b26.

Outline

Default transparent, dark text (rgba(25,27,38,0.88)), border 1px solid rgba(25,27,38,0.24), pill radius. Hover fills green, focus blue.

Ghost

White background, dark text. Hover: transparent + dashed border + inset highlight. Focus: blue background.

Overlay / Square

Dark semi-transparent background, white text, 8px radius. Used over images.

Tonal

Low-opacity background (rgba(255,255,255,0.16) for dark, rgba(25,27,38,0.04) for light), pill radius.

6.2 Links

Four main styles:

• Green default (#00ab6b), hover to blue
• Dark text (#191b26) semi-bold, hover to blue
• White text, hover to blue
• Underlined green (#14bc7d), hover to blue

6.3 Forms

Search inputs: transparent background, 8px padding, no border by default. Focus turns background blue (rgb(30, 174, 219)), adds 1px solid black.

6.4 Cards

8px radius, white background, subtle shadow. No hover transform — static surfaces.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-neutral: #191b26;
  --color-light-gray: #ceced2;
  --color-primary-green: #00ab6b;
  --color-hover-green: #14bc7d;
  --color-transparent-dark-4: rgba(25, 27, 38, 0.04);
  --color-accent-blue: #005fcc;
  --color-hover-button-green: rgb(0, 130, 81);
  --color-focus-blue: rgb(30, 174, 219);

  /* Typography */
  --font-primary: "Open Sans", Arial, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, "Helvetica Neue";
  --font-icons: "pixabayicons";
  --line-height-default: 1.5;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-default: rgba(25, 27, 38, 0.08) 0px 4px 12px;

  /* Borders */
  --border-light: 1px solid rgba(25,27,38,0.08);
  --border-dark: 1px solid rgba(255,255,255,0.24);
}

8. AI Coding Assistant Prompt

# Pixabay Design System Specification

System Prompt:
You are a Pixabay design expert. Build UIs matching their visual language exactly.

Brand Context:
Pixabay is a free stock media platform with a clean, functional design. The system is minimal, with a friendly primary green accent, high-contrast neutrals, and an 8px spacing grid. Typography is locked to Open Sans.

Color Palette:
- Primary Green: #00ab6b — Logo, primary buttons, CTAs
- Hover Green: rgb(0, 130, 81) — Button hover
- Hover Accent Green: #14bc7d — Link hover
- Dark Neutral: #191b26 — Headers, text, icons
- White: #ffffff — Backgrounds, button text
- Light Gray: #ceced2 — Secondary text, dividers
- Transparent Dark 4%: rgba(25, 27, 38, 0.04) — Tonal buttons
- Accent Blue: #005fcc — Link hover/focus
- Focus Blue: rgb(30, 174, 219) — Input/button focus backgrounds

Typography:
Font families:
- Primary: "Open Sans", Arial, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, "Helvetica Neue"
- Icons: "pixabayicons"

Sizes (px/rem, weight, line-height):
- H1: 32px / 2.00rem, 700, 1.5 — Page titles
- H2: 24px, 400, — — Section headings
- Link: 20px, 400, 1.5 — Navigation links
- Body: 14px, 400, 1.5 — Paragraph text
- Button: 14px, 600, 1.43 — CTAs
- Caption: 12px, 600, 1.33 — Labels

Spacing & Grid:
Base: 8px
Scale: 4px, 8px, 12px, 16px, 24px, 80px
Button padding: 4px 16px
Card padding: multiples of 8px

Border Radius:
- sm: 4px — Badges
- md: 8px — Cards, overlays
- pill: 100px — Buttons, forms
- circle: 50% — Avatars

Shadows & Depth:
- Default: rgba(25, 27, 38, 0.08) 0px 4px 12px — dropdowns, modals

Component Specifications:

Primary Button:
Default:
background: #00ab6b;
color: #ffffff;
padding: 4px 16px 4px 8px;
border-radius: 100px;
border: none;
font-weight: 600;
font-size: 14px;
Hover:
background: rgb(0, 130, 81);
Focus:
background: rgb(30, 174, 219);
border: 1px solid #191b26;
color: #ffffff;

Outline Button:
Default:
background: transparent;
color: rgba(25,27,38,0.88);
border: 1px solid rgba(25,27,38,0.24);
border-radius: 100px;

Navigation Links:
Default: color: #00ab6b; text-decoration: none;
Hover: color: #005fcc;

Input Fields:
Default: background: transparent; padding: 8px; border: none;
Focus: background: rgb(30, 174, 219); border: 1px solid #000;

Layout & Responsive Rules:
Breakpoints:
- mobile: 352px–600px
- tablet: 768px–1024px
- desktop: 1280px+
Padding: multiples of 8px

Interaction Rules:
Transitions: 150ms ease on hover/focus
Focus indicators: 1px solid border in focus color

DO:
- Use only colors from palette
- Maintain 8px spacing grid
- Use Open Sans everywhere
- Keep buttons pill-shaped
- Use subtle shadows only for elevation

DON'T:
- Add new colors
- Mix sharp and rounded corners
- Overuse shadows
- Change font family

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #00ab6b;
  color: #ffffff;
  padding: 4px 16px 4px 8px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(0, 130, 81); }
.btn-primary:focus {
  background: rgb(30, 174, 219);
  border: 1px solid #191b26;
  color: #ffffff;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(25, 27, 38, 0.08) 0px 4px 12px;
}
```

Input:
```css
.input {
  padding: 8px;
  background: transparent;
  border: none;
}
.input:focus {
  background: rgb(30, 174, 219);
  border: 1px solid #000;
}
```

9. Summary

TL;DR — Pixabay’s design system is friendly minimalism: primary green for action, dark neutral for text, white for space. Open Sans everywhere. 8px spacing grid. Rounded everything. Shadows only where needed.

Brand Keywords:

• friendly-minimalist
• utility-first
• green-accent
• pill-shaped
• high-contrast