Centrim Design System — a token-first, accessible React component system.
Token reference
One page listing everything the token layer exposes, plus the architecture that keeps it maintainable. The individual foundation pages explain when and how to use each group.
What is this?
Two layers of CSS custom properties. Primitives (--ds-*) are locked raw values with no meaning attached. Semantic tokens (--color-*, --size-*) assign those primitives to roles, once per theme, and are mapped into Tailwind utilities in theme.css.
When to use it
- Looking up an exact token name while implementing
- Adding a new value to the system
- Auditing a screen for hardcoded values
How to use it
- Components read semantic tokens only, usually via Tailwind utilities
- Add a primitive first, then map it to a semantic role in both themes
- Document the new token on the matching foundation page
What to avoid
- Reading a --ds-* primitive from a component
- Adding a semantic token that duplicates an existing role
- Mapping a semantic token in one theme only
Architecture
| Layer | File | Read by |
|---|---|---|
| Primitives (--ds-*) | src/design-system/styles/tokens.css | The semantic layer only |
| Semantic (--color-*, --size-*) | src/design-system/styles/tokens.css | Components and screens |
| Tailwind mapping (@theme inline) | src/design-system/styles/theme.css | Utility classes |
| Theme switch (.dark) | src/design-system/styles/tokens.css | Re-points semantic names |
Primitive ramps
Locked raw values. Never referenced from a component.
--ds-blue-*
50
100
200
300
400
500
600
700
800
900
950
--ds-yellow-*
50
100
200
300
400
500
600
700
800
900
--ds-neutral-*
0
50
100
200
300
400
500
600
700
800
900
950
Semantic colour
The only colour layer components may read. See Colour for role guidance.
Primary
The single brand action colour. One primary action per view.
Secondary
Neutral-weighted supporting actions that must not compete with primary.
Accent
Highlight and emphasis only — never a call to action.
Background
The page canvas and its quiet variations.
Surface
Anything that sits on the canvas: cards, menus, floating panels.
Text
Three readable weights plus disabled, inverse and link.
Border
Structure and separation. Focus is its own token, never reused.
Status
Meaning only. Each status has a solid, a subtle and a foreground.
Spacing
Radius
rounded-none
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-full
Elevation
shadow-none
shadow-xs
shadow-sm
shadow-md
shadow-lg
Icon sizes
icon-xs
icon-sm
icon-md
icon-lg
icon-xl
Adding a token
A new token is a four-step change
1. Add the primitive to tokens.css. 2. Map it to a semantic role in both the light and dark blocks. 3. Expose it to Tailwind in theme.css if it needs a utility. 4. Document it on the relevant foundation page.
Why it is designed this way
Keeping meaning out of primitives and values out of components is what makes both rebranding and theming single-file operations. It also makes review mechanical: a component diff that contains a --ds- reference or a raw value is wrong regardless of how it looks.