All screen guides Star on GitHub
Screen guide
Settings page design
The job: Let the user find and change one setting with confidence, safely.
Structure
Grouped section cards by topic (profile / notifications / billing / danger), each setting a labeled row with its control on the trailing edge. Destructive actions isolated and marked.
Hierarchy
Flat and scannable — settings are equal-weight within a group; group titles orient. Danger zone visually separated.
Mobile
Full-width rows, controls reachable with the thumb, ≥44px toggles.
Signature patterns
- Toggle rows
- Select rows
- Account header
- Billing card
- Danger zone (the one place a functional border + destructive tone is right)
- Consistent inline- or explicit-save
Avoid
- destructive actions next to benign ones
- an unclear save model
- settings with no labels
- toggles whose state is ambiguous
- no confirmation on irreversible actions
Build it with StyleSeed
This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a settings / account, reach for the snap motion seed.
Make your AI design a settings / account right
Open-source design engine for Claude Code, Codex & Cursor. MIT.