Xhamster Brand Design System Deep-Dive

1. Brand Overview

Xhamster’s design system is unapologetically functional, with a dark, utilitarian aesthetic punctuated by sharp pops of red. This is not a brand chasing friendly rounded corners and pastel gradients. It’s a UI built for high-volume content consumption, where hierarchy and clarity matter more than ornamental flourishes.

The vibe: pragmatic media platform with a focus on discoverability. The color language leans on dark grays (#303030) and near-white neutrals (#f5f5f5, #dadada) as a foundation, which keeps the page feeling anchored and lets their accent reds (#e34449, #ba1c20) punch hard where needed. You’ll see these reds on CTAs, active states, and brand-critical elements. This works because red carries urgency and attention—exactly what you want in a click-driven environment.

Typography is stable and modern: Roboto across the board, no decorative faces, no custom ligatures. That choice says “accessibility and performance” over “brand quirk.” Every text element—from headings to captions—sits on this same sans-serif spine, with variations in weight and size to create hierarchy. They’re not experimenting with display fonts; they're keeping it consistent.

Layout is built on a subtle 8px grid with occasional 4px micro-adjustments. Breakpoints are plentiful (over 20 listed), which tells you they’re optimizing for multiple device widths beyond the standard mobile/tablet/desktop trio. The design is responsive, but not fluid in a loose way—it snaps to defined steps, ensuring predictable content wrapping.

Shadows are used sparingly and purposefully. Most components are flat, with a few depth cues via soft box-shadows (rgba(0, 0, 0, 0.15) 0px 10px 30px) for modals and interactive cards. Borders and dividers in muted grays (#dadada) keep sections distinct without visual noise.

The brand’s UI philosophy in one line: keep the canvas neutral, make the actions loud. They nailed that balance. The dark-neutral base lets the red accents own the emotional space, and the straightforward typography keeps the content easy to scan. This is a system designed to survive high-traffic, mixed-media environments without collapsing under visual clutter.

2. Color System

2.1 Primary Colors

Primary: #303030 (rgb(48, 48, 48)) — This is the dominant brand color. Used for headers, navigation bars, and text in dark contexts. It’s a deep neutral that gives the UI a grounded feel.

Secondary: #dadada (rgb(218, 218, 218)) — Light gray for borders, inactive buttons, and subtle dividers. Keeps things visually separated without heavy contrast.

Brand accent: Reds. Multiple red tones exist:

• #e34449 — Error states, brand accent, hover link color.
• #ba1c20 — Pressed brand state.
• #d42025 — Brand hover state.
• rgb(255, 44, 26) — Bright red for primary buttons.
• #d1363b — Darker red for deeper accents.

These reds are what make this design pop in an otherwise monochrome environment.

2.2 Complete Palette

2.3 Color Relationships

There’s a clear triad here:

• Base neutrals: #303030, #f5f5f5, #dadada — handle structure.
• Accents: reds, blues, greens — drive interaction.
• Functional: error red (#e34449), success green (#00a97b), hover/pressed variants.

Contrast is solid: white text on #303030 has a ratio well above WCAG AA. Red on white is high contrast, but red on dark gray is borderline for smaller text—fine for buttons, not for body copy.

Dark mode is essentially the default. Light surfaces appear only as cards or modals, layered over a dark canvas.

2.4 Usage Guide

• Use #303030 for main structural elements (headers, footers).
• Pair white (#ffffff) text with dark backgrounds, and #303030 text with light backgrounds.
• Use reds only for active, hover, or error states—don’t overuse in static elements.
• Greens are for positive feedback; blues for informational links.
• Avoid mixing more than two accent colors in a single component—keeps visual clarity.

3. Typography

3.1 Font Families

Single family across the ecosystem: Roboto. Fallbacks: Roboto, -apple-system, system-ui, Helvetica Neue, Arial or swaps with Helvetica Neue, -apple-system, Arial in some contexts.

No variable fonts. No Google Fonts load—it’s likely system-hosted.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is built on weight rather than huge jumps in size. Headings rarely exceed 24px. This keeps the UI tight, which works for dense content grids. The jump from 14px to 18px is the main visual lever. Bold weights (700) signal interactivity or importance.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but they use 1px, 2px, 3px, 4px micro values often.

4.2 Layout

Breakpoints from 359px up to 1536px. The granularity suggests fine-tuned layouts for niche device widths.

5. Visual Elements

Border Radius

They mix small radii and full pills:

• 2px — images, small divs
• 3px — lists, small containers
• 4px — buttons, badges
• 5px — buttons, inputs
• 6px — modals
• 20px — search inputs
• 50% — avatars, socials

Odd choice: 200px radius on one anchor—likely a pill or circular badge.

Shadows

Main depth cue: rgba(0, 0, 0, 0.15) 0px 10px 30px — reserved for overlays. Most buttons are flat.

Borders

Mostly 1px solid in #dadada or #cccccc. Used for input outlines and dividers.

6. Components

6.1 Buttons

Primary Red Button

• Default: bg rgb(255, 44, 26), text white, padding 0px 15px 1px, radius 5px
• Hover: text #303030, bg var(--xh-color-button-secondary-hover), border 1px solid var(--color-cobalt-light)
• Active: bg var(--xh-color-button-primary-hover), text var(--color-cobalt-lighter)
• Focus: transparent bg, text var(--xh-color-font-primary)

Segment Control Button

• Default: bg white or #dadada, text dark gray, padding 4px 16px, radius 4px
• Hover: bg rgba(255,255,255,0.24), text red, scale(1.05)

Page Button Link

• Default: bg #303030, text #f5f5f5, radius 5px
• Hover: bg rgba(255,255,255,0.24), text red

Big Brand Button

• Default: bg #e34449, text white, padding 16px 20px, radius 6px

6.2 Links

• Dark text: underline, hover red
• White text: no underline, hover red
• Light gray text: no underline, hover red

6.3 Forms

Text input:

• Default: bg white, text #303030, border 1px solid #cccccc, radius 20px
• Focus: border-color #5db6fa, box-shadow 0 0 0 1px #5db6fa, text #a0a0a0

7. Design Tokens

:root {
  /* Colors */
  --color-primary-dark: #303030;
  --color-medium-gray: #707070;
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-divider-gray: #dadada;
  --color-neutral-gray: #cccccc;
  --color-extra-yellow: #f4bb2e;
  --color-extra-yellow-hover: #e8a500;
  --color-extra-yellow-pressed: #d29600;
  --color-extra-blue: #2d87d4;
  --color-accent-green: #00bd8f;
  --color-tooltip-bg: #434343;
  --color-blue-darker: #0f41f2;
  --color-surface-error: #e34449;
  --color-gray-dark: #a0a0a0;
  --color-logo-secondary: #000000;
  --color-extra-indigo-hover: #2b53e1;
  --color-purple: #9264dc;
  --color-extra-pink: #e648ce;
  --color-soft-violet: #965bfa;
  --color-extra-green-pressed: #008b5d;
  --color-extra-green: #00a97b;
  --color-extra-green-hover: #009c72;
  --color-red-dark: #d1363b;
  --color-blue: #3f67f5;
  --color-extra-indigo-pressed: #173fcd;
  --color-blue-lighter: #5db6fa;
  --color-gay-blue: #2d86d4;
  --color-cobalt-light: #e4e4e4;

  /* Typography */
  --font-family-primary: 'Roboto', -apple-system, system-ui, 'Helvetica Neue', Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-60: 60px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-20: 20px;
  --radius-200: 200px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 10px 30px 0px;
}

8. AI Coding Assistant Prompt

# Xhamster Design System Specification

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

## Brand Context
Xhamster’s design is dark, functional, and content-focused. It uses a deep neutral base with strong red accents. Typography is consistent sans-serif (Roboto). Layout adheres to an 8px grid with micro spacings.

## Color Palette
- Primary Dark: #303030 — Headers, dark text
- Medium Gray: #707070 — Secondary text
- White: #ffffff — Content background
- Light Gray: #f5f5f5 — Surface backgrounds
- Divider Gray: #dadada — Borders, inactive buttons
- Neutral Gray: #cccccc — Input borders
- Extra Yellow: #f4bb2e — Category accents
- Extra Yellow Hover: #e8a500 — Accent hover
- Extra Yellow Pressed: #d29600 — Accent pressed
- Extra Blue: #2d87d4 — Links
- Accent Green: #00bd8f — Success states
- Tooltip BG: #434343 — Tooltip backgrounds
- Blue Darker: #0f41f2 — Deep blue elements
- Surface Error: #e34449 — Error states
- Gray Dark: #a0a0a0 — Disabled text
- Logo Secondary: #000000 — Logo
- Extra Indigo Hover: #2b53e1 — Indigo hover
- Purple: #9264dc — Category tag
- Extra Pink: #e648ce — Category tag
- Soft Violet: #965bfa — Category tag
- Extra Green Pressed: #008b5d — Success pressed
- Extra Green: #00a97b — Success
- Extra Green Hover: #009c72 — Success hover
- Red Dark: #d1363b — Deep red actions
- Blue: #3f67f5 — Links
- Extra Indigo Pressed: #173fcd — Indigo pressed
- Blue Lighter: #5db6fa — Input focus
- Gay Blue: #2d86d4 — Category tag
- Cobalt Light: #e4e4e4 — Borders

## Typography
- Font Family: 'Roboto', -apple-system, system-ui, 'Helvetica Neue', Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 24px | 700 | 1.33 | Page titles |
| H1-alt | 18px | 400 | 1.11 | Smaller headings |
| Button-lg | 18px | 400 | 1.11 | Large buttons |
| Link-lg | 18px | 400 | 1.33 | Primary links |
| H1-bold | 18px | 700 | 1.00 | Bold headings |
| Link-bold | 18px | 700 | 1.00 | Emphasized links |
| Caption | 14px | 400 | 1.00 | Body captions |
| Caption-bold | 14px | 700 | 1.43 | Emphasized captions |
| Button-sm | 14px | 700 | 1.64 | Small buttons |
| Link-sm-bold | 14px | 700 | 1.71 | Small bold links |
| Caption-sm | 12px | 400 | 1.00 | Minimal labels |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 22px, 24px, 30px, 60px.

## Border Radius
- sm: 2px — images
- sm-md: 3px — lists
- md: 4px — small buttons
- md-lg: 5px — buttons, inputs
- lg: 6px — modals
- xl: 20px — search inputs
- full: 50% — avatars

## Shadows & Depth
- Overlay: rgba(0, 0, 0, 0.15) 0px 10px 30px

## Component Specifications

### Primary Button
Default: bg rgb(255,44,26), color #fff, padding 0 15px 1px, radius 5px, font-weight 700, font-size 14px.
Hover: color #303030, bg var(--xh-color-button-secondary-hover), border 1px solid #e4e4e4.
Active: bg var(--xh-color-button-primary-hover), color var(--color-cobalt-lighter).
Focus: bg transparent, color var(--xh-color-font-primary), border 1px solid #e4e4e4.

### Secondary Button (Segment Control)
Default: bg #ffffff or #dadada, color #303030, padding 4px 16px, radius 4px.
Hover: bg rgba(255,255,255,0.24), color #e34449, transform scale(1.05).

### Input Fields
Default: bg #fff, text #303030, border 1px solid #cccccc, radius 20px, padding 0 110px 0 19px.
Focus: border-color #5db6fa, box-shadow 0 0 0 1px #5db6fa, text #a0a0a0.

## Layout & Responsive Rules
Breakpoints: 359px, 360px, 374px, 409px, 410px, 430px, 479px, 480px, 639px, 640px, 670px, 767px, 768px, 1024px, 1260px, 1279px, 1280px, 1365px, 1366px, 1535px, 1536px.

## Interaction Rules
Transition timing: 150ms ease for hover/focus changes.
Focus indicators: border-color change + box-shadow.

## DO List
- Use only colors from palette.
- Keep spacing multiples of 8px (with occasional 4px/2px micro).
- Use Roboto for all text.
- Reserve reds for CTAs and errors.
- Maintain defined breakpoints.

## DON'T List
- Invent new accent colors.
- Mix rounded and square corners in same component.
- Use shadows excessively.
- Underline links unless specified.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: rgb(255,44,26);
  color: #fff;
  padding: 0 15px 1px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { color: #303030; background: var(--xh-color-button-secondary-hover); border: 1px solid #e4e4e4; }
.btn-primary:focus { background: transparent; color: var(--xh-color-font-primary); border: 1px solid #e4e4e4; }
```

Input:
```css
.input {
  background: #fff;
  color: #303030;
  border: 1px solid #cccccc;
  border-radius: 20px;
  padding: 0 110px 0 19px;
}
.input:focus {
  border-color: #5db6fa;
  box-shadow: 0 0 0 1px #5db6fa;
  color: #a0a0a0;
}
```

9. Summary

TL;DR — Xhamster’s design is a dark, utilitarian system with strong red accents, consistent Roboto typography, and an 8px grid. Neutrals dominate the canvas; accents drive interaction.

Brand Keywords — dark-functional, red-accented, typographic-consistent, grid-disciplined, content-first