Getting started
Here you’ll learn how to install CDS, apply tokens in code, and contribute effectively as a developer.
Supported platforms
Coop Design System is available for the following platforms:
Go to each platform page for detailed instructions and guidelines.
Tokens
Tokens are a core part of the CDS foundations. They are reusable values that describe the styling of components and applications. Token values are defined in Figma, synced to the codebase via a CI job, and published as updates to the CDS code packages. Learn more about packages on each platform page linked above.
Instead of hardcoding values, use tokens to keep the interface consistent and easy to update. Always use them by name (for example color.background.primary), not raw values like #ffffff. Using raw values makes it harder to apply themes, update styles, and maintain a consistent visual look.
Components
Use CDS components as your starting point. They handle presentation – structure, styling, states, and accessibility – while your application handles data, routing, and business logic.
If you need to connect a component to your application (for example to pass data or handle events), wrap it in your own component rather than modifying the CDS component directly.
If a CDS component doesn’t meet your needs, first check if same need exists across products. If it does, bring it up in the CDS Teams channel before building your own solution.
Versioning
CDS packages follow semantic versioning (semver):
- Patch updates: Bug fixes and small changes that don't affect how you use the package. Safe to update without breaking your code.
- Minor updates: New functionality that don’t break existing usage.
- Major updates: Breaking changes that require code updates. Migration guidance is provided in the release notes.