What is TikTok's primary brand color?

TikTok's brand identity is a split — saturated cyan and saturated magenta — applied as a chromatic-aberration treatment behind the white wordmark text. The cyan reads as a shifted-back-layer shadow and the magenta as a shifted-forward-layer offset; together they signal the brand's motion language of layered video edits. The primary Sign up CTA fills with the magenta only, scoping the cyan to the wordmark moment. The pure black canvas carries everything else — the video frame edges, the right-rail action stack, the bottom nav band — with white text and icons sitting in pure ink white. Neither brand color appears on body chrome or hover states; both are scoped tightly to identity moments.

What typeface does TikTok use, and what should I use as a substitute?

TikTok ships no proprietary face on the marketing surface. The CSS stack falls back to the platform system sans — SF Pro Display on iOS and macOS, Segoe UI on Windows, Roboto on Android and Chrome OS. Display labels (usernames above clips, the For You tab, the wordmark) sit at 16 to 24px in weight 600; running captions (clip description, comment text) sit at 14 to 16px in weight 400; metadata captions (like count, comment count) drop to 12 to 13px in weight 500. There is no editorial display tier, no monospace face, and no serif moment — the platform delegates typography entirely to the operating system. If a substitute is needed for a non-system render, Inter at the same weights transfers cleanly with comparable cap height.

Why does TikTok use a vertical-video column instead of a grid?

TikTok's feed is a single 9:16 vertical-video column where each clip fills the visible viewport edge to edge. Scrolling advances by one full clip rather than scrolling continuously through a grid of thumbnails. This is the platform's structural signature — Instagram, YouTube, Vimeo all default to landscape or square grids, and TikTok's vertical column carries the same aspect ratio as a phone in portrait orientation, treating every clip as if it were filling a mobile screen even on desktop. The 240px right-rail action column sits to the right of the centered video frame, holding the circular avatar, like count, comment count, share button, and spinning music-disc avatar. Aside from this rail, the entire viewport belongs to the video.

Why does TikTok's wordmark have a cyan-and-magenta shadow?

The cyan-and-magenta offset behind the white wordmark text is a chromatic-aberration treatment — the cyan layer is shifted slightly to the left and the magenta layer is shifted slightly to the right, producing the same color-channel split that a misaligned print job or a VHS tape glitch produces. The visual reference is video editing: when you cut and paste a frame at the wrong moment, the chroma layers separate. By baking the aberration into the wordmark, TikTok signals that the brand IS the video edit — the layered, mis-registered, frame-by-frame motion language. The treatment never appears on body chrome; it is reserved for the wordmark only.

Can I use this DESIGN.md to build my own React vertical-video site?

Yes — feed it to Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce TikTok's specific moves: pure black canvas, single-column 9:16 vertical-video feed, 240px right-rail action stack with circular avatar and three icon-and-count rows, magenta primary CTA pill, white-outline secondary pill, and the cyan-magenta chromatic-aberration treatment on the wordmark. The 11 color tokens, 9 typography levels, five radii, and 14 component recipes are quoted values you can paste into Tailwind config or CSS variables. One caveat: the captured marketing surface returned a login wall rather than rendered chrome, so the spec reflects the application UI from TikTok's published brand standards rather than from a CSS-variable extraction of the captured page.

TikTok Design System

TikTok's interface design system as a DESIGN.md file.

About TikTok DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source tiktok.com

Social & Community
Music, Video & Streaming

TikTok's interface does something almost no other social platform attempts: the feed is a single scrollable column of full-bleed 9:16 vertical clips rather than a grid of cards. Each clip fills the visible viewport top to bottom, with a 240px right-rail action stack carrying a circular avatar, a saturated magenta heart icon with a like count, a comment-bubble icon with a count, a share-arrow icon, and a spinning music-disc avatar. The black canvas runs edge-to-edge behind the video, and the brand chrome — the wordmark in the top-left, the search field centered, the "For You" / "Following" tabs above the active clip — sits as overlay text in pure white. There is no surface lift, no atmospheric gradient between elements; the video is the surface, and the chrome floats on top.

The chromatic move is a brand split. The wordmark carries a chromatic-aberration treatment — a cyan offset shadow behind the white text and a magenta offset to its right — which signals the "shifted layers" motion language used across the brand. The primary "Sign up" pill on the right-rail card fills with a saturated magenta; the heart icon, the magenta is the same hue. The secondary "Log in" pill outlines with a 1px white hairline on the black canvas. Neither cyan nor magenta appears on body text, on hairlines, or on hover states — both colors are scoped tightly to brand identity moments.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 color tokens covering the load-bearing pure black canvas and white ink, the cyan and magenta brand split, three structural greys for secondary captions and disabled states, plus a translucent surface tone for the overlay chrome on top of video; 9 typography tokens spanning the platform system sans stack at 14 to 24px, with weight 600 carrying display labels and weight 400 carrying running text; five radii topped by a full pill for CTAs and circular avatars; and 14 component recipes covering the video tile, the right-rail action stack, the brand wordmark, the magenta Sign up pill, and the bottom-bar nav. Note that the captured marketing surface returned a login wall rather than rendered chrome, so the colors and components below reflect TikTok's published brand standards and the rendered application UI rather than CSS values extracted from the captured page.

What makes it distinct

Cyan-magenta brand splitthe cyan offsets the wordmark as a chromatic-aberration shadow, the magenta carries the primary Sign up CTA, neither appears on body chrome
Pure black canvasthe page floor is true black, not the slightly-blue near-black that Spotify and Netflix use, to maximize contrast with the full-bleed vertical video
Vertical-video columnthe feed is a single 9:16 scrollable column rather than a grid, with a 240px right-rail action stack carrying like, comment, and share
System sans across every tierSF Pro Display on iOS and Segoe UI on Windows carry every label, with no proprietary face shipped for the marketing chrome
Pill CTAs at full-pillthe Sign up and Log in pills round to fully-circular geometry, paired with circular avatar tap targets in the right-rail action column

Live at tiktok.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

tiktok.com

Explore TikTok

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

TikTok design system FAQ

Common questions about TikTok's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

TikTok — official site

TikTok's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.