TikTok Design System Deep Dive

1. Brand Overview

TikTok’s interface is built for speed, punch, and stickiness. This is a brand that thrives on immediacy — micro-interactions, high-contrast visuals, and UI patterns that keep you in the feed. The design works because it knows its audience: younger, mobile-first, video-centric. The system leans heavily on dark surfaces, neon-like accents, and bold typography. There’s no attempt to make this feel “neutral” — TikTok’s brand color rgb(254, 44, 85) (#fe2c55) is unapologetically loud, and it’s used with surgical precision to highlight CTAs, active states, and brand moments.

The philosophy here is attention economy design. You don’t get subtle gradients or understated borders. You get flat fills, massive pill buttons, and link colors that flip from white to brand pink on hover. The dark backgrounds serve three purposes: push the video content forward, make colors pop, and reduce eye strain for binge viewing.

Typography is interesting — the custom “TikTokFont” and “TikTokDisplayFont” are paired with robust fallbacks. It’s not about long-form reading; it’s about clarity, weight, and instant recognition. Sizes are tightly controlled, with a lot of 14px–16px work in buttons and captions, and 21px for key headings and links. This keeps the system lightweight and consistent across breakpoints.

Spacing follows an 8px base grid with occasional 4px and 1px micro-adjustments. Border radii swing between small (4px, 6px, 8px) and extreme (9999px for pills). This creates a visual rhythm: square-ish cards, ultra-round buttons.

The vibe? Confident, high-energy, functional minimalism. No extraneous chrome. Every pixel is there to either frame content or drive an action. TikTok’s UI feels like a stage — the brand colors are the lights, and everything else is backdrop.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(254, 44, 85) (#fe2c55). It’s a hyper-saturated pink-red — visually aggressive and impossible to ignore. Psychologically, it sits between passion red and playful pink, which fits TikTok’s dual identity: energetic but approachable. This color is reserved for CTAs, active states, and highlights. It’s not used for backgrounds — that would be overwhelming. Instead, it’s deployed sparingly for maximum impact.

Secondary color is rgba(0, 0, 0, 0) — effectively transparent in the semantic set, which tells me TikTok relies on dark surfaces (#121212, #1e1e1e, etc.) as functional backgrounds rather than a formal “secondary” brand hue.

Compared to competitors:

• YouTube leans on pure red — more aggressive, less playful.
• Instagram’s gradient is warmer and more ornamental.
• TikTok’s pink-red pops harder against black, giving it neon signage energy.

2.2 Complete Palette

From the extracted variables, here’s the full palette snapshot (abbreviated to keep it usable — the real system has hundreds of tokens):

…and dozens more for very specific scenarios (live badges, e-commerce tags, gradients). The system uses semantic naming (--tux-v2-color-ui-shape-danger) so devs know why a color exists.

2.3 Color Relationships

Dark mode is the default. Surfaces are various shades of near-black, with white or near-white text. The brand pink-red has excellent contrast against dark backgrounds (WCAG AAA for large text). Against pure white, it’s still fine for accessibility but less “glowy”.

Accent turquoise (#25f4ee) is used sparingly, usually in animations or brand marks. It’s not paired with pink-red in static UI — that’s reserved for the logo and motion moments. Most UI elements stick to one accent at a time.

2.4 Usage Guide

Works:

• Pink-red (#fe2c55) on black/dark gray — instant CTA visibility.
• White 90% text on #121212 — clean, low-glare.
• Light gray (#f6f6f6) buttons on black — subtle secondary actions.

Avoid:

• Pink-red on turquoise — too much color vibration.
• Pink-red on pure white for large backgrounds — loses the “neon” feel.
• Using turquoise as a primary action — breaks brand hierarchy.

3. Typography

3.1 Font Families

TikTok uses TikTokFont and TikTokDisplayFont. These are custom and not from Google/Adobe. Fallbacks include:

• Arial, Tahoma, PingFangSC (CJK support)
• system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans
• Emoji fallbacks for cross-platform consistency

No variable font sources. Everything is static-weight.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is tight. The jump from 14px to 21px is the only real “headline” leap. This works for a video app — you don’t need H3–H6. Buttons are heavy (500–700 weight) to stand out against busy video thumbnails. Captions drop to 12px or 8px for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

• 1px — borders, hairline dividers
• 4px — icon padding, micro gaps
• 5px / 6px — occasional fine-tuning
• 8px — core grid unit
• 12px, 16px, 20px, 24px — component padding
• Odd large: 86px (hero?), 259.6px (layout columns?)

4.2 Layout

Breakpoints are numerous, from 468px up to 1919px. This is a highly responsive system with tailored layouts for many widths. That matches TikTok’s need to cover mobile portrait, tablets, small laptops, and ultra-wide desktops.

5. Visual Elements

Border Radius:

• 4px, 6px, 8px — small components (buttons, list items)
• 12px — dialogs
• 32px, 52px — large pills
• 92px — very round inputs
• 999px — pill buttons/search
• 9999px — badges, avatars
• 50% — circular divs

Shadows: Minimal use. Examples:

• rgba(0, 0, 0, 0.07) 0px 2px 10px
• rgba(0, 0, 0, 0.12) 0px 2px 12px
• Transparent multi-layer for subtle depth

Borders:

• 1px solid rgb(227, 227, 229) — light border
• 1px solid rgba(255, 255, 255, 0.2) — on dark

6. Components

6.1 Buttons

Capsule Button (dark)

• Default: bg #1f1f1f, text #f6f6f6, radius 999px, no border
• Hover: bg #f8f8f8
• Focus: box-shadow with black at 0.1 alpha and 0.2 alpha outline

Primary CTA (pink-red)

• Default: bg #fe2c55, text #fff, radius 6px, padding 1px 16px
• Hover: bg #f8f8f8 (odd — likely a bug or placeholder)
• Focus: same focus shadow as capsule

Secondary Ghost

• Default: bg rgba(255,255,255,0.13), text #f6f6f6, radius 32px
• Hover: bg #f8f8f8
• Focus: same as above

6.2 Links

• Default: color rgba(255,255,255,0.9), no underline
• Hover: color #fe2c55, underline

6.3 Forms

Text input buttons mimic capsule buttons — dark bg, white text, 999px radius. Focus adds multi-layer shadow.

7. Design Tokens (CSS Variables)

:root {
  /* Primary Colors */
  --color-primary: #fe2c55;
  --color-secondary: transparent;
  --color-white-90: rgba(255,255,255,0.9);
  --color-light-gray: #f6f6f6;
  --color-black: #000000;
  --color-accent-pink: #ff3b5c;
  --color-bg-primary: #121212;
  --color-bg-secondary: #1e1e1e;
  --color-bg-tertiary: #2e2e2e;
  --color-bg-quaternary: #383838;
  --color-bg-quinary: #4b4b4b;
  --color-tiktok-splash: #25f4ee;
  --color-tiktok-glint: #2dccd3;
  --color-tiktok-blaze: #f1204a;
  --color-tiktok-glow: #fbeb35;
  --color-tiktok-razzmatazz: #fe2c55;
  --color-ui-danger: #ff4c3a;
  --color-ui-warning: #ffad7c;
  --color-ui-success: #1dd765;
  --color-ui-info: #0075dc;

  /* Typography */
  --font-tiktok: TikTokFont, Arial, Tahoma, PingFangSC;
  --font-tiktok-display: TikTokDisplayFont, PingFangSC;
  --font-size-h1: 21px;
  --font-size-button: 16px;
  --font-size-caption: 14px;
  --font-size-small-caption: 12px;
  --font-size-nano: 8px;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-86: 86px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-dialog: 12px;
  --radius-pill-lg: 32px;
  --radius-pill-xl: 52px;
  --radius-round: 92px;
  --radius-pill-full: 999px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.07) 0px 2px 10px;
  --shadow-medium: rgba(0, 0, 0, 0.12) 0px 2px 12px;

}

8. AI Coding Assistant Prompt

# TikTok Design System Specification

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

## Brand Context
TikTok is high-energy, video-first, and thrives on dark mode with neon-like accents. The design is minimal in chrome but maximal in punch — bold CTAs, heavy typography, ultra-round pills.

## Color Palette
- Primary: #fe2c55 — CTAs, key actions
- Secondary: transparent — overlays
- White 90%: rgba(255,255,255,0.9) — text on dark
- Light Gray: #f6f6f6 — secondary backgrounds, button fills
- Black: #000000 — text on light, overlays
- Accent Pink: #ff3b5c — secondary CTAs
- BG Primary: #121212 — app background
- BG Secondary: #1e1e1e — cards, modals
- BG Tertiary: #2e2e2e — panels
- BG Quaternary: #383838 — dividers
- BG Quinary: #4b4b4b — disabled states
- TikTok Splash: #25f4ee — brand glow
- TikTok Glint: #2dccd3 — brand secondary accent
- TikTok Blaze: #f1204a — alternate pink-red
- TikTok Glow: #fbeb35 — highlight elements
- UI Danger: #ff4c3a — error states
- UI Warning: #ffad7c — warnings
- UI Success: #1dd765 — success states
- UI Info: #0075dc — info states

## Typography
- Font families:
  - Headings: TikTokFont, Arial, Tahoma, PingFangSC
  - Display: TikTokDisplayFont, PingFangSC
- Sizes:
  - H1: 21px / 700 / 1.5
  - Link Large: 21px / 700 / 1.5
  - Button: 16px / 700 / 1.31
  - Button Display: 16px / 700 / 1.56
  - Caption: 14px / 400 / 1.5
  - Caption Medium: 14px / 500 / 1.3
  - Caption Small: 12px / 600 / 1.33
  - Caption Nano: 8px / 400 / 1.5

## Spacing & Grid
Base: 8px. Scale: 1px, 4px, 5px, 6px, 8px, 12px, 16px, 20px, 24px, 86px.

## Border Radius
- sm: 4px — small buttons
- md: 6px — standard buttons
- lg: 8px — cards
- dialog: 12px
- pill-lg: 32px — large pills
- pill-xl: 52px
- round: 92px
- pill-full: 999px
- full: 9999px — avatars

## Shadows & Depth
- Light: rgba(0,0,0,0.07) 0px 2px 10px
- Medium: rgba(0,0,0,0.12) 0px 2px 12px

## Components

### Primary Button
```css
.btn-primary {
  background: #fe2c55;
  color: #fff;
  padding: 1px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f8f8f8; }
.btn-primary:focus { outline: none; box-shadow: rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px; }

Capsule Button

.btn-capsule {
  background: #1f1f1f;
  color: #f6f6f6;
  padding: 0;
  border-radius: 999px;
  font-weight: 500;
  font-size: 16px;
}
.btn-capsule:hover { background: #f8f8f8; }
.btn-capsule:focus { outline: none; box-shadow: rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px; }

Input Field

.input {
  background: #1f1f1f;
  color: #f6f6f6;
  border-radius: 999px;
  padding: 0;
  border: none;
}
.input:focus { outline: none; box-shadow: rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px; }

Layout & Responsive Rules

• Breakpoints: 468px, 592px, 600px, 640px, 700px, 768px, 903px, 991px, 1024px, 1200px, 1280px, 1472px, 1672px, 1872px.
• Mobile-first scaling.

Interaction Rules

• Transition: 150ms ease on hover/focus
• Focus: dual-layer shadow
• Disabled: opacity reduction

DO

• Use only defined palette
• Stick to 8px grid
• Use TikTokFont for body/headings
• Keep dark mode surfaces consistent
• Reserve primary pink for CTAs

DON'T

• Invent new colors
• Mix sharp and pill corners in same component
• Use turquoise as CTA
• Add heavy shadows

---

## 9. Summary

**TL;DR** — TikTok’s design is bold, dark, and CTA-driven. Black and near-black surfaces set the stage for neon-like brand pink and turquoise accents. Typography is heavy and compact, spacing is strict, and border radii swing from sharpish to extreme pills. Everything is built to keep you in the feed.

**Brand Keywords**:
- dark-mode-first
- neon-accent
- pill-heavy
- video-prioritized
- high-contrast