The dark version uses deep panels with soft borders, so content stands out. Help users get back into their account without stress. The first screen asks for an email and sends a reset link. The second sets a new password and shows each rule as it is met.

What is included

• An email field with a send link button
• A password strength bar with four segments
• A checklist of password rules with ticks
• A back button and a login link
• Light and dark colors

Where to use it

Use it for any app with accounts. Change the copy and the rules to match your policy.

Design notes

This forgot password and reset password 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 an email field with a send link button, a password strength bar with four segments, a checklist of password rules with ticks, 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 back button and a login link and light and dark colors.

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.