TikTok

# TikTok Design System

## Visual Theme & Atmosphere
Energetic, immersive, youth-driven. The pure black background makes content explode off screen. The cyan (#25F4EE) and red (#FE2C55) duo creates a vibrant "neon" aesthetic. Everything is designed for full-screen vertical video consumption with minimal UI interference.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #FE2C55 | TikTok Red — likes, CTAs, brand |
| Secondary | #25F4EE | TikTok Cyan — highlights, accents |
| Background | #000000 | Pure black canvas |
| Surface | #161823 | Panels, modals |
| Text | #FFFFFF | Primary text |
| Muted | #A3A3A3 | Secondary text |
| Border | #2F2F2F | Subtle dividers |

## Typography Rules
- **Font**: Proxima Nova, -apple-system
- **Base Size**: 16px
- **H1**: 2rem / weight 800
- **H2**: 1.5rem / weight 700
- **Body**: 1rem / weight 400 / line-height 1.4
- Bold, high-contrast text on dark backgrounds

## Component Stylings
- **Buttons**: Red primary, rounded 4px, or gradient (cyan → red)
- **Video Overlay**: Semi-transparent, bottom-aligned text
- **Action Bar**: Vertical, right side, icons + counts
- **Comments**: Bottom sheet slide-up panel

## Layout Principles
- Full-screen vertical video (9:16)
- Swipe-up navigation
- Bottom-anchored content overlay
- Floating action buttons on right edge

## Responsive Behavior
- Mobile-first (portrait-only experience)
- Desktop: web player with sidebar feed
- Touch gestures: swipe, double-tap to like