A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
12tokens
8type steps
3radius steps
6pxspacing base
Tiktok, in one page
TikTok's iOS app is a full-bleed black canvas that exists to get out of the way of a single vertical video. From the moment you open the app you are dropped into the For You feed: a 9:16 clip fills the entire screen edge-to-edge, status-bar to home-indicator, and every piece of UI — captions, action icons, music ticker, tab bar — floats as a translucent overlay on top of that content. The design equivalent is a movie theater with the lights off and the usher wearing a black suit: nothing competes with the screen.
The accent system is built around a single, very loud idea: chromatic aberration. The TikTok wordmark splits the letter "d" into a cyan (#25F4EE) copy and a red / rose (#FE2C55) copy, offset a few pixels from the white original, mimicking the look of a 3D-glasses glitch or a VHS tape tracking error. Those two colors — cyan and rose — are the entire brand. Rose is the verb (the heart, the Follow button, the video scrubber, any "this is the action" moment). Cyan is the accent (the centered Create button, subtle highlights, loading states). White is neutral. Everything else is black or a hair-of-grey elevation. There is no secondary palette. There is no light mode.
Typography is Proxima Nova — a humanist geometric sans that TikTok has used across the product since its re-brand from Musical.ly. It sits slightly warmer than a pure grotesque but more neutral than SF Pro, so captions and usernames read as content rather than chrome. The hierarchy is compact and overlay-friendly: sizes run 11-24pt, weights concentrated at 400 / 600 / 700, and almost everything that sits on a video uses a subtle rgba(0,0,0,0.4) drop shadow so the text stays legible over bright or busy frames. The only place display type appears is the Live / profile header; the feed itself never shows a headline larger than 17pt because the video is the headline.
Key Characteristics:
- True-black canvas (
#010101) — effectively dark-only, no light mode - Chromatic aberration (cyan
#25F4EE+ rose#FE2C55stroke offset on white) is the signature visual treatment — logo, create button, loading states - Rose
#FE2C55is reserved for the action verb (Like, Follow, primary CTA, scrubber fill) - Cyan
#25F4EEis the secondary accent (Create button stripe, highlights) - Full-bleed 9:16 video feed with all UI overlaid on top — no inset, no margin
- Vertical right-side action rail: avatar, heart, comment, bookmark, share, spinning music disc
- Left-side info overlay: @username, bold-hashtag caption, horizontally scrolling music marquee
- Centered tab bar Create button — white pill with cyan + red chromatic stripes (mini logo)
- Proxima Nova throughout, 400 / 600 / 700 weights, with text-on-video shadow
- Haptics on like, follow, share, double-tap-like; 60fps swipe transitions between videos
Do's and don'ts
Do
- Use
#010101as the canvas — true black, because video frames need the deepest possible bezel - Reserve rose
#FE2C55for Like, Follow, scrubber fill, and any "this is the primary verb" moment - Use cyan
#25F4EEsparingly — Create button and chromatic accents only - Apply the
rgba(0,0,0,0.4)text shadow on every label sitting on top of a video - Use chromatic aberration (cyan -3pt X, rose +3pt X offset around a white core) on the wordmark, Create button, and loading spinner
- Bold hashtags inline within captions (weight 700 amid weight 400 caption text)
- Fill the feed edge-to-edge; UI overlays float, they do not contain
- Use 4pt corner radius on buttons and inputs — TikTok's "almost-square" softness
- Abbreviate counts (1.2M, 34.5K) — never raw 6-digit integers
- Double-tap heart = center-screen 120pt burst with heavy haptic
- Spinning music disc rotates continuously while video is playing
Don't
- Don't use
#000000— the brand token is#010101, a hair warmer - Don't add secondary accent colors — cyan and rose are the only chromatic moments
- Don't use a light mode — TikTok is dark-only; there is no cream, no off-white canvas
- Don't use a full-pill corner on buttons — 4pt is the signature
- Don't let captions sit on video without a drop shadow — they become unreadable on bright frames
- Don't use chromatic aberration decoratively — it's a logo / brand moment, not a flourish
- Don't inset the video feed — it fills edge-to-edge, UI floats on top
- Don't use white text on a gray surface — text on dark is always pure white
- Don't animate slowly — all feed interactions are 200-400ms springs; longer feels broken
- Don't hide the right-side action rail on the feed — it's load-bearing UX
- Don't use rose for inactive states or borders — it must stay a verb
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Tiktok design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- TikTok Rose: #fe2c55
- TikTok Cyan: #25f4ee
- Pure White: #ffffff
- Canvas Black: #010101
- Elevated Surface: #161823
- Comment Compose: #2f2f2f
- Text Primary: #ffffff
- Text Secondary: #e5e5e5
- Live Red: #fe2c55
- Unread Badge: #fe2c55
Type:
- families: Proxima Nova, Fallback Stack
- scale: 10, 12, 13, 14, 15, 16, 17, 24
- weights: 400, 500, 600, 700
Shape:
- radius: 4, 8, 12
- elevation: Proxima Nova throughout, 400 / 600 / 700 weights, with text-on-video shadow | Count label below each icon: 13pt weight 700 `#FFFFFF` with the same drop shadow | Apply the `rgba(0,0,0,0.4)` text shadow on every label sitting on top of a video
Spacing: 6
Rules:
- Use `#010101` as the canvas — true black, because video frames need the deepest possible bezel
- Reserve rose `#FE2C55` for Like, Follow, scrubber fill, and any "this is the primary verb" moment
- Use cyan `#25F4EE` sparingly — Create button and chromatic accents only
- Apply the `rgba(0,0,0,0.4)` text shadow on every label sitting on top of a video
- Use chromatic aberration (cyan -3pt X, rose +3pt X offset around a white core) on the wordmark, Create button, and loading spinner
- Bold hashtags inline within captions (weight 700 amid weight 400 caption text)
Avoid:
- Don't use `#000000` — the brand token is `#010101`, a hair warmer
- Don't add secondary accent colors — cyan and rose are the only chromatic moments
- Don't use a light mode — TikTok is dark-only; there is no cream, no off-white canvas
- Don't use a full-pill corner on buttons — 4pt is the signature
- Don't let captions sit on video without a drop shadow — they become unreadable on bright frames
- Don't use chromatic aberration decoratively — it's a logo / brand moment, not a flourish
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- TikTok Rose (
#FE2C55): Primary CTA, Follow button (unfollowed state), Like heart active, video progress scrubber fill, notification badges, chromatic aberration red-channel. - TikTok Cyan (
#25F4EE): Create button accent, chromatic aberration cyan-channel, subtle highlights, loading spinners. - Pure White (
#FFFFFF): Primary text on video, neutral icons, Create button core fill.
Canvas & Surfaces
- Canvas Black (
#010101): Primary canvas — effectively true black, absorbs letterboxing on non-9:16 content. - Elevated Surface (
#161823): DMs inbox, profile settings list, sheet backgrounds — a hair warmer than black so elevation reads. - Comment Compose (
#2F2F2F): Input field on the comments sheet, search bar on Discover. - Follower Gray (
rgba(255,255,255,0.15)): "Following" / followed-state pill background, secondary CTAs on dark overlays. - Overlay Scrim (
rgba(0,0,0,0.4)): Drop-shadow under text that sits on video, used to protect legibility. - Sheet Dim (
rgba(0,0,0,0.6)): Background dim behind bottom sheets (comments, share).
Text
- Text Primary (
#FFFFFF): Captions, usernames, icon glyphs, all text overlaid on video. - Text Secondary (
#E5E5E5): Hashtag color in captions (slightly softer than white), like / comment counts, music title on the marquee. - Text Tertiary (
rgba(255,255,255,0.6)): Timestamps, "Suggested for you" labels, placeholder text in comment input. - Text Disabled (
rgba(255,255,255,0.3)): Inactive tab labels, disabled button states.
Semantic
- Live Red (
#FE2C55): "LIVE" badge on profile avatars, same token as rose. - Unread Badge (
#FE2C55): Red dot on inbox tab, same token. - Success Green (
#25F4EE): Rarely used; cyan covers "success" states semantically. - Error Red (
#FE2C55): Same token as rose.
Dark-Only
TikTok has no official light mode. Every screen — feed, profile, inbox, search, settings — is dark. The only "light" surfaces are the composer sheet when selecting effects (a white-background picker) and the camera viewfinder (the camera's own image).
Type scaleRead the full spec
Font Family
- Primary:
Proxima Nova(TikTok uses a lightly modified version of the Mark Simonson family across product UI) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - CJK / Non-Latin: Platform-native — PingFang SC (Chinese), Hiragino Sans (Japanese), Apple SD Gothic Neo (Korean), system Arabic and Thai stacks
- TikTok does not publish a proprietary typeface; Proxima Nova is used across product UI per multiple industry references
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Profile Display Name | Proxima Nova | 24pt | 700 | 1.2 | -0.2pt | Large name on own-profile header |
| Section / Sheet Title | Proxima Nova | 17pt | 600 | 1.25 | -0.1pt | "Comments (1,234)", "Share to" |
| Caption | Proxima Nova | 15pt | 400 | 1.35 | 0pt | Video caption over the feed, 2-line clamp before "more" |
| Caption Hashtag | Proxima Nova | 15pt | 700 | 1.35 | 0pt | Inline hashtags bold in captions |
| Username (Feed) | Proxima Nova | 16pt | 700 | 1.2 | 0pt | @username on feed overlay, precedes caption |
| Username (List) | Proxima Nova | 15pt | 600 | 1.25 | 0pt | Search results, follower lists, inbox |
| Action Count | Proxima Nova | 13pt | 700 | 1.2 | 0pt | "1.2M" under heart, "34.5K" under comment |
| Music Marquee | Proxima Nova | 13pt | 500 | 1.2 | 0pt | "original sound - @creator" bottom ticker |
| Body | Proxima Nova | 14pt | 400 | 1.4 | 0pt | Comment text, DM text |
| Meta / Timestamp | Proxima Nova | 12pt | 400 | 1.3 | 0pt | "2h ago", "Viewed 5m" |
| Tab Label | Proxima Nova | 10pt | 600 | 1.0 | 0.1pt | Home / Shop / Inbox / Profile |
| Button (Primary) | Proxima Nova | 16pt | 700 | 1.0 | 0pt | Follow / Sign up / Continue |
| Button (Secondary) | Proxima Nova | 14pt | 600 | 1.0 | 0pt | Following / Share / Cancel |
| Hashtag Chip | Proxima Nova | 13pt | 600 | 1.0 | 0pt | "#fyp #foryou" chip buttons |
Principles
- Weights concentrated at 400 / 600 / 700: Regular for body, semibold for UI, bold for titles and counts
- Overlay shadow is non-negotiable: Any text rendered over a video frame uses a
rgba(0,0,0,0.4)drop shadow at 1pt Y offset and 4pt blur - Hashtags bold inline: Inside a caption,
#tokens are 700 while the surrounding caption text is 400 — this is the TikTok signature for captions - Numeric counts abbreviate: 1.2M, 34.5K, 999 — never raw integers above 1,000
- Dynamic Type respected on Latin; fixed size on overlays: Feed captions and action counts do not scale with Dynamic Type (layout-sensitive); profile and sheet text do
Components and layoutRead the full spec
Buttons
Follow Button (the iconic rose pill)
- Shape: Pill, 28pt height, 56-64pt wide depending on "Follow" vs "Following"
- Unfollowed: background
#FE2C55, text#FFFFFF, 14pt weight 700 ("Follow") - Followed: background
rgba(255,255,255,0.15), text#FFFFFF("Following"), 14pt weight 600 - Corner radius: 4pt (intentionally softer than full-pill — this is a TikTok-specific detail)
- Padding: 6pt vertical, 16pt horizontal
- Pressed: scale 0.95 with success haptic on follow, soft haptic on unfollow
Primary Pill (Sign up / Continue / Send)
- Background:
#FE2C55 - Text:
#FFFFFF, 16pt weight 700 - Height: 48pt, full-width on sheets, corner radius 4pt
- Pressed: opacity 0.85, scale 0.98, with medium haptic
Right-Rail Icon Button (Heart / Comment / Bookmark / Share)
- Size: 32pt glyph, 48pt hit area (stacked vertically at 24pt intervals)
- Default:
#FFFFFFglyph withrgba(0,0,0,0.25)drop shadow (so it stays legible over video) - Active (heart liked):
#FE2C55fill with 1.0 → 1.3 → 1.0 spring bounce, heavy haptic - Count label below each icon: 13pt weight 700
#FFFFFFwith the same drop shadow - Tap hit area extends to include the count label
Double-Tap-to-Like (Center Explosion)
- Large
#FE2C55heart appears at the center of the video where the second tap landed - Scale animation: 0.0 → 1.4 → 1.0 over 400ms with spring, then fade to 0 over 200ms
- Size at peak: 120pt
- Heavy haptic on first tap of the pair; no haptic on second tap
Create Button (Tab Bar Center)
- Shape: Rounded rectangle, 44pt wide × 30pt tall, corner radius 8pt
- Construction: a white fill layer, a cyan (
#25F4EE) layer offset -3pt X / 0pt Y, a rose (#FE2C55) layer offset +3pt X / 0pt Y — all clipped to the rounded-rect shape so you see cyan on the left edge, rose on the right edge, white in the middle, and the aberration effect at the seams - Centered white "+" glyph (SF Symbol
plus, 18pt weight bold,#010101color) - Pressed: entire button scales 0.94; heavy haptic
Cards & Containers
Video Feed Cell (For You)
- Full viewport: width × height of the screen (safe-area-to-safe-area, but video content itself ignores safe areas and fills edge-to-edge)
- No card chrome — the video IS the cell
- Overlays:
- Right-rail action stack positioned 12pt from right edge, centered vertically between ~55% and ~90% of the height
- Bottom-left info block positioned 16pt from left edge, bottom-aligned above the tab bar safe area
- Progress scrubber sits 1pt tall at the very bottom of the video area (hidden until the user long-presses or scrubs)
Right-Side Action Rail
- Stack layout, 24pt gap between items
- Order top-to-bottom: 1. Creator avatar (48pt circle, 2pt white border, a red
+badge at bottom-right when not followed — the badge disappears on follow with a spring shrink) 2. Heart icon (32pt) + count 3. Comment bubble (32pt) + count 4. Bookmark icon (32pt) + count 5. Share arrow (32pt) + count 6. Spinning music disc (44pt circle, rotating 360° / 6s, shows the cover art of the audio track)
Bottom-Left Info Overlay
- Width: ~65% of screen, right edge stops before the action rail
- Top:
@username(16pt weight 700 white) - Middle: caption (15pt weight 400 white, hashtags bold) with 2-line clamp and "more" trailing
- Bottom: music marquee — music note icon + "original sound - @creator" in 13pt weight 500, horizontally scrolls right-to-left if truncated
Comments Bottom Sheet
- Height: ~75% viewport, corner radius 12pt top-only
- Background:
#161823(elevated surface) - Header: 48pt tall, centered 36pt × 4pt grabber, title "Comments (1,234)" at 17pt weight 600 white, close X top-right
- List: comment row with 36pt avatar left, username 14pt weight 700 + comment 14pt weight 400 stacked, like icon 18pt right with count below
- Compose bar (bottom, pinned above keyboard): 44pt tall field, background
#2F2F2F, corner radius 4pt, placeholder "Add comment..." at 14pt tertiary, emoji shortcuts row above
Profile Header
- Centered avatar (96pt circle, 3pt white border, LIVE red ring if currently live-streaming)
- Display name (24pt weight 700) + @handle (15pt weight 400 secondary) stacked below
- Stat row: Following count, Followers count, Likes count — each as a vertical stack (big number 17pt weight 700 white, label 13pt weight 400 secondary) separated by 16pt gap
- Follow button (if not own profile) + Message secondary pill + share icon
- Bio text (14pt weight 400 white, max 3 lines)
- Tab row: grid icon (posts) / lock icon (private) / heart icon (liked) — 32pt, active indicator is a 2pt white bar below
Navigation
Bottom Tab Bar
- Height: 48pt + safe area bottom
- Background:
rgba(1,1,1,0.92)with.regularMaterialblur, 0.5pt top divider atrgba(255,255,255,0.08) - 5 tabs: Home / Discover (magnifying glass) / Create (centered, chromatic) / Inbox / Profile
- Labels: Proxima Nova 10pt weight 600, below icon
- Active:
#FFFFFF. Inactive:rgba(255,255,255,0.5). Notification badge: 8pt#FE2C55dot top-right of icon - On the feed screen specifically, the tab bar is *transparent* with only the glyphs and labels visible — no material, just text-shadowed icons over the video
Top Feed Tabs
- Positioned at top center, below Dynamic Island / notch safe area
- "Following" / "For You" horizontal tabs — only these two labels visible
- Active: white 17pt weight 700. Inactive:
rgba(255,255,255,0.6)17pt weight 400 - Hairline animated underline (2pt wide
#FFFFFF) slides between the labels on tab change - No container — just text floating on top of the video
Navigation Bar (Inbox / Profile / Sheets)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Action rail at 12pt spacing instead of 24pt; video letterboxed slightly |
| iPhone 13/14/15 | 390pt | Standard layout, 9:16 video fills perfectly |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated, top tabs shifted 12pt down |
| iPhone 15/16 Pro Max | 430pt | Larger avatar (52pt) on action rail, 15pt caption bumped to 16pt |
| iPad | 768pt+ | Two-column feed (video left, comments inline right) in landscape; single-column portrait with max-width 430pt centered |
Dynamic Type
- Sheet content (comments, inbox, settings): full scale
- Feed captions, usernames, action counts: fixed size (layout-sensitive)
- Tab bar labels: fixed 10pt
- Profile display name: scales up to 28pt max
Orientation
- Feed: portrait-locked — 9:16 video is the whole thesis
- Live streams: portrait-locked for the viewer
- Video player modal (from profile grid): rotates to landscape; controls shift to one side
- Discover / Inbox / Profile: portrait-locked
Touch Targets
- Right-rail icons: 32pt glyph, 48pt hit area
- Follow button: 28pt tall, 56-64pt wide, full button tappable
- Tab bar: 48pt tall, icons 24pt with 44pt hit
- Create button: 44 × 30pt, 56pt hit area
- Double-tap zone: the entire video frame (anywhere)
Safe Area Handling
- Video content: ignores safe area, fills edge-to-edge (video is allowed under the Dynamic Island)
- UI overlays: respect safe area — right rail, info block, tab bar, top tabs all sit inside
- Status bar: always
.lightContenton feed (white over video); matches surface color on sheets - Home indicator: respected by tab bar; feed video passes under it
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-tiktok {--page-bg: #010101;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #fe2c55;
--link-hover-color: #f60131;
--border-color: #2f2f2f;
--card-bg: #010101;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #151515;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #010101;
--footer-text-color: #a6a6a6;
--button-bg: #fe2c55;
--button-text-color: #000000;
--button-hover-bg: #f60131;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #101010;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2f2f2f;
--prompt-bg: #0e0e0e;
--prompt-text-color: #ffffff;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/social/tiktok/DESIGN.md· 25.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.