Remixes of pornhub.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Pornhub
description: |
This design system embodies a bold, high-contrast aesthetic centered on dark
surfaces and vibrant accent pops. The visual language is deliberately
minimalist, favoring sharp edges and direct interaction patterns over
ornamental depth. The colour story—deep blacks and grays paired with a warm
orange accent—creates an immersive, focused environment that prioritizes
content and navigation clarity. The use of flat, color-blocked surfaces
without gradients or complex shadows reinforces a modern, no-frills interface.
Typography is utilitarian and varied, mixing weights and scales to establish
visual hierarchy through contrast rather than elegance. The overall mood is
energetic and uncluttered, with a layout that scales fluidly across devices
while maintaining consistent visual weight.
source:
url: "https://pornhub.com"
pagesAnalyzed: 6
extractedAt: 2026-10-17
tokensMeasured: true
colors:
primary: "#2F2F2F"
accent: "#FF9000"
canvas: "#000000"
surface-alt: "#151515"
on-primary: "#C6C6C6"
ink: "#FFFFFF"
body: "#969696"
neutral-1: "#EFEFEF"
neutral-2: "#363636"
neutral-3: "#ABABAB"
typography:
heading-xxl:
fontFamily: "Helvetica Neue"
fontSize: 39px
fontWeight: 700
lineHeight: 1.15
letterSpacing: 0px
heading-xl:
fontFamily: "Helvetica Neue"
fontSize: 29px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
heading-lg:
fontFamily: Arial
fontSize: 20px
fontWeight: 700
letterSpacing: 0px
textTransform: capitalize
heading-md:
fontFamily: "Helvetica Neue"
fontSize: 18px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
heading-sm:
fontFamily: Arial
fontSize: 16px
fontWeight: 700
lineHeight: 1.38
letterSpacing: 0px
heading-xs:
fontFamily: Arial
fontSize: 14.04px
fontWeight: 700
letterSpacing: 0px
body-xl:
fontFamily: Arial
fontSize: 15.96px
fontWeight: 700
letterSpacing: 0px
body-lg:
fontFamily: Arial
fontSize: 15px
fontWeight: 400
lineHeight: 1.13
letterSpacing: 0px
body-md:
fontFamily: Arial
fontSize: 14px
fontWeight: 700
lineHeight: 1.57
letterSpacing: 0px
body-sm:
fontFamily: Arial
fontSize: 13px
fontWeight: 400
letterSpacing: 0px
body-sm-strong:
fontFamily: Arial
fontSize: 13px
fontWeight: 700
lineHeight: 1.69
letterSpacing: 0px
body-xs:
fontFamily: Arial
fontSize: 11px
fontWeight: 400
letterSpacing: 0px
textTransform: uppercase
button-lg:
fontFamily: Arial
fontSize: 15px
fontWeight: 700
lineHeight: 1.47
letterSpacing: 0px
button-md:
fontFamily: "Helvetica Neue"
fontSize: 14px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
textTransform: capitalize
button-sm:
fontFamily: "Helvetica Neue"
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
button-xs:
fontFamily: Arial
fontSize: 11px
fontWeight: 400
letterSpacing: 0px
label-sm:
fontFamily: Arial
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
label-xs:
fontFamily: "Helvetica Neue"
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
caption-sm:
fontFamily: Arial
fontSize: 12px
fontWeight: 700
letterSpacing: 0px
caption-sm-helvetica-neue:
fontFamily: "Helvetica Neue"
fontSize: 12px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
caption-xs:
fontFamily: "Helvetica Neue"
fontSize: 11px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
textTransform: uppercase
caption-xs-strong:
fontFamily: Arial
fontSize: 11px
fontWeight: 700
letterSpacing: 0px
textTransform: uppercase
rounded:
none: 0px
xs: 5px
sm: 6px
md: 10px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 36px
section: 40px
band: 48px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FFFCF7"
surface: "#F5F2ED"
surfaceRaised: "#EDEAE6"
text: "#1D1710"
textMuted: "#716D67"
border: "#DBD9D4"
accent: "#AD6200"
accentFg: "#FFFFFF"
focusRing: "#D67900"
elevation: shadow
dark:
bg: "#000000"
surface: "#151515"
surfaceRaised: "#282828"
text: "#FFFFFF"
textMuted: "#969696"
border: "#1F1F1F"
accent: "#FF9000"
accentFg: "#0B0B0C"
focusRing: "#FF9000"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgba(196, 196, 196, 0) 0px, rgb(0, 0, 0) 100%)"
components:
button-secondary:
textColor: "{colors.ink}"
border: "2px solid rgb(33, 33, 33)"
height: 20px
padding: "10px 15px 10px 15px"
fontSize: 15px
fontFamily: Arial
fontWeight: 400
rounded: 20px
backgroundColor: "{colors.surface-alt}"
button-filled:
textColor: "{colors.canvas}"
border: "2px solid {colors.canvas}"
height: 38px
padding: "5px 12px 5px 12px"
fontSize: 12px
fontFamily: Arial
fontWeight: 700
lineHeight: 1.2
rounded: 20px
backgroundColor: "rgb(255, 163, 26)"
button-primary:
typography: "{typography.body-xs}"
textColor: "{colors.on-primary}"
height: 25px
padding: "5px 5px 5px 5px"
rounded: 4px
backgroundColor: "{colors.primary}"
button-filled-sm:
textColor: "{colors.canvas}"
height: 24px
padding: "10px 21px 10px 21px"
fontSize: 14px
fontFamily: Arial
fontWeight: 700
lineHeight: 1.43
rounded: "30px 0px 0px 30px"
backgroundColor: "{colors.accent}"
link:
textColor: "rgb(255, 153, 0)"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
backgroundColor: "{colors.canvas}"
link-sm:
textColor: "{colors.on-primary}"
padding: "10px 10px 10px 10px"
fontSize: 15px
fontFamily: Arial
fontWeight: 700
rounded: 25px
backgroundColor: "{colors.surface-alt}"
card:
textColor: "{colors.ink}"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
card-2:
textColor: "{colors.ink}"
fontSize: 18px
fontFamily: Arial
fontWeight: 700
lineHeight: 1.17
badge-text:
textColor: "rgb(255, 153, 0)"
fontSize: 13px
fontFamily: "Helvetica Neue"
fontWeight: 400
lineHeight: 1.15
footer:
textColor: "{colors.canvas}"
padding: "62px 0px 62px 0px"
fontSize: 12px
fontFamily: "Helvetica Neue"
fontWeight: 400
lineHeight: 1.5
backgroundColor: "rgb(245, 245, 247)"
states:
other-hover:
target: other
state: hover
backgroundColor: transparent
link-hover:
target: link
state: hover
textDecoration: none
input-focus:
target: input
state: focus
boxShadow: "{colors.accent} 0px 0px 1px"
button-hover:
target: button
state: hover
borderColor: "{colors.accent}"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
- width: 1024
containerWidth: 991
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
- width: 1280
containerWidth: 1229
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
- width: 1440
containerWidth: 1325
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
coverage:
statesFound: 16
gradientsFound: 1
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
This design system embodies a bold, high-contrast aesthetic centered on dark surfaces and vibrant accent pops. The visual language is deliberately minimalist, favoring sharp edges and direct interaction patterns over ornamental depth. The colour story—deep blacks and grays paired with a warm orange accent—creates an immersive, focused environment that prioritizes content and navigation clarity. The use of flat, color-blocked surfaces without gradients or complex shadows reinforces a modern, no-frills interface. Typography is utilitarian and varied, mixing weights and scales to establish visual hierarchy through contrast rather than elegance. The overall mood is energetic and uncluttered, with a layout that scales fluidly across devices while maintaining consistent visual weight.
Key Characteristics
{colors.canvas} — #000000) with alternating dark surface bands{colors.ink} — #FFFFFF) for readability against dark backgrounds{colors.accent} — #FF9000) used sparingly for focus and CTAs{colors.primary} — #2F2F2F): Primary CTA fills, brand accent, and active states; a dark charcoal used in buttons and control backgrounds{colors.accent} — #FF9000): Warm orange applied to high-priority calls to action, hover states, and focus indicators; creates visual pop against dark surfaces{colors.canvas} — #000000): Default page background; the dominant surface colour{colors.surface-alt} — #151515): Alternating section band colour for rhythm and visual separation{colors.ink} — #FFFFFF): Primary heading and text colour; highest contrast layer{colors.body} — #969696): Secondary body text colour; medium-dark gray for reduced emphasis{colors.on-primary} — #C6C6C6): Label text and secondary info on dark primary surfaces; light gray{colors.neutral-1} — #EFEFEF): Decorative neutral; no measured role{colors.neutral-2} — #363636): Decorative neutral; no measured role{colors.neutral-3} — #ABABAB): Decorative neutral; no measured rolePrimary: Arial, sans-serif Secondary: Helvetica Neue, sans-serif Fallback stack: Arial, Helvetica, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Helvetica Neue | 39px | 700 | 1.15 | 0px | Extra-large display heading (h3 tag) |
| Display LG | Helvetica Neue | 29px | 700 | 1.5 | 0px | Large display heading (h2 tag) |
| Heading LG | Arial | 20px | 700 | – | 0px | Large heading; text-transform: capitalize |
| Heading MD | Helvetica Neue | 18px | 500 | 1 | 0px | Medium heading; text-transform: uppercase |
| Heading SM | Arial | 16px | 700 | 1.38 | 0px | Small heading (h2 tag) |
| Heading XS | Arial | 14.04px | 700 | – | 0px | Extra-small heading |
| Body XL | Arial | 15.96px | 700 | – | 0px | Extra-large body; bold emphasis |
| Body LG | Arial | 15px | 400 | 1.13 | 0px | Large body copy |
| Button LG | Helvetica Neue | 15px | 700 | 1.47 | 0px | Large button text |
| Body MD | Arial | 14px | 700 | 1.57 | 0px | Medium body; bold emphasis |
| Label SM | Arial | 14px | 400 | – | 0px | Small label on inputs |
| Button MD | Helvetica Neue | 14px | 700 | 1.5 | 0px | Medium button; text-transform: capitalize |
| Body SM | Arial | 13px | 400 | – | 0px | Small body copy |
| Body SM Strong | Arial | 13px | 700 | 1.69 | 0px | Small body; bold emphasis |
| Badge Text | Helvetica Neue | 13px | 400 | 1.5 | 0px | Badge label |
| Caption SM | Arial | 12px | 700 | – | 0px | Small caption; bold |
| Caption SM Helvetica Neue | Helvetica Neue | 12px | 700 | 1.5 | 0px | Small caption (Helvetica variant) |
| Label XS | Helvetica Neue | 12px | 400 | 1 | 0px | Extra-small label |
| Button SM | Helvetica Neue | 12px | 700 | 1.33 | 0px | Small button |
| Caption XS | Helvetica Neue | 11px | 400 | 1.5 | 0px | Extra-small caption; text-transform: uppercase |
| Caption XS Strong | Arial | 11px | 700 | – | 0px | Extra-small caption; bold, text-transform: uppercase |
| Button XS | Arial | 11px | 400 | – | 0px | Extra-small button |
| Body XS | Arial | 11px | 400 | – | 0px | Extra-small body; text-transform: uppercase |
uppercase, capitalize) appear on specific roles to reinforce hierarchyPrimary Button
{colors.primary} (#2F2F2F){colors.on-primary} (#C6C6C6){rounded.xs} (5px)#FFFFFFSecondary Button
{colors.surface-alt} (#151515){colors.ink} (#FFFFFF){rounded.full} (9999px) — renders as a pill#212121#C6C6C6Filled Button (Primary CTA)
{colors.accent} (#FF9000)#000000{rounded.full} (9999px)#000000#000000, background → unchangedFilled Button Small
{colors.accent} (#FF9000)#000000#000000, background → unchangedCard Default
{colors.ink} (#FFFFFF){rounded.none} (0px)Card Default 2
{colors.ink} (#FFFFFF){rounded.none} (0px)Link Default
{colors.accent} (#FF9000)#FF9000Link Default Small
{colors.surface-alt} (#151515){colors.on-primary} (#C6C6C6){rounded.full} (9999px)#FFFFFFInput Base
{colors.canvas} (#000000){colors.ink} (#FFFFFF){rounded.none} (0px){colors.accent} (#FF9000) 0px 0px 1pxBadge Text
{colors.accent} (#FF9000){rounded.none} (0px)Footer Default
#F5F5F7 (light neutral, inverted from dark theme)#000000{rounded.none} (0px)Base unit: {spacing.xs} = 8px
Scale in use:
{spacing.xxs} = 4px — micro-spacing between tightly grouped elements{spacing.xs} = 8px — small gaps between inline content{spacing.sm} = 12px — padding within compact containers{spacing.md} = 16px — standard padding for cards and sections{spacing.lg} = 20px — padding for medium sections{spacing.xl} = 24px — padding for larger modules{spacing.xxl} = 32px — gap between major sections{spacing.xxxl} = 36px — extra-large spacing for visual breaks{spacing.section} = 40px — padding between content sections{spacing.band} = 48px — padding for full-width section bandsTight and consistent spacing creates a dense, scannable layout. Spacing is systematic and tied to the 4px base, avoiding arbitrary gaps. Sections are separated using alternating background colors ({colors.canvas} and {colors.surface-alt}) rather than vertical whitespace, maximizing content density while maintaining visual rhythm.
{rounded.none} = 0px — cards, inputs, overlays, and most surfaces; sharp, modern aesthetic{rounded.xs} = 5px — primary buttons; subtle softening of sharp edges{rounded.sm} = 6px — decorative element; minimal rounding{rounded.md} = 10px — images; rounded corners for pictorial content{rounded.full} = 9999px — secondary buttons, links, and pill-shaped controls; creates playful, accessible affordanceThe design system uses color-blocking to create depth rather than layered shadows. Surfaces are distinguished by background colour alone: {colors.canvas} (#000000) for base, {colors.surface-alt} (#151515) for alternate bands. No shadows are present in the measured system.
| Level | Treatment | Use |
|---|---|---|
| Flat | Solid fill, no shadow | Primary cards, buttons, base content |
| Tinted | Alternate surface color (#151515) | Section bands and grouped content |
Shadow Philosophy: The system employs a flat, color-blocking approach. Depth and hierarchy come from contrast between the black canvas and dark-gray alternating surfaces, supplemented by typography weight and accent colour. This eliminates visual noise while maintaining clear layer separation through hue rather than shadow.
#000000) as the foundational background across all pages#FF9000) sparingly to CTAs, focus states, and hover indicators for maximum impact{rounded.full}) for visual contrast#000000 and #151515) rather than using shadows{rounded.full} for buttons and pills| Viewport | Max Content Width | Grid Columns | Nav Links Visible | Menu Toggle | Key Changes |
|---|---|---|---|---|---|
| 375px (Mobile) | 375px | 8 | 0 | Yes | Full-width layout; navigation hidden behind menu toggle; heading remains 18px, body 12px |
| 768px (Tablet) | 768px | 8 | 0 | Yes | Content expands proportionally; grid unchanged; no nav links exposed |
| 1024px (Laptop) | 991px | 8 | 0 | Yes | Approaching full desktop; navigation remains hidden; content width ~991px |
| 1280px (Desktop) | 1229px | 8 | 0 | Yes | Wide desktop; content width ~1229px; full navigation still not visible |
| 1440px (Full HD) | 1325px | 8 | 0 | Yes | Largest measured breakpoint; content width maxes at 1325px; menu toggle persists |
Key Findings: The navigation menu does not become visible within the observed breakpoint range (375px–1440px). The menu toggle remains active across all measured viewports, suggesting either a persistent mobile-first nav or breakpoint beyond 1440px. The 8-column grid is consistent throughout; headings do not resize per breakpoint.
{spacing.sm} (12px) to {spacing.md} (16px) to prevent mis-taps{rounded.full}) at 20–38px height provide clear touch affordance{spacing.section} (40px) and {spacing.band} (48px) padding do not reduce at smaller viewports; density is maintained through layout reflow rather than spacing reduction#2F2F2F) — dark charcoal for button and control backgrounds#FF9000) — warm orange for high-priority actions and focus indicators#000000) — deep black#151515) — slightly lighter black for alternating bands#FFFFFF) — pure white for maximum contrast#969696) — medium gray for secondary information#C6C6C6) — light gray on dark surfaces#FF9000) — orange, consistent with CTA emphasis#000000). All layouts default to this background.#151515) to separate major sections without shadows or gradients.#FF9000) only to CTAs, focus states, and hover highlights; never to passive UI.#2F2F2F with #C6C6C6 text; secondary are #151515 with white text and 2px border; filled CTAs are orange with black text.{spacing.xs}). Build layouts using multiples: 16px ({spacing.md}), 24px ({spacing.xl}), 40px ({spacing.section}).{rounded.full} (9999px) for pill-shaped controls, {rounded.xs} (5px) for primary buttons, {rounded.md} (10px) for images.{colors.accent} 0px 0px 1px on inputs; hover text changes to #C6C6C6 or #FFFFFF.{colors.neutral-1}, {colors.neutral-2}, {colors.neutral-3}) have no measured role and appear decorative only; their intended use is unclearDesign tokens and component specifications extracted from 6 pages of https://pornhub.com as of the measurement date. This document represents the systemic design language; individual pages may contain page-specific variants not captured here.