My Drama - Stream Short Dramas

Colors

• #0a0b1eBackground Dark · background fill
• #ffffffPure White · title text · selected option text · radio check icon
• #341cf6Selected Option Fill · selected card background
• #202242Unselected Option Fill · unselected card background

Type

• TitleSF Pro Display · 50px · bold · #ffffff
• Option LabelSF Pro Text · 32px · medium · #ffffff

Elements

• Progress Bar · indicator

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

• Selected Option Card · list item

  First item in the vertical options list, placed near the top. · Vibrant blue solid rounded rectangle with a white checkmark icon inside a circle and white text.

• Unselected Option Cards · list

  Remaining 4 items in the vertical options list below the selected item. · Dark blue rounded rectangles with an empty circular radio outline and white text.

Layout

Top progress bar, large centered header question, and a vertical list of option cards with the first option selected (highlighted in blue).

Notes

Demographic question screen with the first option selected.