[Audit 040] TikTok: The Logic of Infinite Discovery

⚡ Design Philosophy

TikTok 的核心是沉浸式与无边界的体验。全屏视频内容占据绝对焦点，界面元素退居其次，创造"无限滑动"的魔法感。

🎨 Color System

Brand Gradient

#FE2C55 → #25F4EE

TikTok Pink

#FE2C55

TikTok Cyan

#25F4EE

Pure Black

#000000

Surface

#161823

:root {
  --tiktok-black: #000000;
  --tiktok-white: #FFFFFF;
  --tiktok-pink: #FE2C55;
  --tiktok-cyan: #25F4EE;
  --tiktok-gray: #161823;
  --tiktok-gray-light: #2F2F2F;
  --tiktok-muted: #8A8B91;
  
  --brand-gradient: linear-gradient(135deg, #FE2C55, #25F4EE);
}

📱 Fullscreen Video Layout

全屏视频 + 右侧悬浮操作栏 + 底部信息区

▶

Video Content

🏠 🔍 + 💬 👤

/* Fullscreen Video */
.video-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
}

/* Right Sidebar */
.sidebar {
  position: absolute;
  right: 0.5rem;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

✨ Micro-interactions

/* Double tap to like */
.video-container:active {
  transform: scale(0.98);
}

/* Heart animation */
.like-icon {
  animation: heartPop 0.3s ease;
}
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Swipe transitions */
.video-container {
  transition: transform 0.3s ease;
}

🔤 Typography

font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, sans-serif;

.username { font-size: 1rem; font-weight: 600; }
.caption { font-size: 0.9rem; line-height: 1.4; }
.hashtag { color: var(--tiktok-white); font-weight: 600; }