Skip to main content

Setup

This guide explains how to setup your project so you can start using the styles and components in our Design System.

Connect your project​

There are two ways to do this. You can either:

  • Link to the files directly
  • Download a copy and include them in your project

We recommend linking to our stylesheets.

You'll be able to:

  • Get up and running quickly
  • Use any of the styles, components and patterns
  • Stay in sync with the latest version
  • Extend the CSS by adding your own stylesheets

Option 2: Download​

If you want to selectively include CSS or customise something then you should download and include the files.

You'll be able to:

  • Choose which parts of the CSS you need
  • Customise or extend the CSS before it's compiled
  • Remove the dependency on our remote CSS files

Use the starter template​

Setup a basic page that's consistent with our branding by using the boilerplate template.

Use CSS classes​

The Design System provides CSS classes for common HTML elements.

Components are designed to be accessible and responsive.

Explore the Styles, Components and Patterns sections of the Design System to see which classes are available.