TikTok

Overview

TikTok is a global short-form video platform that prioritizes content discovery and creator expression through a dark-mode-first interface. The design system embodies "Energetic Minimalism"—a philosophy that combines a restrained, near-black canvas (surface #161823, background #0a0e27) with explosive accent colors (primary pink #fe2c55, secondary cyan #20d5ec, tertiary teal #0be09b) that punctuate key moments: CTAs, notifications, and interactive feedback. The visual language is intentionally high-contrast and fast-paced, mirroring the rapid-fire nature of short-form video consumption. Users expect instant visual feedback, bold color signals, and a frictionless path to engagement.

The brand voice is casual, energetic, and trend-forward. Copy is conversational and action-oriented, avoiding corporate jargon. Tone examples: "Got it" (friendly acknowledgment), "Log in" (direct, no fluff), "Scroll, use the ↑ ↓ keys, or click the arrows on the right to browse your feed" (instructional yet approachable). The vocabulary favors verbs over nouns, embraces internet culture, and speaks to creators and viewers as peers, not audiences.

Colors

The color system is built on a dark foundation with strategic bright accents. **Surface Stack**: The background (#0a0e27) and surface-container (#161823) create a near-black viewing environment that minimizes eye strain during extended video browsing. Surface-container-high (#1f2333) and surface-container-highest (#2a2e3f) provide subtle elevation for cards, modals, and interactive surfaces without breaking the dark aesthetic. On-surface text (#e8eaed) maintains 7:1+ contrast against all surface layers for accessibility.

**Primary Color (#fe2c55)**: TikTok's signature hot pink is used exclusively for primary CTAs ("Log in", "Got it"), active states, and brand-critical moments. It appears on buttons with rounded-full (999px) radius at 40px height, padding 8px 24px. Hover state shifts to pr

Typography

The type system uses TikTokFont (a custom font family optimized for screen rendering) paired with system fallbacks (Segoe UI, Roboto, Helvetica Neue). The hierarchy spans from display (56px, 700 weight) for hero moments down to label-sm (12px, 500 weight) for metadata and timestamps. **Display** and **headline-lg** (40px, 600 weight) are reserved for page titles and major section breaks; they use -0.02em and -0.01em letter-spacing respectively to tighten the visual impact. **Body-md** (16px, 400 weight, 24px line-height) is the workhorse for feed descriptions, comments, and primary content text. **Label-md** (14px, 500 weight, 20px line-height, 0.01em letter-spacing) is applied to button text, navigation labels, and interactive elements—the 500 weight provides visual weight without appeari

Layout

The layout uses a 12-column grid with a max-width of 1280px, but the primary feed adopts a fluid, full-bleed design that extends edge-to-edge on mobile and tablet. The sidebar navigation (left, on desktop) uses fixed positioning with 24px gutter spacing (md spacing token). Section separation employs lg spacing (40px) for major content breaks and md spacing (24px) for subsections. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile. The feed itself is a vertical infinite-scroll layout with minimal whitespace between video cards—this creates a sense of momentum and encourages continuous engagement. Cards and modals use md spacing (24px) for internal padding, with lg spacing (40px) reserved for modal headers and footer sections. The design avoids centere

Elevation & Depth

Depth is conveyed through a combination of subtle shadows and layered backgrounds rather than dramatic elevation. **Level 1 (Base)**: The background (#0a0e27) with no shadow—this is the video feed and primary content layer. **Level 2 (Standard Card/Overlay)**: Cards and modals use surface-container (#161823) with a 1px border in outline-variant (#48494e) and box-shadow 0 4px 12px rgba(0, 0, 0, 0.15). This shadow is tight and close, suggesting the card is just above the surface. **Level 3 (Elevated Modal/Notification)**: Modals and toasts use surface-container-high (#1f2333) with box-shadow 0 8

Shapes

The shape philosophy is **"Energetic Roundness"**—a deliberate blend of sharp and soft corners that reflects TikTok's dual nature: precise, algorithmic content delivery paired with organic, human creativity. **Buttons** use rounded-full (999px) for primary CTAs, creating a pill shape that feels friendly and clickable. **Cards and modals** use rounded-lg (12px), a moderate radius that softens edges without appearing overly rounded. **Input fields** use rounded-DEFAULT (6px), a subtle curve that maintains a technical, form-like appearance. **Badges and chips** use rounded-full (999px) to signal

Components

Action Elements **Button Primary** uses backgroundColor {colors.primary} (#fe2c55), textColor {colors.on-primary} (white), rounded-full (999px), padding 8px 24px, height 40px, and fontWeight 500. On hover, backgroundColor shifts to {colors.primary-container} (#c91c3d) with a 150ms ease transition. On active/pressed, the background darkens further to #a01530 and the button scales to 0.98 to provide tactile feedback. Focus state adds a 3px outline in rgba(254, 44, 85, 0.3). **Button Secondary** is transparent with a 1px border in {colors.outline-variant}, textColor {colors.on-surface}, rounded-md (8px), padding 8px 16px, height 40px. On hover, backgroundColor becomes {colors.surface-container-high} (#1f2333) with a 150ms transition. These buttons are used for secondary actions like "Canc

Do's and Don'ts

**Do**

• Do use primary pink (#fe2c55) exclusively for primary CTAs and active states—it is the brand's most recognizable signal and must never be diluted or overused on secondary elements.
• Do apply rounded-full (999px) to all primary buttons and badges to create a cohesive, friendly visual language that stands out against the dark background.
• Do maintain minimum 24px gutter spacing between major sections and 12px between list items to prevent visual clutter and support rapid scanning on mobile.
• Do use the full surface stack (surface-container, surface-container-high, surface-container-highest) to create subtle depth without breaking the dark theme—avoid pure white or light grays.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.4) to small labels (label-sm, label-md) overlaid on video content to ensure legibility.
• Do use 150–300ms ease transitions for all interactive state changes (hover, focus, active) to provide smooth, responsive feedback without feeling sluggish.

**Don't**

• Don't use primary pink (#fe2c55) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and status indicators only.
• Don't apply rounded corners greater than 12px to cards or modals; the platform's energy comes from sharp, purposeful design, not soft, rounded aesthetics.
• Don't exceed 40px padding on cards or 64px on modals; TikTok's interface is compact and information-dense, designed for rapid consumption.
• Don't use system fonts like Arial or Helvetica as primary typefaces; always load TikTokFont or approved fallbacks (Segoe UI, Roboto) to maintain brand consistency.
• Don't add drop shadows greater than 0 8px 32px rgba(0, 0, 0, 0.2); excessive shadows make the interface feel heavy and slow down perceived performance.
• Don't mix rounded-full buttons with sharp-cornered inputs or cards in the same interface—maintain consistent shape language within a section to avoid visual confusion.