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).
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
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
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
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
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
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
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
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
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
🔴
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
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
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
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
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
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
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
CT.gov branding and design system carefully designed to be flexible and supportive of broad range of uses and applications. State earned 'A-' rating in 2024 Digital State Survey, placing Connecticut among top performing digital states
Underpinning Technology
Web-based
Template & Component Library provides building blocks for State of Connecticut websites. DoIT delivers common components and design elements. Three site templates fully responsive with security and accessibility compliance built-in
Web Components
🟢
Common components and design elements available. Standard page layout and navigation throughout websites. Component library for consistent structure
508 Compliant
🟢
WCAG 2.1 Level AA standards required. Universal Website Accessibility Policy enforces Level AA compliance as primary guideline for all state websites
Storybook / Figma
🔴
IT Strategic Plan 2025 for digital government services. Design system guidelines for headings, lists, and consistent structure
Lighthouse is Delaware's state government website design system offering accessibility compliance, research-driven UI improvements, and easier editing process for state agency WordPress websites. Government Information Center (GIC) creates websites and digital branding assets specifically tailored for State of Delaware entities
Underpinning Technology
WordPress-based
New branding debuted with first Lighthouse website January 2025. As agencies adopt Lighthouse for websites, they acquire new standardized branding. GIC delivers clear, accessible solutions making online services easy and seamless for First State citizens
Web Components
🟢
Lighthouse design system provides standardized components for WordPress. 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
🟢
Accessibility compliance built into Lighthouse design system. State aims to make 80% of government services available online with all websites inclusive and accessible. GEAR report 2025 outlines scaling digital government services
Storybook / Figma
🔴
GIC provides comprehensive website and digital branding services. Go DE portal preparing to deploy chatbots and AI tools, with digital signature workflows and document upload capabilities
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
NJ Web Design System (NJWDS) - extension of U.S. Web Design System with specific theme and components for State of New Jersey digital properties and services. Goal to produce standardized, recognizable web presence throughout Executive Branch complying with 21st Century Integrated Digital Experience Act
Underpinning Technology
USWDS-based
Based on federal U.S. Web Design System. Modernization follows Office of Information Technology (OIT) Web Presence and Web Content Guidelines. Creates uniform presence so agencies present consistent visual identity for NJ residents
Web Components
🟢
Extension of USWDS components with New Jersey-specific theme. Available on GitHub with documentation at innovation.nj.gov
508 Compliant
🟢
Built on USWDS accessibility foundation. Compliance with federal 21st Century IDEA requirements. Office of Innovation leads digital services design and development
Storybook / Figma
🔴
Documentation available at NJWDS components detail page. Director of Communications and Digital Services sets standards for state web presence
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
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
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
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