Overview
CDS is Coop's design system for everyone who designs or builds digital products — tokens, components, and guidelines for consistent, accessible interfaces.
Who this is for
CDS is for everyone who designs or builds Coop's digital products.
Getting started — Designers
How to use CDS in Figma and in your design process.
Getting started — Developers
How to install CDS, use tokens, and ship components in code.
What you get from CDS
CDS handles the small decisions — spacing, colour, component behaviour — so you don't have to. You get:
- Consistent interfaces across products
- Accessibility built in by default
- Components that match Figma without extra translation work
The time you save goes toward real product problems, not one-off solutions.
Step-by-step
Understand what CDS includes
Read What is CDS for an overview of what the system covers.
Find the components you need
Browse Components to see what's already available before you design or build something new.
Use tokens, not raw values
See Foundation → Tokens and apply tokens instead of hard-coded colours, spacing, or typography.
Follow established patterns
Check Foundation for colour, spacing, and typography rules so your work fits with the rest of our products.
Stuck? Get help
See Support and questions below.
How CDS is organised
CDS is structured in three layers:
- Foundation — Tokens (colour, spacing, typography) that define the visual language.
- Components — UI building blocks that use foundation tokens and come with usage guidelines.
- Patterns — Coming soon. Combinations of components that solve common product problems.
Figma and code share the same token names. When you use a semantic token in Figma, the same token name applies in code. This keeps design and implementation aligned without manual handoff.
Support and questions
Ask in the CDS Teams channel. Include what you're trying to build, which component or token you're using, and what's not working. Use the same channel for bugs and missing components.