Colour system

The colour system is a carefully curated combination of palettes that represent strength and softness. It helps you define your digital and webspace, allowing you to highlight and communicate your strengths.

All the colours listed below went through several rounds of testing in actual designs, where their aesthetic appearance and range of accessibility were observed and documented.

The core palette

The core palette represents strength.

Representing the United Arab Emirates and the Federal Ministry’s identity, the selection of colours for the core palette will help communicate the entity’s role clearly, allowing for better representation of the nation locally and globally. This core palette of colours has been approved for use across all federal government entities by the UAE Cabinet Office.

AEGold
50
#F9F7ED
100
#F2ECCF
200
#E6D7A2
300
#D7BC6D
400
#CBA344
500
#B68A35
600
#92722A
700
#7C5E24
800
#6C4527
900
#5D3B26
950
#361E12
AERed
50
#FEF2F2
100
#FDE4E3
200
#FDCDCB
300
#FAAAA7
400
#F47A75
500
#EA4F49
600
#D83731
700
#B52520
800
#95231F
900
#7C2320
950
#430E0C
AEGreen
50
#F3FAF4
100
#E4F4E7
200
#CAE8CF
300
#A0D5AB
400
#6FB97F
500
#4A9D5C
600
#3F8E50
700
#2F663C
800
#2A5133
900
#24432B
950
#0F2415
AEBlack
50
#F7F7F7
100
#E1E3E5
200
#C3C6CB
300
#9EA2A9
400
#797E86
500
#5F646D
600
#4B4F58
700
#3E4046
800
#232528
900
#1B1D21
950
#0E0F12

What can you do

For ministries

The core palette is considered a primary colour range. Your digital and web space must use these colours without the possibility of changing the colour swatch.

There are no exceptions to this criteria.

For authorities

The core palette is considered a primary colour range. It is recommended to use the core palette for your digital and web space.

However, you may opt to change the primary colour and adapt it to your primary brand colour.


The supporting palette

These colours represent softness. These will allow readers to relate to the content better, given its contrast to the core palette colour scheme and will add a human touch to the overall feel of the website, improving readability.

Use it to select and/or design content (i.e. imagery, illustrations, iconography, data, etc.) that is consistent with the core palette.

Tech Blue
50
#E7F5FF
100
#D3EDFF
200
#B0DBFF
300
#81C1FF
400
#4F98FF
500
#286CFF
600
#043DFF
700
#003CFF
800
#002DC2
900
#0B32A4
950
#071C5F
Sea Blue
50
#EFFAFF
100
#DEF3FF
200
#B6EAFF
300
#75DBFF
400
#2CCAFF
500
#00ABEB
600
#0090D4
700
#0073AB
800
#00608D
900
#065074
950
#04334D
Camel Yellow
50
#FFFBEB
100
#FDF4C8
200
#FBE68C
300
#FAD44F
400
#F8C027
500
#F29F0E
600
#D67909
700
#B2550B
800
#904110
900
#773610
950
#441B04
Desert Orange
50
#FEF5EE
100
#FCE9D8
200
#F9CFAF
300
#F5AC7C
400
#EF8048
500
#EB5F24
600
#E54B1D
700
#B73417
800
#922B1A
900
#762518
950
#3F100B
Fuchsia
50
#FDF4FF
100
#FAE8FF
200
#F5D0FE
300
#F0ABFC
400
#E879F9
500
#D946EF
600
#C026D3
700
#A21CAF
800
#86198F
900
#701A75
950
#4A044E
Slate
50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
950
#020617

Creating a custom palette

If an Authority, other government entity, or any other organisation operating under the government of the United Arab Emirates wants to use the design system and override the colours, they may do so.

  • Use the colour swatch generator to create a palette with shades ranging from 50 to 950.
  • Always add your colour as a new colour and do not replace an existing colour.

It is imperative to note that by making a change in the colour palette, all components and blocks utilizing these colours will have an immediate effect. Make sure the design tokens are updated to reflect your colour.

How to add a colour configuration

  • All colour tokens can be added in the ` tailwind.config.js ` file under the ` theme ` or ` extend ` property.
  • To replace the primary and secondary colours, add your colour swatch to the theme property. Here is an example of how you can do this. Let us assume that your primary brand colour is ` rgb(23, 28, 143) ` (#171c8f). You must create your colour swatch using your primary brand colour at the value of 600.

    module.exports = {
    	theme: {
    		colors: {
    			'primary' : {
    				50: '#E0E2FA',
    				100: '#C8CAF6',
    				200: '#989CEE',
    				300: '#686DE7',
    				400: '#373EDF',
    				500: '#1F25BF',
    				600: '#171C8F',
    				700: '#121670',
    				800: '#0D1051',
    				900: '#080A33',
    				950: '#060723'
    			}
    		}
    	}
    }
    

     

    You may use a tool such as Tailwind Shades or UI Colors. Both can be used to customize exactly what colour value needs to be at which level. UI Colour will also provide accessiblity testing on your swatch.

  • Remember that by replacing the primary or secondary colour, you are essentially affecting every component and block in the design system for your project. All components will adapt to the colour system token defined.
  • If you need to add a new colour swatch and use it additionally in your project, you must add it to the extend property by giving the colour a custom name. By adding a new colour swatch, all additional CSS utilities will adapt to the colour defined.

    module.exports = {
    	theme: {
    		extend: {
    			colors: {
    				'kulture' : {
    					50: '#E0E2FA',
    					100: '#C8CAF6',
    					200: '#989CEE',
    					300: '#686DE7',
    					400: '#373EDF',
    					500: '#1F25BF',
    					600: '#171C8F',
    					700: '#121670',
    					800: '#0D1051',
    					900: '#080A33',
    					950: '#060723'
    				}
    			}
    		}
    	}
    }
    

     

    For more information on how to configure colours, you can also refer to the documentation on TailwindCSS color configuration.


Enviornment colours

The function of the Environment Colours is to determine the atmosphere and layouts of the web pages. Each colour has its own language, and these neutral shades work silently in the background to enhance the look and feel of the page’s content.

The purpose of a defining environment is to create contrast.

The neutral palettes

By specifying neutral colours for backgrounds and content, we provide an additional layer that can further ensure readability and accessibility. Neutral tones serve as the default settings for the UI of the project, acting as a baseline for accessibility and aesthetic cohesiveness.

Hence, when it comes to the background colour, the following tones are acceptable from the defined colour in the palette.

Shades of White
50 (#FFFFFF)
100 (#FCFCFC)
200 (#F7F7F7)
300 (#F2F2F2)
Shades of Slate
50 (#F8FAFC)
100 (#F1F5F9)
200 (#E2E8F0)
300 (#CBD5E1)
Shades of AEBlack
50 (#F7F7F7)
100 (#E1E3E5)
200 (#C3C6CB)
300 (#9EA2A9)

Background patterns

In certain visual design elements, you may choose to include a background repeating image as a pattern for a section. The design system has no objection to the use of a background pattern. However, for the purpose of content usability, the following rules must be observed.

  • You may not use a background on the homepage of your website unless it is for a section that is before the footer of the website.
  • You may use a background pattern on sections of any inner page, only when:
    • The contrast ratio of the pattern colour and the content on it is higher than 4.5. Use tools similar to https://www.getstark.co in your design process to check the background image-to-text contrast ratio.
    • It is prudent to use a background repeating pattern that is 8% darker than the background of the section it is placed on. For example, if the background colour is white (#FFFFFF) then it would be ideal to have a background repeating pattern that is not darker than #EBEBEB. Use a tool such as https://mdigi.tools/darken-color to determine the darkening percentage of a particular colour.

Creating contrast

One of the best ways to create a user-friendly webpage is to start the design process using neutral palettes to determine low-fidelity wireframes and other details. Once this is complete, it is easier to apply colours to the most important elements (such as buttons) to achieve the perfect contrast that allows for smooth navigation and enhanced user experience.

wireframe-01

Low fidelity wireframing using a neutral colour palette.

wireframe-02

High fidelity wireframing using a neutral colour palette. Use actual content to determine spacing and usage.

wireframe-03

Apply core palette colours to the elements. Create a complete visual design using final usable elements.


Gradient colour

Gradients add life through a change in texture or background, allowing the design elements and content to stand out.

Create gradients with colours from the same tonality. This means the gradient for a certain colour may be between the shared use of 950 to 50. There are 3 recommended gradient shades that can be used.

Subtle
.from-primary-400 .to-primary-600
Light
.from-primary-50 .to-primary-200
Dark
.from-primary-500 .to-primary-900

You may create cross-palette colour gradients with colours that still fall within a contrasting tonality. For example, you may choose to create a gradient between Pure White and UAE Gold. However, you must not create a gradient between UAE Green and UAE Gold.

You must use the contrast ratio tool to determine the use of gradient. You can also learn more about the application of gradient on TailwindCSS's Gradient Color Stops

Controlled shading
.from-primary-100 .from-30% .via-primary-200 .via-60% .to-primary-500 .to-98%
Cross palette #1
.from-techblue-300 .to-seablue-800
Cross palette #2
.from-techblue-500 .to-fuchsia-500

Text colour

We recommend using black (AEBlack) for text in order to achieve the highest ratio of contrast and improved readability. Also, core colours can be used for text or coloured backgrounds.

UAE Black on White

 

Text colour
text-aeblack-800
#232528
Background colour
bg-whitely-100
#FCFCFC
White on UAE Black

 

Text colour
text-whitely-100
#FCFCFC
Background colour
bg-aeblack-900
#1B1D21
White on UAE Gold

 

Text colour
text-whitely-50
#FFFFFF
Background colour
bg-primary-600
#92722A
UAE Gold Version

 

Text colour
text-primary-700
#7C5E24
Background colour
bg-primary-50
#F9F7ED

 

Functional text colour

The user associates specific content with particular colours from memory — the recall power is quite strong. Therefore, you should choose the correct colours to direct the intended user action. Functional colours and elements related to these are divided into 2 parts: primary functions and secondary functions.

Primary actions

A primary function message is triggered after a user has taken an action. A success message and an error message are examples of a primary function. For more information, see the alert component on the accurate use functional colours.

We were unable to save your account details

There was an error in saving your account details. Your Emirates ID has expired and we are unable to validate the details with UAE Pass.

Your payment was successful

Your payment of AED 240.00 was successfully processed. You will shortly receive the receipt of the payment in your email.

 

Secondary actions

A secondary function message can be used proactively or triggered before a user has taken an action. An information message or a warning message may be displayed to a user proactively, even when they have not taken a certain action. Also, you may show a warning message when a user has taken a certain action to provide feedback related to this action.

Your subscription will expire soon

Your account will expire in 3 days. Your access will be restricted if not renewed.

The event will start in 2 days

The live stream of the event will start in 2 days. You may use the link sent in your email to access the stream.


Accessibility in colour

Colour combinations should meet the contrast ratios specified by the Web Content Accessibility Guidelines (WCAG) 2.1. In order to ensure that users with colour blindness and reduced vision can easily navigate the website, we should also take into account user characteristics such as their visual impairment when designing a website.

This design system is built keeping the colour contrast ratio as a basis, and adequate testing has been done to measure the use of colours while creating the components

Make sure that the contrast ratio of text and interactive elements in your website and service portal meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1). Learn more about minimum contrast requirements by understanding Success Criterion 1.4.3 Contrast (Minimum)

Testing the UAE Gold - primary colour

The brand colour - ` #B68A35 `, when used as a background colour with a foreground colour of white or a lower saturation of itself, does not qualify as an accessible colour contrast.

For this purpose, the brand colour of #B68A35 is not to be used as the background colour for components. Instead, the primary colour for components must be ` #92722A `.

test primary colour

In order to acheive a WCAG 2.1 AA rating, the colour contrast ratio must be 4.5 or above. The following chart shows the combinations of text over background colour that are above 4.5.

test primary colour

Basic principles of colour

Maintaining a sufficient level of contrast between text and its background is a vital aspect of web design that significantly impacts both readability and user accessibility.

When the contrast is adequate, it facilitates a smoother reading experience, making it easier for all users to consume content. This not only aligns with accessibility standards but also broadens the reach of your content, ensuring that it is inclusive and user-friendly for a diverse audience, including those with vision impairments.

Do not reduce contrast ratio

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and other elements.

Black on Gray

 

Incorrect contrast ratio detected
2.58:1
Gray on White

 

Incorrect contrast ratio detected
2.49:1

Do not use incorrect colour combinations

Branding is an important element when creating websites. Do not use incorrect colour combinations that are not consistent with brand guidelines.

AEBlack on AEGold

 

Incorrect brand colour detected
Wrong combination
AEGold on AERed

 

Incorrect brand colour detected
Wrong combination

Do not pair multiple colours

You may use colours from the primary or secondary palette, however pairing colours that a completely the opposite of each other would create a very incorrect aesthetic experience.

Objectives
Strategic objectives 2023

Develop the organization of the health sector in a comprehensive and integrated manner to enhance its competitiveness, flexibility, effectiveness and alignment with the directions and priorities of the country.