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
Starting with the design systemStart with the design system to build on the research and experience of other service teams and avoid repeating work that's already been done.Design system by role:DesignerDeveloperQA TesterStart with the design system to align with standards, reduce duplication, and move faster. It gives you a solid foundation for the common parts of government services, so your team can focus on solving the specific challenges of your product. Build on it — don’t build from scratch.

Why start with the design system?

The design system can save you time and effort getting to a better service, allowing you to focus on other high-value work. By starting with the design system, you can:
  • Streamline collaboration: Your developers can use the corresponding coded design system components.
  • Ensure better accessibility: Accessibility is built into the components from both design and code.
  • Save time on testing: Components have been rigorously tested across various devices, browsers, and service contexts.
  • Maintain consistency: Components are coordinated with the rest of the system for a cohesive experience.
More time for other high value workLeveraging what exists in the design system saves you time, enabling you to spend more time on other high-value tasks such as:
  • Usability testing
  • User research
  • Content design
  • Accessibility
  • Design integrity of the product
  • Low fidelity design and testing

How do I use the design system in my service?

Start by using the design system components and patterns. You should expect that this will cover about 80% of your needs in a service. When usability testing shows that a new solution or an improvement to an existing solution is needed, design a better solution. Use a 3rd party library, code your own, and/or share solutions with other teams.
  1. Use the design system as the default first solution in design and development
  2. Identify any needs that don't exist in the design system through user testing
  3. Talk to the design system team to see what’s available and what other teams have done
  4. Test a better solution with users
  5. Share learnings from design and development back to the design system so everyone can learn and improve
  6. The new solution or change to an existing solution:
    • Is added to the system
    • Stays a snowflake (unique to your service) for now and is tracked in the design system backlog
Avoid custom solutions without a genuine user need to prevent unnecessary work and save time.
View the design system governance process
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