--- version: alpha name: "TikTok" website: "https://www.tiktok.com" description: >- A short-form video platform whose interface uses pure-black canvas as the page floor, paired with a cyan-and-magenta brand split that signals motion rather than chrome — the cyan sits as a chromatic-aberration offset behind the wordmark and on highlight states, while the magenta carries the primary "Sign up" CTA and the heart-like icon. Every video tile fills edge-to-edge at a 9:16 vertical aspect, with a 240px right-rail action column carrying circular avatar, heart count, comment count, and share icon, all in pure white on the black canvas. The vertical-video-first layout treats the page as a single scrollable column of full-bleed clips rather than as a grid; SF Pro Display on iOS and the platform system stack elsewhere carry every label. seo: title: "TikTok Design System for React — cyan-magenta gradient, black canvas, 14 components" metaDescription: "TikTok's interface design system as a DESIGN.md file. Cyan and magenta brand split on a pure-black canvas, system sans typography, vertical-video-first layout, 11 colors, 14 components. For React, Next.js, and AI tools." highlights: - "Cyan-magenta brand split — the cyan offsets the wordmark as a chromatic-aberration shadow, the magenta carries the primary Sign up CTA, neither appears on body chrome" - "Pure black canvas — the page floor is true black, not the slightly-blue near-black that Spotify and Netflix use, to maximize contrast with the full-bleed vertical video" - "Vertical-video column — the feed is a single 9:16 scrollable column rather than a grid, with a 240px right-rail action stack carrying like, comment, and share" - "System sans across every tier — SF Pro Display on iOS and Segoe UI on Windows carry every label, with no proprietary face shipped for the marketing chrome" - "Pill CTAs at full-pill — the Sign up and Log in pills round to fully-circular geometry, paired with circular avatar tap targets in the right-rail action column" tags: - "Social & Community" - "Music, Video & Streaming" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | TikTok's interface does something almost no other social platform attempts: the feed is a single scrollable column of full-bleed 9:16 vertical clips rather than a grid of cards. Each clip fills the visible viewport top to bottom, with a 240px right-rail action stack carrying a circular avatar, a saturated magenta heart icon with a like count, a comment-bubble icon with a count, a share-arrow icon, and a spinning music-disc avatar. The black canvas runs edge-to-edge behind the video, and the brand chrome — the wordmark in the top-left, the search field centered, the "For You" / "Following" tabs above the active clip — sits as overlay text in pure white. There is no surface lift, no atmospheric gradient between elements; the video is the surface, and the chrome floats on top. The chromatic move is a brand split. The wordmark carries a chromatic-aberration treatment — a cyan offset shadow behind the white text and a magenta offset to its right — which signals the "shifted layers" motion language used across the brand. The primary "Sign up" pill on the right-rail card fills with a saturated magenta; the heart icon, the magenta is the same hue. The secondary "Log in" pill outlines with a 1px white hairline on the black canvas. Neither cyan nor magenta appears on body text, on hairlines, or on hover states — both colors are scoped tightly to brand identity moments. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 color tokens covering the load-bearing pure black canvas and white ink, the cyan and magenta brand split, three structural greys for secondary captions and disabled states, plus a translucent surface tone for the overlay chrome on top of video; 9 typography tokens spanning the platform system sans stack at 14 to 24px, with weight 600 carrying display labels and weight 400 carrying running text; five radii topped by a full pill for CTAs and circular avatars; and 14 component recipes covering the video tile, the right-rail action stack, the brand wordmark, the magenta Sign up pill, and the bottom-bar nav. Note that the captured marketing surface returned a login wall rather than rendered chrome, so the colors and components below reflect TikTok's published brand standards and the rendered application UI rather than CSS values extracted from the captured page. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.tiktok.com" title: "TikTok — official site" description: "TikTok's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is TikTok's primary brand color?" answer: "TikTok's brand identity is a split — saturated cyan and saturated magenta — applied as a chromatic-aberration treatment behind the white wordmark text. The cyan reads as a shifted-back-layer shadow and the magenta as a shifted-forward-layer offset; together they signal the brand's motion language of layered video edits. The primary Sign up CTA fills with the magenta only, scoping the cyan to the wordmark moment. The pure black canvas carries everything else — the video frame edges, the right-rail action stack, the bottom nav band — with white text and icons sitting in pure ink white. Neither brand color appears on body chrome or hover states; both are scoped tightly to identity moments." - id: "typography" title: "What typeface does TikTok use, and what should I use as a substitute?" answer: "TikTok ships no proprietary face on the marketing surface. The CSS stack falls back to the platform system sans — SF Pro Display on iOS and macOS, Segoe UI on Windows, Roboto on Android and Chrome OS. Display labels (usernames above clips, the For You tab, the wordmark) sit at 16 to 24px in weight 600; running captions (clip description, comment text) sit at 14 to 16px in weight 400; metadata captions (like count, comment count) drop to 12 to 13px in weight 500. There is no editorial display tier, no monospace face, and no serif moment — the platform delegates typography entirely to the operating system. If a substitute is needed for a non-system render, Inter at the same weights transfers cleanly with comparable cap height." - id: "vertical-video-layout" title: "Why does TikTok use a vertical-video column instead of a grid?" answer: "TikTok's feed is a single 9:16 vertical-video column where each clip fills the visible viewport edge to edge. Scrolling advances by one full clip rather than scrolling continuously through a grid of thumbnails. This is the platform's structural signature — Instagram, YouTube, Vimeo all default to landscape or square grids, and TikTok's vertical column carries the same aspect ratio as a phone in portrait orientation, treating every clip as if it were filling a mobile screen even on desktop. The 240px right-rail action column sits to the right of the centered video frame, holding the circular avatar, like count, comment count, share button, and spinning music-disc avatar. Aside from this rail, the entire viewport belongs to the video." - id: "chromatic-aberration" title: "Why does TikTok's wordmark have a cyan-and-magenta shadow?" answer: "The cyan-and-magenta offset behind the white wordmark text is a chromatic-aberration treatment — the cyan layer is shifted slightly to the left and the magenta layer is shifted slightly to the right, producing the same color-channel split that a misaligned print job or a VHS tape glitch produces. The visual reference is video editing: when you cut and paste a frame at the wrong moment, the chroma layers separate. By baking the aberration into the wordmark, TikTok signals that the brand IS the video edit — the layered, mis-registered, frame-by-frame motion language. The treatment never appears on body chrome; it is reserved for the wordmark only." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React vertical-video site?" answer: "Yes — feed it to Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce TikTok's specific moves: pure black canvas, single-column 9:16 vertical-video feed, 240px right-rail action stack with circular avatar and three icon-and-count rows, magenta primary CTA pill, white-outline secondary pill, and the cyan-magenta chromatic-aberration treatment on the wordmark. The 11 color tokens, 9 typography levels, five radii, and 14 component recipes are quoted values you can paste into Tailwind config or CSS variables. One caveat: the captured marketing surface returned a login wall rather than rendered chrome, so the spec reflects the application UI from TikTok's published brand standards rather than from a CSS-variable extraction of the captured page." mockups: - "marketing-hero" - "media-grid" colors: primary: "#fe2c55" primary-cyan: "#25f4ee" canvas: "#000000" ink: "#ffffff" ink-mute: "#a8a8a8" ink-soft: "#737373" hairline: "#3a3a3a" surface-1: "#161823" surface-overlay: "#1f1f1f" hairline-soft: "#4a4a4a" on-primary: "#ffffff" typography: display-lg: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 32px letterSpacing: 0 display-md: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 24px letterSpacing: 0 heading-md: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 22px letterSpacing: 0 body-md: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 22px letterSpacing: 0 body-strong: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 22px letterSpacing: 0 body-sm: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 18px letterSpacing: 0 caption-soft: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "8px" lg: "12px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: video-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0px" feed-column: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px" right-rail: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.caption}" padding: "16px 0px" action-button: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: "0px" height: "48px" avatar-circle: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "0px" height: "56px" borderColor: "{colors.ink}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "8px 16px" height: "44px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "8px 16px" height: "44px" borderColor: "{colors.hairline-soft}" top-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "60px" wordmark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0px 16px" search-pill: backgroundColor: "{colors.surface-overlay}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: "8px 16px" height: "44px" tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" padding: "8px 12px" tab-inactive: backgroundColor: "transparent" textColor: "{colors.ink-mute}" typography: "{typography.heading-md}" padding: "8px 12px" caption-overlay: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "16px" bottom-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption-soft}" rounded: "{rounded.none}" padding: "8px 16px" height: "56px" borderColor: "{colors.hairline}" --- ## Overview TikTok's interface does something almost no other social platform attempts. **Video as canvas.** Where Instagram, Vimeo, and YouTube default to landscape or square grids of thumbnails on a white or near-black surface, TikTok presents a single 9:16 vertical-video column where each clip fills the visible viewport edge to edge, and scrolling advances by one full clip rather than by a smooth scroll through a thumbnail grid. The black canvas behind the video is pure black, not the slightly-blue near-black that Spotify and Netflix lean on — the maximum contrast lets the video chroma read without the canvas competing for attention. The chrome (wordmark, search, tabs, right-rail action stack) overlays the video as floating white elements rather than sitting on a separate surface tier. The chromatic move is a brand split. The wordmark carries a chromatic-aberration treatment — a cyan layer offset to the left and a magenta layer offset to the right, both peeking out from behind the white text. The treatment reads as a video-edit glitch, the same look you get when a chroma channel falls out of register on a misaligned print or a degraded VHS tape. The primary Sign up CTA pill fills with the magenta `{colors.primary}` (#fe2c55) and the heart icon shares that hue; the cyan `{colors.primary-cyan}` (#25f4ee) is scoped to the wordmark only. The secondary Log in pill outlines with a 1px white hairline on the black canvas. Where Instagram fills its primary CTA with a gradient that runs through orange, pink, and purple, and Snapchat fills its CTA with a saturated yellow, TikTok holds the cyan-and-magenta split entirely off CTAs except for the magenta-fill primary. The shape vocabulary is small. Pills (`{rounded.full}`) carry CTAs and circular avatars; a `{rounded.md}` 8px radius handles tap targets in the right-rail action stack; a `{rounded.sm}` 4px radius marks the search field and the form-tier inputs. The bottom-bar nav and the top bar render flush — `{rounded.none}` — so the video frame reads as continuous from chrome edge to chrome edge. **Key Characteristics:** - Pure black canvas (`{colors.canvas}` — #000000) as the page floor, with full-bleed 9:16 video tiles filling the visible viewport per clip. - Cyan-and-magenta brand split (`{colors.primary-cyan}` + `{colors.primary}`) applied as a chromatic-aberration treatment on the wordmark — the cyan offsets left, the magenta offsets right, both peeking out from behind the white text. - Magenta primary CTA (`{colors.primary}` — #fe2c55) on the Sign up pill and the heart icon; cyan never appears on a CTA fill. - 240px right-rail action column with circular avatar, magenta heart with like count, comment-bubble icon, share-arrow icon, and spinning music-disc avatar. - System sans across every tier — SF Pro Display on iOS / macOS, Segoe UI on Windows, Roboto on Android. No proprietary face shipped on the marketing surface. - Vertical-video column layout — single 9:16 scrollable column, no grid, no thumbnail tiles, no atmospheric transitions between clips. - Bottom-bar nav (Home, Discover, Inbox, Profile) renders flush against the bottom of the viewport with five icon-and-label tap targets at `{spacing.base}` 12px horizontal padding. - Floating chrome — the wordmark, search pill, tab labels, and right-rail action stack overlay the video as transparent or surface-overlay surfaces rather than sitting on their own band. ## Colors ### Brand - **Magenta** (`{colors.primary}` — #fe2c55): the primary brand voltage. Fills the Sign up CTA pill, the heart icon in the right-rail action column, the active-state highlight under the music-disc avatar. The single chromatic CTA fill on the page. - **Cyan** (`{colors.primary-cyan}` — #25f4ee): the secondary brand voltage. Appears only as the chromatic-aberration offset behind the white wordmark text — shifted slightly to the left so the cyan layer peeks out behind the white. Never appears on a CTA fill or hover state. ### Surface - **Canvas** (`{colors.canvas}` — #000000): pure black, the page floor. Used as the background behind every video tile, the top bar, the bottom-bar nav, and the side-column chrome. The maximum-contrast surface choice — slightly-blue near-blacks would muddy the video chroma at the frame edges. - **Surface-1** (`{colors.surface-1}` — #161823): a slightly-warmer near-black used as a secondary tonal surface for modal sheets and grouped cards inside the inbox and profile screens. - **Surface Overlay** (`{colors.surface-overlay}` — #1f1f1f): the floating-chrome surface tone — the search pill and the inline tab background. Sits above the canvas with a faint lightness lift so the pill reads as an overlay rather than as part of the video. ### Text - **Ink** (`{colors.ink}` — #ffffff): pure white — the dominant text color across the entire surface. Wordmark, video captions, action-stack labels, tab labels, primary nav. The contrast against the pure-black canvas is uncompromising. - **Ink Mute** (`{colors.ink-mute}` — #a8a8a8): secondary text — the inactive tab labels ("Following" when "For You" is active), comment-card timestamps, video-description hashtags rendered as quiet metadata. - **Ink Soft** (`{colors.ink-soft}` — #737373): tertiary text — disabled labels, footer fine-print, share-sheet metadata. Sits between the muted ink and the hairline tone for surface-only structural use. ### Hairline - **Hairline** (`{colors.hairline}` — #3a3a3a): the dominant border tone — divider rules between bottom-nav cells, the top-bar bottom border, the comment-card divider stack. Sits at a low-lightness step above the canvas so the rule reads as structural without competing with the chrome. - **Hairline Soft** (`{colors.hairline-soft}` — #4a4a4a): a lighter divider tone for the outline on the Log in secondary CTA pill and on form-input borders inside the auth modal. ### On-Primary - **On-Primary** (`{colors.on-primary}` — #ffffff): the text and icon color used on top of the magenta primary CTA fill. Pure white for maximum contrast against the saturated magenta — the only text-on-color pairing in the system. ## Typography ### Font Family The system ships no proprietary face. The CSS stack falls back to the platform system sans — `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. This means SF Pro Display renders on iOS and macOS, Segoe UI on Windows, Roboto on Android and Chrome OS, and the platform default on Linux. The split between display weight 600 and body weight 400 is the only typographic distinction; there is no editorial display tier, no monospace face, and no serif moment. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 24px | 600 | 32px | Wordmark text and primary auth-modal heading | | `{typography.display-md}` | 18px | 600 | 24px | Section heading inside the auth modal | | `{typography.heading-md}` | 16px | 600 | 22px | For You / Following tab labels and username above each clip | | `{typography.body-md}` | 15px | 400 | 22px | Default running text, comment body, video description | | `{typography.body-strong}` | 15px | 600 | 22px | Emphasis spans inside body text, mention links | | `{typography.body-sm}` | 14px | 400 | 20px | Secondary captions, sub-labels | | `{typography.caption}` | 13px | 500 | 18px | Action-stack count labels (like count, comment count, share count) | | `{typography.caption-soft}` | 12px | 400 | 16px | Footer fine-print, bottom-nav icon labels, sub-metadata | | `{typography.button-md}` | 16px | 600 | 24px | Primary and secondary button labels | ### Principles Display weight tops out at 600. The wordmark at 24px / 600 is the loudest typographic moment in the system; the next step drops to the 16-18px tier for tab labels and modal headings. There is no 32px or 48px display tier — the system is built for an application surface where the video itself carries the visual weight, and the chrome typography stays small enough to not compete with the clip. The platform system stack is the typographic discipline. By delegating typography entirely to the OS, TikTok ensures that every label renders in the rhythm the user expects from the rest of their device, which keeps the chrome feeling native rather than branded. The cyan-and-magenta wordmark treatment is the only brand-typography moment; everything else borrows from the OS. ### Note on Font Substitutes The platform system stack is already the substitute. If a non-system render is needed (a marketing screenshot, a brand-asset export), **Inter** at the same weights is the closest open-source match, with comparable cap height and counter shape to SF Pro Display. The wordmark itself is a custom lockup (the letterforms are a tightened sans with a stylized "k") and ships as an SVG asset rather than as renderable text — substituting a typeface for the wordmark would lose the chromatic-aberration treatment baked into the SVG. ## Layout ### Spacing System - **Base unit:** 12px (`{spacing.base}`) — the dominant gap value in the captured chrome, used for top-bar internal padding and tab-label spacing. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Video tile padding:** 0 — each clip fills the visible viewport edge to edge with no internal padding. - **Right-rail action padding:** 16px between each action-stack row, 56px circular avatar height matched to the spacing unit. - **Top-bar padding:** `{spacing.base}` 12px vertical, `{spacing.lg}` 24px horizontal — 60px total height. ### Grid & Container - **Feed column:** centered single 9:16 video tile filling the visible viewport height; max-width determined by the viewport height times 9/16 (e.g., 540px wide on a 960px-tall viewport). - **Right rail:** 240px fixed column to the right of the centered video, holding the circular avatar, three icon-and-count rows (like, comment, share), and the spinning music-disc avatar. - **Top bar:** 60px height, flush against the top of the viewport. Wordmark flush-left, search pill centered at ~480px max-width, Sign up / Log in pill cluster flush-right. - **Bottom-bar nav:** 56px height, flush against the bottom of the viewport. Five icon-and-label tap targets (Home, Discover, Create, Inbox, Profile) evenly distributed. ### Rhythm The page is a single vertical column with no horizontal divisions. Scrolling advances by one full clip — the next video snaps into the viewport, with the chrome remaining fixed at the top, right, and bottom. There is no atmospheric transition between clips; the previous video cuts to black and the next video fades in over the same canvas. The structural rhythm is the snap, not the scroll. ## Elevation The system has essentially **no shadow tier**. The canvas is pure black, so traditional drop shadows would not read against the surface. Hierarchy comes from `{colors.surface-overlay}` (#1f1f1f) lifted off the pure-black canvas by ~12% lightness contrast — the search pill and the modal-sheet backgrounds read as elevated through tonal lift alone. - **Flat (no shadow):** every video tile, the right-rail action stack, the top bar, the bottom nav — 99% of surfaces. - **Tonal lift:** `{colors.surface-overlay}` cards sit on `{colors.canvas}` — the lightness gap reads as elevation without any shadow being drawn. - **Hairline outlines:** `{colors.hairline}` and `{colors.hairline-soft}` mark divider rules between bottom-nav cells and on the secondary CTA pill outline. ## Shapes The radius scale is binary: small-step rounding for inputs, full-pill for CTAs and avatars. - `{rounded.none}` 0px — top bar, bottom-bar nav, video tiles (filling edge-to-edge). - `{rounded.sm}` 4px — the primary Sign up CTA pill (a slightly-softened rectangle, not a full pill) and the secondary Log in pill, plus form-input fields. - `{rounded.md}` 8px — tap-target backgrounds in the right-rail action stack. - `{rounded.lg}` 12px — inline cards in the share sheet and modal-sheet surfaces. - `{rounded.full}` 9999px — the search pill, the circular avatar in the right-rail action stack, and the spinning music-disc avatar at the bottom of the right rail. The contrast between the 0px video frame and the fully-circular avatar is the system's defining shape moment. The video itself never rounds; the avatar always fully rounds. ## Components **`video-tile`** — Black `{colors.canvas}` fill behind the 9:16 video clip. Fills the visible viewport edge to edge; 0 internal padding. The clip itself sits inside the tile at full opacity with no atmospheric overlay. **`feed-column`** — The single scrollable column carrying the video-tile stack. Snap-scroll behavior — each scroll-step advances by one full tile. **`right-rail`** — Transparent fill over the canvas. 240px fixed width to the right of the centered video. Carries the circular avatar at top, three icon-and-count action rows in the middle, and the spinning music-disc avatar at the bottom. **`action-button`** — Transparent fill, white icon at the center, count label beneath in `{typography.caption}`. 48px height, fully circular tap target. The heart icon fills with `{colors.primary}` magenta when liked. **`avatar-circle`** — Black fill behind a user-uploaded avatar image. 56px circular, with a 1px white `{colors.ink}` outline. **`button-primary`** — The signature CTA. Magenta `{colors.primary}` (#fe2c55) fill, white text, `{rounded.sm}` 4px radius, 8x16 padding, 44px height. "Sign up" is the canonical instance in the top-bar right cluster and the auth modal. **`button-secondary`** — Transparent fill, white text, 1px `{colors.hairline-soft}` outline. Same dimensions as the primary. "Log in" is the canonical instance. **`top-bar`** — Black `{colors.canvas}` surface, 60px height, 12x24 padding. Holds the wordmark flush-left, the search pill centered, the Sign up / Log in cluster flush-right. **`wordmark`** — White `{colors.ink}` text in `{typography.display-lg}` (24px / 600) with the cyan-and-magenta chromatic-aberration treatment behind. The cyan offsets left, the magenta offsets right, both visible as 1-2px shadows behind the white text. **`search-pill`** — `{colors.surface-overlay}` (#1f1f1f) fill, white text in `{typography.body-md}`, `{rounded.full}` pill, 8x16 padding, 44px height. The placeholder text "Search" sits in `{colors.ink-mute}`. **`tab-active`** — White text in `{typography.heading-md}` (16px / 600) with a 2px white underline rule beneath. "For You" is the canonical instance when active. **`tab-inactive`** — `{colors.ink-mute}` text in `{typography.heading-md}`, no underline. "Following" is the canonical inactive instance. **`caption-overlay`** — White text in `{typography.body-md}` (15px / 400) sitting over the lower-left corner of each video tile. Holds the username, the video description, and any inline hashtag links. **`bottom-nav`** — Black `{colors.canvas}` surface, 56px height, 8x16 padding, 1px `{colors.hairline}` top border. Five icon-and-label tap targets evenly distributed: Home, Discover, Create (a centered plus button with the cyan-magenta accent border), Inbox, Profile. ## Do's and Don'ts **Do** scope the cyan (`{colors.primary-cyan}`) to the wordmark chromatic-aberration treatment only. Placing the cyan on a CTA fill or a hover state breaks the brand split; the cyan is structurally a "shifted layer" signal, not a chromatic accent. **Do** fill `{component.button-primary}` with `{colors.primary}` magenta. The magenta is the single CTA voltage; the secondary CTA outlines with white hairline rather than reaching for the cyan or for a softer pink. **Do** keep the video-tile padding at 0. The 9:16 clip fills the visible viewport edge to edge; introducing internal padding or a rounded corner on the tile pushes the layout into the Instagram-card register that TikTok specifically refuses. **Do** render the wordmark with the cyan-magenta chromatic-aberration shadow. The treatment is the brand's defining typographic signature — substituting a flat white wordmark loses the video-edit motion reference baked into the brand. **Don't** swap the canvas from pure `#000000` to a slightly-blue near-black. The maximum-contrast surface choice is intentional — slightly-blue near-blacks would muddy the video chroma at the frame edges and dilute the chromatic-aberration treatment on the wordmark. **Don't** introduce a 2-column or 3-column grid of video thumbnails on the feed. The single-column 9:16 vertical-video layout with snap-scroll advancement is the system's structural signature; multi-column grids are reserved for the Profile and Search-result screens. **Don't** add a third brand color beyond the cyan and magenta. The brand split is binary — adding a third saturated accent (a green for active state, a yellow for highlight) dilutes the cyan-magenta identity and pushes the page into a generic-social-app palette. **Don't** render bottom-nav labels in any color other than `{colors.ink}` or `{colors.ink-mute}`. The bottom-nav is the system's structural anchor; coloring active labels with magenta or cyan would overload the brand voltage and steal attention from the active video clip. ## Known Gaps - **Captured extraction returned a login wall:** the marketing surface at `tiktok.com` ships a session-gated splash for unauthenticated visitors, which returned essentially no rendered chrome. The colors and components above reflect TikTok's published brand standards and the rendered application UI rather than CSS values extracted from the captured page. - **Dark mode:** the entire surface is dark by default; there is no documented light variant on the public marketing chrome. - **Hover and focus states:** documented at the resting state only; the full state matrix (focus rings, disabled tints, error states) lives inside the application UI and is not represented here. - **Form input error states:** auth-modal error styling is not exposed on the captured surface. - **Motion:** the snap-scroll between clips, the spinning music-disc avatar, and the chromatic-aberration animation on the wordmark all live in client-side scripts not captured in the token spec. - **Product surfaces:** this DESIGN.md captures the marketing and feed surfaces only. The TikTok creator-studio dashboard, the live-streaming surface, the shopping screens, and the in-app camera UI carry their own component sets not represented here. - **Mobile and tablet breakpoints:** the captured render is desktop-only; the mobile shell (bottom-nav-first, no right-rail) carries its own component recipes not represented here.