You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Design System can be comprised of principles, guidance, and code that makes it easier to build accessible, mobile-friendly government websites. Human-centered design is utilized to support human-centered design teams.
Click on a table entry below to be taken to more information about it's Design System(s).
Agriculture Design System (AgDS) - builds on the visual language and design principles of the original Australian Government Design System (GOLD). Available as the agds-next React component library
Underpinning Technology
React
Theming, responsive components, and design tokens to support adoption across multiple teams
Web Components
🟢
React component library available on npm
508 Compliant
🟢
Accessibility-focused, built on GOLD design principles and WCAG-aligned guidance
Storybook / Figma
🟢
Storybook for tests, Playroom for collaborative design, and a community Figma resource
Digital Government Strategy 2022 mandates designing public services digitally first. Government entities integrate and design eServices around constituent needs. NEA (National Enterprise Architecture) provides governance, compliance mechanisms, technology standards, and guidelines for effective EA development
Underpinning Technology
Digital-by-design
Rebuilding public services with digital delivery at core. Ministerial Committee for Information Technology and Communication (MCICT) coordinates strategic digital initiatives. National Data Sharing Framework launching 2026
Web Components
🟡
700+ digital services available. Component library and design system specifics not publicly documented
508 Compliant
🟢
Services designed around needs of all constituents including those with disabilities. Simplification of administrative procedures and service reengineering for efficiency
Storybook / Figma
🔴
National Enterprise Architecture governance framework, digital transformation playbook with guidelines and best practices
a2i (Aspire to Innovate) program under Prime Minister's Office leads digital transformation. DSDL developed 38 analysis tools for public service design. "Seven months' work in seven days" rapid design methodology
Underpinning Technology
Service Design Platform
1,844 services designed, 255 digitized systems deployed. 33,000+ government websites integrated under gov.bd. 1,000+ e-services launched. Bangladesh National Digital Architecture (BNDA) provides interoperability framework
Web Components
🟡
National Portal Templates available. Design and Service Innovation Training provided to 25,000+ government officials. Component library specifics not publicly documented
508 Compliant
🟢
Inclusive design principles embedded in DSDL methodology. Services designed for rural and urban populations including persons with disabilities. Emphasis on simplified user journeys and accessibility
Storybook / Figma
🟡
DSDL toolkit with 38 tools including user research, service blueprinting, and prototyping resources. Extensive training materials and case studies available
Webuniversum - Style guidelines for Flemish government websites and applications. Maintained by Government of Flanders. 10 years of development. Older v2.0 was open source. Figma library available
Underpinning Technology
Web Components
Evolved from building blocks to component library to robust design system
Web Components
🟢
Webcomponents documentation available
508 Compliant
🟢
All applications and websites must be accessible according to WCAG 2.1 guidelines
Digital Services Bill (No. 23 of 2025) establishes Digital Services Authority. Provides for national standards, architecture blueprint and interoperability protocols for infrastructure elements. Mandates accessible digital platforms for public and private bodies
Underpinning Technology
User-centric design
Emphasis on innovative design and integrated business processes, streamlined, collaborative and public-focused for enhancing service delivery. 1Gov platform expanding online public services
Web Components
🟡
Standards for infrastructure elements established by legislation, implementation in progress
508 Compliant
🟢
Obligation to develop accessible digital platforms per Digital Services Bill. Digital Identity Policy Framework focuses on interoperability, security, and user-centric design
Storybook / Figma
🔴
Legislative framework established, technical implementation resources not publicly available
Design System of the Federal Government (GOVBR-DS), part of the Padrão Digital de Governo (DS Gov 4.0, released October 2024). Interface standards for designers and developers across federal, state and municipal spheres. Available as @govbr-ds/core on NPM
Underpinning Technology
Web Components
Compatible with main frontend frameworks, work on all web standards ensuring performance, quality, usability and accessibility
Web Components
🟢
Full web components library available
508 Compliant
🟢
Ensures aspects of accessibility, all components tested for accessibility standards
Kit Digital - series of digital communication, design, and development tools to facilitate creation and improvement of official Government products. Managed by Digital Government Division, Ministry General Secretariat of the Presidency
Underpinning Technology
Web-based
Graphic standards, government logos, social media guidelines, web recommendations, typography, UI Kit and Framework kit for web templates
GOV.CO is the single digital access point consolidating 8,000+ government pages and 74,000+ procedures. Managed by MinTIC / Agencia Nacional Digital. Public entities download Kit UI 9.2 (color palette, typography, buttons, icons, forms) and must integrate with the Portal Único following common technical and graphic parameters
Underpinning Technology
Web-based / Kit UI
Common technical and graphic design parameters required for all public entities
Web Components
🟡
Kit UI 9.2 with pre-designed buttons, icons, forms and other components for prototyping
508 Compliant
🟢
Resolución MinTIC 1519 de 2020 and NTC 5854 web accessibility directives (WCAG conformance levels A, AA, AAA)
Storybook / Figma
🔴
Downloadable Kit UI; usability and accessibility implementation guides
Digital Transformation Strategy 2023-2027 led by MICITT (Ministry of Science, Innovation, Technology and Telecommunications). CNTD recommends national design system for all public institutions to ensure consistency and accessibility
Underpinning Technology
Design System Recommendation
Strategic initiative to establish unified design standards across all Costa Rican government entities. Focus on digital identity, service delivery platforms, and user-centric design
Web Components
🟡
National design system recommended in CNTD but implementation status and component library availability not publicly documented
508 Compliant
🟢
CNTD emphasizes accessibility requirements for all public digital services. Commitment to inclusive design for all citizens including persons with disabilities
Storybook / Figma
🔴
CNTD framework and digital transformation guidelines available. Technical implementation resources pending national design system development
gov.cy Unified Design System (UDS) - universal assets, elements, components, patterns and code guidance for building gov.cy services and websites. Developed by the Digital Services Factory (DSF). Includes a no-code prototype kit
Underpinning Technology
HTML/CSS/JS (Nunjucks/JSON, Eleventy)
govcy-frontend-renderer renders gov.cy elements; prototype kit built with Eleventy
Web Components
🟢
Developer assets and component library with a no-code prototype kit
508 Compliant
🟢
Automated accessibility tests via pa11y in CI; govcy-frontend-tester npm package (Puppeteer) enforces DSF accessibility and design guidelines
Joint design system (Fælles Design System) that helps authorities build user-friendly and web-accessible solutions recognizable across the public sector
Underpinning Technology
N/A
Part of joined-up national digital service infrastructure including MitID and Digital Post
Sistema de Diseño Dominicano (SDD) - central design guide for the Dominican Government's digital interfaces. Hierarchical, reusable components for the UI/UX and development teams of government institutions. Maintained by OGTIC (Div. Arquitectura Digital Gubernamental)
Underpinning Technology
React / CSS
sdd-kit React component library and ssd-lib CSS library
Web Components
🟢
sdd-kit React components and ssd-lib CSS library available on GitHub
508 Compliant
🟢
Recognizable, easy-to-use, accessible components with guiding principles and coding standards
Storybook / Figma
🟡
Documentation portal at uxkit.digital.gob.do with a full component catalog
Europa Component Library (ECL) - official design system for the European Commission's digital presence. Ships an EU variant (preset-eu) applicable to European Union institutions and agencies, plus an EC variant for Commission sites. Provides standardized, reusable components for EU digital services and websites
Underpinning Technology
React / Vanilla JS
Components available as npm packages for React and vanilla JS implementations. Design tokens and Twig templates also available
Web Components
🟢
Full component library with React and vanilla JS implementations
508 Compliant
🟢
Meets EU Web Accessibility Directive (2016/2102) and WCAG 2.1 AA requirements across all components
Storybook / Figma
🟢
Storybook available for component documentation and development. Figma design kits provided for designers
Suomi.fi Design System library developed and maintained by the Digital and Population Data Services Agency. Components utilized in Suomi.fi Web Service
Underpinning Technology
React
User interface components tested for accessibility
Web Components
🟢
UI components tested and available
508 Compliant
🟢
Cooperation with accessibility experts during design and implementation. All components tested before release. Meets WCAG 2.0 Level AA (per JHS 190)
Bundesregierung Styleguide contains all specifications for visual appearance of federal government: Office, print and digital media, and campaign media. Access restricted to authorized users
GOV.GR design guide to help designers and developers create friendly, easy-to-use digital public services. Reusable, accessible components for forms, navigation, panels, tables
Must meet WCAG 2.1 Level AA per L. 4727/2020 and EU Directive 2016/2102. Digital Accessibility Guide published by Secretariat-General for Digital Governance
iAM Smart provides single government digital services platform achieving full adoption across all departments by 2025. Connects about 500 services from government, public and private organizations. Provides nearly 600 electronic government forms. 180,000+ daily interactions
Underpinning Technology
Interoperability Framework
"Interoperability Framework for E-Government" (IF) enables bureaux and departments to achieve interoperability in exchange of electronic data and development of integrated e-government services. Digital Policy Office spearheads digital government development
Web Components
🟡
One-stop digital services platform, technical component library details not publicly available
508 Compliant
🟡
Focus on convenience and accessibility. Platform widely adopted by residents. Specific accessibility standards not publicly detailed
Storybook / Figma
🔴
Interoperability Framework documentation, digital government policies and standards
Ísland.is Design System for Digital Iceland - monorepo for Iceland's digital services. Developed in the open, ensures consistency across all governmental agencies
Underpinning Technology
React/TypeScript
Mobile-first methodology, developed and showcased using Storybook
Web Components
🟢
Components available and viewable at ui.devland.is
508 Compliant
🟢
Design always in sync across services to ensure consistent user experience
Storybook / Figma
🟢
Storybook at ui.devland.is, Figma instructions in English. Logo and design introduced March 2020
Created by National e-Governance Division and IBD of Digital India Corporation under Ministry of Electronics and IT (MeitY). Standard Design System for digital services
Underpinning Technology
HTML/CSS/JS
Mobile-first approach, downloadable compiled CSS and JavaScript, source code available for government departments
Web Components
🟢
Design system library with reusable components
508 Compliant
🟢
Compliance with international WCAG standards, focuses on core UX principles including typography, color theory, and layout design
Storybook / Figma
🟡
Support team conducts regular awareness workshops, UX4G Handbook available
INA Digital launched at the SPBE Summit 2024, operated by PERURI as GovTech Indonesia. Integrates ~27,000 government applications into a single citizen-centric public services portal via APIs. An unofficial community design system, garuda-ds, also exists
Underpinning Technology
API-integrated platform (SPBE)
Priority services (education, health, social assistance, digital payments, digital ID, driver's licenses) merged into one portal. Built by 400 local digital talents
Web Components
🟡
National portal integration; official component library specifics not publicly documented
508 Compliant
🟡
Citizen-centric service design; specific accessibility standards not publicly detailed
Storybook / Figma
🔴
SPBE framework documentation; unofficial garuda-ds community resource on GitHub
Israeli Government Design System empowers teams to swiftly and efficiently design government services while ensuring consistency. National Digital Agency reports to Ministry of Economy and Industry, serves as technological headquarters for government ministries and public bodies
Underpinning Technology
Figma-based
Atomic design principles create modular design system that can be easily customized and scaled. Auto layout and responsive components for consistent designs. Available for download as Figma file in Figma community
Web Components
🟡
Design system available in Figma with standardized elements and styles ensuring cohesive user interface. Technical implementation details not publicly available
508 Compliant
🟡
Focus on improving consistency and user experience across diverse government products and services. Specific accessibility standards not publicly detailed
Storybook / Figma
🟢
Available as Figma file in Figma community. Greatly improved design consistency with unified and polished look across projects
Designers Italia provides guidelines, tools, design system and community for Public Administration services. Includes Bootstrap Italia web development kit and UI Kit
Underpinning Technology
Bootstrap-based
Web development kit with 54 existing components in validation phase
Web Components
🟡
Bootstrap-based components
508 Compliant
🟢
Strong accessibility focus with 'accessibility by design' integrated into every process. Components undergo accessibility verification for consistency
Storybook / Figma
🟢
Full Figma UI components available for prototyping
Digital Agency Design System (デジタル庁デザインシステム) - design assets for government agencies, local governments, and public organizations. React components, Design tokens
Underpinning Technology
React/Tailwind CSS
Tailwind CSS theme plugin based on design system, design tokens provide CSS files for colors, fonts, and elevation
Web Components
🟢
Sample components in React, design tokens available
508 Compliant
🟡
Design language with guidelines for usability and accessibility
Storybook / Figma
🔴
Dedicated design system beta site launched May 2024
Kenya launched the first-ever Kenya Standards (KS 2952-1:2022) on accessibility for ICT products and services for persons with disabilities in Africa. E-Citizen platform has 13.5+ million users accessing 22,000+ government services (up from 300 two years ago)
Underpinning Technology
Web-based
Digital government services consolidated on e-Citizen platform. Kenya Digital Master Plan 2022-2032 guides digital transformation
Full Launch April 2025 - Component library for React released December 2024
MYDS (Malaysia Government Design System) - standard tools and templates for building official Malaysian government websites. Pre-built components streamline development and promote consistency
Underpinning Technology
React
Beautiful pre-built components like buttons, forms, and navigation bars. Production-ready design system as of April 2025
Web Components
🟢
Component library MYDS for React available
508 Compliant
🟢
Out-of-the-box adherence to WCAG and best accessibility practices
Storybook / Figma
🟡
Final Stakeholder Consultation completed March 2025 with local tech community and public sector officers
Sistema de diseño para desarrollos del gobierno de México. Digital service design principles, standards with reusable tools at gob.mx/serviciosdigitales. Platform coordinates services across ~300 government agencies, 32 states, and major cities with 87% services online
Underpinning Technology
Web-based
Single window platform (Gob.mx) facilitates interoperability, data sharing, ensures design consistency. Standardizes 5,000+ government services
Web Components
🟡
Figma design system available, reusable tools and guides
508 Compliant
🟡
Digital service standard with governance framework for quality control
E-Mongolia digital platform launched October 2020. As of 2025 offers 1,278 services from 86 government agencies, ~2 million users (~88% of adults). Accessed 7M+ times from outside the country. UN Joint Programme (DEMOSC) concluded June 2025
Underpinning Technology
Web & mobile platform
Secure login via digital signature or mobile banking, AI-powered form filling and service discovery, physical kiosks in rural areas
Web Components
🟡
Unified citizen portal across agencies; component library not publicly documented
508 Compliant
🟢
E-Mongolia 3.0 (May 2023) increased accessibility for persons with disabilities. Open Government Partnership accessibility commitment. Standard MNS 6984:2022
Storybook / Figma
🔴
Platform documentation; digital service delivery standards
NL Design System (NLDS) - collaborative project for government organizations to work on accessible, inclusive, user-friendly components. Multiple formats: CSS, React, Web Components, Twig
Underpinning Technology
Multi-framework
Components available in CSS, React, Web Components, Twig. Theme Wizard for creating accessible house styles
Web Components
🟢
Full web components library, multiple implementation options
508 Compliant
🟢
Strong accessibility focus. "Hall of Fame" components guaranteed to meet accessibility requirements and tested in production. Do's/don'ts, WCAG criteria explanations, tips beyond WCAG
Storybook / Figma
🟢
Comprehensive documentation, shared insights on accessibility
National Web Design System (NWDS) Project - Workshop July 18-19, 2025
Ministry of Communications, Innovation & Digital Economy partnered with Aig-Imoukhuede Foundation to standardize design and functionality of public sector websites. Naija Design System (NDS) created by Druids Alpha team provides shared reusable visual design principles, styles, UI components, and patterns for federal government digital products
Underpinning Technology
Web-based
Standardizing government websites for accessible, inclusive, and efficient digital government. National Digital Economy and e-Governance Bill 2025 mandates digital transformation across public institutions
Web Components
🟡
Design system under development, creating consistent design language across inconsistent federal government websites and applications
508 Compliant
🟡
Accessibility and inclusivity are key aims of standardization initiative. Specific compliance standards being developed
Storybook / Figma
🔴
Workshop-based development with digital experts, designers and key public service stakeholders shaping system
Designsystemet - shared toolbox of foundational UI components, guidelines, and patterns. Recognized as digital public good by Digital Public Goods Alliance (DPGA). Used by 70+ agencies
Underpinning Technology
React & Figma
Integrated into Altinn Studio, supports theming for different visual identities
Web Components
🟢
React components, can be combined in various ways
508 Compliant
🟢
Designed for accessible, consistent, and user-friendly services. Meets accessibility standards
Peruvian State Digital Platform - single digital contact point based on simple, consistent, intuitive experience. Secretariat of Government and Digital Transformation provides guidelines for designing citizen-centric digital services
Underpinning Technology
Web-based
Multidisciplinary team for content creation, digital service creation, institutional page migration. Emphasis on accessibility, usability, standardization, scalability
Web Components
🟡
Guidelines for designing digital services, writing simple content
508 Compliant
🟢
Digital services designed with accessibility criteria. Recognized as trailblazer in Latin America for citizen-oriented government communication
Storybook / Figma
🔴
Platform guides and documentation for service design
E-Governance Act 2025 (R.A. 12254) - eGov PH Super App
E-Governance Act signed September 5, 2025, sets Philippines on path to fully digital government. eGov PH mobile app integrates 1,000+ government systems. Won E-Governance Project of the Year at GovMedia Awards 2025. DICT Circular HRA-001 s. 2025 mandates standards-based approach to Information Systems Strategic Planning (ISSP)
Underpinning Technology
Standards-based framework
Citizen-centric design thinking and data-driven decision-making. Interoperability, security, and responsiveness to public needs. Standard ISSP template ensures ICT projects designed for simplicity, efficiency and citizen empowerment
Web Components
🟡
eGov PH super app consolidates services. Component library details not publicly available. Focus on unified service delivery
508 Compliant
🟢
Accessibility for persons with disabilities, senior citizens, and those in remote areas. Alternate channels for people with limited internet access. Services more transparent and accessible
Gov.pl Design System - portal specification with rules for designing websites including CSS definitions, typography, colors, element arrangement. Ready-made components with source code available
Underpinning Technology
Web-based
Benchmarked against UK, Estonia, Ukraine, Denmark systems and consulted with Apple and Microsoft for standards alignment
Web Components
🟡
Components available with source code for download
508 Compliant
🟢
Good practices in creating accessible websites and applications. Supports mObywatel (mobile government services) and e-dowód (digital ID)
Storybook / Figma
🔴
Design System website with downloadable components
Ágora Design System - tool and accelerator for new generation of digital public services on gov.pt. Provides design and development standards and elements. For access to Figma repository, contact designsystem@ticapp.gov.pt with entity name and implementation scope
Underpinning Technology
ReactJS
Ágora library with pre-developed components available in Ágora Design System storybook. Supports federated model of services centered on citizens and businesses
Web Components
🟢
Components available in Storybook
508 Compliant
🟢
Focus on common, simple, and accessible experience for all citizens and businesses
Storybook / Figma
🟢
Storybook available for ReactJS. Figma repository with all designed components (restricted access - priority to Central Administration entities per Decree-Law No. 49/2024, followed by Municipalities and Parishes)
IremboGov provides access to 247 services from 38 government institutions including civil registration, passports, health, education, taxation, land management. Launched 2015, became backbone of Rwanda's digital transformation. Birth certificate applications grew 128% (335,730 in 2020 to 765,759 in 2024)
Underpinning Technology
Web-based
Redesigned interface in January 2025 - simpler, more intuitive. Enhanced account security with direct identity verification. Business account support using TIN for direct access to business-specific government services
Web Components
🟡
Platform provides unified digital services, technical component library not publicly documented
508 Compliant
🟡
Focus on accessibility and user experience. Platform used by millions. Specific WCAG compliance not publicly detailed
Storybook / Figma
🔴
Rwanda's digital platform model exported to Chad, Eswatini, Guinea, Kenya since 2018. 18+ cooperation agreements, 7,600+ officials from 70 countries hosted
Digital Government Strategy 2025-2030 - Vision 2030
Unified Design System at heart of digital transformation aligned with Vision 2030. Digital Government Authority (DGA) integrates accessibility into Unified Design System. 98% of public services digitized by end of 2022, remaining 2% targeted for 2025. Goal: Position Saudi Arabia among top 3 globally in digital government maturity
Underpinning Technology
Unified Design System
Accessibility features include font size, color contrast for dyslexia and color blindness, standards for users with disabilities. National framework and DXMI score provide foundation for consistency and accessibility
Web Components
🟡
Unified Design System provides consistent components across government services. Nafath and Absher platforms unify services across ministries. Technical implementation details not publicly available
508 Compliant
🟢
Accessibility integrated into Unified Design System. Addressing color contrast, font size, and disability standards. Services designed for seamless, citizen-centric, efficient digital experiences
Storybook / Figma
🔴
Unified Design System saves 20% in UX effort. Digital transformation framework with standards for government digital services
Scottish Government Design System for Scottish Government and other Scottish public sector bodies. Live examples with guidance
Underpinning Technology
N/A
Accessible styles, components and patterns
Web Components
🟢
Components available via npm
508 Compliant
🟢
Accessibility best practices built in by default. Websites built with this system have ~12x fewer accessibility issues (Oct 2024 testing). Accessibility statement reviewed March 2024
Singapore Government Design System (SGDS) - open-source, comprehensive collection of components, patterns and templates. Developed to create fast, accessible and mobile-friendly digital services
Underpinning Technology
Frontend framework
Styling libraries and reusable front-end components
Web Components
🟢
Pre-built accessible components that can be reused or customized. All checked for accessibility standards
508 Compliant
🟢
Components are perceivable, operable, understandable, and robust. Comply with WCAG standards out-of-the-box
MyMzansi platform consolidating all government services into single digital platform. Phase 1 (March 2025-Feb 2027) includes unified service portal, online authentication, digital payments. Zero-rated www.gov.za website ensures free access
Underpinning Technology
Web-based
120 e-services digitized on eservices.gov.za. Digital transformation creating world-class digital platform for citizen access to government information and services
Web Components
🟡
Government services platform, component library availability unclear
508 Compliant
🟡
Digital transformation emphasis on accessibility, specific compliance standards not publicly detailed
Storybook / Figma
🔴
MyMzansi platform documentation and gov.za service portal
Korea Republic Design System for all government websites. Built-in accessibility meeting KWCAG 2.1 (Korean Web Content Accessibility Guidelines 2.1). Fines up to ₩30 million for non-compliance. Government24 platform provides 1,500+ services with 90.6% usage rate
Underpinning Technology
Web-based
Standardized design system ensuring consistency across all government digital services. Government24 centralizes citizen services
Web Components
🟡
KRDS components for government websites, public source code availability unclear
508 Compliant
🟢
KWCAG 2.1 (Korean Web Content Accessibility Guidelines 2.1) required for all government websites. Accessibility Improvement Act enforced with penalties for non-compliance
Storybook / Figma
🔴
Government24 platform and KRDS guidelines for government agencies
Confederation Web Guidelines (admin.ch styleguide) - design specifications for Swiss Federal Administration on the Internet. Binding for all websites within admin.ch domain
Underpinning Technology
HTML/CSS/JavaScript
Standard HTML code (as of 2013) with CSS and JavaScript style sheets. Can be used for apps and other digital channels
Web Components
🟢
Templates and elements available for direct use by developer teams
508 Compliant
🟡
Three element categories: Corporate Design (mandatory), Fixed Elements (position/design fixed if used), Recommended Elements (adaptable)
Ministry of Digital Affairs (MODA) established to create people-oriented digital services. Public Digital Innovation Space (PDIS) uses design thinking and co-creation to develop citizen-centric digital government services. Focus on digital infrastructure, talent development, and inclusive digital society
Underpinning Technology
Web-based
Design thinking and co-creation methodologies for digital service development. Emphasis on user experience and accessibility
Web Components
🟡
Digital government services platform, component library availability unclear
508 Compliant
🟡
Focus on inclusive digital services, specific accessibility standards not publicly detailed
Storybook / Figma
🔴
MODA digital government platform and PDIS design thinking resources
Digital Government Development Agency (DGA) develops standards, guidelines and criteria for digital government. Government Website Standard v3.0 and Government Mobile Application Standard v1.0 published
Underpinning Technology
Web standards / guidelines
Standards portal at standard.dga.or.th; agencies apply standards alongside WCAG 2.1
Web Components
🟡
Website and mobile application standards; component specifics in Thai-language documentation
508 Compliant
🟢
Standards reference WCAG 2.1 for website accessibility improvements
Storybook / Figma
🔴
Standards documentation at standard.dga.or.th; GitHub organization DGA-Thailand
TongaPass / e-Government Portal - Launched May 29, 2025
Government of Tonga launched a new e-government portal, the TongaPass digital ID, and an API integration platform. Built on the Modular Open-Source Identity Platform (MOSIP). Part of the World Bank-supported Tonga Digital Government Support Project
Underpinning Technology
MOSIP-based
Secure, interoperable digital identity enabling access to healthcare, social benefits, and e-governance applications
Web Components
🟡
e-Government portal and API platform; component library not publicly documented
508 Compliant
🟡
Human-centred design emphasis; specific accessibility standards not publicly detailed
Citizen-centric GovTech approach providing digital-by-design services coordinated across government with two-way citizen engagement. 138 projects grouped into: digital transformation of public administration, digital economy development, cybersecurity and trust-building, digital infrastructure expansion
Underpinning Technology
Digital-by-design
E-Houwiya digital identity system for financial inclusion and secure online transactions - simple, fast, secure online identity verification integrated across digital services. Future unified national vision 2026-2030 prioritizes user experience
Web Components
🟡
Digital transformation requires re-engineering administrative procedures. Component library availability unclear
508 Compliant
🟡
Emphasis on citizen-centric services and user experience. Specific WCAG compliance standards not publicly detailed
Storybook / Figma
🔴
E-Houwiya digital identity platform and national digital transformation roadmap
Diia - app with access to citizen's digital documents and government services. Official open source site. iOS, Android, and Backend repos available. Design by Fedoriv received RedDot international award
UAE Design System presents manual for federal government entities to plan and arrange content on websites with simplicity and creativity. Available as @aegov/design-system on NPM. Ever-evolving system with UAsk AI conversation capability. Maintained by Telecommunications and Digital Government Regulatory Authority
Underpinning Technology
TailwindCSS
Built with TailwindCSS standards and components. Pre-tested components, blocks and patterns for consistent, optimized, accessible websites. Design language system continuously improves with web needs
Web Components
🟢
Set of pre-tested components, blocks and patterns. Helps build websites faster with consistent UI adhering to accessibility principles
508 Compliant
🟢
Adheres to WCAG 2.2 guidelines. Creates digital experiences accessible to everyone including those with visual, auditory, cognitive, and motor impairments
Storybook / Figma
🟢
Available on GitHub with full documentation at designsystem.gov.ae. Recent update: September 27, 2025
GOV.UK Design System - GOV.UK Frontend contains code for building user interfaces for government platforms and services. Extensive support with styles, components, and patterns
Underpinning Technology
HTML/CSS/JavaScript
Reusable, accessible components for forms, navigation, panels, tables and more
Web Components
🟢
Full component library, community projects available at X-GOVUK
508 Compliant
🟢
Fully compliant with WCAG 2.2 AA standard. Last audited July 2024 by Digital Accessibility Centre. Using Frontend helps services meet WCAG 2.2 Level AA
Storybook / Figma
🟡
Automated tests with @axe-core/puppeteer and html-validate. Template for accessibility test findings available
DWP Design System - one place for service teams to find and share the styles, components and patterns for designing DWP services. Extends the GOV.UK Design System
Underpinning Technology
GOV.UK Frontend (HTML/CSS/JS)
DWP-specific extensions on top of GOV.UK Frontend
Web Components
🟢
Components and patterns available, built on GOV.UK Frontend
508 Compliant
🟢
Built on the GOV.UK Frontend WCAG 2.2 AA foundation
HMRC Design Patterns - hmrc-frontend contains code and documentation for HMRC-specific patterns used together with GOV.UK Frontend. Available as hmrc-frontend on npm
Underpinning Technology
GOV.UK Frontend (HTML/CSS/JS, Nunjucks)
HMRC patterns not yet in the GOV.UK Design System
Web Components
🟢
HMRC Frontend components (account header, banner, etc.) on top of GOV.UK Frontend
508 Compliant
🟢
Built on GOV.UK Frontend (WCAG 2.2 AA)
Storybook / Figma
🔴
Pattern documentation at design.tax.service.gov.uk
Home Office Design System - extends the GOV.UK Design System with Home Office-specific patterns, components and styles. Part of the Home Office User-Centred Design Manual
Underpinning Technology
GOV.UK Frontend (HTML/CSS/JS)
Extends the GOV.UK Design System
Web Components
🟢
Patterns, components and styles built on GOV.UK Frontend
508 Compliant
🟢
Accessibility standard closely aligns with WCAG 2.2 Level AA
Storybook / Figma
🟡
Accessibility resources and design manual; open contribution via GitHub working group
Intelligence Community Design System (ICDS) - joint project led by MI6 with GCHQ, MI5 and HMGCC. Enables building usable, consistent and accessible apps and services across the UK Intelligence Community
Underpinning Technology
Stencil.js / Web Components
UI Kit built with Stencil.js for seamless integration across React, Vue, Angular and other frameworks
Web Components
🟢
Framework-agnostic web components built with Stencil.js
508 Compliant
🟢
Focus on accessible apps and services with dedicated accessibility guidance
MOD.UK Design System - guidance and tools for building high-quality services within the UK Ministry of Defence that meet the Defence Digital service standards. Open source
Underpinning Technology
React / Web Components
Open source, built to Defence Digital service standards
MOJ Design System - styles, components and patterns to design, build and deliver accessible and consistent MoJ services. Available as @ministryofjustice/frontend on npm and used together with GOV.UK Frontend
Underpinning Technology
GOV.UK Frontend (HTML/CSS/JS, Nunjucks)
MOJ Frontend extends GOV.UK Frontend with Nunjucks macros
Web Components
🟢
MOJ Frontend components (Nunjucks macros) on top of GOV.UK Frontend
508 Compliant
🟢
Built on GOV.UK Frontend (WCAG 2.2 AA); accessibility-focused
Storybook / Figma
🔴
Pattern Library documentation at design-patterns.service.justice.gov.uk
NICE Design System (NDS) - pattern library, front-end toolkit and guidelines for rapidly building modern, accessible digital services consistent with the National Institute for Health and Care Excellence brand
Underpinning Technology
SCSS / JS front-end toolkit
Reusable patterns, documentation and guidelines for rapid product development
Web Components
🟢
Front-end toolkit with reusable components
508 Compliant
🟢
Focus on consistent, accessible digital services across NICE
Storybook / Figma
🟡
Documentation site with foundations, components and patterns
ONS Design System - components and patterns for ONS digital services. Nunjucks macros and templates available from npm, with built CSS and JS available from the ONS CDN
Underpinning Technology
Nunjucks / HTML/CSS/JS
Macros tested in Node; interaction tests run in-browser with Puppeteer. A Svelte port of components also exists
Web Components
🟢
Component library with Nunjucks macros
508 Compliant
🟢
Accessibility-focused components for ONS services
Storybook / Figma
🔴
Design system documentation at service-manual.ons.gov.uk
The National Archives Design System - styles, components and patterns to design TNA platforms and services. Code is public and freely available under an MIT license
Underpinning Technology
HTML/CSS/JS
Reusable, accessible components for forms, navigation, panels, tables and more
Web Components
🟢
Reusable component library, MIT licensed
508 Compliant
🟢
Accessible components to keep services consistent with The National Archives
Storybook / Figma
🔴
Documentation at design-system.nationalarchives.gov.uk
U.S. Web Design System (USWDS) - comprehensive library of components and patterns. Helps federal government build fast, accessible, mobile-friendly websites
Underpinning Technology
HTML/CSS/JavaScript
Design components including colors, buttons, forms, tables, grid, typography, navigation tested in live services
Meets WCAG 2.0 AA and Section 508 standards. Tries to meet WCAG 2.1 requirements. Accessibility issues prioritized. One of five core design principles is "Embrace accessibility"
Storybook / Figma
🟢
USWDS Storybook (develop preview) available; comprehensive documentation at designsystem.digital.gov
Digital Agenda 2025 aims for digital accessibility of state services and priority private sectors. Ranks 1st in Latin America, 35th globally (UNDESA Digital Government Development index). Only LAC representative in Digital Nations group
Underpinning Technology
Web-based
Digital platforms include ID.Uruguay (three-tiered security), Firma.gub.uy (cross-border digital signatures used in Uruguay, Argentina, Brazil, Paraguay)
Web Components
🟡
User-friendly, accessible design across platforms
508 Compliant
🟢
Digital Citizenship Strategy since 2020. Commitment to digital accessibility of services and information. Managed by AGESIC (Agency for Electronic Government and Information and Knowledge Society)
Vietnam Government Design System (VGDS) - unofficial design system collaboratively built by Vietnamese designers and developers to enhance digital services. Related initiative: Design for Vietnam (DFV). Official government issued "Vietnam Digital Government Architecture Framework, Version 4.0" on March 25, 2025
Underpinning Technology
Framework 4.0
Digital Government Development Programme (Decision No. 2629/QD-TTg, Dec 1, 2025) - people and businesses at centre as key actors, beneficiaries and co-creators. Framework 4.0 lays out components and relationships of Vietnam's digital government system
Web Components
🟡
VGDS community-driven components. Official framework emphasizes inclusive, widespread digital services. Target: 80% of online public services at level 4 by 2025
508 Compliant
🟡
Focus on unified, accessible, user-friendly design. Digital services provided on multiple access means including mobile devices. Specific compliance standards not publicly detailed
Storybook / Figma
🔴
VGDS community resources at vgds.design and vgds.systems. Digital Government Architecture Framework 4.0 documentation
CMS Design System - open source design and front-end resources for Section 508 compliant, responsive, consistent websites. Extends USWDS with additional CSS and React components, utility classes and a grid framework. Powers HealthCare.gov and Medicare.gov (which has its own mgov-design-system). Available as @cmsgov/design-system on npm
CFPB Design System - open source resource to help CFPB teams produce consistent, effective, accessible products for the American public. Modular HTML, CSS and JavaScript patterns; a React/Storybook implementation is also available (earlier cfpb/design-manual is deprecated)
Underpinning Technology
HTML/CSS/JS
Modular patterns; React/Storybook implementation available
Web Components
🟢
Modular HTML/CSS/JS patterns plus React components
508 Compliant
🟢
Accessibility a core goal for products serving the American public
DHS Design System - DHS.gov was one of the first cabinet-level agency sites to fully adopt USWDS and serves as the template for other DHS USWDS websites. Maintains a Digital Style Guide of USWDS components
Underpinning Technology
USWDS-based
DHS USWDS theme accounts for USG and DHS requirements for public websites
Web Components
🟢
USWDS components via the DHS Digital Style Guide
508 Compliant
🟢
Section 508 commitment; all DHS sites tested for accessibility before launch
Storybook / Figma
🔴
Digital Style Guide and design system guidance at dhs.gov
VA Design System (VADS) - design guidelines and code for trustworthy, accessible, consistent digital services on VA.gov. component-library (web components + React bindings, published to npm) and documentation repo
Underpinning Technology
Web Components + React
Web components with React bindings, usable with any technology stack
Web Components
🟢
Web component library with React bindings, published to npm
508 Compliant
🟢
All components tested before admission; automated axe DevTools testing, keyboard and screen reader testing, zoom/reflow
Storybook / Figma
🟢
Complete Figma library of core components plus community shared libraries
Bureau of Indian Affairs design system uses U.S. Web Design System (USWDS) providing consistent usability, accessibility, editorial style across websites and digital services. 40+ accessible, mobile-friendly components. Three main guiding principles driven by USWDS and enacted U.S. policies
Underpinning Technology
USWDS-based
Built on federal U.S. Web Design System foundation. Indian Affairs follows USWDS principles when creating content for public-facing website. Serves BIA and tribal nations with standardized, accessible digital infrastructure
Web Components
🟢
40+ accessible, mobile-friendly USWDS components available. Consistent component library ensures usability across Indian Affairs digital services and tribal government resources
508 Compliant
🟢
Section 508 compliance and accessibility built-in. Indian Affairs strives to ensure people with disabilities have access to same services and content available to people without disabilities, including through information technology
Storybook / Figma
🔴
Web standards documentation at bia.gov/webstandards. Design system guidance aligned with federal USWDS standards and tribal sovereignty principles
v4.0.70 - Active community-maintained development (June 2025)
NASA Web Design System (NASAWDS) - design system for fast, accessible, mobile-friendly NASA websites. Applies NASA theming (colors, typography, meatball favicon) on top of USWDS. Automated GitHub Actions workflow updates to latest USWDS every 15 days. Note: the original nasa/nasawds-site docs repo was archived Feb 2020; active development continues at bruffridge/nasawds
Underpinning Technology
USWDS-based
NASA theme on top of USWDS
Web Components
🟢
UI components based on USWDS with NASA theming
508 Compliant
🟢
Section 508 compliant via the USWDS foundation
Storybook / Figma
🔴
Documentation at nasa.github.io/nasawds-site (legacy docs site, still accessible)
NSW Design System - toolkit of styles, patterns, standards and guidance for creating distinctly NSW digital products and services. Helps create unified, trusted, inclusive, audience-centered digital experiences
Underpinning Technology
HTML/CSS/React
Available via npm Package Manager or JSDelivr CDN. UI kits in Figma, HTML, and React
Web Components
🟢
Reusable design, HTML and CSS UI components
508 Compliant
🟢
Consistent, user-focused customer experiences with accessibility built-in
Storybook / Figma
🟢
Figma UI kits available via NSW Design System documentation, documented components
Queensland Government Design System (QGDS) - resilient, pre-tested code implementations to build consistent, user-centric digital services. Three implementation pathways: QGDS Vanilla, QGDS Bootstrap 5, and web components
Underpinning Technology
Multi-framework (Vanilla / Bootstrap 5 / Web Components)
No mandated framework; teams choose the pathway that fits. Queensland Government brand compliance out-of-the-box
Web Components
🟢
Multiple implementation frameworks including web components
508 Compliant
🟢
Built-in accessibility (WCAG 2.2) and responsive behaviour out-of-the-box
Storybook / Figma
🟢
Figma UI Kit with ready-made components, patterns and templates
Website Design System (WDS) - provides agencies with base website from 50+ components built to internationally recognised standards. Increased accessibility as primary development reason. Contact: onlineaccessibility@sa.gov.au
Underpinning Technology
N/A
Base website system with 50+ components
Web Components
🟢
50+ components available
508 Compliant
🟢
Built to internationally recognised accessibility standards
Government of Alberta (GoA) Design System - shared components, examples, tokens and templates for building Government of Alberta services. Brings consistency across GoA websites and web applications. Legacy print branding: Corporate Identity Manual (PDF)
Underpinning Technology
Web Components (multi-framework)
Native web components supporting React and Angular. Published to npm as @abgov/web-components, @abgov/react-components, and @abgov/angular-components
Web Components
🟢
Native web components plus React and Angular component libraries
508 Compliant
🟢
Accessible, brand-compliant components and templates
Storybook / Figma
🟡
Component documentation, examples and design tokens at design.alberta.ca
Ripple Design System - digital design system of the Victorian Government, created 2018 for vic.gov.au and used on 50+ Victorian Government websites on the Single Digital Presence (SDP) platform. Maintained by the SDP team, Department of Government Services
Underpinning Technology
Nuxt / Vue.js
Frontend framework for the SDP platform; meets Brand Victoria guidelines
Web Components
🟢
Component library built with Nuxt and Vue.js
508 Compliant
🟢
Built to high standards for accessibility, SEO, security and performance
Storybook / Figma
🟢
Design system documentation at ripple.sdp.vic.gov.au
Design System of the Government of Mato Grosso do Sul (DS MS) - foundation for the State's digital transformation, unifying the appearance and functionality of digital public services. Aligned with the federal Padrão Digital de Governo
Underpinning Technology
Web-based
Reusable components for consistent state digital services
Web Components
🟢
Unified component library for state digital public services
508 Compliant
🟢
Simple, consistent and accessible experience for citizens
B.C. Design System - open source project to help developers and designers deliver consistent digital UX. Note: Development paused effective February 7, 2025 - libraries can still be used but no updates planned
Underpinning Technology
React/Figma
Design tokens (Figma, CSS, JavaScript variables), UI components in Figma and React. Licensed under Apache 2.0
Web Components
🟢
Components include Header, Footer, Buttons, Modals, Alerts, Callouts, Form elements, Dropdowns, Tags, Tooltips
508 Compliant
🟡
Accessibility information available, full compliance status unclear
No Public Source Code Found (downloadable Code Kit)
Active
GNB Design System - library of reusable UI components, a design kit, guidance and standards to help teams build consistent, scalable and accessible Government of New Brunswick digital experiences. Part of the Digital Service Standard. Bilingual (English/French) with built-in EN/FR error messaging
Underpinning Technology
HTML/CSS/JS
Code Kit ships CSS, JS, web fonts, images and a starter HTML page (individual component files plus a single bundle). 8px spacing grid; mobile-first 12-column flexbox grid with 5 responsive tiers
Web Components
🟢
Reusable UI component library available via the Code Kit
508 Compliant
🟢
Strives to meet WCAG 2.2 Level AA; components built with accessibility best practices in mind
Storybook / Figma
🟢
Design kit available alongside developer documentation at design-system.transformationnb.ca
Guide for creating accessible, user-focused digital products consistent with Ontario brand. Uses Drupal CMS with WYSIWYG editor. Modified Foundation 12-column nestable grid system
Underpinning Technology
Drupal-based
Modified Foundation grid system, photography guidelines, spacing classes
Web Components
🟡
Grid layouts, spacing utilities, design elements available
508 Compliant
🟢
Must meet WCAG 2.1 AA per AODA (Ontario Regulation 191/11). All public websites as of Jan 2021 must meet WCAG 2.1 AA. Includes alt text requirements, colour differentiation for accessibility
Storybook / Figma
🔴
Web content editing guide with accessibility requirements and design guidelines
Système de design gouvernemental (SDG) - mandatory foundations for designing accessible, performant and harmonized interfaces across Québec public digital services. Development toolkit (trousse) generates stylesheets, images and JavaScript
Underpinning Technology
Node.js / JavaScript toolkit
Complies with the government visual identification program (PIV) and aligned with Québec.ca
Web Components
🟢
Reusable components delivered via the development toolkit (trousse SDG)
508 Compliant
🟢
Accessibility is mandatory; coherent, user-friendly and adaptive (mobile) services
Yukon.ca Design System - makes websites and online services look like Yukon.ca. Maintained by the eServices for Citizens team. Anyone in government can propose a new style, component or design pattern
Underpinning Technology
Drupal / AEM-based
Template with base styles; common platform components include Adobe Experience Manager (AEM) and Drupal Web Forms
Web Components
🟢
Styles, components and design patterns available via the base template
508 Compliant
🟢
Consistent user experience is part of the digital service standards
KERN UX Standard - technology-independent, open-source design system for German public administration, from municipal to federal level. Initiated by Hamburg and Schleswig-Holstein in the spirit of "Einer für Alle" (One for All). GitHub mirrors and Web Components PoC
Underpinning Technology
HTML/CSS + framework adapters
Adapters for React, Angular, Vue, TYPO3, Blazor and Web Components
Web Components
🟢
Reusable components with multiple framework adapters including web components
508 Compliant
🟢
Accessibility "by design" following WCAG, EN 301 549 and BITV 2.0
Storybook / Figma
🟢
Pattern library and Figma resources; nationwide community platform
Built on USWDS foundation - Colorado Digital Guidelines & Design System. Living guidelines for cohesive, accessible, user-centered digital ecosystem. Colorado Digital Service in Governor's Office of IT
Underpinning Technology
USWDS-based
Cross-functional team using community-centered and outcomes-based approach. Four principles: inclusive design, transparent communication, performance optimization, continuous improvement
Web Components
🟢
Uses USWDS components as foundation
508 Compliant
🟢
Accessibility first - includes inclusive design, plain language, responsiveness, and functional accessibility. Data and people's real needs drive design
Storybook / Figma
🔴
Digital guidelines documentation, emphasis on simple and clear design
The CT.gov Digital Training Center is the resource for the official CT.gov design system & standards, content standards, accessibility standards, and training. Branding and design system carefully designed to be flexible and supportive of a broad number of uses while remaining true to the spirit of the state. State earned an 'A-' in the 2024 Digital State Survey
Underpinning Technology
Sitecore CMS
Enterprise content management system (Sitecore). Components are custom-built building blocks (Story, List, Multistep, Tile, Image, Video, Header, Link List) with code snippets; ready-to-use page templates built for efficiency by cloning and populating with content
Web Components
🟢
Component library tested for ease-of-use and accessibility, working across desktop, tablet, and mobile. Vendor development resources available
508 Compliant
🟢
WCAG 2.1 Level AA standards required. Universal Website Accessibility Policy enforces Level AA compliance as primary guideline for all state websites. Dedicated accessibility standards in the Digital Training Center
Storybook / Figma
🔴
Sitecore component gallery and templates in the Digital Training Center; no Storybook or Figma library published
Lighthouse is Delaware's state government website design system - a collection of reusable, accessibility-tested web components and templates (accordions, buttons, lists, form inputs, curated color palettes) with research-driven design and content guidance. Source code is freely available for anyone to use. Maintained by the Government Information Center (GIC)
Underpinning Technology
WordPress + HTML/CSS/JS
Integrates within WordPress and supports third-party implementations through available code files and documentation. New standardized branding debuted with the first Lighthouse website in January 2025
Web Components
🟢
Reusable, accessibility-tested components and templates for consistent layouts across platforms. Go DE platform features 100+ digital services with integrated payment processing (Pay with Go DE) and resident portal secured by myDelaware identity system
508 Compliant
🟢
All Lighthouse elements and components meet or exceed WCAG 2.1 AA. Color palettes selected to avoid contrast and other visual accessibility issues
Storybook / Figma
🟢
Full Lighthouse documentation available on the Storybook page, with HTML shared through Storybook
Official design system for State of Georgia. Powers 80+ GovHub sites (Drupal-based multi-site platform). Provides ready-to-use code, reusable components, layout templates. Won StateScoop 50 Award for State IT Innovation 2023
Underpinning Technology
Drupal-based
GovHub platform built on Drupal CMS with Orchard design system. Georgia Technology Authority (GTA) manages statewide technology infrastructure and digital services
Web Components
🟢
Reusable components and layout templates available to all state agencies. Common header/footer, navigation patterns, form elements ensure consistency across 80+ state websites
508 Compliant
🟢
Focus on WCAG 2.1 Level AA compliance. Accessibility built into design system components. Georgia committed to inclusive digital services for all residents
Storybook / Figma
🔴
Documentation and training provided to state agencies. Component library and guidelines available through GTA resources
Comprehensive template and style guide providing consistent look and feel across all State of Hawaii government websites. Design philosophy: COPE (Create Once, Publish Everywhere). Mobile-first responsive web design with content-first approach encouraging clean layouts, concise writing, intuitive web interfaces
Underpinning Technology
Drupal-based
State Template via Drupal developed with accessibility in mind, making state-offered platforms compliant with digital accessibility regulations and guidelines. myHawaii secure citizen identity platform enables single login for growing number of online government services
Web Components
🟢
Web style guide components ensure consistent user experience across state websites. State honored by Center for Digital Government as overall winner in 2025 Government Experience Awards. Office of Enterprise Technology Services manages digital infrastructure
508 Compliant
🟢
State Template built for accessibility compliance. WCAG 2.1 Level AA standards followed. Emphasis on responsive design, high contrast colors, accessible PDFs, and inclusive user experience for all residents
Storybook / Figma
🔴
Comprehensive web style guide documentation at styleguide.ehawaii.gov. Transform Hawaii Government initiative modernizing digital services statewide
Illinois Design Framework for State of Illinois websites delivers common components and design elements. Three site templates fully responsive and packed with features that passed security and accessibility compliance. DoIT (Department of Innovation & Technology) provides Template & Component Library
Underpinning Technology
Web-based
Standard page layout and navigation method throughout websites. Accessible Rich Internet Applications (ARIA) guidelines provide advanced techniques for making custom web components accessible
Web Components
🟢
Template & Component Library describes building blocks available to build out sites. Common components and design elements standardized across state agencies
508 Compliant
🟢
WCAG 2.1 AA standards required. Illinois Information Technology Accessibility Act (IITAA 2.1) updated June 24, 2024, requires all information technology comply with WCAG 2.1 AA for state and local governments
Storybook / Figma
🔴
Web Content Management System documentation. IITAA Implementation Guidelines for web-based information and applications
State of Iowa's enterprise platform for Digital Transformation helps all state agencies create content for constituents in consistent way. Focus on accessibility, plain language, communication, standard design system, and content types. Creates unified experience for content creators and constituents
Underpinning Technology
Drupal CMS
DX Platform built on Drupal. Marketing Platform also available for organizations needing unique content model and design system. Drupal 11 update completed June 2025 for DX sites
Web Components
🟢
Standard design system and content types across platform. Regular enhancements and updates throughout 2025 to design, features, and content management capabilities
508 Compliant
🟢
Accessibility as core focus area of platform. Plain language and communication standards ensure consistent, accessible experience
Storybook / Figma
🔴
DX Training site with comprehensive resources. Enterprise platform documentation and enhancement tracking
Kentucky's Enterprise Web Design Template uses two CSS templates: "standards" CSS enforcing compliance with 7020 Design Standards and scheme CSS with default Blue scheme. Template made up of components with specific functions, styles and requirements, with varying allowances for creativity
Underpinning Technology
CSS-based templates
Traditional CSS template-based system rather than modern web components. Kentucky Information Technology Standards (KITS) document updated December 2, 2025, covering technology standards for state agencies
Web Components
🟡
Component-based templates available through EWDT. Each component has specific function, style and requirements. Not modern web component architecture but provides consistent building blocks
508 Compliant
🟢
Design standards compliance enforced through standards CSS. Kentucky follows accessibility requirements for state government websites
Storybook / Figma
🔴
Web toolkit documentation at webtoolkit.ky.gov. KITS (Kentucky Information Technology Standards) provides comprehensive technology standards
Pelican Design System developed by Office of Technology Services (OTS). UX/UI designers work daily with state agencies to develop digital products to improve lives of Louisiana residents. Statewide digital design system mandated for all new applications and major redesigns
Underpinning Technology
Web-based
OTS Strategic Plan 2026-2031 requires all new applications and major redesigns follow statewide digital design system. Standardized components, layouts, and patterns support usability, accessibility, and consistency across state services
Web Components
🟢
Design system provides standardized components, layouts, and patterns. All interfaces tested for accessibility, mobile responsiveness, and conformance to standards
508 Compliant
🟢
WCAG 2.1 AA standards required. All new applications must meet Web Content Accessibility Guidelines 2.1 AA before Federal enforcement date April 24, 2026
Storybook / Figma
🔴
OTS Strategic Plan documentation. Louisiana Digital Government Summit 2025 co-hosted with Government Technology
Maryland Web Design System built as open source library of accessible and consistent components. Built using elements from federal U.S. Web Design System (USWDS). Makes it easier and faster for agencies and vendor partners to develop and maintain websites with consistent "Maryland brand" with accessibility built in
Underpinning Technology
USWDS-based
Based on federal U.S. Web Design System. Ever-evolving system. Maryland Digital Playbook provides guidance, standards, and tools to help state agencies build consistent, intuitive, user-centered experiences
Web Components
🟢
Open source component library. Maryland Digital Playbook for writing, designing, and building digital services. Reusable components for state agencies
508 Compliant
🟢
Accessibility built into component library. DoIT 2025 IT Master Plan (FY 2026-2028) reshapes how state builds, manages and delivers technology services. Focus on cohesive, secure, accessible online interactions
Storybook / Figma
🔴
Maryland Digital Playbook documentation. Department of Information Technology oversees system development
SOM IT Technical Standard 1360.00.11 SOM Digital Standards for Websites and Applications effective May 27, 2025. Ensures visitors have similar experience throughout all state applications, portals, and agency sites. eMichigan Office led by Suzanne Pauley responsible for vision, development, and design of Michigan's digital imprint
Underpinning Technology
Web-based
Dana Justice leads Digital Accessibility Testing Team reviewing systems against SOM Digital Standards. Web Content Management System (WCMS) Support Team maintains Michigan.gov. State recognized for strengthening digital services and expanding digital accessibility
Web Components
🟢
Statewide digital design system provides standardized components. State placed in top five for digital experience in Government Experience Awards 2025
508 Compliant
🟢
WCAG 2.1 Level AA standards adopted. All SOM Digital Content must conform to WCAG 2.1 AA minimum. Content must meet standards before Federal enforcement date April 24, 2026
Storybook / Figma
🔴
SOM Digital Standards documentation. Department of Technology, Management and Budget (DTMB) eMichigan Office manages standards
Minnesota Department of Transportation (MnDOT) Design System incorporates latest design standards and best practices from across Minnesota government. Minnesota State Digital Accessibility Standard updated July 1, 2024 to incorporate WCAG 2.1 Level AA
Underpinning Technology
Web-based
Inclusive Design principles integrated throughout design system. Minnesota state law and Digital Accessibility Standard require all government agencies meet WCAG 2.1 at AA level for digital content
Web Components
🟢
Design system components available. Standard applies to executive branch state agencies. Legislative, judicial, and non-executive organizations encouraged to follow
508 Compliant
🟢
WCAG 2.1 Level AA required. Minnesota State Digital Accessibility Standard effective July 1, 2024. Federal ADA Title II requirements: entities 50,000+ comply by April 26, 2026; under 50,000 by April 26, 2027
Storybook / Figma
🔴
MnDOT design system documentation. Minnesota IT Services (MNIT) manages accessibility standards and policies
Grove (New Jersey Design System) - extension of the U.S. Web Design System with a New Jersey-specific theme and components for State of New Jersey digital properties and services. Documentation at grove.nj.gov. Goal to produce a standardized, recognizable web presence throughout the Executive Branch complying with the 21st Century Integrated Digital Experience Act
Underpinning Technology
USWDS-based
Based on the federal U.S. Web Design System. Maintained by the NJ Office of Innovation. Creates a uniform presence so agencies present a consistent visual identity for NJ residents
Web Components
🟢
Extension of USWDS components with a New Jersey-specific theme. Available on GitHub with documentation at grove.nj.gov
508 Compliant
🟢
Built on the USWDS accessibility foundation. Compliance with federal 21st Century IDEA requirements. Office of Innovation leads digital services design and development
Nebraska.gov managed by Tyler Technologies uses Tyler Forge design system. Forge is framework-agnostic Web Component library implementing Tyler Forge design language. Before launch, agencies trained to edit content through Tyler's custom CMS (Meadowlark). Nebraska citizens saved 86 million hours in 2024 through digital services
Underpinning Technology
Tyler Forge/Web Components
Tyler Forge open-source design system provides unified design principles, components, patterns, and guidelines ensuring consistency, accessibility, and usability. Built using Web Components - reusable, encapsulated HTML tags. Latest version 3.8.1 actively maintained in 2025
Web Components
🟢
Full web components library available on GitHub (tyler-technologies-oss/forge) and NPM (@tylertech/forge). Components work across frameworks. Comprehensive documentation at tylerforge.design
508 Compliant
🟢
Tyler Forge emphasizes accessibility throughout design system. Components built to be inclusive and meet WCAG standards. 279 projects completed in 2024 with $14.2M cost avoidance
Storybook / Figma
🟢
Complete documentation at tylerforge.design. Open source on GitHub. NPM package available for integration. Tyler Technologies provides comprehensive support and training
New York State Design System (NYSDS) - helps state agencies build fast, accessible, mobile-friendly applications and sites. Reusable components, patterns, and clear guidance
Underpinning Technology
LitElement/Web Components
Components built with Lit for performance and flexibility. CSS framework with design tokens and utility classes. Customizable agency-specific themes
Figma libraries organized into Components and Assets. Design and code libraries synchronized for 1:1 parity between design elements and code components
NCDIT has developed and supported the Drupal-based Digital Commons platform in-house since 2016. Provides a consistent look and user experience across state agency, board and commission websites. Won a State Government Experience Award (2023)
Underpinning Technology
Drupal CMS
Secure, accessible and mobile-friendly platform shared across NC state organizations
Web Components
🟢
Standardized components and templates via the Digital Commons platform
508 Compliant
🟢
State of North Carolina Digital Accessibility and Usability Standard; accessible and mobile-friendly by default
Storybook / Figma
🔴
Digital Commons documentation and State IT Standards at it.nc.gov
The InnovateOhio Platform provides integrated, scalable capabilities so state agencies can be more customer-centric and data-driven. A user experience digital toolkit offers a universal framework for a seamless experience across Ohio agency websites
Underpinning Technology
Ohio.gov style / Bootstrap 3.4.1
UX digital toolkit based on the overarching Ohio.gov style and Bootstrap
Web Components
🟢
Universal UX framework and components for Ohio agency websites
508 Compliant
🟢
Focus on consistent, accessible user experiences across Ohio agency sites
Keystone Design System - provides principles, guidance, and code for accessible, mobile-friendly websites for Commonwealth of Pennsylvania. Named after Pennsylvania's role as the Keystone State
Underpinning Technology
Grid-based (12 columns)
Design tokens as fundamental building blocks including colors, typography, spacing
Web Components
🟡
Components available including accordions, breadcrumbs, buttons, cards. Source code availability unclear
508 Compliant
🟢
Designed to help build accessible digital services
Storybook / Figma
🔴
Full component documentation and foundations (typography, design tokens) available on site
State of Rhode Island modernized its network of 100+ governmental agencies by developing bespoke design system providing tools to deliver timely and informative content. Creating exceptional, citizen-centered resource exceeding technical and design expectations of agencies and residents
Underpinning Technology
Web-based
Division of Enterprise Technology Strategy and Services (ETSS) led by Chief Digital Officer includes Office of Digital Excellence. Redesigned platforms launched January 2025 for boating, agriculture, pesticide licensing, wetlands, water quality, and septic systems
Web Components
🟢
Design system provides standardized components across 100+ agencies. Digital Government Summit 2025 unites public and private sector leadership on leveraging technology and data
508 Compliant
🟢
Focus on accessibility and user experience. AI Task Force and Center of Excellence for AI and Data established under Executive Order 24-06. Data Center of Excellence within ETSS
Storybook / Figma
🔴
Office of Digital Excellence manages design system implementation. Work recognized for exceptional citizen-centered digital services
Commonwealth Design System houses Commonwealth Banner (mandatory for all agency websites) to denote official Commonwealth of Virginia sites. Website components, templates, and utilities available for agency web developers. Native Sketch, Figma, and Adobe XD design files for agency designers
Underpinning Technology
Web-based
Components built to be accessible and responsive across wide variety of devices. Use cases, code, and accessibility guidance provided for components. VITA-designed principles and guidance for COV web systems development
Web Components
🟢
Optional components and utilities with accessibility guidance. Commonwealth Banner with color variants and code generation. Components include buttons, forms, navigation, layout elements
508 Compliant
🟢
Components built with accessibility standards. WEB-06 requires agencies follow VITA-designed principles and guidance. Focus on accessible and responsive design
Storybook / Figma
🟢
Native Figma, Sketch, and Adobe XD design files available at developer.virginia.gov. Web Standards Quick Start Reference Guide available
Texas Department of Information Resources (DIR) launched the Texas Design System, a content library of website components to help state agencies build accessible, user-friendly, consistent websites. Mandated by House Bill 5195 (89R). Provides 37 ready-to-use components plus templates and implementation guidance
Utah Design System - reusable UI components, resources and guiding principles to craft consistent, accessible, secure and scalable experiences for State of Utah websites and applications. Maintained by the Utah Design System Team (UtahDTS)
Underpinning Technology
React / CSS
CSS and code examples for components, patterns and templates; React developer assets
Web Components
🟢
Reusable components, patterns and templates with React developer assets
508 Compliant
🟢
Strong accessibility commitment with components following WCAG guidance
Storybook / Figma
🟡
Component library and developer/designer resources at designsystem.utah.gov
Director of Web Services Maggie Wilson leads digital strategy, accessibility, and user experience across state websites. Oversees statewide web template and design system. State Template via Drupal developed with accessibility in mind, making platforms compliant with digital accessibility regulations
Underpinning Technology
Drupal CMS
State of Vermont Web Template ensures consistency and accessibility compliance. Chief Marketing Office manages design system. Universal Digital Accessibility project established with Digital Accessibility Steering Committee leading compliance efforts for April 2026 deadline
Web Components
🟢
Drupal-based template provides reusable components. Sans-serif fonts (Open Sans, Lato) for body text. Responsive design automatically re-stacks and resizes content for all devices. High contrast color combinations required
508 Compliant
🟢
WCAG 2.1 AA Compliance required by April 24, 2026. All digital content must meet updated ADA Title II requirements. State Template built for accessibility. All PDFs must pass Adobe Acrobat Pro Accessibility Checker
Storybook / Figma
🔴
Comprehensive web design system documentation at cmo.vermont.gov/web-design-system. Universal Digital Accessibility resources and training materials available
Chicago Design System (CDS) - public visual identity of City of Chicago. Inclusive, equitable system for City communication. Code built upon US Web Design System with Chicago visual identity and additional UI components. Open source, public domain (CC0 1.0)
Underpinning Technology
USWDS-based
Visual brand identity guide, web UI pattern library, methods/plays for human-centered design
Web Components
🟢
Built on USWDS with City of Chicago extensions
508 Compliant
🟢
Digital Services Team champions accessibility across City digital products in partnership with Mayor's Office for People with Disabilities
Storybook / Figma
🔴
Pattern library and methods documentation at design.chicago.gov
Style Guide documents frameworks, typography, web components, and best practices used by City of Los Angeles Information Technology Agency to build websites. Standards provide visitors consistent branding and good user experience for effective information exchange
Underpinning Technology
Web-based
Living document expected to change over time. Browse individual web components, seals, and logos used on City websites. ITA leads development of citywide applications like RAMPLA and MyLA311
Web Components
🟢
Web components documented in style guide. Frameworks, typography, and component patterns standardized across City of Los Angeles websites
508 Compliant
🟢
WCAG 2.0 Level A & AA compliance required. All City of Los Angeles websites required to follow WCAG 2.0 standards with no errors in either Level A or AA
Storybook / Figma
🔴
Comprehensive style guide at styleguide.lacity.gov. Information Technology Agency provides documentation and best practices
Official design system of NYC government - a set of rules and reusable parts for public-facing digital experiences on city-owned domains (nyc.gov, cityofnewyork.us). Based on user needs and accessible by design. ACCESS NYC is a related open-source pattern library
Underpinning Technology
Web-based
Reusable components, patterns and brand guidance for NYC government digital products
Web Components
🟢
Component library documented at designsystem.nyc.gov
508 Compliant
🟢
Every component tested to meet WCAG 2.2 Level AA and reviewed with the city's Digital Accessibility Coordinator
Digital Standards - design, code, and content guidelines for City websites. Accessibility overview available
Underpinning Technology
Web-based
Sans serif typography for screen readability
Web Components
🟡
Components and guidelines available
508 Compliant
🟡
Partially conformant with WCAG 2.1 Level AA. Color combinations pass WCAG AA contrast ratios. Accessibility is shared responsibility among City employees and contractors
Storybook / Figma
🔴
Digital standards documentation with color palette, typography, menus, and layout guidelines
Maya design system created to advance accessibility and responsiveness across SF.gov. Available as Gitbook-based library for all city agencies to use for websites and apps. Karl CMS built on Wagtail open-source platform powers new SF.gov backend
Underpinning Technology
Wagtail CMS / Web-based
Digital and Data Services (DDS) team developed Karl CMS and Maya design system simultaneously. Font is clear, legible, ADA and Section 508 compliant. All vital information written at or below 5th grade reading level
Web Components
🟢
Maya design system provides components for visually compelling, responsive interfaces. Making it easier for agencies to develop accessible websites and applications with consistent City & County of San Francisco visual identity
508 Compliant
🟢
Federal accessibility and readability standards met. ADA and Section 508 compliance for people with disabilities. Equitable design requirements enforced since November 2021. All vital information translated by humans
Storybook / Figma
🔴
Design system documentation at design-system.sf.gov. Digital Services resources at digitalservices.sfgov.org. Government Technology recognized SF.gov redesign for accessibility and flexibility
Bristol City Council Design System with guides for layout, typography, colour. Pattern Library represents standard set of web components/patterns through user testing and accessibility testing
Underpinning Technology
Web-based
Meets Bristol City Council frontend coding guidelines
Web Components
🟢
Pattern library with tested components
508 Compliant
🟢
Accessibility testing conducted on patterns. Components designed for consistent, accessible experiences
Storybook / Figma
🔴
Design system at design.bristol.gov.uk, Pattern library at style.bristol.gov.uk
Hackney Design System - everything needed to build user interfaces for Hackney platforms and services. Includes lbh-frontend, framework starter kits, a prototype kit, and a WordPress theme
Underpinning Technology
HTML/CSS/JS
lbh-frontend component library with a prototype kit for rapid HTML prototyping
Web Components
🟢
Component library (lbh-frontend) with starter kits for different frameworks
Transport for West Midlands Design System - a collection of reusable HTML components to build services that adhere to TfWM design standards. Maintained by the Digital and Data team at West Midlands Combined Authority
Underpinning Technology
HTML/CSS/JS
Sketch used for design and prototyping; available on npm as wmn-design-system
Web Components
🟢
Reusable HTML components and a prototype kit
508 Compliant
🟢
Built to TfWM design standards with accessibility in mind
Storybook / Figma
🔴
Sketch-based design; documentation at designsystem.tfwm.org.uk
Note: Alberta, Canada (Corporate Identity Manual) has moved to Canada - Alberta under State / Regional, which now documents the Government of Alberta Design System.
About
A List of All Known Federal, State, & Municipal Government Design Systems