Stripchat Design System Deep Dive

1. Brand Overview

Stripchat’s design system is built for a very specific audience: adult live streaming viewers and performers. The brand aesthetic is unapologetically digital-nightlife — dark backgrounds, high-contrast UI, and pops of vibrant color that signal interaction. This isn’t a “soft” or “neutral” brand; it’s tuned for an environment where immediacy and clarity matter.

The vibe is sleek, functional, and slightly playful. Their palette leans heavily on dark neutrals and muted grays to keep the focus on content (video streams), while CTAs are injected with saturated pinks and greens. This works because in a high-traffic, visually busy environment, you need a strong visual hierarchy where action buttons don’t get lost against a dark UI.

Typography is clean and modern — Inter is the only family in play, backed by Helvetica Neue, Roboto, Arial, and Helvetica fallbacks. This is a deliberate choice: Inter has excellent readability at small sizes, good weight distribution, and works well in UI-heavy contexts. No decorative fonts; every glyph is functional.

Layout is locked to an 8px spacing scale, giving the whole interface a modular feel. Components — buttons, inputs, cards — are rounded, with pill-shaped CTAs (32px radius) and softer corners elsewhere (4px, 5px). The pill shape is a brand signature here; it makes action elements stand out from the generally rectangular content frames.

This is a system designed for speed: quick scanning, instant recognition of interactive elements, and minimal distraction from core content. Shadows are rare; depth is mostly conveyed through contrast and rounded shapes. The overall philosophy: keep the stage dark, spotlight the action.

2. Color System

2.1 Primary Colors

The standout brand accent is #fc6172 — a saturated pink-red used sparingly for emphasis and interaction. It’s not the main CTA color (that’s where greens like #8dac3f and darker greens come in), but it’s a brand personality color, showing up in icons, highlights, and link states. This pink is energetic, youthful, and attention-grabbing — perfect for a platform that thrives on impulse actions.

Primary action buttons lean on greens (rgb(121, 148, 61) and rgb(97, 146, 47)) — a surprising but smart move. Green carries “go” connotations, reinforcing action-taking. Against a dark UI, it pops without clashing with the pink accent.

2.2 Complete Palette

2.3 Color Relationships

The palette is small and intentional. Black and dark gray form the base; light gray and white provide contrast. The pink and green accents are the disruptors — they draw the eye immediately. Accessibility-wise, dark text on #f8f8f8 is fine, but text on pink or green backgrounds needs careful contrast checks. For example, white text on #fc6172 is borderline for small sizes — keep it for large text or icons.

Dark mode is effectively the default here. The background is near-black, with text and controls in lighter shades. Pink and green accents work well against this base, though pink-on-dark has stronger contrast than green-on-dark.

2.4 Usage Guide

• Work: Pink accent with white or very light text for emphasis. Green for primary CTAs against dark backgrounds. Light gray for secondary UI.
• Avoid: Using pink and green together in the same component — they compete. Overusing #fc6172 dilutes its impact.
• Keep text color consistent: #f8f8f8 for dark backgrounds, #000000 for light ones.

3. Typography

3.1 Font Families

Everything is Inter. Fallback stack: "Inter", "Helvetica Neue", "Roboto", "Arial", "Helvetica". No Google Fonts imports detected, implying local or bundled font files. Inter is chosen for its UI clarity — consistent letter shapes, great weight coverage, and good small-size legibility.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is tight — few big jumps in size. H1 at 39px is large enough for page titles, but most text sits between 12–20px. This is a UI-heavy environment, so readability at small sizes is more important than dramatic typography. Weight changes (500 vs 700) carry a lot of the hierarchy, along with uppercase transformations for small labels.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px scale, with some 1px micro-borders. Values:

4.2 Layout

Breakpoints aren’t explicitly listed. Given Vuetify is in play, expect standard Vuetify breakpoints (xs, sm, md, lg, xl). Containers likely flex to viewport width with responsive spacing adjustments.

5. Visual Elements

Border Radius Values:

• 2px — tiny elements
• 4px — small buttons, cards
• 5px — most buttons (Chinese, Ukrainian tags)
• 32px — pill buttons
• 36px — search inputs
• 80px — category tags

The pill (32px) is a clear CTA signal. Strongly rounded corners are reserved for interactive elements; static containers stick to 4–5px.

Shadows: Rare, subtle:

• rgba(0, 0, 0, 0.3) 0px 20px 30px — large depth
• rgba(0, 0, 0, 0.15) 0px -3px 11px — soft lift

Mostly, depth comes from color contrast.

Borders: Thin, often semi-transparent (rgba(164, 164, 164, 0.3)), used for separation rather than decoration.

6. Components

6.1 Buttons

Primary (Apply Alter)

• Background: rgb(121, 148, 61)
• Color: #f8f8f8
• Padding: 0px 20px
• Radius: 32px
• Border: none (transparent)
• Font: 15px, weight 500

Secondary (Signup)

• Background: rgb(241, 241, 241)
• Color: rgb(65, 65, 65)
• Font: 13px, weight 400

Outline

• Background: transparent
• Color: #fdfdfd
• Border: 1px solid #f8f8f8
• Font: 13px, weight 400

Take Tour

• Background: white
• Color: black
• Opacity: 0.8
• Font: 13px, weight 400

Cookie Apply

• Background: rgb(97, 146, 47)
• Color: #f8f8f8
• Padding: 0px 32px
• Font: 13px, weight 500

6.2 Links

Variants:

• rgba(248, 248, 248, 0.8) — underlined
• #a4a4a4 — no underline
• rgba(255, 255, 255, 0.8) — underlined
• #fa5365 — bold accent

Hover states aren’t heavily styled — underline toggles more than color changes.

6.3 Forms

Text Input

• Background: rgba(0,0,0,0.2)
• Color: #f8f8f8
• Border: none
• Radius: 36px
• Padding: 0px 72px 0px 42px

7. Design Tokens

:root {
  /* Colors */
  --color-bg-light: #f8f8f8;
  --color-gray-medium: #a4a4a4;
  --color-black: #000000;
  --color-gray-dark: #202020;
  --color-accent-pink: #fc6172;
  --color-accent-green: #8dac3f;

  /* Typography */
  --font-family-primary: "Inter", "Helvetica Neue", "Roboto", "Arial", "Helvetica";
  --font-size-h1: 39px;
  --font-size-lg: 20px;
  --font-size-md: 16px;
  --font-size-sm: 15px;
  --font-size-xs: 14px;
  --font-size-xxs: 13px;
  --font-size-captions: 12px;
  --font-size-mini: 11px;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-pill: 32px;
  --radius-input: 36px;
  --radius-tag: 80px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.3) 0px 20px 30px;
  --shadow-sm: rgba(0, 0, 0, 0.15) 0px -3px 11px;
}

8. AI Coding Assistant Prompt

# Stripchat Design System Specification

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

## Brand Context
Stripchat’s design language is dark, high-contrast, and interaction-focused. It uses pill-shaped CTAs, small rounded corners for static elements, and a tight, readable type scale. Colors are minimal — dark neutrals form the base, with pink and green accents for interaction.

## Color Palette
- Background Light: #f8f8f8 — Text on dark backgrounds, light surfaces
- Gray Medium: #a4a4a4 — Secondary text, muted icons
- Black: #000000 — Dark text on light backgrounds
- Gray Dark: #202020 — Panels, solid buttons
- Accent Pink: #fc6172 — Highlights, icons
- Accent Green: #8dac3f — Hover/focus accents

## Typography
Font Family: "Inter", "Helvetica Neue", "Roboto", "Arial", "Helvetica"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 39px | 700 | 0.92 | Page titles |
| H2 | 20px | 700 | — | Section headings |
| H2 Alt | 20px | 500 | 1.50 | Secondary headings |
| Body | 16px | 500 | 1.50 | Main content |
| Button | 15px | 500 | 2.60 | Primary buttons |
| Caption | 14px | 400 | 1.43 | Secondary info |
| Caption Bold | 14px | 700 | — | Emphasized labels |
| Small | 13px | 500 | 1.23 | Small UI text |
| Tiny | 12px | 500 | 1.33 uppercase | Labels
| Mini | 11px | 400 | 1.45 | Micro text |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px  
Use spacing tokens for padding, gaps, and margins. All values must be multiples of 1px from this set.

## Border Radius
- xs: 2px — very small elements
- sm: 4px — cards, containers
- md: 5px — buttons
- pill: 32px — primary CTAs
- input: 36px — search boxes
- tag: 80px — category tags

## Shadows & Depth
Minimal shadows. Use:
- Large: rgba(0, 0, 0, 0.3) 0px 20px 30px — modals, dropdowns
- Small: rgba(0, 0, 0, 0.15) 0px -3px 11px — subtle lifts

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: rgb(121, 148, 61);
  color: #f8f8f8;
  padding: 0px 20px;
  border-radius: 32px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 15px;
}

Secondary Button

.btn-secondary {
  background: rgb(241, 241, 241);
  color: rgb(65, 65, 65);
  padding: 0px 20px;
  border-radius: 32px;
  font-weight: 400;
  font-size: 13px;
}

Input Field

.input-text {
  background: rgba(0, 0, 0, 0.2);
  color: #f8f8f8;
  border: none;
  border-radius: 36px;
  padding: 0px 72px 0px 42px;
}

Layout & Responsive Rules

• Use Vuetify breakpoints (xs, sm, md, lg, xl)
• Max content width: fluid
• Page padding: multiples of 8px
• Grid gaps: 8px, 16px, 24px

Interaction Rules

• Transition timing: 150ms ease for state changes
• Focus indicators: outline in accent color
• Hover: underline for links if default is none

DO

• Use only palette colors
• Maintain 8px grid
• Keep pill radius for CTAs
• Use Inter for all text
• Keep hover/focus accents consistent

DON'T

• Add new colors
• Mix sharp and rounded corners
• Overuse pink accent
• Add heavy shadows

Code Examples

Primary Button:

.btn-primary { background: rgb(121, 148, 61); color: #f8f8f8; border-radius: 32px; padding: 0 20px; }
.btn-primary:hover { opacity: 0.9; }

Card:

.card { background: #202020; border-radius: 4px; padding: 16px; }

Form Input:

.input-text { background: rgba(0,0,0,0.2); color: #f8f8f8; border-radius: 36px; padding: 0 72px 0 42px; }

---

## 9. Summary

**TL;DR** — Stripchat’s design system is dark, tight, and interaction-first. Minimal colors, strong pill-shaped CTAs, and small rounded corners keep the focus on content while guiding the user to act.

**Brand Keywords**:
- dark-interactive
- pill-cta
- minimal-color
- ui-focused
- action-driven