Vigloo - Premier Short Dramas

Colors

• #1C1C1Emodal-sheet-bg · Bottom sheet surface background
• #000000scrim-overlay · Modal backdrop scrim/dim
• #FFFFFFtext-primary-white · Modal title · Button label text · Dismiss button label
• #8E8E93text-secondary-gray · Mission description body text · Info icon fill
• #636366text-muted-gray · Bottom helper note text · Drag handle fill
• #48484Abutton-border · Outlined button border stroke

Type

• Modal TitleSF Pro Display · 44px · 700 · #FFFFFF
• Mission DescriptionSF Pro Text · 30px · 400 · #8E8E93
• Button LabelSF Pro Text · 36px · 600 · #FFFFFF
• Footnote/DisclaimerSF Pro Text · 24px · 400 · #636366

Elements

• Bottom Sheet Modal · sheet

  Occupies roughly the bottom 40% of the screen; full width with top rounded corners · Dark charcoal solid fill (#1C1C1E) over dimmed backdrop

• Drag Handle Indicator · indicator

  Centered at the top of the bottom sheet · Small pill-shaped dark gray bar

• Mission Icon · image

  Left-aligned above the title inside the bottom sheet · 3D-styled hourglass illustration with cyan/teal sand and accent highlights

• Info Icon · icon

  Inline with 'Watch Mission' heading to its right · Circular muted gray info glyph with 'i'

• Hide Timer Button · button

  Full-width within bottom sheet padding, below description · Outlined button with thin light-gray stroke, transparent fill, centered white text

Layout

Modal bottom sheet overlaying a dimmed full-screen media view. Contains vertical content: drag bar, hourglass graphic, title with info badge, body explanation, action button, and small centered caption.

Notes

Backdrop contains partially dimmed dialog text ('A woman who abandoned').