Develop
This page is for developers integrating Canopy into a codebase — internal RAGT teams as well as partner agencies. It explains how to technically rely on the design system, and how to start the connection with the Group digital program.
Two ways to rely on Canopy
A project can technically rely on Canopy in two ways. That choice changes everything downstream : it determines whether the project stays in sync with the design system over time, or drifts away from it at the first change.
The stylesheets and tokens are fetched once, then copied into the project. No external dependency : the project runs on its own, offline included.
The trade-off : nothing tells the project when the design system evolves. Resyncing is manual, and without it, each site drifts a little further from the reference over time.
The project loads the stylesheets straight from a CDN hosting the up-to-date Canopy distribution, instead of keeping a local copy. The stylesheets stay split by role : each project only loads what it needs.
The point : any change validated in Figma propagates automatically to every connected project, with nothing to redo on their end. One source of truth, no more drift between the Group's sites.
Structure
Whichever way a project relies on Canopy, the distribution keeps the same structure.
styles.css single entry point _ds_bundle.js all components, compiled tokens/ fonts.css fonts and weights semantic.css role aliases, radii, spacing, layout typography.css .ragt-* classes (30 styles × 3 modes) elevation.css shadows, .ragt-card, .ragt-stripe brand.css logotype and lockup components/ fig/ extracted components, fig-tokens.css icons/ icon-data.js, Icon.jsx templates/ page templates assets/ logotype, striped texture, photography
fig-tokens.css carries the variables generated from Figma ; semantic.css the role aliases. A single entry point is also available : styles.css.
A dedicated repo
Tokens and components live in a Git repository dedicated to Canopy, separate from the projects that consume them. It's the single source of truth : it's what the CDN distribution is built from, and where every validated change is versioned before being published.
Connecting to the design system
Connecting to the CDN isn't something to improvise project by project : it's scoped with the Group digital program, to stay consistent with the other sites already connected.
Describe your project to the Group digital program : tech stack, hosting, and whether it's run by an internal team or a partner agency.
The program works out CDN access with you, the style modules the project needs, and repo access if relevant.
You connect the stylesheets from the CDN in the project, with the program’s support to validate the result.
Contribute
Missing a component, or a token that needs fixing? Describe the need to the Group digital program (see Design → Evolving the system) : the change is made in Figma then regenerated as CSS, never the other way around — a value is never hardcoded in a project.