Release Notes

Version	Date	Details
2.0.0	2 May 2025	Typography Design Updates Developers Updates
1.1.0	28 Mar 2025	Usability Guidelines Breakpoints Update Typography and Colors Figma Guidelines Component Enhancements New Variants Components New Components
1.0.1	21 Feb 2025	Added descriptions to component props for developers
1.0.0	15 Nov 2024	Design System (Phase 3)

2.0 (2 May 2025)

What's New

We’re excited to introduce a range of enhancements across components and foundational elements. Below are the detailed updates, including improvements to integration properties.

Fundamentals Enhancement:

Typography

Updated type scale specifications and added key principles for responsive font scaling by breakpoint to guide usage; corresponding tokens have also been updated in Figma.

Design Updates

Spacing System

Updated spacing tokens in Figma.

Figma – Global Building Blocks Page

Social Media: Updated the Twitter icon.

Design Component Enhancement

Sticky Bar: The large breakpoint is fixed in the figma file.

Page Samples

We have provided reference pages demonstrating how to use the components across key templates such as the landing page, services, contact us, login, and register pages.

Developers Updates

New Packages have been published

New Components

Cards: Basic card component is now available.

Banner Slider: Introduced for use on the homepage.

Component Enhancements

Sub Menu: Opens last dropdown from main navigation.

Side Menu: Opens all dropdowns from the main navigation.

Sticky Footer: Icons rendering issue resolved; icons now display correctly. and added the ability to hide middle links on the stickybar.

Dynamic UI: Side view initiatives now support dynamic phrasing using user-configured values.

Accessibility & Semantics: Added name attributes to inputs, buttons, and anchor tags.

1.1.0 (28 Mar 2025)

What's New

In this latest release, we are thrilled to unveil a series of enhancements and new component variants that enhance functionality and user interaction. Below, you will find detailed updates including the integration of new properties, refinements to existing components, and the introduction of innovative variants and components. All these updates are designed to elevate your experience and expand the customization and usability options within the Dubai Design System.

Usability Guidelines

New usability guidelines have been introduced under the "Foundations" section, focusing on enhancing digital city experiences.

Breakpoints Update

The description for our table breakpoints has been updated to reflect our ongoing efforts to standardize design practices. While we strive to provide a consistent framework, we acknowledge that individual entities may have specific needs. You are encouraged to tailor these breakpoints to fit your project's requirements, ensuring that any adjustments adhere to the Web Content Accessibility Guidelines (WCAG) to maintain accessibility for all users.

Typography and Colors Figma Guidelines

We've provided detailed guidelines on how to effectively set up typography and colors within Figma.

Component Enhancements

Hamburger (Side Menu) Behavior: Boolean properties have been integrated, enabling the disabling of the 'Hamburger' menu as required.

Submenu: The 'Title' boolean property can disable the menu group component.

Accordion: A CTA button has been added, along with a prototype to demonstrate the component's behavior.

Footer: The 'Optional Logo' boolean property can be used to disable the menu group component.

Progress Bar: A Target Value feature has been incorporated into the component.

Phone Number: The section now includes a dropdown for country selection with a search function and a separator between the country code and the input field.

Sticky Bar: An extra link button has been added for optional use.

Pagination: The component has been refactored to enhance usability.

Toggles: An icon has been added to indicate when the toggle is active.

Alert: The button is optional and can be hidden with the 'button container' boolean property, including options for primary and secondary buttons and text color.

Breadcrumbs: Previous pages with links now use the primary color, and the active page without a link is styled with the on-surface-variant color.

Rating: The color of the component has been updated.

New Variants Components

Tabs: A vertical variant has been added for easier vertical navigation, and a separate Vertical Tab variant is also introduced to further enhance layout options.

Buttons: A Split Button variant has been added to the 'Buttons' component, offering additional functionality for combined actions.

Phone Number: A new variant has been introduced to display the dropdown for easier country selection.

Select Field & Quick Select Field: These components now support displaying multiple selected elements, improving user interaction and selection visibility.

Step Indicator: Description text can now be placed below the indicator to provide clearer guidance and information at each step.

Submenu: This component now allows for enabling or disabling icons within 'Menu Groups,' offering greater customization of the visual display.

Search Field Update: We've introduced voice command functionality to enhance the search experience, allowing users to conduct searches using voice input.

New Components

Checkbox Groups & Checkbox Groups Card: New variants for Checkbox Groups have been added, including a card format that encapsulates checkbox options in a more structured and visually distinct layout.

Radio-Button Groups & Radio-Button Groups Card: Variants for Radio-Button Groups now include a card option, providing a clear and engaging way to display choices within a card format, enhancing the user interface with a more organized appearance.

Accordion Group: This component allows for the grouping of multiple accordions, enabling better content organization and navigation within complex interfaces. It includes functionality to expand or collapse all sections collectively, improving user experience with bulk actions.

Split Button: This component combines the functionality of a standard button with a dropdown menu, allowing users to either execute the default button action or select from a list of additional actions. This dual-functionality makes it a versatile tool for interfaces where space is limited but multiple actions are necessary.

1.00 (15 Nov 2024)

What's New

We are excited to announce the launch of a unified design system developed specifically for all government entities. This design system provides a flexible, cohesive framework that ensures consistency across platforms while allowing each entity the customization they need to meet their unique objectives and user needs.

Key Benefits of the Design System:

Consistency Across Platforms: By using standardized components, colors, typography, and layouts, we ensure a cohesive look and feel across all government digital interfaces, reinforcing trust and recognition for users.

Customizable and Flexible: The design system is built to be adaptable. Each entity can modify and personalize components as needed, ensuring that the system supports your specific content, users, and objectives without sacrificing overall visual harmony.

Accessibility and Usability: All components in the design system are designed with accessibility standards in mind, ensuring compliance with WCAG guidelines. This makes it easier to create accessible, user-friendly content for all citizens, residents, and tourists.

Efficiency in Development: The design system includes ready-made components and templates, reducing the time and resources required for design and development. This allows teams to focus more on content and functionality rather than creating new designs from scratch.

How to Use the Design System:

The design system is accessible to all entities as a downloadable file, which can be requested via email at [e-mail]. GitBook provides comprehensive documentation detailing the usage, anatomy, and dos and don'ts of each component.