Consumer brand
Big headlines, black stage, full-bleed media.
Meta Strip
Signals from the extraction
Business marketing
Metric cards, glint and blaze panels.
Support utility
Pill search and quieter scanning surfaces.
01 / Colors
Electric accents on a disciplined stage
Black, ink, and white do the work; cyan and coral hit.
primary
#000000
hero, footer
accent
#FE2C55
primary action
accentHover
#E6254E
hover tone
accentPressed
#D61F46
pressed state
signature-cyan
#25F4EE
electric offset
ink
#161823
text, shell
surfaceAlt
#F7F7F8
secondary card
help-surface
#FAFAFA
search, forms
business-glint
#DFFCF3
growth panel
business-blaze
#FFE8EF
case-study panel
shadow-cyan
#D9FFFD
soft wash
shadow-coral
#FFD8E1
soft wash
02 / Typography
Large, direct, legible
Tighter tracking, broad counters, oversized numerics.
Culture moves fast.
display — 64px / 700 / 1.05 / -0.03em / TikTok Sans
Find what you didn't know you wanted.
hero — 48px / 700 / 1.08 / -0.025em / TikTok Sans
Turn attention into results.
headline-lg — 40px / 700 / 1.10 / -0.02em / TikTok Sans
Built for creators and search.
title-lg — 32px / 700 / 1.15 / -0.015em / TikTok Sans
A cleaner shell for louder content.
title-md — 24px / 700 / 1.20 / -0.01em / TikTok Sans
Quick scan.
title-sm — 20px / 600 / 1.25 / -0.005em / TikTok Sans
Get started
button — 16px / 600 / 1.20 / -0.01em / TikTok Sans
Body copy stays plain so media and numerics can do the expressive work.
body — 16px / 400 / 1.50 / 0em / TikTok Sans
Responsive product marketing surfaces.
caption — 13px / 400 / 1.40 / 0em / TikTok Sans
68%
metric-display — 56px / 700 / 1.00 / -0.03em / TikTok Sans
03 / Buttons
Direct-response first, utility second
Coral wins priority. Pills keep culture light.
04 / Cards & Surfaces
White cards, tinted proof, dark resets
Cards stay flat: white, glint/blaze, then black reset.
Creator tools
Audience analytics, creator signals, and category discovery.
Discovery habits
People come here to find products, trends, and creators.
Audience analytics
Mint-tinted panels support growth modules.
TopView launch
Blaze panels soften coral into a storytelling surface.
Sound-on moments
Dark cards feel more like content frames than dashboard widgets.
Case-study views
Numbers do more of the work than decorative charting.
05 / Brand-Specific Product Patterns
The part that makes this unmistakably TikTok
Media shells, hashtag rails, creator proof, metrics.
Attention7 days
Full-funnel reach+40.3%
Nespresso01 / 05
12.2%
lift in ad recall with TikTok-first creative.
Download TikTok
Start from the app.
Switch to Business
Choose the right category.
Start creating
Use creative tools.
@gracemchoi
#3effect creator ranking
@allangregorio
+1new badge unlocked
Search help topics
AccountLIVEMonetize
Quiet surfaces for troubleshooting tasks.
68%
users look up reviews before acting.
06 / Forms
Utility mode with soft pills
Calmer than marketing. Shape and focus work.
07 / Spacing
Compact internals, broad section rhythm
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
section
80px
08 / Radius
Rounded, not plush
8px
small chips
12px
buttons
16px
feature cards
24px
hero frames
9999px
pills and search
09 / Elevation
Mostly flat, with one soft lift
Default surface with border only.
shadow: none
Slight separation only.
0 8px 24px rgba(22,24,35,.08)
When in doubt, remove shadow and strengthen contrast or tint instead.
10 / Extracted Component Tokens
CSS custom properties
:root {
--brand-primary: #000000;
--brand-accent: #FE2C55;
--brand-ink: #161823;
--brand-canvas: #FFFFFF;
--brand-surface-alt: #F7F7F8;
--brand-signature-cyan: #25F4EE;
--brand-business-glint: #DFFCF3;
--brand-business-blaze: #FFE8EF;
--font-main: "TikTok Sans", Inter, Arial, sans-serif;
--display-size: 64px;
--hero-size: 48px;
--metric-size: 56px;
--radius-md: 12px;
--radius-xl: 24px;
--radius-pill: 9999px;
--space-md: 16px;
--space-xl: 32px;
--space-section: 80px;
--shadow-soft: 0 8px 24px rgba(22,24,35,.08);
}