Xvideos Brand Design System Deep Dive

1. Brand Overview

Xvideos operates in a controversial but massive market: adult entertainment. That context matters because the design system is serving a very different set of user priorities than, say, a SaaS dashboard or a luxury fashion brand. Here, speed, clarity, and recognizability trump subtlety. Users want to find content fast. They want to recognize the brand instantly. They’re not here to admire typography – they’re here to click.

The visual language is blunt. The logo is a bold black wordmark with a red accent — no gradients, no complex geometry. The palette is built around high-contrast colors: pure white (#ffffff), solid black, and an aggressive red (#de2600). These aren’t “soft” tones; they’re chosen for maximum visibility against busy thumbnails and user-generated content. That’s deliberate. The red here isn’t “brand warmth” — it’s a visual shout that says “click me.”

Typography is utilitarian. Arial is the workhorse, backed up by Helvetica and Verdana in a few contexts. No custom display faces, no typographic personality beyond clarity. There’s also an iconfont used for UI glyphs, with ligatures enabled. This is a practical choice — system fonts load instantly and render consistently across devices, which is critical for a global audience on varying bandwidths.

The layout sticks to an 8px scale with small deviations for legacy measurements. The spacing is tight — lots of 2px, 5px, 10px gaps — which keeps the density high. Rounded corners are minimal (3px and 5px dominate) — enough to soften edges without losing a rectangular, grid-heavy feel. Shadows are rare, mostly subtle, inset, or for focus states. It’s mostly a flat design with borders providing separation.

Component behavior is straightforward. Buttons have distinct hover/active/focus states, but transitions are minimal. The hover state often changes opacity and border color — fast visual feedback without animation frills. Links switch between underlined and non-underlined states depending on context. Inputs have clear focus borders.

Overall: this design system is functional, recognisable, and brutally efficient. It’s built for a content-heavy, thumbnail-driven interface where brand recognition comes from logo and color, not typographic nuance. If you’re reverse-engineering it, think “no-nonsense, high-contrast, grid-aligned UI” — and keep it fast.

2. Color System

2.1 Primary Colors

The primary brand color is #de2600 (rgb(222, 38, 0)). This is a saturated, deep red leaning towards orange. Psychologically, red signals urgency, passion, and energy — fitting the adult entertainment space where attention capture is everything. Competitors often use similar high-contrast reds (Pornhub uses orange, YouPorn uses magenta) — this is not a subtle space. The red here works because it pops against black and white, which are the other dominant colors.

2.2 Complete Palette

This palette is intentionally small. Seven colors total, most of them neutrals. The red is the only true “brand” hue — everything else is functional.

2.3 Color Relationships

White (#ffffff) against Brand Red (#de2600) provides a contrast ratio of ~5.5:1 — enough for WCAG AA for normal text. Black (#000000, used in typography) against white is the classic maximum contrast.

Accessibility is decent because of the high saturation and contrast. The weakest contrast is between Medium Gray (#777777) and white — ~4.5:1 — borderline for small text but still passable for non-critical labels.

There’s no dark mode in the extracted data — the palette is fixed. Given the content type, a dark mode could make sense, but this system is locked into the high-contrast light background model.

2.4 Usage Guide

• Primary actions: Use Brand Red (#de2600) for buttons and CTAs. Always pair with white text for contrast.
• Secondary buttons: Use Light Gray (#eeeeee) with black text.
• Text: Black for primary, Medium Gray for secondary.
• Borders: Use Gray (#cccccc) for neutral dividers. Avoid colored borders unless part of a state change.
• Hover states: Dark Gray (#4d4d4d) for text, Pale Gray (#dcdcdc) for backgrounds.

Avoid combining Medium Gray text with Pale Gray background — low contrast. Keep red reserved for clickable elements; don’t use it for body text.

3. Typography

3.1 Font Families

The UI uses Arial as the main font. In one case (heading-1), fallbacks include Helvetica and Verdana. There’s also a custom iconfont used for glyphs, with ligatures enabled ("liga"). No Google Fonts. No Adobe Fonts. This is pure system stack — instant load, consistent rendering.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. The largest size is 20.3px — tiny by marketing site standards. This keeps the UI compact. Buttons often use 12px or 13px uppercase — functional, not decorative. Body links are around 14px-16px. Captions drop to 12px or even 10px.

Readability is solid because Arial’s x-height is generous. The line heights vary — some are tight (0.65, 0.68) for headings, others are loose (1.50) for body. That’s a deliberate density control: headings don’t waste vertical space, while body text gets breathing room.

4. Spacing & Layout

4.1 Spacing Scale

The base is an 8px grid. Common values:

The frequency tells you the real story: 2px, 5px, and 10px dominate. This is a tight, compact grid — no huge paddings except for special cases.

4.2 Layout

Breakpoints range from 316px to 2280px. Lots of micro-breakpoints — clearly tuned for specific device widths. This isn’t a “three tier” responsive system — it’s finely sliced.

Examples:

• Mobile: 316px–480px
• Tablet: ~600px–800px
• Desktop: 1024px and up
• Ultra-wide: 1920px–2280px

This kind of breakpoint spread suggests incremental adjustments rather than big layout shifts.

5. Visual Elements

Border Radius

Values:

• 0px 5px 5px 0px — asymmetric, used for buttons
• 0.6px — micro rounding for spans
• 3px — dominant, used on buttons, anchors, spans
• 4px — rare, used on div
• 5px — used on div/buttons
• 5px 0px 0px 5px — asymmetric, used on inputs
• 10px — badge rounding

The 3px is the default — small, functional rounding.

Shadows

Three values:

• rgba(0,0,0,0.2) 0px 0px 20px -10px — subtle outer
• rgba(0,0,0,0.1) 0px 1px 2px 0px inset — subtle inset
• rgb(0,0,0) 0px 0px 7px 0px — hard shadow

Rarely used — mostly flat design.

Borders & Dividers

Several combinations:

• Bottom border only: 0px 0px 1px solid rgb(0,0,0)
• Solid 1px gray (#cccccc) borders for anchors
• Input-specific: mixed none/solid sides in light gray

Borders are functional — separation, not decoration.

6. Components

6.1 Buttons

Search Submit Button (search-submit btn btn-default)

• Default: bg #eeeeee, text black, padding 0 10px, radius 0px 5px 5px 0px
• Hover: text #c52200, bg #ab1d00, border 1px solid #871700, opacity 0.75, transform translateX(2px)
• Active: bg #bababa, text black, border 1px solid rgb(0,62,255)
• Focus: bg rgba(230,230,230,0.8), border 1px solid #cccccc, box-shadow rgba(0,0,0,0.5) 0 0 0 3px

Connection Button (head__btn--connection head__btn--join-fr)

• Default: bg black, text white, padding 8px 20px, radius 5px, weight 700, size 12px
• Hover: text #555555, bg transparent, border 1px solid #871700, opacity 0.75
• Active: bg #bababa, text black, inset shadow, transform scale(1.05)
• Focus: bg #e6e6e6, box-shadow #d0d0d0 0 0 0 3px

Join Button (head__btn--join btn-clear)

• Default: bg #de2600, text white, padding 8px 20px, radius 5px, weight 700, size 12px
• Hover: same as connection hover
• Active/Focus: same as connection active/focus

6.2 Links

Five variants:

1. Black text, underline default, white hover
2. White text, no underline
3. Medium gray (#777777) text, underline default, white hover
4. Dark gray (#555555) text, no underline default, white hover
5. Light gray (#999999) text, no underline default, dark gray hover

Underline toggles are used to signal interactivity.

6.3 Forms

Text input:

• Default: bg white, text black, radius 5px 0px 0px 5px, padding 4px 10px
• Focus: border 1px solid #d9d9d9, no shadow

No checkbox/radio/select styles in extracted data.

6.4 Cards

No explicit “card” component in data — likely divs with borders or flat backgrounds. Shadows are rare, so separation is via spacing/borders.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #eeeeee;
  --color-medium-gray: #777777;
  --color-brand-red: #de2600;
  --color-gray: #cccccc;
  --color-dark-gray: #4d4d4d;
  --color-pale-gray: #dcdcdc;

  /* Typography */
  --font-primary: Arial, Helvetica, Verdana, sans-serif;
  --font-icon: iconfont;
  --font-size-h1: 20.3px;
  --font-size-link-lg: 16.24px;
  --font-size-button-lg: 16px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-input-left: 5px 0px 0px 5px;
  --radius-button-right: 0px 5px 5px 0px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.2) 0px 0px 20px -10px;
  --shadow-inset: rgba(0,0,0,0.1) 0px 1px 2px 0px inset;
  --shadow-hard: rgb(0,0,0) 0px 0px 7px 0px;
}

8. AI Coding Assistant Prompt

# Xvideos Design System Specification

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

## Brand Context
Xvideos’ design system is high-contrast, fast-loading, and functional. It uses a small palette dominated by white, black, and aggressive red. Typography is utilitarian (Arial, Helvetica, Verdana) with tight spacing. Rounded corners are minimal, shadows rare.

## Color Palette
- White: #ffffff — Page backgrounds, button text, link text
- Light Gray: #eeeeee — Secondary backgrounds, search-submit buttons
- Medium Gray: #777777 — Secondary text, footer links
- Brand Red: #de2600 — Primary CTAs, action buttons
- Gray: #cccccc — Neutral borders
- Dark Gray: #4d4d4d — Hover/focus text
- Pale Gray: #dcdcdc — Hover/focus backgrounds

## Typography
- Font families: Arial, Helvetica, Verdana, sans-serif; iconfont with ligatures
- Sizes:
  - Heading-1: 20.3px, 400 weight, 1.50 LH
  - Link large: 16.24px, 400 weight, 1.50 LH
  - Button: 16px, 400 weight, 1.50 LH
  - Body: 14px, 400/700 weight, 1.29–1.50 LH
  - Caption: 12px, 400/700 weight, 1.00–1.50 LH
- Use Arial for all text, iconfont for glyphs.

## Spacing & Grid
Base: 8px grid with small increments.
Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 14px, 15px, 16px, 20px
Use 2px, 5px, 10px most frequently.

## Border Radius
- none: 0px — sharp edges
- sm: 3px — default buttons, anchors
- md: 5px — larger buttons
- lg: 10px — badges
- input-left: 5px 0px 0px 5px — text inputs
- button-right: 0px 5px 5px 0px — search-submit buttons

## Shadows & Depth
- Large outer: rgba(0,0,0,0.2) 0px 0px 20px -10px
- Inset: rgba(0,0,0,0.1) 0px 1px 2px 0px inset
- Hard: rgb(0,0,0) 0px 0px 7px 0px
Use sparingly; mostly flat design.

## Component Specifications

### Primary Button (Join)
Default:
- background: #de2600
- color: #ffffff
- padding: 8px 20px
- border-radius: 5px
- font-weight: 700
- font-size: 12px
Hover:
- color: #555555
- background: transparent
- border: 1px solid #871700
Active:
- background: #bababa
- color: #000000
- box-shadow: rgba(0,0,0,0.3) 0px 3px 7px inset
Focus:
- background: #e6e6e6
- box-shadow: #d0d0d0 0 0 0 3px

### Secondary Button (Connection)
Same as Primary but background: #000000, color: #ffffff.

### Search Submit Button
Default:
- background: #eeeeee
- color: #000000
- padding: 0 10px
- border-radius: 0px 5px 5px 0px
Hover:
- color: #c52200
- background: #ab1d00
- border: 1px solid #871700
- transform: translateX(2px)
Active:
- background: #bababa
- color: #000000
- border: 1px solid rgb(0,62,255)
Focus:
- background: rgba(230,230,230,0.8)
- border: 1px solid #cccccc
- box-shadow: rgba(0,0,0,0.5) 0 0 0 3px

### Navigation Links
Variant 1:
- Default: color: #000000, underline
- Hover: color: #ffffff, no underline
Variant 2:
- Default: color: #ffffff, no underline
- Hover: same
Variant 3:
- Default: color: #777777, underline
- Hover: color: #ffffff, no underline
Variant 4:
- Default: color: #555555, no underline
- Hover: color: #ffffff
Variant 5:
- Default: color: #999999, no underline
- Hover: color: #555555

### Input Fields
Default:
- background: #ffffff
- color: #000000
- border-radius: 5px 0px 0px 5px
- padding: 4px 10px
Focus:
- border: 1px solid #d9d9d9

## Layout & Responsive Rules
Breakpoints: 316px to 2280px, many specific widths
Adjust layout incrementally at these breakpoints.

## Interaction Rules
- Transitions minimal; instant hover feedback
- Opacity changes for hover states
- Transform: translateX(2px) or scale(1.05) on hover/active
- Focus states use border + box-shadow

## DO List
- Use only palette colors
- Keep text in Arial/iconfont
- Maintain 8px-derived spacing
- Use 3px or 5px radius consistently
- Keep hover states obvious
- Reserve brand red for actions

## DON'T List
- Add new colors
- Use large rounded corners (>10px) except badges
- Overuse shadows
- Animate hover states with long transitions
- Use custom fonts

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #de2600;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  border: none;
}
.btn-primary:hover {
  color: #555555;
  background: transparent;
  border: 1px solid #871700;
}
```

Input:
```css
.input {
  background: #ffffff;
  color: #000000;
  border-radius: 5px 0px 0px 5px;
  padding: 4px 10px;
  border: none;
}
.input:focus {
  border: 1px solid #d9d9d9;
  outline: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px;
}
```

9. Summary

TL;DR — Xvideos’ design system is small-palette, high-contrast, fast-loading, and functional. It’s built for dense content grids with minimal decoration. Red is for actions, Arial is everywhere, and spacing is tight.

Brand Keywords — high-contrast-functional, utilitarian-grid, blunt-action, fast-loading