The UAE Design System 3.0
It has been over 18 months since we launched the UAE Design System, and needless to say, it has been a fulfilling journey to see UAE federal entities adopting a consistent standard towards their web presence.
The steadfast adoption of the Design System, has inspired us to move forward and provide even further value. A core principle of the design system is “Continuous improvement”, because we believe that “without change, there cannot be improvement”.
Today, we want to talk about the next wave of the UAE design system. Let's talk about UAE Design System 3.0
TailwindCSS 4.x support
Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.
Tailwind CSS v4.1 goes a step ahead and brings more improvements with new utilities, variants, and developer experience improvements.
Yes, we are porting the design system to TailwindCSS 4.x. This brings about a significant change in how you configure the design system and utilise it in your projects.
You will be able to utilise all the underlying power of TailwindCSS, including:
- CSS features like cascade layers, registered custom properties with
@property, andcolor-mix(). - a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
- CSS theme variables
- Dynamic utility values and variants
- Container queries
- New
text-shadow-*utilities - Mask elements with the
mask-*utilities - Colored drop-shadow support
not-*variant- using colors with
oklch()function - using the
has:utility
... and so much more.
Dark mode
It’s been a long time in the pipeline, but dark mode for components is coming!
The UAE Design System components will be built to support dark mode out of the box, with detailed demo's and guidelines on how to implement them for your websites.
Although highly recommend, dark mode will not be mandatory. Instruction on how use dark mode will be posted and if you choose not to build your web experience with dark mode, you can simply turn it off.
Component design changes
The community has spoken, and we have heard. To ensure we further expand the design system into usage for use beyond websites, we are introducing some key changes to components.
- Buttons will include a subtle change in their look, but a critical change on hover, focus and other states are managed.
- We are deprecating "Steps" in favor of "Progress". This will add 3 new variations.
- Alerts is being renamed to "Callouts". While this will not change what is existing, it will also lead to new variations being added.
- Navigation has a major upgrade where dropdowns from navigations are separated.
- 3 new Card variations and a change to the font size within existing Cards.
... and more including new components and blocks!
Accessibility upgrades
We continue striving to achieve compliance with WCAG. As technology improves, and browsers upgrade with new devices and new methods of accessing content becoming popular, we are making various "under the hood" changes to components and blocks.
Web Accessibility provides people of determination the same access to information, education, and services as everyone else, upholding the principle of universal access on the internet.
Along with the components and blocks, we will be upgrade our guidelines with better usage of accessibility and compliance information.
Publishing Figma Design System Variables
The UAE Design System's Figma will will reflect all of the above, including Dark Mode components. Furthermore, we will be documenting every component's variable within Figma with configurable values.
Slots in blocks
The Design System's Figma file will now include primary blocks with "slots" support.
The current version of the UAE Design System will reach a EOL (End Of Life) but will remain active for use. No further development will be added to the current version.
Over the next three months, we will be releasing a series of updates, so stay tuned, and we look forward to seeing what you build with the UAE Design System.
