My Drama - Stream Short Dramas

Colors

• #0a0b1eBackground Dark · background fill
• #ffffffPure White · title text
• #ccccccSubtitle Gray · subtitle text
• #202242Pill Background Dark · unselected option fill
• #341cf6Primary Button Blue · button fill

Type

• TitleSF Pro Display · 50px · bold · #ffffff
• SubtitleSF Pro Text · 26px · regular · #cccccc
• Pill LabelSF Pro Text · 28px · medium · #ffffff
• Tooltip TextSF Pro Text · 22px · regular · #ffffff
• ButtonSF Pro Text · 36px · semibold · #ffffff

Elements

• Progress Bar · indicator

  Top of the content area, divided into 4 segments with the first active in white. · Segmented thin horizontal bar.

• Selection Tooltip · tooltip

  Positioned near the top right category pill. · Blue rounded callout bubble with white text.

• Category Pills and Circles · list

  Staggered grid of pills and circular image thumbnails in the center of the screen. · Dark blue rounded pills with text and circular thumbnail images.

• Pick for Me Link · button

  Centered below the category grid. · Blue text link.

• Next Button · button

  Full width at the bottom of the screen. · Dark gray solid rounded rectangle with white text.

Layout

Top progress bar, header text, staggered multi-column selection grid of categories and posters, followed by a 'Pick for Me' link and a 'Next' button at the bottom.

Notes

Interactive preference selection screen.