Design Guidelines

The design guidelines section encompasses typography, colour, icons, imagery, content, layout, action, and accessibility. It ensures a cohesive and inclusive design system, promoting legibility, visual consistency, and usability for all users. By following these guidelines, designers create a unified and accessible user experience across platforms and devices.

Typography

Typography covers the font system being used across platforms. Each font has been carefully selected after extensive research.

Colour system

Colour helps differentiate between the different entity brands while also establishing levels of consistency in user experience.

Imagery

Illustrations symbolise user context and their emotional state and should be designed to accurately reflect the same.

Iconography

Icons are visual representations of commands, common actions, directories and devices.

Layout and spacing

Grids help position elements onscreen to facilitate seamless user experiences every time a user visit a webpage.

Content

How to communicate with users and write clear and consistent copy.

Actions and input

A button functions as a trigger to an event or action, notifying users of the next step.

Mobile Application

Mobile app guidelines covers the basic as well as general guidelines to follow to optimize the design and performance of your app.

Accessibility

Accessibility ensures inclusive and usable digital content, promoting equal access and positive user experiences for all users.

Technical Guidelines

The technical guidelines section encompasses best practices for frontend development, ensuring that developers build websites, applications and other web UI consistently using the UAE Design System while maintaining security, performance and consistency.

Best practices for frontend development

This document outlines core principles and actionable techniques for building effective, high-performing, accessible, and scalable front-ends. It adheres to the UAE Design System, helping teams across government entities produce consistent and future-ready digital products.

Technical coding practices: A modern approach to web development

This document is written for developers, engineering leads, and technology partners delivering websites and web applications for the UAE government.

Advanced CSS practices for government websites

This guide focuses on advanced CSS practices that are commonly overlooked but are critical to delivering high-quality, production-ready government services. It pairs TailwindCSS examples with standard CSS equivalents to help teams write modern, resilient, and inclusive styles.

Building API-first applications using the UAE Design System

This guide outlines why an API-first methodology matters and how developers working on UAE government services can adopt this model using modern frontend frameworks while maintaining strict adherence to the UAE Design System.