OS Maps: Walk, Hike, Run, Bike

Colors

• #F2F2F2Light Grey Background · screen background
• #FFFFFFWhite · card background
• #FDE6A2Soft Yellow · illustration circle background
• #111111Dark Charcoal · heading text · body text
• #D3125FBrand Magenta · highlight link · progress indicator
• #3E3977Deep Indigo · primary button background

Type

• TitleSF Pro Display · 24px · bold · #111111
• BodySF Pro Text · 15px · regular · #333333
• ButtonSF Pro Text · 17px · semibold · #FFFFFF

Elements

• IllustrationBadge · graphic

  Centered horizontally in the upper middle area. · Yellow circular badge with envelope icon.

• OpenEmailButton · button

  Lower center, above secondary text link. · Solid deep indigo pill button with white text.

• ResendLink · link

  Bottom center below primary button. · Muted grey text link.

Layout

Step 2 of 4 onboarding screen with top progress bar, email verification illustration, title, descriptive body text with bold email and magenta link, primary button, and resend option.

Notes

Email verification prompt screen.