TikTok Design System

Overview

TikTok's interface does something almost no other social platform attempts. Video as canvas. Where Instagram, Vimeo, and YouTube default to landscape or square grids of thumbnails on a white or near-black surface, TikTok presents a single 9:16 vertical-video column where each clip fills the visible viewport edge to edge, and scrolling advances by one full clip rather than by a smooth scroll through a thumbnail grid. The black canvas behind the video is pure black, not the slightly-blue near-black that Spotify and Netflix lean on — the maximum contrast lets the video chroma read without the canvas competing for attention. The chrome (wordmark, search, tabs, right-rail action stack) overlays the video as floating white elements rather than sitting on a separate surface tier.

The chromatic move is a brand split. The wordmark carries a chromatic-aberration treatment — a cyan layer offset to the left and a magenta layer offset to the right, both peeking out from behind the white text. The treatment reads as a video-edit glitch, the same look you get when a chroma channel falls out of register on a misaligned print or a degraded VHS tape. The primary Sign up CTA pill fills with the magenta {colors.primary} (#fe2c55) and the heart icon shares that hue; the cyan {colors.primary-cyan} (#25f4ee) is scoped to the wordmark only. The secondary Log in pill outlines with a 1px white hairline on the black canvas. Where Instagram fills its primary CTA with a gradient that runs through orange, pink, and purple, and Snapchat fills its CTA with a saturated yellow, TikTok holds the cyan-and-magenta split entirely off CTAs except for the magenta-fill primary.

The shape vocabulary is small. Pills ({rounded.full}) carry CTAs and circular avatars; a {rounded.md} 8px radius handles tap targets in the right-rail action stack; a {rounded.sm} 4px radius marks the search field and the form-tier inputs. The bottom-bar nav and the top bar render flush — {rounded.none} — so the video frame reads as continuous from chrome edge to chrome edge.

Key Characteristics:

• Pure black canvas ({colors.canvas} — #000000) as the page floor, with full-bleed 9:16 video tiles filling the visible viewport per clip.
• Cyan-and-magenta brand split ({colors.primary-cyan} + {colors.primary}) applied as a chromatic-aberration treatment on the wordmark — the cyan offsets left, the magenta offsets right, both peeking out from behind the white text.
• Magenta primary CTA ({colors.primary} — #fe2c55) on the Sign up pill and the heart icon; cyan never appears on a CTA fill.
• 240px right-rail action column with circular avatar, magenta heart with like count, comment-bubble icon, share-arrow icon, and spinning music-disc avatar.
• System sans across every tier — SF Pro Display on iOS / macOS, Segoe UI on Windows, Roboto on Android. No proprietary face shipped on the marketing surface.
• Vertical-video column layout — single 9:16 scrollable column, no grid, no thumbnail tiles, no atmospheric transitions between clips.
• Bottom-bar nav (Home, Discover, Inbox, Profile) renders flush against the bottom of the viewport with five icon-and-label tap targets at {spacing.base} 12px horizontal padding.
• Floating chrome — the wordmark, search pill, tab labels, and right-rail action stack overlay the video as transparent or surface-overlay surfaces rather than sitting on their own band.

Colors

Brand

• Magenta ({colors.primary} — #fe2c55): the primary brand voltage. Fills the Sign up CTA pill, the heart icon in the right-rail action column, the active-state highlight under the music-disc avatar. The single chromatic CTA fill on the page.
• Cyan ({colors.primary-cyan} — #25f4ee): the secondary brand voltage. Appears only as the chromatic-aberration offset behind the white wordmark text — shifted slightly to the left so the cyan layer peeks out behind the white. Never appears on a CTA fill or hover state.

Surface

• Canvas ({colors.canvas} — #000000): pure black, the page floor. Used as the background behind every video tile, the top bar, the bottom-bar nav, and the side-column chrome. The maximum-contrast surface choice — slightly-blue near-blacks would muddy the video chroma at the frame edges.
• Surface-1 ({colors.surface-1} — #161823): a slightly-warmer near-black used as a secondary tonal surface for modal sheets and grouped cards inside the inbox and profile screens.
• Surface Overlay ({colors.surface-overlay} — #1f1f1f): the floating-chrome surface tone — the search pill and the inline tab background. Sits above the canvas with a faint lightness lift so the pill reads as an overlay rather than as part of the video.

Text

• Ink ({colors.ink} — #ffffff): pure white — the dominant text color across the entire surface. Wordmark, video captions, action-stack labels, tab labels, primary nav. The contrast against the pure-black canvas is uncompromising.
• Ink Mute ({colors.ink-mute} — #a8a8a8): secondary text — the inactive tab labels ("Following" when "For You" is active), comment-card timestamps, video-description hashtags rendered as quiet metadata.
• Ink Soft ({colors.ink-soft} — #737373): tertiary text — disabled labels, footer fine-print, share-sheet metadata. Sits between the muted ink and the hairline tone for surface-only structural use.

Hairline

• Hairline ({colors.hairline} — #3a3a3a): the dominant border tone — divider rules between bottom-nav cells, the top-bar bottom border, the comment-card divider stack. Sits at a low-lightness step above the canvas so the rule reads as structural without competing with the chrome.
• Hairline Soft ({colors.hairline-soft} — #4a4a4a): a lighter divider tone for the outline on the Log in secondary CTA pill and on form-input borders inside the auth modal.

On-Primary

• On-Primary ({colors.on-primary} — #ffffff): the text and icon color used on top of the magenta primary CTA fill. Pure white for maximum contrast against the saturated magenta — the only text-on-color pairing in the system.

Typography

Font Family

The system ships no proprietary face. The CSS stack falls back to the platform system sans — -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. This means SF Pro Display renders on iOS and macOS, Segoe UI on Windows, Roboto on Android and Chrome OS, and the platform default on Linux. The split between display weight 600 and body weight 400 is the only typographic distinction; there is no editorial display tier, no monospace face, and no serif moment.

Hierarchy

Principles

Display weight tops out at 600. The wordmark at 24px / 600 is the loudest typographic moment in the system; the next step drops to the 16-18px tier for tab labels and modal headings. There is no 32px or 48px display tier — the system is built for an application surface where the video itself carries the visual weight, and the chrome typography stays small enough to not compete with the clip.

The platform system stack is the typographic discipline. By delegating typography entirely to the OS, TikTok ensures that every label renders in the rhythm the user expects from the rest of their device, which keeps the chrome feeling native rather than branded. The cyan-and-magenta wordmark treatment is the only brand-typography moment; everything else borrows from the OS.

Note on Font Substitutes

The platform system stack is already the substitute. If a non-system render is needed (a marketing screenshot, a brand-asset export), Inter at the same weights is the closest open-source match, with comparable cap height and counter shape to SF Pro Display. The wordmark itself is a custom lockup (the letterforms are a tightened sans with a stylized "k") and ships as an SVG asset rather than as renderable text — substituting a typeface for the wordmark would lose the chromatic-aberration treatment baked into the SVG.

Layout

Spacing System

• Base unit: 12px ({spacing.base}) — the dominant gap value in the captured chrome, used for top-bar internal padding and tab-label spacing.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Video tile padding: 0 — each clip fills the visible viewport edge to edge with no internal padding.
• Right-rail action padding: 16px between each action-stack row, 56px circular avatar height matched to the spacing unit.
• Top-bar padding: {spacing.base} 12px vertical, {spacing.lg} 24px horizontal — 60px total height.

Grid & Container

• Feed column: centered single 9:16 video tile filling the visible viewport height; max-width determined by the viewport height times 9/16 (e.g., 540px wide on a 960px-tall viewport).
• Right rail: 240px fixed column to the right of the centered video, holding the circular avatar, three icon-and-count rows (like, comment, share), and the spinning music-disc avatar.
• Top bar: 60px height, flush against the top of the viewport. Wordmark flush-left, search pill centered at ~480px max-width, Sign up / Log in pill cluster flush-right.
• Bottom-bar nav: 56px height, flush against the bottom of the viewport. Five icon-and-label tap targets (Home, Discover, Create, Inbox, Profile) evenly distributed.

Rhythm

The page is a single vertical column with no horizontal divisions. Scrolling advances by one full clip — the next video snaps into the viewport, with the chrome remaining fixed at the top, right, and bottom. There is no atmospheric transition between clips; the previous video cuts to black and the next video fades in over the same canvas. The structural rhythm is the snap, not the scroll.

Elevation

The system has essentially no shadow tier. The canvas is pure black, so traditional drop shadows would not read against the surface. Hierarchy comes from {colors.surface-overlay} (#1f1f1f) lifted off the pure-black canvas by ~12% lightness contrast — the search pill and the modal-sheet backgrounds read as elevated through tonal lift alone.

• Flat (no shadow): every video tile, the right-rail action stack, the top bar, the bottom nav — 99% of surfaces.
• Tonal lift: {colors.surface-overlay} cards sit on {colors.canvas} — the lightness gap reads as elevation without any shadow being drawn.
• Hairline outlines: {colors.hairline} and {colors.hairline-soft} mark divider rules between bottom-nav cells and on the secondary CTA pill outline.

Shapes

The radius scale is binary: small-step rounding for inputs, full-pill for CTAs and avatars.

• {rounded.none} 0px — top bar, bottom-bar nav, video tiles (filling edge-to-edge).
• {rounded.sm} 4px — the primary Sign up CTA pill (a slightly-softened rectangle, not a full pill) and the secondary Log in pill, plus form-input fields.
• {rounded.md} 8px — tap-target backgrounds in the right-rail action stack.
• {rounded.lg} 12px — inline cards in the share sheet and modal-sheet surfaces.
• {rounded.full} 9999px — the search pill, the circular avatar in the right-rail action stack, and the spinning music-disc avatar at the bottom of the right rail.

The contrast between the 0px video frame and the fully-circular avatar is the system's defining shape moment. The video itself never rounds; the avatar always fully rounds.

Components

video-tile — Black {colors.canvas} fill behind the 9:16 video clip. Fills the visible viewport edge to edge; 0 internal padding. The clip itself sits inside the tile at full opacity with no atmospheric overlay.

feed-column — The single scrollable column carrying the video-tile stack. Snap-scroll behavior — each scroll-step advances by one full tile.

right-rail — Transparent fill over the canvas. 240px fixed width to the right of the centered video. Carries the circular avatar at top, three icon-and-count action rows in the middle, and the spinning music-disc avatar at the bottom.

action-button — Transparent fill, white icon at the center, count label beneath in {typography.caption}. 48px height, fully circular tap target. The heart icon fills with {colors.primary} magenta when liked.

avatar-circle — Black fill behind a user-uploaded avatar image. 56px circular, with a 1px white {colors.ink} outline.

button-primary — The signature CTA. Magenta {colors.primary} (#fe2c55) fill, white text, {rounded.sm} 4px radius, 8x16 padding, 44px height. "Sign up" is the canonical instance in the top-bar right cluster and the auth modal.

button-secondary — Transparent fill, white text, 1px {colors.hairline-soft} outline. Same dimensions as the primary. "Log in" is the canonical instance.

top-bar — Black {colors.canvas} surface, 60px height, 12x24 padding. Holds the wordmark flush-left, the search pill centered, the Sign up / Log in cluster flush-right.

wordmark — White {colors.ink} text in {typography.display-lg} (24px / 600) with the cyan-and-magenta chromatic-aberration treatment behind. The cyan offsets left, the magenta offsets right, both visible as 1-2px shadows behind the white text.

search-pill — {colors.surface-overlay} (#1f1f1f) fill, white text in {typography.body-md}, {rounded.full} pill, 8x16 padding, 44px height. The placeholder text "Search" sits in {colors.ink-mute}.

tab-active — White text in {typography.heading-md} (16px / 600) with a 2px white underline rule beneath. "For You" is the canonical instance when active.

tab-inactive — {colors.ink-mute} text in {typography.heading-md}, no underline. "Following" is the canonical inactive instance.

caption-overlay — White text in {typography.body-md} (15px / 400) sitting over the lower-left corner of each video tile. Holds the username, the video description, and any inline hashtag links.

bottom-nav — Black {colors.canvas} surface, 56px height, 8x16 padding, 1px {colors.hairline} top border. Five icon-and-label tap targets evenly distributed: Home, Discover, Create (a centered plus button with the cyan-magenta accent border), Inbox, Profile.

Do's and Don'ts

Do scope the cyan ({colors.primary-cyan}) to the wordmark chromatic-aberration treatment only. Placing the cyan on a CTA fill or a hover state breaks the brand split; the cyan is structurally a "shifted layer" signal, not a chromatic accent.

Do fill {component.button-primary} with {colors.primary} magenta. The magenta is the single CTA voltage; the secondary CTA outlines with white hairline rather than reaching for the cyan or for a softer pink.

Do keep the video-tile padding at 0. The 9:16 clip fills the visible viewport edge to edge; introducing internal padding or a rounded corner on the tile pushes the layout into the Instagram-card register that TikTok specifically refuses.

Do render the wordmark with the cyan-magenta chromatic-aberration shadow. The treatment is the brand's defining typographic signature — substituting a flat white wordmark loses the video-edit motion reference baked into the brand.

Don't swap the canvas from pure #000000 to a slightly-blue near-black. The maximum-contrast surface choice is intentional — slightly-blue near-blacks would muddy the video chroma at the frame edges and dilute the chromatic-aberration treatment on the wordmark.

Don't introduce a 2-column or 3-column grid of video thumbnails on the feed. The single-column 9:16 vertical-video layout with snap-scroll advancement is the system's structural signature; multi-column grids are reserved for the Profile and Search-result screens.

Don't add a third brand color beyond the cyan and magenta. The brand split is binary — adding a third saturated accent (a green for active state, a yellow for highlight) dilutes the cyan-magenta identity and pushes the page into a generic-social-app palette.

Don't render bottom-nav labels in any color other than {colors.ink} or {colors.ink-mute}. The bottom-nav is the system's structural anchor; coloring active labels with magenta or cyan would overload the brand voltage and steal attention from the active video clip.

Known Gaps

• Captured extraction returned a login wall: the marketing surface at tiktok.com ships a session-gated splash for unauthenticated visitors, which returned essentially no rendered chrome. The colors and components above reflect TikTok's published brand standards and the rendered application UI rather than CSS values extracted from the captured page.
• Dark mode: the entire surface is dark by default; there is no documented light variant on the public marketing chrome.
• Hover and focus states: documented at the resting state only; the full state matrix (focus rings, disabled tints, error states) lives inside the application UI and is not represented here.
• Form input error states: auth-modal error styling is not exposed on the captured surface.
• Motion: the snap-scroll between clips, the spinning music-disc avatar, and the chromatic-aberration animation on the wordmark all live in client-side scripts not captured in the token spec.
• Product surfaces: this DESIGN.md captures the marketing and feed surfaces only. The TikTok creator-studio dashboard, the live-streaming surface, the shopping screens, and the in-app camera UI carry their own component sets not represented here.
• Mobile and tablet breakpoints: the captured render is desktop-only; the mobile shell (bottom-nav-first, no right-rail) carries its own component recipes not represented here.