# TikTok

> `tiktok@1.0.0`

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** · `tiktok@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `tiktok@1.0.0` from the encyclopedia.*