UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Profile and Account Settings

Profile and Account Settings turns a frequent interface judgment into an executable constraint before generation.

accountprofilesettings

Design Principle

Profile, login security, notifications, and billing have different risk levels and should be separated.

Principle Profile, login security, notifications, and billing have different risk levels and should be separated.

Design action Profile fields support autosave or explicit save; security and billing use stronger confirmation, and notification preferences use grouped toggles.

Examples Positive example: Account pages, member profiles, team settings, and personal preferences. Counterexample: Avatar edit and account deletion have the same visual weight.

Apply when Account pages, member profiles, team settings, and personal preferences. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Profile fields support autosave or explicit save; security and billing use stronger confirmation, and notification preferences use grouped toggles.

Apply When

  • Account pages, member profiles, team settings, and personal preferences.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Avatar edit and account deletion have the same visual weight.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
84%
Version
v1
Published
6/6/2026