⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

TikTok

The platform UI owns a third of the frame. Design for what's left

Touchpoints / TikTok
Download .md file
Open .md in new tab

The channel isn't live yet. These guidelines exist so launch day starts on-brand instead of from scratch. TikTok's defining constraint: the platform UI overlays more of the frame than any other channel, and it moves. The studio team owns it.

Identity here

  • Logo: the avatar variant fills the profile photo; TikTok displays it as a circle. Variants and clear space: 4.1 Logo.
  • Colour: designed overlays and end cards use the brand palette; native footage stays true to its grade: 4.2 Colour.
  • Type: designed text in the frame uses the brand roles, not the platform's caption styles, wherever the asset is composed rather than captured: 4.3 Typography.

Specs

Asset Size Safe area Format Max weight Notes
Profile photo 500×500 (1:1), min 200×200 circular crop, centre the mark JPG/PNG not published TikTok publishes no formal spec. These are current working values
Video canvas 1080×1920 (9:16) clear margins: ~130px top, ~484px bottom, ~140px right, ~44px left MP4/MOV; stills at 1080×1920 – right column is the action rail; bottom band is username, caption, music ticker

Specs verified against platform documentation: 2026-07-05.

The safe-zone margins come from TikTok's ad and creative guidance, not a published spec, and the UI shifts several times a year. Treat them as this quarter's working margins and re-check against a live overlay before anything ships.

Templates & assets

A 1080×1920 canvas template with the current safe zones marked gets commissioned from design when the channel activates. Each frame below holds its format at the exact ratio until the template lands.

Video canvas, 1080×1920 (9:16)

Profile photo, 500×500 (1:1)

Don't

Don't design under the action rail

The right edge belongs to like, comment, and share. Text or a logo there sits behind buttons for every single viewer.

Don't use the bottom third for the message

Username, caption, and the music ticker stack over the bottom of the frame. The message lives in the middle band or it doesn't land.

Don't trust last year's safe zones

TikTok redraws its UI several times a year. A template that was safe in spring crops wrong by autumn. Verify against a live overlay before ship.

On this page
  • Identity here
  • Specs
  • Templates & assets
  • Don't
Previous

X

Next

YouTube

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default