Settings Page
Organized preferences with sidebar navigation and grouped form controls.
Layout
Left sidebar (220px) with settings categories + right content area with grouped controls. Categories: Profile, Account, Notifications, Privacy, Billing, Integrations, Danger Zone.
Content Slots
Settings nav
Left sidebar with category links. Active category highlighted. Icon + label per item.
Section heading
H2 with category name + brief description of what this section controls.
Settings group
Visually grouped related settings. White card with 24px padding. Group label as section header.
Setting row
Label + description (grey) + control (toggle/select/input) in a horizontal row with border-bottom separator.
Save action
Sticky footer or save button per section. Never auto-save without indicating it.
Danger zone
Last section, red border, destructive actions (delete account, revoke access).
Hierarchy Rules
- Most-used settings first — Profile and Notifications above Billing and Danger Zone
- Danger Zone always last, visually separated with red border
- Setting rows: label (left, semibold) + control (right) — never stacked for toggles
- Save state: indicate unsaved changes before leaving (dirty state indicator)
- Hick's Law: too many settings at once is overwhelming — group and paginate by category