UAE Design System – Clarifications

[tinawiahmadPalmira]

We are currently working on implementing a design system aligned with the UAE Design System for both web and mobile platforms. While reviewing the available resources, we encountered several gaps and would appreciate clarification on the following points:

1. Is there a complete Figma file available for the Mobile App Design System?

2. Input components in website guidline:

   • We could not find input fields with icon states.
   • Missing input types: Email, Phone Number, Country selector, and OTP.
   • Are there official component samples or guidelines for these?

3. Buttons for website guidline:

   • We could not find button variations that include both text and icons.
   • Are these components available or documented elsewhere?

4. Service Cards:

   • We noticed variations across different implementations.
   • Is customization allowed, or must the standard design be strictly followed?

5. Hero Section:

   • Sizes appear inconsistent across different websites.
   • Are there defined standards or recommended dimensions?

6. Elevation:
   Are elevation styles (shadows, layers) part of the system, or handled separately?

7. Flexibility:
   What level of customization is permitted to align with specific branding needs?

8. Evaluation:
   Is there an official checklist or criteria used for pre-launch assessment?

9. Mobile Design System:
   Is the TDRA Mobile App considered the latest reference for mobile guidelines?

10. Website Design System:
    Is there a complete Figma file available beyond the Assets & Tools page?

11. Roadmap:
    Are there any upcoming updates or a published roadmap for the Design System?

[moiz-conceptlz]

Hello @tinawiahmadPalmira

Let me help you with answers to your questions:

1. Is there a complete Figma file available for the Mobile App Design System?
   There is no separate Mobile App Design System at the moment. There is only a singular design system.

2. Input components in the website guideline:

   • We could not find input fields with icon states.
     Refer to https://designsystem.gov.ae/docs/components/input and scroll to the section "Input group with Icon"
   • Missing input types: Email, Phone Number, Country selector, and OTP
     Refer to https://designsystem.gov.ae/docs/components/input, and scroll to "Advanced input elements". These are input elements. You can also refer to https://designsystem.gov.ae/docs/components/select for select elements. However, advanced input elements such as an OTP entry or a searchable select list is not released yet in this version.
   • Are there official component samples or guidelines for these
     https://designsystem.gov.ae/docs/components as a list of all available components

3. Buttons for website guideline:

   • We could not find button variations that include both text and icons.
     https://designsystem.gov.ae/docs/components/button is a very detailed documentation on how to use buttons, with everything you need

4. Service Cards:

   • Is customisation allowed, or must the standard design be strictly followed?
     Raise a request to TDRA if you would like to discuss any variations in a card design, with justification as to why

5. Hero Section:

   • Sizes appear inconsistent across different websites.
     As described on https://designsystem.gov.ae/docs/blocks/hero, the height of a hero section is variable according to the management of an entity's requirements. The consistency to follow on a hero section is accessibility, ability to copy necessary text, ability to pause and traverse the slides and more

6. Elevation:

   • Are elevation styles (shadows, layers) part of the system, or handled separately?
     Elements that have shadows are part of the documentation. For example, visit https://designsystem.gov.ae/docs/components/card to learn more about how a shadow is applied using the "glow" parameter. Elements that are designed without shadow and must not have any elevation (essentially managed as a flat implementation) are designed to be so

7. Flexibility:

   • https://designsystem.gov.ae/guidelines clarifies all elements of what can be done and what cannot be done. To help with a summary, a Ministry must not change the colour, font or any aspect of tokens. An Authority may change the primary colour and the support focus colour to match their brand colour. Any change in colour must be tested for accessibility and colour contrast ratio by the entity

8. Evaluation:

   • Is there an official checklist or criteria used for pre-launch assessment
     Visit https://designsystem.gov.ae/resources/assessment-criteria to download the checklist

9. Mobile Design System

   • Mobile app currently has a guideline in place at https://designsystem.gov.ae/guidelines/mobile-applications. There is no official singular design that is considered the latest reference

10. Website Design System:

• What is present on Assets & Tools is the current template guideline and the method to access the public available Figma file

11. Roadmap

• Are there any upcoming updates or a published roadmap for the Design System?
  The UAE Design System is an ever-evolving project that will encapsulate the latest changes required by Federal Entities in the UAE to build digital systems. It has a roadmap of changes planned, some of which are made public and some of which are still in planning phases. The UAE Design System follows an agile method of growth and aims to add features, components and blocks that will benefit entities in the UAE government. Edge cases are also considered, and such changes are released in a timely manner with version control and backward compatibility.