TikTok's iOS app, dissected. A pure black canvas, cyan-and-red RGB split, full-bleed 9:16 video, and an action stack that sits exactly where the right thumb lands.
Every TikTok screen earns its place on a phone by deferring to the video. The chrome is monochrome; brand color shows up only where you tap.
Full-bleed 9:16 video, no margins, no chrome. The right-side action stack lives at right:10pt. Tab bar fades to a 0.85 black gradient so the video keeps the eye.
3-column video grid at 9:13 tiles separated by a hairline 1.5pt gutter. Play-count badge bottom-left with a 9px play glyph. Edit and Share Profile share width 50/50.
Four colored category tiles top, then a recent activity list — each row has an avatar with a status dot in the brand colors: red for likes, cyan for comments, white for follows.
Six controls stacked exactly where the right thumb falls. Avatar with follow-plus on top, then like / comment / bookmark / share, and a spinning audio disc at the bottom that loops at 360°/6s.
Each icon is 30px, separated by 14pt vertical rhythm. Numeric labels are 10/600 with a 1pt drop shadow so they read on any video background.
icon: 30pt
v-gap: 14pt
right: 10pt
label: 10/600
The bottom-right of the action stack rotates the song's cover art at one revolution every six seconds — running at 60fps on the device, never paused even while the video is scrubbed.
Tapping the disc routes to the sound's page, where the same disc grows to 130pt and keeps spinning at the original phase.
linear infinite
duration: 6s
size: 42pt → 130pt
Double-tap anywhere on a video to like. A white heart is rendered at the tap origin, scales 1.0 → 1.2 → 1.0 over 600ms with a rotation jitter of ±18°, then fades into the heart counter on the action stack.
The system fires a UIImpactFeedback.medium haptic at the apex of the scale animation. The counter bumps with a separate UINotificationFeedback.success.
scale: 1.2x
duration: 600ms
haptic: medium
The whole TikTok iOS vocabulary — pure black surfaces, the cyan/red RGB-split mark, video-first geometry, and the right-thumb action ladder.
A pure-black canvas with two opposing brand channels — cyan and red — applied only when the user is meant to react. Everything else is white. No grays in chrome.
TT Norms / Proxima Nova in production — substituted with Inter. The hierarchy is heavy: 700–800 for everything semantic; only captions drop to 400. Tabular figures on every counter so they don't jitter while you're scrolling.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --title-screen | For You | 24 / 1.5rem | 800 | -0.4px |
| --profile-handle | @jiang_shu | 17 / 1.06rem | 700 | normal |
| --caption-user | @maya.codes | 14 / 0.88rem | 700 | normal |
| --caption-body | when the unit tests pass on the first try | 12 / 0.75rem | 400 | normal |
| --stat-value | 24.5K | 14 / 0.88rem | 800 (tnum) | normal |
| --stat-label | Followers | 10 / 0.63rem | 400 | normal |
| --action-count | 218.4K | 10 / 0.63rem | 600 (tnum) | normal |
| --tab-label | Home | 9.5 / 0.59rem | 600 | normal |
| --badge-play | 1.2M | 9.5 / 0.59rem | 700 | normal |
Square media is non-negotiable — video tiles ship at 0px so the grid reads as a contact sheet. Buttons land at 4px. Avatars round to 50%. There are no soft pills in TikTok's chrome.
The constants the For You feed and the Create flow agree on across every iPhone in support.
Squared chrome, monochrome buttons, brand color reserved for moments of feedback.