Circle design examples

Circle

Sign-in screen where the user can authenticate using an email link, Twitter, or Facebook.

• Sign In

Circle

Password recovery screen where the user enters their email address to request a reset link.

• Forgot Password

Circle

Signup screen where the user creates a new community account with an email and password to start a 14-day free trial.

• Sign Up

Circle

Onboarding step where the user creates their profile by adding a photo, display name, headline, bio, location, and social links.

• Account Setup
• Profile

Circle

Onboarding step where the user creates their community by configuring its name, custom URL, privacy toggle, and brand assets like color and logos.

• Setup Wizard

Circle

Creation screen where the user sets up a new community by configuring its name, custom URL, privacy settings, and branding elements.

• Setup Wizard

Circle

Create page where the user configures a new community space with a name, custom URL, visibility toggles, member invitations, and layout preferences.

• Add & Create
• Onboarding Checklist

Circle

Creation screen where the user configures a new community space by setting its name, URL slug, and privacy toggles.

• Settings

Circle

Detail page where the user views a member's profile, showing their role and an empty topics feed, alongside a getting-started checklist.

• Profile
• Empty State

Circle

Settings page where the user updates their community profile, including basic information, social links, and messaging permissions, while a trial banner prompts an upgrade.

• Profile
• Edit

Circle

Settings page where the user configures general community details like name, URL, visibility, branding, and default spaces.

• Team Management

Circle

Settings page where the admin configures the onboarding experience for new community members, including invitation emails and popups.

• Onboarding Checklist
• Team Management