repowisealphagov/govuk-design-system

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.

Nunjucks★ 677
Use in your agentAsk this codebase

github.com/alphagov/govuk-design-systemIndexed at 177b209Up to date with upstream

What is govuk-design-system?

govuk-design-system is a website codebase for service teams to find styles, components and patterns for designing government services. It builds the GOV.UK Design System website and consumes the GOV.UK Frontend package for reusable service code. The project primarily uses Nunjucks, with JavaScript and TypeScript files.

Written by a model from the README and the source

252 files and 160 symbols in 6 modules, led by JavaScript (82 files) and TypeScript (1).

Start reading

Code health

8.7out of 10Excellent

Hotspots average 5.9, the place fixes pay off most.

Full health report

Use alphagov/govuk-design-system in your agent

Point Claude Code, Cursor, Codex or VS Code at this repository. Your agent gets the index this page is built from: cited answers, callers, history and health for any file.

  1. 1.In Claude, open Customize → Connectors, click +, then Add custom connector. On a Team or Enterprise plan an owner adds it first under Organization settings → Connectors.
  2. 2.Paste the server URL below as the Remote MCP server URL, then click Add.
  3. 3.Click Connect. A Repowise sign-in window opens. Approve access.
  4. 4.Repowise's tools are now available in your Claude chats.

Connect with one click. Sign in with Repowise (OAuth), no API key to copy. Works in Claude on the web, desktop, and mobile.

Docs
bash
https://api.repowise.dev/mcp/alphagov/govuk-design-system
Editors need an API key: sign in to create one.Sign in to connect

This repo is public, so anyone with a Repowise account and an API key can connect.

Try asking

  • get_overview()
  • get_answer("how is govuk-design-system put together?")
  • get_why("why is govuk-design-system structured this way?")

Explore govuk-design-system

Key features of govuk-design-system

  • The project provides styles, components and patterns for designing government services.
  • The project contains the code for the GOV.UK Design System website.
  • The project consumes the GOV.UK Frontend package via NPM.
  • The project can build src into build.
  • The project can lint Sass stylesheets with stylelint.

How alphagov/govuk-design-system works

Source files in src are built into build by the project's build process. lib contains JavaScript modules that support site behavior, including navigation, Nunjucks filters and changelog retrieval. lib/navigation.js handles navigation logic, while lib/nunjucks/filters.js provides Nunjucks filters used during page generation. lib/get-changelog/index.js retrieves changelog data, with its behavior covered by lib/get-changelog/index.unit.test.js. Configuration is held in config, and tasks contains project task scripts. The generated site is served locally by npm start, which builds sources, serves pages and watches for changes.

The codebase has 252 files and 160 symbols in 6 modules, led by JavaScript and TypeScript. Code health is 8.7 out of 10, rated excellent.

Getting started with govuk-design-system

  1. Install the npm dependencies.
    npm install
  2. Start the local server.
    npm start
  3. Build the site sources into build.
    npm run build

Commands copied from the README

alphagov/govuk-design-system FAQ

What is govuk-design-system?

govuk-design-system is the code for the GOV.UK Design System website. It provides styles, components and patterns for designing government services.

How does govuk-design-system work?

govuk-design-system builds src into build and serves the generated pages locally. JavaScript modules in lib support navigation, Nunjucks filters and changelog retrieval.

How do I install govuk-design-system?

govuk-design-system is installed by cloning the repository and running npm install. Run npm start to build sources, serve pages and watch for changes.

What language is govuk-design-system written in?

govuk-design-system primarily uses Nunjucks. Its code also includes JavaScript and TypeScript files.

How is the govuk-design-system code organized?

govuk-design-system organizes source files in src, supporting JavaScript modules in lib, tests in __tests__, configuration in config and task scripts in tasks.

Who is govuk-design-system for?

govuk-design-system is for service teams designing government services. It provides styles, components and patterns for that work.

What license does govuk-design-system use?

govuk-design-system uses the MIT license.

The summary, features and answers on this page are written by a model from the README and the source, and refreshed with each index.

About this page

Get a page like this for your own codebase

Repowise built this map of alphagov/govuk-design-system from its source and git history. It parses every symbol, draws the dependency graph, scores each file's health from complexity, duplication, coverage and churn, finds hotspots and owners in the history, and writes documentation for every module. Your coding agent reads the same index over MCP, so its answers cite real files.

Index your repo freeSee how Repowise worksFree for 2 public repos, with a page like this one.

Prefer local? pip install repowise && repowise init indexes your own checkout, no account needed.