Loading 0%

Design System for Federal Government Websites

Design System for Federal Government Websites

The Design System presents a manual for federal government entities to plan and arrange content on their websites with simplicity and creativity. The system sets all visual design elements and guidelines required to optimise usability and user experience (UX) on federal government websites. It provides a set of pre-tested components, blocks and patterns that should be used to design and develop consistent, optimised and accessible websites.

Visit The Website Get Support


Inclusivity and Accessibility

At the heart of the design system lies the commitment to create digital experiences that are accessible to everyone, regardless of ability. Adhering to WCAG 2.2 guidelines ensures components are usable by all individuals, including those with visual, auditory, cognitive, and motor impairments.

Consistency and Reusability

A key strength of the design system is the ability to provide a consistent look and feel across all platforms and projects. Using standardised components and patterns streamlines the development process and ensures that users have a familiar experience, no matter which government website they interact with.

Modular Design

The system embraces a modular approach, allowing for scalability and flexibility. Each component is designed as an independent unit, ensuring it functions correctly in isolation and when integrated into larger interfaces.

Continuous Improvement

The design system is continuously refined and expanded based on feedback, user needs, and emerging web standards. With a strong emphasis on WCAG 2.2, components are audited to ensure they meet the latest accessibility standards, ensuring the design system remains cutting-edge and user-centric.

You can follow all the changes through the Roadmap.

Find Out More


The guidelines section encompasses typography, colour system, iconography, imagery, content, layout & spacing, actions & input, and accessibility. It offers a cohesive and inclusive design system; by following these guidelines, designers can create a consistent and accessible user experience across various platforms and devices.

Getting Started

You’ll find everything you need to get started in the documents section, including:

  • Step-by-step instruction on how to set up the development environment
  • Guidance on the use of Tailwind CSS
  • How to extend the configurations of the design system
  • Instructions on how to manage browser support for websites
  • Detailed information on components, blocks and patterns
  • A tutorial on UAE Design System 2.0

Resources offer additional material that can be beneficial to the design and development process, including:

  • A list of tools and assets that can help build and validate designs
  • Templates that will help get started on building website pages
  • Learn more about what is coming in the future and plan for the design system
  • Tools for federal government entities to evaluate all the requirements of implementing the design system effectively
Loki Bright Loki Bright

The process of enabling digital transformation takes into account the latest development and technologies that facilitate people’s lives and provide them with services around the clock.

H.E Eng. Mohammad Al Zarooni Deputy Director General of the Information & Digital Government Sector, Telecommunications and Digital Government Regulatory Authority

View All Success Stories

All federal government entities must comply with the 'Design System'.

The system is designed to unify the digital presence of federal government entities in the UAE. It aims to establish the UAE as a leader in the provision of digital services, aligning with the standards of the UN's Online Services Index and the UAE Government Charter for Future Services.

This system is designed primarily for content specialists, user interface (UI) designers, developers, user researchers and digital operations teams of federal government entities. It serves as a reference guide for web development firms and individuals tasked with assessing the compliance of digital services used by the UAE’s federal government entities and for selected external stakeholders.


The guidelines include typography, colour system, iconography, imagery, content, layout & spacing, actions & input, and accessibility.


An extensive library of reusable, customizable UI elements like buttons, accordions, cards, and more, all compliant with accessibility standards. All components are built with ready styles and tested for WCAG 2.0 guidelines.


Blocks are a set of consistent design collections of elements, utilizing more than one component and meant to be used as repeatable elements. They are pre-designed sections like headers, footers, and call-to-action areas that can be easily integrated into any digital asset.


Patterns are principles and structure for common user interaction models.


Streamline design and development processes with reusable components.


Maintain a uniform look and feel across multiple platforms and devices.


Meet or exceed all local and international accessibility standards.


Stay ahead of the curve with a design system that's constantly updated based on user feedback and technological advancements.

Related News


DGOV Academy's Nationwide Launch Advances Digital Government Transformation in UAE

The Digital Government (DGOV) has recently launched the DGOV Academy in various emirates across the UAE, marking a significant step in the nation's digital transformation journey. This initiative aims to enhance the digital skills of government employees, aligning with the UAE's vision for a digitally empowered government.

Read More

TDRA Wins Mohammed Bin Rashid Arabic Language Award for its comprehensive project to support Arabic digital content

The Telecommunications and Digital Government Regulatory Authority (TDRA) has been awarded the prestigious Mohammed Bin Rashid Arabic Language Award - Class of the best Language Policy and Planning Initiative, for its significant project aimed at enhancing Arabic digital content. This award-winning initiative, in line with the Arabic Language Charter by His Highness Sheikh Mohammed Bin Rashid Al Maktoum, reflects TDRA’s commitment to digital government and knowledge society.

Read More
Internet Access Policy

TDRA Unveils ‘GovSign’ Initiative at GITEX 2023

The ‘GovSign’ initiative, a strategic innovation by the Telecommunications and Digital Government Regulatory Authority (TDRA), represents a significant leap in managing and approving documents and correspondence within federal government entities. This initiative, seamlessly integrated with the Federal Network (FedNet) on the digital government platform, is a testament to DGOV’s drive towards digital transformation.

Read More
Electronic Transactions and Trust Services Law

DGOV Celebrates the Success of TDRA's 9th Virtual Camp, Fostering Innovation and Digital Skills

The Digital Government (DGOV) proudly acknowledges the successful conclusion of the 9th edition of the ‘TDRA Virtual Camp’. Held from 7th to 18th August 2023, the camp witnessed the participation of 2,700 students aged between 7 and 18 years, demonstrating an ever-growing interest in technology and innovation.

Read More

How likely are you to recommend the Design System for Federal Government Websites?