How to use the Design System

The Scottish Government Design System helps you create digital services that are easy to use, accessible and mobile-friendly.

Follow this guidance to understand how to use the Design System effectively when you’re building a website or service.

It's for:

• suppliers building websites or services for the Scottish Government
• digital teams within the Scottish public sector
• Scottish Government staff who commission websites and services through the procurement frameworks

Use the Design System code

The Design System is more than a style guide or pattern library.

You must use the Design System code, not just copy the visual design.

Our components and patterns meet WCAG 2.2 AA accessibility standards. If you do not use the code, you’ll miss important accessibility and functionality features.

Our code is platform-agnostic, so it works across different technologies and frameworks.

Where to find the code

We provide the HTML for each component and pattern.

JavaScript is built into the components and patterns that require it.

You can:

• find code snippets on individual component and pattern pages
• access the full codebase and GitHub release notes on our GitHub repository

Using the styles, components and patterns

Our Design System includes styles, components, and patterns.

Each design element has guidance on using it and coded examples.

Standard design elements for webpages

When building your website or service, there are some standard design elements you should use.

View a list of standard design elements.

Check the Design System for other components or patterns your project may need.

Building forms

If you’re building a form for your site or service, there are some standard design elements for forms you should use.

View a list of standard design elements for forms.

Read our forms guidance for more information on designing and building forms. 

Adapting our designs for your brand

You can adapt the Design System to suit your service. You can change:

• colours
• branding
• typography

Check our guidance before making changes. It explains which parts you can adapt.

Building your own designs

If you think the Design System does not have a component or pattern your project needs, then contact us. We may have unpublished designs you can use.

You can create a new component or pattern if ours do not meet your project’s needs. To create these, you can build on our existing designs and code.

If you create a new component or pattern for your service, please share this with us. This helps us to understand how the Design System is being used and identify any gaps we need to address.

Email us: designsystem@gov.scot

Prototyping

You should prototype your designs before building your website or service.

The Design System has prototyping kits for Figma and Axure RP. You can also prototype in HTML using our plugin for the GOV.UK prototype kit.

Find out about the benefits of prototyping on the Digital Scotland Service Manual.

Accessibility

By law, public sector websites must be accessible.

Using the Design System correctly will help you achieve this. Our designs meet WCAG 2.2 AA standards.

We’ll continue to update our designs to meet future accessibility standards.

Accessible Rich Internet Applications (ARIA) attributes

ARIA is a set of attributes you can add to HTML elements. They help screen readers and other assistive technologies understand what's happening on a web page.

Our components and patterns contain ARIA attributes where needed. You can find out about any additional ARIA attributes in the accessibility section of the component or pattern’s guidance.

Accessibility statement

You must have an accessibility statement on your website.

Read guidance on writing an accessibility statement on the Digital Scotland Service Manual.

More about accessibility

Find out more about:

• creating accessible websites on the Digital Scotland Service Manual
• accessibility and the Design System

Analytics

Performance tracking

The Design System includes a tracking script. This adds data attributes to components and patterns. You can then use an analytics tool to track how users interact with these elements on your site or service. For example, when a user clicks a button or opens an accordion. 

For tracking to work correctly, your site or service must fully use the Design System.

The tracking script has been tested and works with accessibility tools.

Where to find tracking information

You can find tracking attributes:

• on individual component and pattern pages
• on the tracking attributes and events page

Managing analytics

You can collect analytics data using Google Tag Manager. This data can then be sent to tools, such as Google Analytics and Looker Studio, to create analytics reports and dashboards.

Find out more about analytics and the Scottish Government Design System.

Cookie use

There is data protection legislation governing the use of cookies on websites.

You must get consent from the user before placing non-essential cookies on their devices.

You do not need consent for essential cookies, which are required for your website to work.

To get user consent, the Design System includes a:

• cookie banner to let users accept or reject non-essential cookies
• cookies page to help users manage their cookie use

For most website or services, we recommend:

• minimising the number of cookies
• avoiding the use of pixel tracking and other third-party tracking methods

For websites with complex cookie pattern needs, you may wish to use a specialist cookie consent management tool.

For more information on cookie compliance, view the cookies guidance on the Information Commissioner’s Office website.

Stay up to date with the Design System

We release regular updates to the Design System. You must install the latest version of the Design System to ensure you have the most up to date code.

You can stay up to date by:

• checking the Design System homepage to find out about the latest release and updates to components and patterns
• reading the GitHub release notes to find out what’s changed in the latest release
• joining our mailing list to receive our newsletter

Other Scottish Government services

You can use other Scottish Government services to support your website or service.

Sign-in and identity verification

If your service needs users to sign in or verify their identity, you can use ScotAccount.

ScotAccount helps users securely access your service by confirming who they are.

Payments

If your service needs to take payments, you can use ScotPayments.

ScotPayments allows users to pay securely and reliably.

Hosting

If you need hosting for your site or service, you can use the Scottish Government’s cloud platform.

The cloud platform provides secure and scalable hosting.