A login page with room for a story. The left side holds a photo and a short customer quote. The right side holds the form with Google and Apple buttons.

What is included

• A photo panel with a brand mark and quote
• Google and Apple sign in buttons
• Email and password fields with a show toggle
• A keep me signed in checkbox and forgot link
• A footer with terms and privacy links

Where to use it

Use it for a SaaS app, a client portal or a members area. Swap the photo and the quote.

Design notes

This split screen login page 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 photo panel with a brand mark and quote, google and apple sign in buttons, email and password fields with a show toggle, 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 keep me signed in checkbox and forgot link and a footer with terms and privacy links.

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.

Light version

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