Skip to content
SPECIFICTION
Get listed

GOV.UK Design System vs Material 3 Design Kit

GOV.UK Design System

design-system.service.gov.uk

Material 3 Design Kit

m3.material.io

Side by side

FigureGOV.UK Design SystemMaterial 3 Design Kit
Price fromFreeFree
Free planYesYes
Free trial——
Open source——
WebYesYes
Self-hostedYes—
Plans published11
Spec score · UI Kit Libraries7.9 (#9)7.2 (#21)
AccessibilityThe team describes accessibility work as continuous and iterative, and says using the system alone does not make a service accessible.Material foundations include accessibility guidance for designing interfaces for users with diverse abilities.

Plans

GOV.UK Design System

  • GOV.UK Design SystemFree

GOV.UK Design System pricing →

Material 3 Design Kit

  • Material 3 Design KitFree

Material 3 Design Kit pricing →

In their own words

GOV.UK Design System

The GOV.UK Design System helps government teams build services with shared styles, reusable components and patterns for user-focused tasks. Its guidance covers page structure, typography, colour and images; components include coded examples, and patterns address particular tasks and page types. Published guidance includes details about user-research testing. Teams can add GOV.UK Frontend through npm or include compiled files. In production projects, components can be used as HTML or as Nunjucks macros when Frontend is installed with npm and the application uses Node.js. Prototyping requires GOV.UK Prototype Kit version 7 or later. The code is public under the MIT License, and the listed plan is free. The system aims for WCAG level AA compliance, but its use alone does not make a service accessible; component accessibility checks combine tools, automated deployment tests and manual testing. The Government Digital Service maintains the system, with a focus on central UK government digital services. Support may be limited for other contexts. Compiled files include all Frontend CSS and JavaScript, without selective component assets or a customizable build.

Visit design-system.service.gov.uk

Material 3 Design Kit

Material 3 Design Kit is a free Figma resource for creating mockups and prototypes with Material 3 styles and components. It belongs to Material Design 3, Google’s open-source design system, which provides interface guidelines, components, and tools. M3 Expressive adds vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes. Its shape library contains 35 shapes with built-in morph motion. Design tokens store values such as colors and fonts so they can be shared across designs, code, tools, and platforms. Material foundations include accessibility guidance for users with diverse abilities. Listed implementation libraries cover Android, Jetpack Compose, Flutter, and Web. Time pickers are available in the Figma kit, Flutter, Jetpack Compose, and Android Views, while Web implementation lists them as unavailable. The kit’s listed price is free.

Visit m3.material.io