BlinkDrama - Short Dramas

Colors

• #0C0C0Dbackground-dark · screen base background
• #D6DE28brand-yellow · brand mark · active filter pill background
• #1A1A1Ccard-surface · hero carousel container background · section card fills
• #FFFFFFtext-primary · screen titles · carousel card title
• #8A8A92text-muted · inactive filter pill text · tab bar unselected labels
• #2C2C2Etab-active-pill · active tab indicator circle/pill

Type

• app-brand-nameSF Pro Display · 52px · 800 · #FFFFFF
• section-titleSF Pro Display · 58px · 700 · #FFFFFF
• card-titleSF Pro Display · 48px · 600 · #FFFFFF
• chip-labelSF Pro Text · 38px · 600 · #FFFFFF
• tab-labelSF Pro Text · 28px · 400 · #8A8A92

Elements

• top_app_bar · header

  Horizontal row beneath status bar; logo on left, premium badge and search icon on right. · Transparent background; premium button has subtle multi-color gradient border and badge discount tag.

• filter_chips_row · horizontal_scroll_bar

  Horizontally aligned list of rounded pill chips (Popular, New, Hot, Exclusive, VIP). · Active item has olive-yellow tint fill with dark olive border; inactive items have charcoal pill background.

• hero_carousel_card · card

  Prominent central media card spanning width minus side margins, stacked layout suggesting horizontal pagination behind right border. · Dark charcoal rounded card with central circular play button overlay; title and dot pagination indicators at bottom left.

• bottom_navigation_bar · tab_bar

  Fixed full-width bar at bottom screen margin with 5 icon/label pairs. · Near-black solid surface with slight top dividing border; active tab has a rounded pill background for the icon.

Layout

Top-to-bottom vertical structure: status bar, brand/action header, category pill carousel, main content featured media carousel card with stack elevation, followed by 'Hot Now' section grid cards and fixed bottom navigation.

Notes

Media preview is solid black with play icon, likely placeholder or pending video asset load.