Early adopters use the same design system packages you're already familiar with, but opt into experimental DS v2 by:
- Importing Goabx components
- Angular: 4.10.0-next.1 or later
- React: 6.10.0-next.1 or later
- Web: 1.40.0-next.1 or later
- ui-components-common: 1.10.0-next.1 or later
- Using the experimental prefix (
goab→goabx) - Installing and applying tokens v2 (
designtokens2)- Import
@abgov/design-tokens/dist/tokens.cssin the global CSS of your app, below where you import@abgov/web-components/index.css
- Import
Using design system v2
A) Try it in your existing app
- Create a branch in your repo
- Apply the initial DS v2 setup changes (imports, prefix, tokens v2)
- Run the app and review the changes
- Start with one page and share back with your team — don't try to fix the entire app on day one
- Quick feedback on impact and risk
- Easy to abandon (don't merge the branch)
B) Try the workspace template repo
- Open the template repo for your framework:
- Click Use this template
- Choose Create a new repository
- Select an owner + repo name
- Choose Public or Private
- Click Create repository from template
- Clone the repo locally
-
Install and run, go into the directory you created and run the following commands (in order):
npm inpm run buildnpm run start(Angular) ornpm run dev(React)
- Go to the listed port number of your localhost
Choose how you receive updates
Next branch
Dev branch
Production branch
Compatibility and mixing rules
- You'll get the best results when tokens and components are upgraded together.
- Mixing experimental and production components in one app may be possible, but is not recommended.
Plan your upgrade scope
- If possible, start with a small/simple application while you're learning the new system.
- For most teams with a monorepo setup, you will need to update the import statements and add the design tokens to the specific project you're upgrading.
Updating your custom components
- Start by identifying where you have custom UI (a quick inventory is enough to begin).
-
Replace hard-coded values in your custom UI with the corresponding Tokens v2
values, such as:
- Spacing (padding, margin, gaps)
- Typography (font, size, weight, line height)
- Color (text, background, borders)
- Elevation / shadow (surfaces)
When tokens v2 values don't cover what you need
- Identify gaps where Tokens v2 don't cover what you need.
- Where needed, create custom styles to bridge those gaps, while keeping them consistent with the DS v2 look and feel.
Getting help and reporting issues
Rollback and branching strategy
- The simplest rollback is to reverse the setup steps.
- If you're working in a branch, rollback can be as simple as not merging the branch.
- Rollback becomes harder once you've made many manual updates to custom components.
End of program expectations
-
Moving to production at the end of the early adopter program (end of March 2026) includes
switching
goabx→goab. -
Once the early adopter program ends:
- The experimental library will no longer be updated
- Design system team effort will shift to the production libraries and packages
- Web components continue to be updated