flowkey – Learn to Play Piano

Colors

• #13141fDark Navy Background · background
• #f5820aOrange Accent · bell icon · highlight text · primary button
• #ffffffWhite · headings · button text · subtext

Type

• titleSF Pro · 28px · bold · #ffffff
• buttonSF Pro · 18px · semibold · #ffffff

Elements

• Bell Illustration · graphic illustration

  Centered near top inside a circular badge with toggle switch graphic · Orange notification bell with toggle element

• Remind Me Button · button

  Centered near bottom of screen · Solid orange rounded rectangle with white text

• No Thanks Button · text button

  Centered below primary button · White text label

Layout

Vertical centered flow featuring bell illustration, prompt text, primary action button, and dismiss text link.

Notes

Notification permission prompt screen.