Gizmo: AI Tutor

Colors

• #42454BModal Overlay Scrim · Backdrop scrim over onboarding page
• #3E3F42Modal Surface · Permission dialog card background
• #58595DModal Button Surface · Dialog action button background
• #FFFFFFDialog Primary Text · Modal title text · Modal action button text
• #CBCBCDDialog Body Text · Modal body description

Type

• Dialog TitleSF Pro Text · 42px · 700 · #FFFFFF
• Dialog BodySF Pro Text · 34px · 400 · #CBCBCD
• Dialog Action LabelSF Pro Text · 38px · 600 · #FFFFFF

Elements

• Notification System Dialog · Modal alert

  Centered on screen, width ~880px, padding ~60px · Dark charcoal rounded card with slight background blur and rounded corners

• Don't Allow Button · Button

  Bottom-left of dialog, height ~120px, ~48% width of dialog row · Pill button with slate gray fill and white text

• Allow Button · Button

  Bottom-right of dialog, height ~120px, ~48% width of dialog row · Pill button with slate gray fill and white text

Layout

Centered system-styled permission dialog layered over dimmed onboarding permission screen.

Notes

Second sequential permission prompt for push notifications.