Twenty Settings UI: 7 real screens

Twenty logo
Twenty Settings

CRM

This is the settings design from Twenty, a crm application. Twenty twenty is an open-source CRM for building a custom, AI-ready workspace for people, companies, opportunities and tasks. Its UI covers a Getting started home with a trial countdown and import-contacts modal, People and Companies tables with filter and sort menus and record side panels, a Create Company form, an Opportunities kanban by stage, a My First Dashboard with Deals by Company, Pipeline Value by Stage, Revenue Timeline and Opportunities by Owner charts, Workflows with a visual editor for automations such as Create company when adding a new person, a command menu and global search, import and profile onboarding plus a free-trial upgrade step, and settings for profile, appearance, workspace, members, the data model and field editor, API keys, and Pro-plan billing. Public pages include the Enterprise CRM at AI Speed homepage and Simple Pricing for Pro, Organization and Enterprise plans. Settings page UI patterns from real SaaS products. Account preferences, configuration screens, and admin panels. We have 7 settings screenshots from Twenty showing different states and variations of this pattern.

Twenty Profile settings with picture upload, name and email fields, authenticator 2FA, change password, device sessions and a delete account danger zone

Profile settings

Twenty Experience settings with Light, Dark, System and Salesforce appearance themes, language, scale, side panel vs full page navigation and date-time formats

Appearance settings

Twenty Workspace General settings with workspace picture and name, subdomain and custom domain options, and a delete workspace danger zone

Workspace settings

Twenty Members settings with Team, Invite and Roles tabs, a manage-members search, and the workspace member list

Members settings

Twenty Data model settings with an objects diagram and a table of standard objects for Companies, Dashboards, Notes, Opportunities, People, Tasks and Workflows

Data model

Twenty field editor for the People Job Title field with icon and name, a preview, wrap and unique toggles, description and translations

Field editor

Twenty Developers API settings with REST and GraphQL playground launchers and an empty API Keys list with a Create API key action

API settings

What these 7 screens show

  1. Profile settings
  2. Appearance settings
  3. Workspace settings
  4. Members settings
  5. Data model
  6. Field editor
  7. API settings

More from Twenty

Other Settings examples