EN

Getting started

The United Arab Emirates design system 2.0 is a framework and a carefully crafted, tested and validated set of components, blocks and patterns that can help you design and build websites for the United Arab Emirates Federal Government.

Installation

Step by step instructions on how to set up the development environment.

The use of TailwindCSS

A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Extending the config

Instructions on how extend the configurations of the design system and adopt it to your brand.

Browser support

A set of instructions on how to manage browser support for websites.

Core principles

  • Inclusivity and Accessibility

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

  • Consistency and Reusability

    One of the key strengths of our design system is the ability to provide a consistent look and feel across all platforms and projects. By using standardised components and patterns, we not only streamline the development process but also ensure that users have a familiar experience, no matter where which website of the government they interact with.

  • Modular Design

    Our 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

    We continuously refine and expand our design system based on feedback, user needs, and emerging web standards. With a strong emphasis on WCAG 2.2, we regularly audit our components to ensure they meet the latest accessibility standards, ensuring our system remains cutting-edge and user-centric.

Elements

The design system is made up of components, blocks and patterns. Each of these can be explored in further detail and used to create projects that are consistent and modular.

Components

The most basic elements that will be used in the web development process of a project.

Blocks

Tested UI elements that will be most commonly used in any web project.

Patterns

A visual guide on how to arrange elements and information.

You can now use our artificial intelligence (AI) driven tool to ask questions about the design system and receive an answer on practicies mentioned in the guidelines and details about components.

UAsk

Chat with our UAsk tool to gain insights about best practices and other details.

Play a tutorial

Feedback & support

It is part of our goals to improve continuously. The UAE Design System 2.0 is an open source project, available for anyone to use and configure according to their brand.

The Telecommunication and Digital Government Regulatory Authority of the United Arab Emirates maintains the Design Language System. For any questions, suggestions or ideas to improve the design system, please send an email at: design.system@tdra.gov.ae

You can also connect with us on GitHub and report an issue, bug or a broken component.

GitHub discussions

Open dialogue & discussion about the UAE Design System 2.0.

Report an issue

Report a bug, an issue, a broken component. Even better if you submit a PR.