How to use the Design System
The Design System is a collection of reusable styles, components, patterns and code. You can use them to build websites and services that are easy to use, accessible and mobile-friendly.
Who should use the Design System
The Design System is 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
When to use it
Use it to create:
- new websites
- new digital services
- major redesigns
How to use it
- Review Design System styles, components and patterns.
- Prototype your service designs.
- Install the Design System.
- Build your service using Design System code.
- Check your service is accessible.
- Use analytics data to track how users are interacting with your site or service.
- Keep your code up to date with the latest version of the Design System.
Review existing styles, components and patterns
Our Design System includes styles, components, and patterns. Design System elements are accessible, adaptable, have been tested with users and can save you time. Use them to build your website or service.
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.
Then 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.
Prototype your service designs
A prototype is an early design of your website or service. You can use a prototype to test journeys, content and interactions with users or stakeholders. 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. The kits include templates for Design System components and patterns to speed up design.
Find out about the benefits of prototyping on the Digital Scotland Service Manual.
Adapting our designs for your brand
You can adapt the Design System to suit your service. You can change:
Check our guidance before making changes. It explains which parts you can adapt.
Install the Design System code
Follow the installation instructions to start using Design System code in your project.
Build your service using 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.
You can use our code with a range of 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
Building your own components and patterns
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
Check your service is accessible
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.
Create an 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
Use analytics data for performance tracking
The Design System includes a tracking script. You can then use an analytics tool to track how users interact with these elements on your site or service. For example, you can check if 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
By law, you must get consent before placing non-essential cookies on a user's device.
The Design System includes:
- a cookie banner to let users accept or reject non-essential cookies
- a cookies page for managing cookie preferences
For most website or services, we recommend:
- using as few cookies as possible
- avoiding pixel tracking and other third-party tracking methods
Services with more complex cookie requirements may need a specialist cookie consent management tool.
For more information, read the Information Commissioner’s Office guidance on cookies.
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 help you:
- let users sign in or verify their identity with ScotAccount
- accept payments with ScotPayments
- host your service using the Scottish Government cloud platform