Developers

As a developer, you can consume the design system using tokens, components, templates, and the demo application.

Overview

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:

Designers 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.

Visual Studio Code support

In 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.