mdshop
Back to designs
T

Design System inspired by TikTok

Short video. Cyan-red-black brand, dark UI, vertical video-first.

Usage
npx getdesign@latest add tiktok

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
15
Bookmarked
0
Not an official TikTok design system. A curated starting point for building TikTok-like UIs with your AI coding agent.

Short video. Cyan-red-black brand, dark UI, vertical video-first.

Preview
tiktok.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF TIKTOK

Short video. Cyan-red-black brand, dark UI, vertical video-first.

Explore the systemView tokens

Color Palette

Short video. Cyan-red-black brand, dark UI, vertical video-first.

Primary
Cyan
#25f4ee
Brand color
Red
#fe2c55
Brand color
Black
#000000
Brand color
Dark
#121212
Brand color
White
#ffffff
Brand color
Gray
#8a8b91
Brand color
Pink
#ee1d52
Brand color

Typography

A type system inspired by TikTok.

TikTok Sans
TikTok Sans, TikTok Sans
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by TikTok.

Not detected on this URL

Components

Other component primitives mapped from the TikTok spec.

Not detected on this URL