Templates
Templates are page and section examples created using website design guidelines and components.
These examples are using a single colour palette (core). You can change this colour by going to the libraries panel on the left hand side of the screen, then document assets. Right click on the core colour and choose a new colour.
For understanding how to create a dark version of your interface designs, follow guidelines listed below
First page
Download all
Ministry Main Page
Examples for how to create the main page of the ministry website
Authority/Council/Programme Main Page
Examples for how to create the main page of the entity website
Landing Page
Examples for creating a one-page landing page
Internal page
Download all
Services Listing
All of the entity services will be listed in this page
Services Listing Expandable
Service Flow
Preview of step by step service process
About us
Template to communicate your mission, vision and values
Contact us
Examples to create a contact us page
Media Hub
This template can also be used for News page.
e-Participation
Examples to set up your e-participation page that engages with users
Polls
Examples to create different surveys and results
Search
Template to set up a global search page
Search result
Template to create a clear hierarchy of search listings
Initiatives
Examples to showcase your initiatives
Resources
Template to list downloadable resources
Login, Signup
Examples for quick login experience
Login, Signup 2
Examples for quick login experience
Open data
Examples to showcase information of different complexities
Accessibility
Examples to set up useful information that highlights your accessibility features
Sustainability
Examples to showcase your sustainable efforts
Section
Download all
Mastheads
Services section
Initiatives section
Stay in touch section
Header
Footer
Open data section
Menu
FAQ
Dark theme
About us (dark)
Guidelines
Dark mode
Dark mode is simply a dark version of our interface. It supports accessibility features that help to reduce eye strain, adjust brightness and allow for more comfortable screen use in dark environments.
Principles
Minimal use
Dark mode works best on pages with minimal content. Refer to Tone of Voice guidelines to prepare concise content.
Avoid Pureness
To maintain elevation, use UAE Black for backgrounds. Reduce eye strain by avoiding the use of pure white text.
Adjust Core Colours
Donʼt use the same core colours in dark mode.Use desaturated and light colour shades.
Avoid Invert
Dark mode is more than just inverting all the colours. Donʼt invert shadows from black to white either.
Accessible Contrast
Always check the contrast ratio of background and foreground elements with WebAIM.
Allow Users To Switch
Give users the option to choose and switch between bright and dark modes
Minimal use
In pages where text is the primary content and used heavily, dark mode application can make legibility an issue. Typically, dark mode amplifies visual clutter making a content heavy page seem even more chaotic. Be selective in your dark mode application to maintain a clean and breathable balance.
Avoid Pureness
Using pure black for the background and pure white for the foreground elements results in eye strain for the user and a higher overall bounce rate. To tackle this issue, use UAE Black for background (which is lighter than pure black) and a maximum opacity of 95% of white colour for text.
Do
Use soft black and white colours
DONT
Use pure black and white colours
Example palette
UAE Black
100
90
80
70
60
50
40
30
20
10
Elements (cards & …)
Paragraph
Titles
Background
Application example
Core colour
Core colours used in bright mode need to be lighter and less saturated to be ready for use in dark mode.
Do
Use lighter shade of core colour for dark mode
DONT
Use same core colour from light mode
Core palette dark mode values
Light mode
UAE Gold 50
#B68A35UAE Red 50
#D83731T_T_UAE_Green_50
#3F8E50Dark mode
UAE Gold 40
#B68A35UAE Red 40
#D83731UAE Green 40
#3F8E50Avoid Invert
Dark mode is more than just inverting all the colours. Donʼt invert shadows from black to white.
Do
Use different dark shades to show elevation
DONT
Invert shadows
Accessible contrast
The colours in Dark Mode are carefully selected to ensure
White on Grey
#1B1D21
#E3E3E3
Contrast ratio:
9.41
WebAim is a useful tool to check contrast ratios:
https://webaim.org/Learn more about colour accessibility in Colour System.
Allow Users To Switch
Give users the option to choose and switch between light and dark modes. Include it in your Accessibility plugin or add a toggle feature next to your Accessibility plugin to allow for easy usage. .
Dark mode