Coop Design System

What is CDS

A shared library of tokens, components, and guidelines for visual design decisions, interactive components, and usage guidance across Coop's digital products.

Shared language, faster teams

When teams share a design language — the same spacing, colours, and components — they stop rebuilding foundations and start on the work only they can do. Decisions made once, tested for accessibility and cross-platform use, become something everyone can build from. That shared base is what lets a team move fast without pulling in different directions.

One foundation for all of Coop

Coop runs many digital products across web and native platforms, all for the same people. When teams share a system, they move together — compounding knowledge rather than duplicating effort. CDS is that shared foundation: tokens, components, and guidelines that let any team build on what others have already figured out.

Design and code, one language

CDS sits between brand guidelines and product development. Designers work with CDS tokens and components in Figma; developers use the same tokens and components in code. That shared language closes the gap between what's designed and what ships, and makes it faster to contribute to any Coop product because the foundation is already familiar to everyone.

The team behind CDS

The CDS team owns the foundation — tokens, component library, and this documentation. They decide what goes into CDS, handle breaking changes, and set the release cadence. Product teams own how they use CDS in their products, including local extensions when CDS doesn't cover a use case. New components and changes come from real product work through the contribution process, so the system grows with everyone who uses it.

Shared vocabulary

Tokens, components, patterns, primitives — the same words should mean the same thing across the whole team. The Terminology page collects the terms we use and what we mean by them.

On this page