Quizlet: More than Flashcards

Colors

• #05060doverlay-dim · dimmed background veil
• #1b1d28dialog-card-bg · modal alert container surface
• #2b2f3fdialog-button-bg · modal button fill
• #fffffftext-white · dialog header and action text
• #9aa0b4text-secondary · dialog body explanation

Type

• alert-titleSF Pro Display · 40px · 700 · #ffffff
• alert-descriptionSF Pro Text · 32px · 400 · #9aa0b4
• alert-actionSF Pro Text · 36px · 600 · #ffffff

Elements

• sso-permission-dialog · modal

  centered floating rounded modal spanning approximately 88% width, 600px height · dark solid elevated card with subtle top border highlight and shadow over dimmed app content

• cancel-button · button

  bottom left of modal, width ~360px, height 110px · dark slate gray pill container with centered white text

• continue-button · button

  bottom right of modal, width ~360px, height 110px · dark slate gray pill container with centered white text

Layout

Centered floating system authentication sheet overlaying the dimmed landing screen.

Notes

Modal uses system authentication style elements tinted to match dark UI theme.