iOS Design Spec

# A black screen that moves at 60fps.

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.

View Design Tokens Explore Surfaces
9:41

## Inbox

Likes
Comments
Mentions
Followers
Activity · This week
jamie_x liked your video
12m ago
kai.exe commented: "GOATED 🔥"
38m ago
milo started following you
1h ago
sage_ and 24 others liked
2h ago
devon mentioned you in a comment
3h ago
Home
Discover
Inbox
Profile
Inbox
9:41
Following For You
M
218.4K
1,521
12.4K
Share
@maya.codes
when the unit tests pass on the first try 🥲 #devlife #fyp
original sound — maya.codes
Home
Discover
Inbox
Profile
For You
9:41
jiang_shu
J
@jiang_shu
128
Following
24.5K
Followers
312.8K
Likes
Edit Profile
Share Profile
writing software, mostly · sometimes very serious nonsense
1.2M
418K
92K
61K
54K
38K
21K
17K
9.4K
Home
Discover
Inbox
Profile
Profile
iOS Surface Anatomy

## Three surfaces. One thumb. Zero friction.

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.

### For You

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.

### Profile

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.

### Inbox

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.

Right-side action stack

### The thumb tower.

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`
218.4K
1,521
12.4K
Share
avatar.follow
heart.toggle
comment.modal
bookmark.save
share.sheet
original sound — maya.codes
rotate(0 → 360deg) · 6s linear infinite
Sound disc

### An album cover that doesn't stop turning.

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 burst

### A heart you don't have to aim for.

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`
Design System Reference

## One canvas. Two brand channels. Cyan + Red.

The whole TikTok iOS vocabulary — pure black surfaces, the cyan/red RGB-split mark, video-first geometry, and the right-thumb action ladder.

View Source ↗

### Color

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.

Primary Brand
TikTok Red
#FE2C55
TikTok Cyan
#25F4EE
True Black
#000000
Pure White
#FFFFFF
RGB Split
cyan→red
Text
Ink
#FFFFFF
Soft
#F1F1F1
Muted
#A8A8A8
Dim
#717171
Tab Inactive
white/.60
Surface
Surface 1
#0A0A0A
Surface 2
#161616
Card
#1C1C1C
Button Bg
#252525
Border
#2E2E2E
Semantic / Reaction
Like / FYP
#FE2C55
Comment / Live
#25F4EE
Mention
#FFD166
Follow OK
#1ED760
Heart Soft
#FB5C74

### Typography

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

### Radius

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.

Media
0px
Thumb
2px
Button
4px
Card
6px
Create
7px
Sheet
10px
Screen
38px
Avatar
50%

### iOS Spec Strip

The constants the For You feed and the Create flow agree on across every iPhone in support.

Tab bar height
83pt
5 slots, center slot is a 42×26 Create button.
Action stack right
10pt
From screen right edge. Vertical gap 14pt.
Disc rotation
6s
One full turn, linear infinite, 60fps.
Heart burst
1.2x
Scale at apex, 600ms easeOut, ±18° rotation.
Top tabs gap
24pt
Underline 18×2.5pt under active tab only.
Grid gutter
1.5pt
Hairline between profile grid cells. 9:13 ratio.
Caption width
75%
Keeps off the action stack on the right.
Animation curve
easeOut
200ms button press · 350ms sheet present.

### Components

Squared chrome, monochrome buttons, brand color reserved for moments of feedback.

##### Buttons

Follow Following Edit Profile Open App

##### Inputs

For You LIVE Trending

##### Cards

@maya.codes
when the unit tests pass...
218.4K
jamie_x liked your video
12m ago
View source ↗