BlinkDrama - Short Dramas

Colors

• #FBE668primary-yellow · check-in cta fill · active reward card highlight · app logo star accent
• #FFD026gold-accent · reward amounts · coin icons · remind me badge text
• #1E1E20modal-background · check-in dialog surface
• #272729card-dark · unselected day reward card fills
• #000000scrim-overlay · dimmed background screen dimming
• #FFFFFFtext-white · dialog title · dialog close icon
• #8E8E93text-secondary · day label text · subtitle text

Type

• dialog-titleSF Pro Display · 54px · 700 · #FFFFFF
• cta-labelSF Pro Text · 44px · 700 · #111111
• reward-amountSF Pro Display · 42px · 700 · #FFD026
• reward-day-labelSF Pro Text · 34px · 400 · #8E8E93

Elements

• checkin_modal · modal_sheet

  Centered horizontally and vertically in upper-middle viewport; width approximately 85% of screen; padded interior with multi-row grid. · Dark charcoal rounded card with subtle blur, topped by an illustrated gold coin pouch illustration and floating sparkles.

• day_reward_grid · grid

  Two rows: top row with 4 items (Days 1 to 4), bottom row with 3 items (Days 5, 6, and double-width Day 7). · Individual rounded rectangular cells; active day has bright yellow rounded border/fill, inactive days have subtle dark grey fills.

• checkin_button · button

  Full-width pill button near bottom of dialog card; centered label. · Bright canary-yellow solid fill with dark bold text, soft yellow outer glow.

• close_button · icon_button

  Top-right of modal card header; circular touch target. · Subtle translucent dark circle with crisp white X mark.

• bottom_tab_bar · navigation_bar

  Fixed along screen bottom; five equally spaced icon-label tabs (Shorts, Home, Rewards, My List, Profile). · Near-black translucent bar obscured by background scrim.

Layout

Modal dialog stacked on top of the dimmed home feed; features a primary hero illustration at the top edge of the card, centered multi-line headline, a 7-day reward matrix, primary action button, and sub-toggle reminder pill at the footer.

Notes

Font appears to be Apple system SF Pro based on iOS chrome context, but Roboto or a geometric sans like Outfit remain plausible alternatives.