account-settings-design

name	account-settings-design
description	Use when designing account settings pages. Covers the canonical sections, the left-nav vs tab pattern, danger zones, and how to organize 30+ settings without overwhelming.

Account Settings Design

Settings should be predictable. Users come here once, find what they need, leave. Surprise = bad.

Canonical sections

Account / Profile · Billing · Notifications · Team · Security · API/Webhooks · Integrations · Danger zone. Each in its own section, left-nav or tab.

Layout pattern

Left-nav with section anchors works for 5+ sections. Single-column with anchor-link table-of-contents for fewer.

Field grouping

Related fields together (name + email together; password + 2FA together). Save button per section, not one global save.

Save patterns

Per-field save (inline, immediate) for atomic settings. Per-section save for related groups. Auto-save with subtle indicator for frequent changes.

Danger zone

Always at the bottom, visually separated, red accent. Cancel subscription. Delete account. Reset data. Confirmations required.

Common mistakes

Settings buried in nested menus. 'Save' button only at bottom of 30 fields. No save confirmation. Mixing critical (password) with cosmetic (theme) in same form.

Where this fits in X3 Compass

Applied in the X3 Compass build via the relevant pages and components.