Centrim Design System — a token-first, accessible React component system.
Settings
A structured configuration experience: quiet settings navigation, page context, grouped sections of controls, then one predictable Save / Cancel row.
What it demonstrates
- User goal first — understand and update configuration confidently, with navigation secondary to the content
- One continuous form at a reading measure: sections separated by heading, rule and whitespace, never a card per setting
- The right control per setting — Input and Textarea for text, RadioGroup for exclusive choice, Select for a list, Switch for behaviour, DateRangePicker for a range
- Validation through the existing FormField pattern: required semantics, an associated message and an icon, never colour alone
- Change feedback that escalates rather than shouts — an unsaved Badge and Banner while editing, a Toast on success, an ErrorState when saving fails
- Loading drawn as contextual Skeletons that keep the form's rhythm, and below lg the navigation becomes a Drawer
How to adapt it
- Cap the form measure — full-width inputs on a wide screen are unusable.
- Group by what a person is trying to change, not by data model.
- Save once. Per-section saves teach people to distrust the page.
- Keep every label visible; a placeholder is not a label.
- Reach for it for workspace, account or product configuration; reach for a Dialog instead when a single setting is changed in passing, and for the Details screen when the subject is a record rather than configuration.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.