Centrim Design System — a token-first, accessible React component system.
V2 Component Audit
The inventory of every component the Centrim Life application relies on, each mapped to exactly one standardized V2 component. Legacy screens define the use cases; V2 defines the design.
What is this?
35 audited component families across seven sections. Each entry records purpose, legacy mapping, default variant, variants, sizes, states, icon behaviour, spacing, typography, radius, colour usage, accessibility, responsive behaviour and when not to use it — next to the live component.
When to use it
- Deciding which V2 component replaces a legacy control
- Specifying a new screen against a fixed component contract
- Reviewing whether a proposed variant already exists
How to use it
- Find the use case in the section that matches its role
- Use the documented default before reaching for a variant
- Compose existing components before proposing a new one
What to avoid
- Recreating a legacy treatment that V2 has standardized away
- Introducing a colour, spacing, radius or shadow value outside the token set
- Shipping a visual example instead of a reusable component
Nothing is invented inline
Every value in V2 comes from the V1 token set. Where a legacy screen implied a value the tokens do not cover, it is recorded below as a V2 token candidate and reviewed — never hardcoded into a component.
Sections
- Form elementsActions and binary/exclusive choices. In the legacy app these were five different button treatments and three checkbox styles; V2 collapses them into one Button variant map and one selection family.Open section
- Inputs & dropdownsOne control chrome, many value types. Every field below shares the same border, height, focus ring, label rhythm and message slot — only the value type and affordance change.Open section
- Input groupsComposed fields: one border, one height, one focus ring. Prefixes, suffixes, addons and steppers attach to the control instead of floating beside it.Open section
- FeedbackSuccess, warning, error and information, plus the empty and loading states that carry a screen when there is no data yet.Open section
- NavigationTwo controls that look similar and mean different things: Tabs switch panels of content, SegmentedControl switches the view of one content set.Open section
- OverlaysModal surfaces for focused work and decisions, plus the tooltip. Confirmation variants are separate components so the destructive path can never be styled as a neutral one.Open section
- PeopleIdentity across the product: one avatar, one stacking rule, one picker for assigning people.Open section
V2 token candidates
Values the legacy application implied that the V1 token set does not express. Each is a proposal with a rationale — none of them is in use until it is added to the token layer.
| Candidate | Rationale | Surfaced by |
|---|---|---|
| --color-field-addon | Input-group addons reuse `background-subtle`. A dedicated role would let addon fills darken independently of page surfaces in dark mode. | Input groups |
| --ds-space-72 / --ds-space-80 | Legacy empty-state canvases used ~72–80px vertical padding. Today they round to `--ds-space-64`; adopt only if the rounding proves visibly cramped. | Feedback — empty states |
| --ds-shadow-inset-focus | Composed fields draw focus on the group. An inset variant would let addon segments echo the focus without a second outer ring. | Input groups |