JoyReels - Enjoy Short Dramas

Colors

• #101010Dark Background · screen background
• #1c1c1eSearch Box Fill · search bar background
• #ff2a6dHot Badge Pink · hot badge background
• #ffffffText White · active tab · titles · video view counts
• #8e8e93Text Muted · inactive tabs · genres · search placeholder

Type

• search placeholderSF Pro Text · 20px · regular · #8e8e93
• navigation tabSF Pro Text · 20px · semibold · #ffffff
• section headerSF Pro Text · 22px · medium · #ffffff
• labelSF Pro Text · 16px · regular · #8e8e93
• badgeSF Pro Text · 14px · semibold · #ffffff

Elements

• Search Bar · search input

  Top of content area, spaning most of horizontal width with search icon on left. · Dark gray rounded rectangle with light gray placeholder text.

• Tabs Navigation · tab bar

  Horizontal row below search bar containing HOT, NEW, VIP, CATEGORIES, RANKING. · Text links with active bottom indicator line under HOT.

• Hot Badge · badge

  Positioned over video thumbnail corners. · Small rounded pill with pink fill and white text.

• Bottom Navigation Bar · tab bar

  Fixed at the bottom of the screen with 5 items (Home, For You, Rewards, My List, Profile). · Dark background with white active icon/label and muted inactive ones.

Layout

Vertical scrolling list of drama card thumbnails arranged in a multi-column grid, with top search and bottom tab navigation.

Notes

Thumbnails appear missing or dark in this particular screenshot state.