Government of Ireland Design System

The Government of Ireland Design System is an open-source design system developed by the Office of the Government Chief Information Officer (OGCIO). It provides tools for design and development, along with resources and guidelines to help teams create consistent, accessible, and user-centred digital services across government.

• 📘 Project Overview
• 🛠️ Technical Reference
• ⚛️ React Storybook
• 🧱 HTML Storybook
• 🧩 Available Components

🎨 Design

The Government of Ireland Design System uses Figma as its core design foundation, ensuring visual consistency across all government platforms and services. Our design tokens and variables are managed centrally and can be imported directly into Figma for use by designers and product teams.

• 👉 Design
• 👉 Figma

Packages

This project includes the following packages that are publicly available on npm:

• @ogcio/design-system-react - A library of UI components for government platforms in React.
• @ogcio/design-system-tokens - A library of design tokens for consistent styling across government platforms.
• @ogcio/design-system-tailwind - A Tailwind CSS integration for the Government of Ireland Design System, providing utility-first styling options for rapid UI development.
• @ogcio/theme-govie - A theme package for the Government of Ireland Design System, providing predefined styles and components tailored for the Govie platform.

Getting started

corepack enable
pnpm install
pnpm ds

Scripts

Script	Description
pnpm ds	Launch documentation site (Next.js)
pnpm html:storybook	Launch global HTML components Storybook
pnpm react:storybook	Launch React components Storybook
pnpm build	Build all libraries and applications
pnpm build:libs	Build all libraries only
pnpm figma:build	Build Figma token import files
pnpm format:check	Check formatting on all projects
pnpm lint	Check linting on all projects
pnpm test	Run tests on all projects
pnpm examples:vite	Run Vite example component usage
pnpm examples:nextjs	Run Next.js example component usage
pnpm gen:licenses	Generate third‑party licenses report

Generate third-party licenses report

This repository includes a helper script that produces a markdown report of all third‑party dependency licenses.

Prerequisites:

• jq (brew install jq)

pnpm gen:licences

You can also run the script directly:

sh ./scripts/licences.sh

This generates LICENCES.md with a table of package name, version, and license for all dependencies.

Visual regression testing

To run Visual regression testing locally you need to create a Docker image in your local machine running the command make build-visual-tests-image. Once the image has been created, you can run the tests with the command make tests. If you are developing a new feature or making some adjustment to the style of existing components, you might need to update the snapshots to the latest version; to do so, you just have to run make update-screenshots to refresh all the screenshot in the repository. Once you're done, you can run make stop-react-storybook to close the Storybook instance that is running in the background.

Build Figma tokens

Make token changes in packages/design/tokens or packages/themes/<packagename> in Design Token Format Module format.

pnpm figma:build

Figma tokens are outputted to packages/design/figma/dist/tokens The entire folder can be uploaded as one with the figma-variables-import plugin.

Known Issues

• Figma does not support composite variables (e.g. typography, shadows etc), so they are converted to nested variable groups
• Figma does not support percentage variables for line height so line height percentages must be entered manually for Figma text styles

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

This project is tested with BrowserStack BrowserStack