Pornhub Design System Deep-Dive

1. Brand Overview

Pornhub’s design system is built for high-volume, high-engagement content consumption. This isn’t a “soft” brand — it’s unapologetically bold with a utilitarian edge.

Visually, everything is grounded in high-contrast dark mode. The background structure is made of deep blacks (#000000, #1b1b1b, #242424) with selective highlights in saturated orange (#ff9000). The tone is direct and functional: you find what you want quickly, you get strong visual cues for interaction, and there’s zero ornamentation beyond what helps navigation or highlights content.

Their design philosophy seems to boil down to three rules:

1. Make the brand pop in a sea of distraction — the orange is the “flag” that draws eyes.
2. Strip UI down to essentials — no fluffy gradients, no excessive motion, just clean blocks of content.
3. Support dark mode first — light elements are accents, not foundations.

Typography leans on neutral sans-serifs (Arial, Open Sans) to keep text legible at high volumes and varied sizes. They use uppercase transformations for certain navigational elements to create scanning efficiency.

Layout-wise, everything operates on an 8px-derived grid — frequent spacing values are 2px, 5px, 6px, 8px, 20px, and 24px — tight enough to pack content while still giving breathing room.

This system is for an audience that wants instant content recognition. No learning curve. High clarity even at the smallest viewport. Pornhub’s design system nails this by combining brand-locked color, predictable interaction styling, and a grid system that aligns consistently from buttons to cards.

2. Color System

2.1 Primary Colors

Primary brand color: Orange #ff9000.
Role: It’s a high-energy accent that screams interaction — CTAs, brand mark background, key action buttons. It works because it's rare in the palette — everything else is grayscale or black. That rarity makes it pop.

Psychology: Orange is associated with excitement, energy, and urgency. Compared to competitors (many use reds or pinks), Pornhub’s orange stands apart in the adult industry by leaning into sporty vitality rather than overt sensuality.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong:

• Orange (#ff9000) on black (#000000) = WCAG AAA for normal text.
• White (#ffffff) on black (#000000) = max contrast.
• Light grays (#969696, #c6c6c6) sit on near-black — clear but less priority, as they’re often secondary actions.

Accessibility: The palette is optimized for legibility in low-light contexts. No pastels, no subtle backgrounds. Dark mode is standard, with bright accents for focus.

2.4 Usage Guide

DO:

• Use #ff9000 only for critical interactive elements.
• White for primary text and icons on dark backgrounds.
• Grays for less important text.

Avoid:

• Mixing multiple bright colors (brand is single-accent).
• Orange text on mid-gray background — it loses punch.

3. Typography

3.1 Font Families

Two core families:

• Arial, Helvetica fallback — ubiquitous system font, reliable, legible.
• Open Sans with Arial fallback — used occasionally for headings with uppercase transformation.

Plus ph-icons — custom icon font.

Sources: Google Fonts not loaded here; custom/self-hosted for ph-icons.

3.2 Type Scale

Here’s the extracted scale (a selection; full scale is long):

(Full list has dozens more entries.)

3.3 Hierarchy

They build hierarchy through weight & transform, not just size. For example:

• Large uppercase Open Sans at 50px for hero headlines.
• Smaller uppercase captions for scanability in lists.
• Buttons almost always at 14–20px, bold, for click confidence.

Readability is clear even at dense layouts because letterspacing adjustments are minimal — no over-designed spacing.

4. Spacing & Layout

4.1 Spacing Scale

Base system: 8px-derived scale, but uses half steps (2px, 5px, 6px) for tighter packing.

4.2 Layout

Breakpoints:

• 401px, 410px — mobile UI tweaks
• 739px, 768px, 799px, 800px — small tablet region
• 845px, 900px — medium tablet
• 1000px, 1024px — small desktop
• 1349px, 1350px — large desktop

Fluid approach: content blocks re-stack after 800px, with buttons scaling padding.

5. Visual Elements

Border Radius

Core set is small radii → modest softness:

• 3px, 4px, 8px, 10px
• Larger for special cases: 20px for rounded-inputs, 50% for avatars.

They rarely mix extreme radii — pill shapes used sparingly.

Shadow System

Mostly flat design. Few shadows:

• rgba(0, 0, 0, 0.2) 0px 1px 2px — small depth hint.
• Occasional white glow for highlight (rgba(255, 255, 255, 0.15) 0px 0px 40px 5px).

Borders more common than shadows for separating content.

Borders & Dividers

Heavy reliance on 1px hairline dividers (white or dark gray) for segmentation.

6. Components

6.1 Buttons

Variant 1 — Outline white:

• Default: transparent bg, white text, 10px vertical padding, 12px horizontal, border-radius:3px, 1px white border, bold 14px font.
• Hover: no major change (keeps stability).
• Focus: no special state in data.

Variant 2 — Solid dark with orange border:

• Bg: #1f1f1f
• Text: white
• Border: 3px solid #ff9000
• Padding: 16px
• Radius: 4px
• Weight: bold 20px

Variant 3 — Solid gray:

• Bg: #2f2f2f
• Text: #c6c6c6
• Padding: 5px
• Radius: 4px
• Weight: normal 11px

6.2 Links

Variants:

• Orange link: #ff9000, no underline — used for CTAs.
• White bold link: emphasis.
• Gray link (#969696) — secondary actions.

Hover behavior: text-decoration remains none — keeps clean look.

6.3 Forms

Text fields:

• Bg: #252525
• Text: white
• Radius: 0px 20px 20px 0px
• Focus: #ff9000 glow.

6.4 Cards

No explicit card data here — likely using same radii and background as modal blocks with 10px radius, flat bg, no hover shadows.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-light: #969696;
  --color-gray-mid: #c6c6c6;
  --color-orange: #ff9000;
  --color-gray-dark: #767676;
  --color-gray-ab: #ababab;
  --color-black: #000000;
  --color-near-black: #1b1b1b;
  --color-brown-dark: #433b36;
  --color-charcoal: #242424;

  /* Typography */
  --font-primary: Arial, Helvetica;
  --font-secondary: "Open Sans", Arial;
  --font-icons: ph-icons;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-20: 20px;
  --space-24: 24px;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.2) 0px 1px 2px 0px;
  --shadow-glow-white: rgba(255,255,255,0.15) 0px 0px 40px 5px;

  /* Breakpoints */
  --bp-mobile-sm: 401px;
  --bp-mobile-lg: 410px;
  --bp-tablet-sm: 739px;
  --bp-tablet: 768px;
  --bp-tablet-lg: 800px;
  --bp-desktop-sm: 1024px;
  --bp-desktop-lg: 1350px;
}

8. AI Coding Assistant Prompt

# Pornhub Design System Specification

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

## Brand Context
Pornhub’s design is bold, dark-mode first, and driven by a single strong orange accent. Layout is tight, content-heavy, and stripped down to essentials. Typography is utilitarian, grid spacing predictable.

## Color Palette
- White: #ffffff — Text on dark backgrounds, logo text, button outlines
- Light Gray: #969696 — Secondary text (usernames, subtle actions)
- Mid Gray: #c6c6c6 — Navigation links, menu text
- Orange (Primary): #ff9000 — CTAs, primary actions, brand accent backgrounds
- Dark Gray: #767676 — Neutral text elements
- Gray AB: #ababab — Secondary UI surfaces
- Black: #000000 — Background, icons, high-contrast text
- Near Black: #1b1b1b — Headers, button backgrounds
- Brownish Dark: #433b36 — Overlay panels
- Charcoal: #242424 — Dividers, structural backgrounds

## Typography
Fonts:
- Primary: Arial, Helvetica
- Secondary: "Open Sans", Arial
- Icons: ph-icons

Sizes:
| Level     | Font        | Size   | Weight | Line Height | Use |
|-----------|-------------|--------|--------|-------------|-----|
| H1 Hero   | Open Sans   | 50px   | 300    | 1.28        | Page titles |
| H1 Bold   | Arial       | 40px   | 700    | —           | Section headers |
| Heading   | Arial       | 32px   | 400    | 1.00        | Sub-heads |
| Button LG | Arial       | 20px   | 700    | —           | Primary CTA |
| Button SM | Arial       | 14px   | 700    | 1.40        | Secondary CTA |
| Caption   | Arial       | 12px   | 900    | —           | Labels |

## Spacing & Grid
Base: 8px grid with half-step values.
Tokens:
- 1px — dividers
- 2px — tight padding
- 3px — small gaps
- 5px — small padding buttons
- 6px — small element spacing
- 8px — standard gap
- 20px — medium horizontal padding
- 24px — large padding for sections

## Border Radius
- xs: 3px — small buttons
- sm: 4px — inputs
- md: 8px — cards
- lg: 10px — modals
- xl: 20px — rounded inputs
- full: 50% — avatars

## Shadows & Depth
- sm: rgba(0,0,0,0.2) 0px 1px 2px
- glow-white: rgba(255,255,255,0.15) 0px 0px 40px 5px

## Component Specifications

### Primary Button
Default:
```css
background-color: rgb(31,31,31);
color: #ffffff;
padding: 16px;
border-radius: 4px;
border: 3px solid #ff9000;
font-weight: 700;
font-size: 20px;
```
Hover: no change.  
Focus: outline none.  
Active: none.  
Disabled: reduce opacity to 0.5.

### Secondary Button (Outline)
```css
background-color: transparent;
color: #ffffff;
padding: 10px 12px;
border-radius: 3px;
border: 1px solid #ffffff;
font-weight: 700;
font-size: 14px;
```

### Input Field
```css
background-color: #252525;
color: #ffffff;
border: none;
border-radius: 0px 20px 20px 0px;
padding: 2px 5px 2px 0px;
```
Focus:
```css
box-shadow: #ff9000 0px 0px 1px;
```

## Layout & Responsive Rules
Breakpoints:
- Mobile small: 401px
- Mobile large: 410px
- Tablet small: 739px
- Tablet: 768px
- Tablet large: 800px
- Desktop small: 1024px
- Desktop large: 1350px

## Interaction Rules
- Transitions: 150ms ease for hover/focus.
- Focus: use orange glow.
- Loading: keep user feedback minimal — spinner in white.

## DO List
- Use only palette colors.
- Stick to 8px grid multiples.
- Use primary orange for critical actions only.
- Keep link hover states without underline.
- Bold weights for button text.

## DON'T List
- No multi-accent schemes.
- Don’t mix sharp and rounded corners without clear hierarchy.
- Avoid drop shadows except defined tokens.
- Don’t underline CTAs unless necessary.

## Code Examples

Primary Button:
```css
.btn-primary {
  background-color: #1f1f1f;
  color: #ffffff;
  padding: 16px;
  border: 3px solid #ff9000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 20px;
}
```

Secondary Button:
```css
.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px;
  border: 1px solid #ffffff;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14px;
}
```

Input:
```css
.input-text {
  background-color: #252525;
  color: #ffffff;
  border: none;
  border-radius: 0px 20px 20px 0px;
  padding: 2px 5px 2px 0px;
}
.input-text:focus {
  box-shadow: #ff9000 0px 0px 1px;
}
```

9. Summary

TL;DR — Pornhub’s design system is a dark-mode fortress with bursts of energizing orange. Everything is grid-locked, typography is brutally utilitarian, and the focus is on crystal-clear interactions without decorative fluff.

Brand Keywords:

• dark-mode-centric
• high-contrast-minimal
• action-focused
• utilitarian-grid
• single-accent-commitment