Get startedFoundationsExamplesComponentsTokensGet supportSelect your development framework to see all code in your development language. Change framework and version at 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
DevelopersVS CodeYou can use VS Code's autocomplete suggestions for design system components and design tokens.Design tokens autocompleteGet code autocomplete suggestions for the goa design tokens.
  • Automatically works for CSS and Sass files
  • Preview design token values in autocomplete description
  • Color previews for all color tokens
  • Relevant code completions based on the current line of code
Components autocompleteIn 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:
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 startedFoundationsExamplesComponentsDesign tokensSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes