---
title: "TikTok"
subtitle: "The platform UI owns a third of the frame. Design for what's left"
description: "How the brand will show up on TikTok: profile photo and the 9:16 video canvas with its shifting, working safe-zone margins, authored ahead of launch."
author: "Studio"
section: "Touchpoints"
layer: "core"
subsection: "Social"
order: 4
status: "published"
access: "team"
brand: "internal"
---

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](/brand/logo.html).
- **Colour**: designed overlays and end cards use the brand palette; native footage stays true to its grade: [4.2 Colour](/brand/color.html).
- **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](/brand/typography.html).

## 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.

<div class="demo-preview is-joined is-centered">
  <img class="format-preview" src="/image/1080x1920" width="1080" height="1920" loading="lazy" alt="">
</div>
<div class="demo-caption">
  <p>Video canvas, 1080×1920 (9:16)</p>
</div>
<div class="demo-preview is-joined is-centered">
  <img class="format-preview" src="/image/500x500" width="500" height="500" loading="lazy" alt="">
</div>
<div class="demo-caption">
  <p>Profile photo, 500×500 (1:1)</p>
</div>

## Don't

<div class="grid cols-2 gap-m">
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't design under the action rail</h4>
    <p class="card-description">The right edge belongs to like, comment, and share. Text or a logo there sits behind buttons for every single viewer.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't use the bottom third for the message</h4>
    <p class="card-description">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.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't trust last year's safe zones</h4>
    <p class="card-description">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.</p>
  </div>
</div>