OnlyFans Design System — Technical Deep Dive

1. Brand Overview

OnlyFans’ front-end design is, surprisingly to some, not chaotic or overly ornamental given its broad and sometimes risqué user base. The vibe is controlled, modern, a bit social-media-esque but stripped of motion clutter. It borrows visual cues from mainstream platforms like Twitter and Instagram — think rounded pill buttons, generous whitespace, clean typography — but drenches them in its proprietary azure blue (#00aff0).

The design speaks to two audiences at once: creators who want a place to present content professionally and consumers who navigate a feed-driven, media-heavy interface with minimal friction. That’s a tricky balancing act. The system needs to feel safe and familiar (for onboarding and legality) but also engaging enough to keep paying subscribers in flow. They achieve this by sticking to a lean color palette, cushioning text and images with predictable spacing, and making CTAs unmissable by isolating them in a saturated brand blue.

They use Vuetify components under the hood, but the skin is heavily customized. Borders and radii are standardized; no mixed curvatures. Shadows are light, only enough to lift elements slightly — avoiding skeuomorphic depth. Typography is platform-safe (Roboto, Arial, Helvetica) for performance and consistency. The 8px spacing scale rules everything from paddings to margins, with occasional odd values like 5px for micro-gaps.

If I had to describe the philosophy: mainstream social app stripped to essentials. No decorative flourishes. The system is accessible-leaning with large tap targets and high-contrast CTAs, though not all text-to-background combinations would pass strict WCAG AAA. The result is a familiar, efficient interface that stays out of the way while highlighting media and the money buttons.

2. Color System

2.1 Primary Colors

The hero here is rgb(0, 175, 240) (#00aff0), a bright, pure cyan. It’s globally recognized in tech for being friendly, modern, and clean. Competitors? Twitter’s blue is darker (#1da1f2) — that makes OnlyFans feel a bit more toy-like and upbeat. This works for onboarding: the site feels less corporate, more creator-friendly.

This blue is the action color. CTAs, primary links, brand logo glyph. When you see it, you know it’s tappable.

2.2 Complete Palette

These aren’t arbitrary variants; the multiple hover blues likely reflect overrides from different services (OAuth buttons, embedded components).

2.3 Color Relationships

Blue on white — high-contrast, passes AA easily. White on blue — also fine. Grey (#8a96a3) on white is lower contrast (about 3:1) — so while good for de-emphasis, it’s borderline for accessibility on small text; probably okay as metadata.

Accessibility note:

• Primary blue against white: ~3.08:1 — safe for large text, borderline for small.
• Grey on white: ~3:1 — use only for non-critical details.
• Black on white: 21:1 — passes everything.

2.4 Usage Guide

Do:

• Use brand blue for interactive elements only.
• Pair grey with white for metadata, not primary labels.
• Use white text on blue or dark backgrounds.

Avoid:

• Blue text on grey — drops contrast too low.
• Using hover blues as standalone brand color; reserve for state changes.

3. Typography

3.1 Font Families

The type system stays with safe bets:

• Roboto — main UI and body copy.
• Arial with fallback to Helvetica — appears in large title contexts, possibly legacy or OS-default headers.

Neither is loaded from Google Fonts here; likely relying on system-installed fonts (performance win, brand loss if you wanted a unique typographic voice).

3.2 Type Scale

3.3 Hierarchy

Biggest jump is from 40px to 32px to 24px. Above 16px, it’s headline territory. Body and UI text live in the 14–16px zone. The uppercase 14px Roboto Medium for buttons is a classic material-ish move: keeps CTAs compact but noticeable.

There’s some redundancy — multiple heading-1 contexts at different sizes, probably configured per component rather than a strict H1, H2, etc.

4. Spacing & Layout

4.1 Spacing Scale

Scale type: 8px base, but mixed in with some exceptions.

4.2 Layout

Breakpoints: one explicit at 576px. This matches a mobile/desktop split rather than a full multi-breakpoint responsive system (Vuetify would still handle larger tiers).

5. Visual Elements

Border radius:

• 6px — inputs, fieldsets, cards.
• Full pill: 1000px — buttons, images, avatars.
• Custom pill-side: 1000px 2px 2px 1000px — social button shapes.
• Occasional sharp: 0px — inputs.

Shadows:

• Main: rgba(0,0,0,0.16) 0px 3px 6px 0px — small, soft drop.
• Inset: rgba(138, 150, 163, 0.25) 0px 0px 0px 1px inset — probably for selected state.

Borders:

• 1px solid rgba(138,150,163,0.5) — default input border.
• Light dividers: 1px top or bottom with 25% alpha.

6. Components

6.1 Buttons

Primary

• Default: bg #00aff0, text #fefefe, padding 8px 16px, radius 1000px, border none, font 14px Roboto Medium.
• No hover/active/focus styles in data. Likely handled via color shift (hover blues).

Secondary / Muted

• Default: bg rgba(138,150,163,0.75), text white, padding 10px 18px, radius 1000px, opacity 0.4.

Social (Twitter)

• Default: bg #1da1f2 (rgb(29,161,242)), text white, padding 10px 18px 10px 38px, radius pill.

Social (Google)

• Default: bg #4285f4 (rgb(66,133,244)), text white, padding same as Twitter variant.

Icon-Only Social

• Default: bg white, radius 1000px 2px 2px 1000px.

Video Play

• Default: bg rgba(0,0,0,0.4), color white, font size 40px, radius pill, transform offset (-30px).

6.2 Links

Variants:

• Blue #00aff0 normal weight.
• White, weight 500 or 700.
• Dark grey #242529.
• Grey #8a96a3. All no underline by default.

6.3 Forms

Email input: transparent bg, text #242529, border none, bottom padding 14px, no visible focus outline in data.

6.4 Cards

From borderRadius/shadow: likely 6px radius, soft 3px shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-brand-blue: #00aff0;
  --color-white: #ffffff;
  --color-grey: #8a96a3;
  --color-black: #000000;
  --color-hover-blue-1: #0091ea;
  --color-hover-blue-2: #0093ea;
  --color-hover-blue-3: #0292eb;
  --color-hover-blue-4: #356bda;
  --color-hover-blue-5: #0094eb;
  --color-transparent: rgba(0,0,0,0);
  --color-transparent-brand-tint: rgba(0,145,234,0.05);
  --bg-color: #fff;
  --title-color: #242529;
  --swiper-theme-color: #007aff;

  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: Arial, Helvetica, sans-serif;

  /* Font sizes */
  --fs-40: 40px;
  --fs-32: 32px;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-12: 12px;

  /* Line heights */
  --lh-150: 1.50;
  --lh-125: 1.25;
  --lh-133: 1.33;
  --lh-143: 1.43;
  --lh-069: 0.69;

  /* Spacing (px) */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-26: 26px;
  --space-30: 30px;
  --space-31: 31px;
  --space-32: 32px;
  --space-35: 35px;
  --space-50: 50px;
  --space-94: 94px;
  --space-481_5: 481.5px;

  /* Radius */
  --radius-sm: 6px;
  --radius-full: 1000px;
  --radius-pill-side: 1000px 2px 2px 1000px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.16) 0px 3px 6px 0px;
  --shadow-inset: rgba(138,150,163,0.25) 0px 0px 0px 1px inset;
}

8. AI Coding Assistant Prompt

# OnlyFans Design System Specification

This design system is based entirely on extracted production values from onlyfans.com. Use it to build UIs that match OnlyFans' exact visual language.

## 1. System Prompt
You are an OnlyFans design expert. Build UIs matching their visual language exactly.

## 2. Brand Context
OnlyFans' design is clean, social app–inspired, and CTA-focused. The interface prioritizes clarity, whitespace, and clear action hierarchy. Visual clutter is minimized; focus is on media content and primary actions.

## 3. Color Palette
- Brand Blue: #00aff0 — CTAs, primary buttons, logo accents
- White: #ffffff — Page backgrounds, text on primary elements
- Neutral Grey: #8a96a3 — Secondary text, disabled states, dividers
- Black: #000000 — Strong text, overlays
- Hover Blue 1: #0091ea — Hover states for primary links
- Hover Blue 2: #0093ea — Alternate hover state
- Hover Blue 3: #0292eb — Alternate hover state
- Hover Blue 4: #356bda — Alternate hover state
- Hover Blue 5: #0094eb — Alternate hover state
- Transparent: rgba(0,0,0,0) — Neutral backgrounds, inputs
- Transparent Brand Tint: rgba(0,145,234,0.05) — Subtle hover effect

## 4. Typography
Fonts:
- Primary: 'Roboto', sans-serif
- Secondary: Arial, Helvetica, sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Button Large | 40px | 400 | 1.50 | Hero CTA |
| Heading 1 | 40px | 400 | 1.50 | Page title |
| Heading 1 | 32px | 400 | 1.25 | Section title |
| Link Large | 24px | 700 | 1.33 | Promo link |
| Heading 1 | 18px | 400 | 1.33 | Subtitle |
| Body | 16px | 400 | 1.33 | Body copy |
| Small Heading | 16px | 600 | 0.69 | UI label |
| Link | 16px | 400 | 1.33 | Navigation |
| Caption | 14px | 400 | 1.43 | Metadata |
| Link Small | 14px | 400 | 1.43 | Footer link |
| Button Small | 14px | 500 | 1.43 | CTA button |
| Caption Bold | 14px | 500 | 1.43 | Emphasized meta |
| Link XS | 12px | 400 | 1.33 | Secondary link |
| Link XS Bold | 12px | 500 | 1.33 | Secondary link bold |

## 5. Spacing & Grid
Base: 8px grid, with micro steps (2px, 3px, 5px) allowed.

## 6. Border Radius
- sm: 6px — inputs, cards
- full: 1000px — pill buttons, avatars
- pill-side: 1000px 2px 2px 1000px — social icon buttons

## 7. Shadows & Depth
- Card shadow: rgba(0,0,0,0.16) 0px 3px 6px
- Inset border: rgba(138,150,163,0.25) 0px 0px 0px 1px inset

## 8. Component Specifications

### Primary Button
Default:
- bg: #00aff0
- color: #fefefe
- padding: 8px 16px
- border-radius: 1000px
- font: 14px Roboto, weight 500
- border: none
Hover/Focus/Active: shift to appropriate hover blues; maintain contrast
Disabled: reduce opacity to 0.4

### Secondary Button
- bg: rgba(138,150,163,0.75)
- color: #fefefe
- padding: 10px 18px
- radius: 1000px
- opacity: 0.4

### Input (Email)
- bg: transparent
- color: #242529
- padding: 14px 0
- border: none
- focus: maintain transparent bg, highlight underline if needed

### Card
- bg: white
- radius: 6px
- shadow: rgba(0,0,0,0.16) 0px 3px 6px
- padding: multiple of 8px

## 9. Layout & Responsive Rules
- Breakpoint at 576px for mobile/desktop change
- Maintain 8px grid for padding, margins

## 10. Interaction Rules
- State changes: background color shift using hover blue variants
- Transition: 150ms ease on interactive states

## 11. DO List
- Use only listed hex values
- Keep spacing multiples of 8px (or defined micros)
- Maintain consistent pill radius for actions
- Use Roboto for UI, Arial/Helvetica for large hero elements
- Reserve brand blue for interactivity

## 12. DON'T List
- Introduce new color shades
- Mix sharp and rounded corners in same element
- Use low-contrast text for essential copy
- Overuse shadows

## 13. Code Examples

Primary Button:
```css
.btn-primary {
  background: #00aff0;
  color: #fefefe;
  padding: 8px 16px;
  border-radius: 1000px;
  font: 500 14px/1.43 'Roboto', sans-serif;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 6px;
  box-shadow: rgba(0,0,0,0.16) 0px 3px 6px;
  padding: 16px;
}
```

9. Summary

TL;DR — OnlyFans runs a tight, social-app-inspired design system: bright cyan primary, pill buttons everywhere, Roboto/Arial typography, strict 8px grid with occasional micro spacings. Form and function lean toward active engagement and clarity.

Brand Keywords:

• social-minimal
• action-first
• whitespace-driven
• neutral-plus-pop
• rounded-consistency