1. Brand Overview

Chaturbate’s design system is built for a fast-moving, content-heavy environment. The brand’s visual language is unapologetically utilitarian, built for live streaming and user interaction above anything else. This isn’t a polished, high-fashion aesthetic — it’s functional UI with bright hits of brand color, clear type, and minimal decorative fluff.

Everything screams “real-time platform.” The design favors sharp contrast for quickly scanning live stream listings, chat boxes, and video frames. Their palette anchors on a distinctive saturated teal (#0c6a93) combined with vibrant orange (#f47321) accents. Those colors aren’t subtle, and they shouldn’t be — they immediately catch the eye in a crowded page of thumbnails.

Typography is all Ubuntu family — a modern sans-serif that stays readable at tiny sizes (think chat messages, category labels) but also scales up cleanly for headings and CTAs. In fallback, Arial or Helvetica take over if Ubuntu fails — still serviceable. The site’s text hierarchy is very flat, with multiple heading-1 contexts across various sizes — they’ve repurposed the H1 style for section headings, category names, and in-card text at different scales.

Spacing and layout are dictated by an 8px grid (with 4px increments sprinkled in). It feels compact. Margins are small, paddings conservative — probably to maximize content density. Cards, list items, and controls are all padded just enough to separate visual elements but not so much that you lose screen real estate.

Borders are solid and functional. No trendy glassmorphism. Shadows are sparse — when used, they’re subtle, for modals and overlays. The interface relies heavily on crisp dividers, often in light gray or subtle blue hues. Radius styles are minimal — most UI corners at 4px, with some perfectly rounded items at 50% for avatars or badges.

If you’re building for this brand, think utilitarian, dense, and action-oriented. Color pops should be fast and fat — buttons and links need those saturated hues. Typography should be humanist sans, no serif flair. Space is precious — use the grid religiously.

2. Color System

2.1 Primary Colors

Primary brand color: Teal Blue – #0c6a93.
Used for links, headers, and key navigational elements. It’s readable against white, stands out without burning the eyes, and carries a friendly-professional tone common in streaming and tech.

Accent color: Orange – #f47321.
It’s the punch — tweets, promotion links, feedback triggers. Warm and aggressive compared to the cooler teal.

Neutral core: Grays in multiple tones (#575757, #acacac, #7f7f7f) for text, dividers, inactive states.

Competitor check: Many livecams/OTT platforms go full neon or gradient — Chaturbate’s combo of teal + orange is distinctive. It balances warm/cool contrast and makes CTAs stand out without dominating thumbnails.

2.2 Complete Palette

Functional CSS variables also pop up:

• --active-color: #288a09 – Green for active/live states.
• --msg-expired-color: #cd3d45 – Red for expired messages.
• --not-enough-tokens-border-color: #cd5d26 – Rust orange for alerts.
• --private-show-notice-link-color: #00779f – Blue for private show notice links.
• Toastify notification colors range from #f1c40f (warning), #07bc0c (success), to HSL reds for errors.

2.3 Color Relationships

Teal background with white text — clean and high-contrast (pass on WCAG AA easily). Orange accents on white — high attention draw. Gray text on white — borderline for accessibility (contrast ~4.5:1 on #acacac), so they likely reserve grays for secondary info.

Dark mode? Not in the provided data — colors skew towards light backgrounds. Background variable: --background-color: #e5e5e5 — this sets a soft gray canvas, not true white.

2.4 Usage Guide

• Primary+White: great for buttons, nav bars.
• Orange+White: use sparingly for CTAs only — too much will overwhelm.
• Avoid teal+orange combos for text readability — strong chromatic contrast can vibrate.
• Secondary UI like tabs should use grays; highlights use light blues (#e0eefb).

3. Typography

3.1 Font Families

Main: UbuntuRegular / UbuntuMedium / UbuntuBold
Fallbacks: Arial, Helvetica or Helvetica, Arial.
Custom — not Google-served; no Adobe service noted.

Ubuntu is solid: friendly, rounded, works tiny. Medium and Bold variants handle emphasis.

3.2 Type Scale

Given there are many repeated contexts (same family but different px), here's condensed:

…and dozens more micro-sizes down to 9px.

3.3 Hierarchy

Odd thing: same "heading-1" context at wildly different sizes. They clearly style based on component purpose rather than semantic HTML. Live stream cards might have a heading style that’s visually small but semantically large. Hierarchy by size is flattened — instead, emphasis happens via weight (Medium/Bold) and sometimes case transform.

Readability: Ubuntu stays legible at 10px in chat messages (VideoJS captions also at 10px). Large headings are rare — most interface text sits between 12–14px range.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, with occasional 4px increments.

They keep increments tight. No big leaps beyond 40px.

4.2 Layout

Breakpoints from 400px up to 2000px. They adapted for a crazy wide range:

• Mobile cutoff around ~400–550px.
• Middle breakpoints 767px, 768px, 800px — tablet corrections.
• Desktop adjustments around 1024px, 1176px, 1200px, etc.
  They’re clearly optimizing thumbnail grid/columns per breakpoint rather than fixed content width.

5. Visual Elements

Border Radius — mostly 4px.
Variants:

• 2px — minor controls.
• 8px — rare, larger elements.
• 20px — modals, rounded inputs.
• 50% — avatars/badges.

Odd ones: asymmetrical radius like 4px 4px 0 0 for card tops, 0 0 5px 5px for bar bottoms.

Shadows — Rare.
When used, soft: rgba(0,0,0,0.08) 0px 4px 16px for overlays.
No heavy drop shadows, suggesting preference for flat layering.

Borders — Workhorse of depth. Styles include:

• 1px solid #acacac — general containers.
• 1px solid #e0eefb — inputs.
• 1px solid #20593 for active colors.
  Bottom-only borders for separators.

6. Components

6.1 Buttons

No dedicated button styles in extract — likely rely on background plus text color combos with standard radius. From link/button data: they use link styles plus box backgrounds for CTAs.

6.2 Links

Six distinct link color configs:

1. Teal #0c6a93 — default brand link. Hover: underline + gray (#a7a7a7).
2. Dark Gray #494949 — heavy text link. Hover: underline + gray.
3. White — for dark/teal backgrounds. Hover changes to gray.
4. Orange — CTAs in warm tone.
5. Light Gray #b3b3b3 — muted links in neutral areas.
6. Dark Gray #525252 — secondary nav links.

6.3 Forms

Inputs:

Number type example:

• Default:
  • background-color: #ffffff
  • color: #0c6a93
  • border: 1px solid #e0eefb
  • border-radius: 4px
  • Padding: 1px 2px
• Focus:
  • border: 2px solid rgb(104, 181, 240)
  • Box-shadow: rgb(104, 181, 240) 0px 0px 0px 2px
  • Outline: none.

Clear teal theme persists even in focus rings.

6.4 Cards

No raw "card" component in extract, but from shadows and borders: they use bottom borders or subtle shadows for separation. Padding likely 8–16px.

7. Design Tokens (CSS Vars)

:root {
  /* Colors */
  --color-teal: #0c6a93;
  --color-dark-gray: #575757;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-medium-gray: #acacac;
  --color-orange: #f47321;
  --color-light-grayish-white: #f0f1f1;
  --color-gray-50: #7f7f7f;
  --color-light-blue-gray: #e0eefb;
  --active-color: #288a09;
  --msg-expired-color: #cd3d45;
  --not-enough-tokens-border-color: #cd5d26;
  --private-show-notice-link-color: #00779f;
  --background-color: #e5e5e5;

  /* Typography */
  --font-ubuntu-regular: 'UbuntuRegular', Arial, Helvetica;
  --font-ubuntu-medium: 'UbuntuMedium', Arial, Helvetica;
  --font-ubuntu-bold: 'UbuntuBold', Helvetica, Arial;
  --font-size-heading-lg: 50px;
  --font-size-heading-md: 25px;
  --font-size-body: 14px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-loose: 1.5;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-40: 40px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# Chaturbate Design System Specification

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

## Brand Context
Chaturbate values high-density, functional UI designed for real-time streaming. The look is utilitarian with strong teal/ orange accents, precise Ubuntu typography, and tight spacing on an 8px grid.

## Color Palette
- Teal Blue: #0c6a93 — Links, headers, inputs, outlines
- Dark Gray: #575757 — Primary body text
- Black: #000000 — Scroll down buttons, high-contrast text
- White: #ffffff — Backgrounds, key text
- Medium Gray: #acacac — Dividers/borders
- Orange: #f47321 — Accent CTAs
- Light Grayish White: #f0f1f1 — Panel backgrounds
- Gray 50%: #7f7f7f — Muted labels
- Light Blue Gray: #e0eefb — Input backgrounds
- Active Green: #288a09 — Live/active states
- Expired Red: #cd3d45 — Expired messaging
- Alert Rust: #cd5d26 — Not enough tokens
- Private Link Blue: #00779f — Private show notice links
- Background Gray: #e5e5e5 — Page background

## Typography
Font families:
- Headings: 'UbuntuRegular', Arial, Helvetica
- Body: 'UbuntuMedium', Arial, Helvetica
- Emphasis: 'UbuntuBold', Helvetica, Arial

Type sizes:
| Element | Size | Weight | Line Height | Use For |
|---------|------|--------|-------------|---------|
| H1 Large | 50px | 400 | 0.64 | Page titles |
| Link Large | 25px | 700 | 1.28 | Primary CTAs |
| Body | 14px | 400 | 1.40 | General text |
| Caption | 12px | 400 | 1.40 | Secondary info |
| Chat | 10px | 400 | 1.60 | Messages |

## Spacing & Grid
Base unit: 8px.  
Scale: 1px, 2px, 4px, 5px, 8px, 10px, 12px, 16px, 20px, 40px.  
Use multiples for all padding/margins.

## Border Radius
- sm: 2px — minor controls
- md: 4px — inputs, cards
- lg: 8px — larger containers
- xl: 20px — modals
- round: 50% — avatars/badges

## Shadows & Depth
Use --shadow-soft: rgba(0,0,0,0.08) 0 4px 16px for overlays. Otherwise flat borders.

## Component Specifications

### Primary Link
```css
a.primary {
  color: #0c6a93;
  text-decoration: none;
}
a.primary:hover {
  text-decoration: underline;
  color: #a7a7a7;
}
```

### Input Field (Number Type)
```css
.input-number {
  background-color: #ffffff;
  color: #0c6a93;
  border: 1px solid #e0eefb;
  border-radius: 4px;
  padding: 1px 2px;
}
.input-number:focus {
  border: 2px solid rgb(104, 181, 240);
  box-shadow: rgb(104, 181, 240) 0px 0px 0px 2px;
  outline: none;
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border: 1px solid #acacac;
  border-radius: 4px;
  padding: 8px;
}
```

## Layout & Responsive Rules
- Max content width: Flexible per breakpoint
- Page padding: 8px mobile / 16px desktop
- Grid gap: Multiples of 8px

Breakpoints:
400px, 480px, 535px, 550px, 600px, 700px, 767px, 768px, 800px, 862px, 1000px, 1024px, 1176px, 1179px, 1200px, 1400px, 1600px, 1800px, 2000px

## Interaction Rules
- Transitions: 150ms ease
- Focus: clear outline or border color shift
- Disabled: reduce opacity to 50%, disable pointer events

## DO List
- Use only provided palette
- Stay on 8px grid
- Keep corner radii consistent per element type
- Use Ubuntu for all text
- Keep link hover underlined
- Maintain compact spacing for density

## DON'T List
- No extra shadows beyond --shadow-soft
- Don't mix sharp and rounded corners in same module
- No custom colors outside palette
- Don't overuse orange — CTAs only
- Avoid excessive white space

## Code Examples

Primary CTA Button:
```css
.btn-primary {
  background-color: #f47321;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background-color: #cd5d26;
}
.btn-primary:focus {
  outline: 2px solid #0c6a93;
  outline-offset: 2px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

9. Summary

TL;DR: Chaturbate’s design system is functional streaming UI — teal/orange accents, Ubuntu sans type, 8px grid, small radii, and very few shadows. Built for density and speed.

Brand Keywords:

• utilitarian-teal
• action-driven
• compact-grid
• ubuntu-readable
• no-frills