JoyReels - Enjoy Short Dramas

Colors

• #1c161aSheet Background · bottom sheet background
• #ff2a6dButton Pink · play button background
• #3a2832Tag Background · genre tag pill background
• #ffffffWhite · title text · button text
• #b0a8afMuted Text · subtitle text · description body

Type

• titleSF Pro Display · 28px · bold · #ffffff
• subtitleSF Pro Text · 18px · regular · #b0a8af
• tagSF Pro Text · 16px · medium · #ffffff
• bodySF Pro Text · 18px · regular · #b0a8af
• buttonSF Pro Text · 20px · semibold · #ffffff

Elements

• Bottom Sheet Details · modal sheet

  Occupies the bottom half of the screen, overlaying the video. · Dark tinted rounded container with poster thumbnail, title, tags, and description.

• Poster Thumbnail · image

  Top left of sheet container. · Vertical rectangular image with rounded corners and miniature play overlay.

• Genre Tags · badge

  Horizontal row next to episode count. · Dark reddish rounded pills with white text.

• Play Action Button · button

  Bottom left area of sheet. · Pink pill button with play icon and 'Play' text.

• Favorite Button · button

  Bottom right area, next to play button. · Dark circular button with star icon.

• Share Action Button · button

  Bottom rightmost area. · Dark circular button with share arrow icon.

Layout

Detail bottom sheet popped up over the video player showing synopsis, tags, and playback options.

Notes

Information sheet overlay.