Interface Lab
Back to knowledge
Design Systems Page Patterns

Settings Page Architecture

Settings Page Architecture turns a frequent interface judgment into an executable constraint before generation.

Design Principle

Settings should be grouped by user intent and risk, not database fields or internal org structure.

Principle

Settings should be grouped by user intent and risk, not database fields or internal org structure.

Design action

Use stable sections such as account, team, permissions, billing, integrations, and notifications; each shows description, current state, save feedback, and isolated danger zones.

Examples

Positive example: SaaS, admin tools, collaboration tools, and design systems need long-lived configuration. Counterexample: All settings are placed in one untitled long form.

Apply when

SaaS, admin tools, collaboration tools, and design systems need long-lived configuration. 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. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

Agent Directive

Use stable sections such as account, team, permissions, billing, integrations, and notifications; each shows description, current state, save feedback, and isolated danger zones.