Twenty design examples

Twenty

Authentication modal where the user can sign up or log in using Google, Microsoft, or email, displayed over a dimmed CRM companies data table.

• Sign Up
• Welcome

Twenty

Sign-in screen where the user authenticates with Google, Microsoft, or email via a centered modal over the application.

• Sign In
• Welcome

Twenty

Signup screen where the user can create an account using Google, Microsoft, or email and password, displayed as a modal over a companies data table.

• Sign Up
• Account Setup

Twenty

Paywall modal where the user selects between a 30-day trial with a credit card or a 7-day trial without one to access the Pro Plan.

• Trial
• Pricing

Twenty

Checkout page where the user activates a 7-day free trial for a Pro Plan by confirming their pre-filled email address.

• Checkout
• Trial

Twenty

Onboarding screen where the user sets up their new workspace by uploading a logo and entering an organization name.

• Account Setup
• Upload & Download

Twenty

Onboarding screen where the user waits for their new workspace and data model to be generated, displayed in a loading modal over a dimmed CRM list view.

• Loading

Twenty

Onboarding modal where the user sets up their profile by uploading a picture and entering their first and last name.

• Account Setup
• Profile

Twenty

Onboarding step where the user sets up their profile by uploading an avatar and entering their name.

• Account Setup
• Profile

Twenty

List view with a modal prompting the user to sync their emails and calendar via Google or Outlook and choose privacy settings for shared metadata.

• Import & Export
• Integrations

Twenty

Onboarding step where the user invites teammates to their workspace by entering email addresses or copying an invitation link.

• Invite Teammates
• Team Management

Twenty

Onboarding step where the user invites teammates to their workspace by entering email addresses or copying an invitation link.

• Invite Teammates
• Team Management