Keiki Learning games for Kids

Colors

• #271E47modal-surface · dialog-background
• #392A6Bscrim-dim · scrim-overlay
• #3E325Ebutton-surface · dialog-button-fill
• #FFFFFFtext-primary · dialog-title · button-label
• #9F95BAtext-secondary · dialog-description

Type

• dialog-titleSF Pro Display · 44px · 700 · #FFFFFF
• dialog-bodySF Pro Text · 34px · 400 · #9F95BA
• button-labelSF Pro Text · 38px · 600 · #FFFFFF

Elements

• permission-dialog-card · modal

  Centered horizontally and vertically, spanning ~82% of screen width. · Dark plum rounded card with subtle outer glow/border and inner padding ~56px.

• dialog-dismiss-button · button

  Bottom-left within dialog action row, flexible width matching sibling button, height ~112px. · Muted dark purple rounded pill button with centered white text.

• dialog-confirm-button · button

  Bottom-right within dialog action row, flexible width matching sibling button, height ~112px. · Muted dark purple rounded pill button with centered white text.

Layout

Modal permission overlay centered over a darkened, blurred purple screen backdrop.

Notes

Typography follows standard iOS system permission alert patterns, styled with a custom dark purple palette.