The dark version swaps light surfaces for charcoal cards and keeps accents bright. Start users well. The first screen has a big photo and a clear promise. The second asks for notifications, location, camera and contacts with switches.

What is included

• A rounded hero image with a glass chip
• Page dots and a get started button
• Four permission rows with icons and switches
• A skip link at the top
• A short explanation under each permission

Where to use it

Use it for a travel, social or planning app.

Design notes

This welcome and permissions onboarding screens follows a simple rule: Account screens work best when every step is short and clear. Keep one main action per screen, show errors next to the field, and keep the same spacing across the whole flow. It includes a rounded hero image with a glass chip, page dots and a get started button, four permission rows with icons and switches, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get a skip link at the top and a short explanation under each permission.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Dark version

This listing is the dark version. The light version is listed separately.