Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
Start with the design systemOverviewUser experience guidelinesOverviewSetupVerify a bugVS CodeTechnologies Supported BrowsersVersion update guideQA testingComponent lifecycleContributeRoadmapLong Term Support (LTS)Get support
DevelopersOverviewAs a developer, you can consume the design system using tokens, components, templates, and the demo application.The DDD Design System is built with Web Components. Web Components are technology agnostic. You can choose various front-end frameworks, like Angular, React, or Vue, to use with our web components. All components include sample HTML and only use JavaScript when necessary.The design system consists of:Design tokensComponentsProduct templatesDesigners also have access to the same resources in Figma. To begin with, they should utilize the components from the design system for common elements of the service. This will save you from having to create everything from scratch.These design system components have all been designed and coded to meet a WCAG 2.1 accessibility standard.

Design tokens

You can access the design tokens as an NPM package here: npm: @abgov/design-tokens. Incorporate the SCSS or CSS file into your projects and replace hard-coded values with the token variables from the design system.Your designers can use and reference these design tokens in their tools to hand off their designs to you.

Components

Components are reusable parts of the user interface that have been made to support a variety of applications. You can use individual components in many different patterns and contexts. Our components are available in Angular,React, and as Web Components.Read more about design system technologiesVisual Studio Code supportIn order to use VS Code's HTML/CSS Custom Data support to enhance GoA Web Components HTML editing experience, include our html custom data setting found in.vscode/settings.json:
{
"html.customData":[
  "./node_modules/@abgov/web-components/html.html-data.json"
  ]
}

Product templates

To help get teams up and running sooner, this product template has been created for teams to quickly use the ui-components and provide a starting point for building DDD products. The product templates are available in Angular and React.

Demo application

This is a demo application to see and interact with the design system components.View demo application
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes