W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
TikTok
TikTok is the global short-form video platform owned by ByteDance, the most downloaded consumer app of its era. The brand identity is a chromatic three-color composition: a black canvas anchoring the iconic music-note "d" mark composed of red and cyan layers offset against a white core — a deliberate glitch-art chromatic- aberration signature. The brand is dark-first, gen-Z-facing, and unapologetically expressive: the wordmark and mark read as a paired chromatic accent on solid black across the consumer app and marketing surfaces.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/tiktok/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/tiktok/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
TikTok
TikTok is the global short-form video platform owned by ByteDance, the most downloaded consumer app of its era. The brand identity is a chromatic three-color composition: a black canvas anchoring the iconic music-note "d" mark composed of red and cyan layers offset against a white core — a deliberate glitch-art chromatic- aberration signature. The brand is dark-first, gen-Z-facing, and unapologetically expressive: the wordmark and mark read as a paired chromatic accent on solid black across the consumer app and marketing surfaces.
Tags: social, video, tiktok, bytedance, dark-first, chromatic, consumer
Atoms
Palette
TikTok · [email protected] · Proprietary — All Rights Reserved
TikTok corporate brand palette. TikTok's identity is a chromatic three-color composition: a black canvas as ground, with the signature TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) offset to create the iconic chromatic-aberration effect on the music- note "d" mark and wordmark. The brand is dark-first: the consumer app, the wordmark, and most marketing surfaces all live on solid black with red and cyan reading as a paired chromatic accent.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
tiktok-red |
TikTok Red | #FE2C55 |
tiktok-cyan |
TikTok Cyan | #25F4EE |
tiktok-red-deep |
TikTok Red Deep | #D91E45 |
tiktok-cyan-deep |
TikTok Cyan Deep | #0BB8B3 |
tiktok-black |
TikTok Black | #000000 |
tiktok-near-black |
TikTok Near-Black | #121212 |
tiktok-charcoal |
TikTok Charcoal | #1F1F1F |
tiktok-white |
TikTok White | #FFFFFF |
tiktok-fog |
TikTok Fog | #F1F1F2 |
tiktok-gray |
TikTok Gray | #86878B |
tiktok-gray-light |
TikTok Gray Light | #BBBBBC |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
tiktok-fog |
#F1F1F2 |
surface |
tiktok-white |
#FFFFFF |
surface-elevated |
tiktok-white |
#FFFFFF |
text-primary |
tiktok-black |
#000000 |
text-secondary |
tiktok-gray |
#86878B |
text-tertiary |
tiktok-gray-light |
#BBBBBC |
primary |
tiktok-red |
#FE2C55 |
primary-hover |
tiktok-red-deep |
#D91E45 |
accent |
tiktok-cyan |
#25F4EE |
accent-hover |
tiktok-cyan-deep |
#0BB8B3 |
warning |
tiktok-red-deep |
#D91E45 |
warning-hover |
tiktok-red |
#FE2C55 |
error |
tiktok-red-deep |
#D91E45 |
success |
tiktok-cyan |
#25F4EE |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
tiktok-black |
#000000 |
surface |
tiktok-near-black |
#121212 |
surface-elevated |
tiktok-charcoal |
#1F1F1F |
text-primary |
tiktok-white |
#FFFFFF |
text-secondary |
tiktok-gray-light |
#BBBBBC |
text-tertiary |
tiktok-gray |
#86878B |
primary |
tiktok-red |
#FE2C55 |
primary-hover |
tiktok-red-deep |
#D91E45 |
accent |
tiktok-cyan |
#25F4EE |
accent-hover |
tiktok-cyan-deep |
#0BB8B3 |
warning |
tiktok-red |
#FE2C55 |
warning-hover |
tiktok-red-deep |
#D91E45 |
error |
tiktok-red |
#FE2C55 |
success |
tiktok-cyan |
#25F4EE |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
tiktok-black |
#000000 |
on-identity |
tiktok-white |
#FFFFFF |
background |
tiktok-black |
#000000 |
surface |
tiktok-near-black |
#121212 |
surface-elevated |
tiktok-charcoal |
#1F1F1F |
text-primary |
tiktok-white |
#FFFFFF |
text-secondary |
tiktok-gray-light |
#BBBBBC |
text-tertiary |
tiktok-gray |
#86878B |
primary |
tiktok-red |
#FE2C55 |
primary-hover |
tiktok-red-deep |
#D91E45 |
accent |
tiktok-cyan |
#25F4EE |
accent-hover |
tiktok-cyan-deep |
#0BB8B3 |
mark |
tiktok-white |
#FFFFFF |
mark-channel-red |
tiktok-red |
#FE2C55 |
mark-channel-cyan |
tiktok-cyan |
#25F4EE |
text-emphasis |
tiktok-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark.core
- allowed: tiktok-white, tiktok-black
- forbidden: tiktok-red, tiktok-cyan, tiktok-red-deep, tiktok-cyan-deep, tiktok-gray
The TikTok music-note "d" mark has a white core (on dark backgrounds) or a black core (on light backgrounds), with the red and cyan layers offset behind it. The red and cyan are chromatic-channel anchors, not core-fill colors — using either for the core breaks the chromatic-aberration signature.
colorChoice → logo.mark.channels
- allowed: tiktok-red, tiktok-cyan
- forbidden: tiktok-red-deep, tiktok-cyan-deep, tiktok-white, tiktok-black
The chromatic-offset channels on the "d" mark MUST be the published TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) — the deeper hover variants are interactive-state values for product chrome, not channel anchors. The mark's identity is the specific red-and-cyan duotone, not "any red, any cyan."
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, flattened-to-single-color, misaligned-chromatic-offset
TikTok's brand-guidelines program is explicit: the chromatic offset on the "d" mark MUST be applied as published, with the red and cyan layers at the specified offset distance. Flattening the mark to a single color, recoloring the channels, or misaligning the offset destroys the defining brand element.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
TikTok White on TikTok Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on TikTok surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
TikTok Red on TikTok Black gives ~5:1 — clears AA-large and approaches AA-normal. Buttons using the red fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA against the black canvas.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link
TikTok Red is reserved for primary CTAs ("Follow," "Like," "Sign Up") and the chromatic-channel anchor on the mark. Using it inside body copy or for secondary links dilutes the signature accent and breaks the interactive signal the red carries throughout the product.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700, 900
TikTok Display headlines on marketing surfaces use Medium (500), Bold (700), and Black (900) weights. Lighter cuts read as feed body and compromise the gen-Z-facing expressive voice the brand depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: tiktok-cyan, tiktok-black, tiktok-white
- doesNotPairWith: tiktok-red-deep
The TikTok Red and TikTok Cyan are paired anchors — the brand is built on this duotone chromatic relationship. Pairing the red with its own hover-state deeper red on the same surface creates a muddy two-red composition that flattens the chromatic signature.
Provenance
- Source: https://www.tiktok.com/about/brand-guidelines
- License:
Proprietary — All Rights Reserved - Attribution: TikTok Pte. Ltd. (a ByteDance Ltd. subsidiary) — TikTok, the TikTok wordmark, and the music-note "d" mark are registered trademarks of TikTok Pte. Ltd. The signature TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) are documented across TikTok's brand-guidelines page and verified against the deployed TikTok logomark SVG. TikTok Display (the proprietary corporate typeface, designed by Grilli Type) is the brand display face; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: TikTok Display (the proprietary face) is a commercial license and not publicly distributed. This atom references Inter for both heading and body roles and notes TikTok Display as the proprietary primary in provenance. The chromatic-offset treatment on the "d" mark is the most-policed brand element — the red and cyan layers are NOT interchangeable, and the offset MUST be applied as specified in the brand-guidelines.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by TikTok
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
TikTok
A clear hierarchy in TikTok's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ tiktok-cyan #25F4EE accent-hover
→ tiktok-cyan-deep #0BB8B3 background
→ tiktok-black #000000 identity
→ tiktok-black #000000 mark
→ tiktok-white #FFFFFF mark-channel-cyan
→ tiktok-cyan #25F4EE mark-channel-red
→ tiktok-red #FE2C55 on-identity
→ tiktok-white #FFFFFF primary
→ tiktok-red #FE2C55 primary-hover
→ tiktok-red-deep #D91E45 surface
→ tiktok-near-black #121212 surface-elevated
→ tiktok-charcoal #1F1F1F text-emphasis
→ tiktok-white #FFFFFF text-primary
→ tiktok-white #FFFFFF text-secondary
→ tiktok-gray-light #BBBBBC text-tertiary
→ tiktok-gray #86878B Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from tiktok)
Light mode (14 roles)
accent
→ tiktok-cyan accent-hover
→ tiktok-cyan-deep background
→ tiktok-fog error
→ tiktok-red-deep primary
→ tiktok-red primary-hover
→ tiktok-red-deep success
→ tiktok-cyan surface
→ tiktok-white surface-elevated
→ tiktok-white text-primary
→ tiktok-black text-secondary
→ tiktok-gray text-tertiary
→ tiktok-gray-light warning
→ tiktok-red-deep warning-hover
→ tiktok-red Dark mode (14 roles)
accent
→ tiktok-cyan accent-hover
→ tiktok-cyan-deep background
→ tiktok-black error
→ tiktok-red primary
→ tiktok-red primary-hover
→ tiktok-red-deep success
→ tiktok-cyan surface
→ tiktok-near-black surface-elevated
→ tiktok-charcoal text-primary
→ tiktok-white text-secondary
→ tiktok-gray-light text-tertiary
→ tiktok-gray warning
→ tiktok-red warning-hover
→ tiktok-red-deep Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark.core allowed tiktok-white, tiktok-black forbidden tiktok-red, tiktok-cyan, tiktok-red-deep, tiktok-cyan-deep, tiktok-gray The TikTok music-note "d" mark has a white core (on dark backgrounds) or a black core (on light backgrounds), with the red and cyan layers offset behind it. The red and cyan are chromatic-channel anchors, not core-fill colors — using either for the core breaks the chromatic-aberration signature.
colorChoice logo.mark.channels allowed tiktok-red, tiktok-cyan forbidden tiktok-red-deep, tiktok-cyan-deep, tiktok-white, tiktok-black The chromatic-offset channels on the "d" mark MUST be the published TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) — the deeper hover variants are interactive-state values for product chrome, not channel anchors. The mark's identity is the specific red-and-cyan duotone, not "any red, any cyan."
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, flattened-to-single-color, misaligned-chromatic-offset TikTok's brand-guidelines program is explicit: the chromatic offset on the "d" mark MUST be applied as published, with the red and cyan layers at the specified offset distance. Flattening the mark to a single color, recoloring the channels, or misaligning the offset destroys the defining brand element.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA TikTok White on TikTok Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on TikTok surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large TikTok Red on TikTok Black gives ~5:1 — clears AA-large and approaches AA-normal. Buttons using the red fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA against the black canvas.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link TikTok Red is reserved for primary CTAs ("Follow," "Like," "Sign Up") and the chromatic-channel anchor on the mark. Using it inside body copy or for secondary links dilutes the signature accent and breaks the interactive signal the red carries throughout the product.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 700, 900 TikTok Display headlines on marketing surfaces use Medium (500), Bold (700), and Black (900) weights. Lighter cuts read as feed body and compromise the gen-Z-facing expressive voice the brand depends on.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith tiktok-cyan, tiktok-black, tiktok-white doesNotPairWith tiktok-red-deep The TikTok Red and TikTok Cyan are paired anchors — the brand is built on this duotone chromatic relationship. Pairing the red with its own hover-state deeper red on the same surface creates a muddy two-red composition that flattens the chromatic signature.
Provenance
- Source
- https://www.tiktok.com/about/brand-guidelines
- License
Proprietary — All Rights Reserved- Attribution
- TikTok Pte. Ltd. (a ByteDance Ltd. subsidiary) — TikTok, the TikTok wordmark, and the music-note "d" mark are registered trademarks of TikTok Pte. Ltd. The signature TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) are documented across TikTok's brand-guidelines page and verified against the deployed TikTok logomark SVG. TikTok Display (the proprietary corporate typeface, designed by Grilli Type) is the brand display face; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- TikTok Display (the proprietary face) is a commercial license and not publicly distributed. This atom references Inter for both heading and body roles and notes TikTok Display as the proprietary primary in provenance. The chromatic-offset treatment on the "d" mark is the most-policed brand element — the red and cyan layers are NOT interchangeable, and the offset MUST be applied as specified in the brand-guidelines.