Get started with the design system Start with the design system to build on the research and experience of other service teams and avoid repeating work that's already been done. This page demonstrates the documentation template. Actual content from the current design system website will be migrated here in a future update.

View current Get Started documentation

Why use 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 high-value work

Leveraging 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 auditing
  • Design integrity of the product
  • Low fidelity design and testing

How do I use the design system?

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 is needed, design a better solution.
  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

For designers

Get started by connecting to the GoA Figma libraries. The component library contains all design system components with their variants and states. Use these components in your designs to maintain consistency and enable smooth developer handoff. Figma resources Connect to the GoA Styles Library and Component Library in Figma to access all design system assets.

For developers

Install the design system packages for your framework. The design system supports React, Angular, and Web Components. 
npm install @abgov/react-components @abgov/design-tokens
Import the design tokens CSS and start using components. All components follow the naming convention Goab* for React and goa-* for Web Components.

Governance process

When you need something that doesn't exist in the design system, follow the governance process to either request an addition or document your custom solution. Avoid custom solutions without a genuine user need to prevent unnecessary work and save time.