Configuration
An easy to use guide on how to configure and customise the design system.
By default, all necessary configurations and values that ensure a smooth and consistent set of components have been embedded into the @aegov/design-system plugin.
With Tailwind CSS v4, configuration is now done directly in your CSS file using the @theme directive, making it simpler and more intuitive than the previous JavaScript-based approach.
New in Tailwind CSS v4
Configuration is now CSS-first! No more tailwind.config.js files. Everything is configured directly in your stylesheet using CSS variables and the @theme directive.
Setting up the Design System
When starting a new project, you need to import the UAE Design System plugin in your CSS file. This is done using the @plugin directive.
Basic Setup
Here's how to set up your CSS file with the Design System and required plugins:
/* src/styles.css */
@layer base;
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "@aegov/design-system";
/* Your custom theme configuration (optional) */
@theme {
/* Add your customizations here */
}
The @tailwindcss/typography plugin provides the ability to control the style of HTML elements generated by a CMS, while the @tailwindcss/forms plugin is essential to add the necessary functionality to components that may be used in the creation of forms.
Default Configuration
The UAE Design System plugin provides the following default configurations that are automatically applied to your project:
Breakpoints
Responsive breakpoints for different screen sizes:
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px2xl: 1536px
Typography
Font families and sizes optimized for government services:
- Fonts: Roboto, Inter, Noto Kufi Arabic, Alexandria
- Sizes: xs (0.75rem) to display (4.75rem)
- Headings: h1 (3.875rem), h2 (3rem), h3 (2.5rem), h4 (2rem), h5 (1.625rem), h6 (1.25rem)
Colors
UAE government color palette with primary and secondary colors:
- Primary: AE Gold (aegold)
- Secondary: AE Black (aeblack)
- Support Colors: Camel, Sea Blue
- Full Palette: Complete color swatches from 50 to 950
Container
Responsive container with automatic centering and padding:
- Centered by default
- Responsive padding from 0.625rem to 1.375rem
Configuring your brand colour
A federal authority may choose to brand the website with colours that are not the primary colours defined - which is AE GOLD and AE BLACK. An authority may select a different primary colour, however, they are advised to use a dark colour scheme for the secondary colour.
Never mix up the swatches of the colours or use a secondary colour in place of a primary colour. All swatches applied to components are created based on the use of specific colour swatch colours.
For example;
- All buttons are designed to use the
`600`as the primary colour and`500`swatch for the hover state. - Footer and header identifier bar uses the primary colour.
- Dropdown navigation items utilise the primary colour for hover state colour of menu items.
... and more. Hence, you must never change the swatches and generate a swatch relevant to how they are created for the defined primary colours.
How to add brand colours?
With Tailwind CSS v4, you can customize your brand colors directly in your CSS file using the @theme directive. Here's how to override the default primary and secondary colors:
/* src/styles.css */
@layer base;
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "@aegov/design-system";
@theme {
/* Primary color swatches (50 to 950) */
--color-primary-50: #fef7ee;
--color-primary-100: #fdecd3;
--color-primary-200: #fad5a5;
--color-primary-300: #f7b76d;
--color-primary-400: #f38f33;
--color-primary-500: #f0710b;
--color-primary-600: #e15701;
--color-primary-700: #ba4104;
--color-primary-800: #94340a;
--color-primary-900: #782c0b;
--color-primary-950: #411401;
/* Secondary color swatches (50 to 950) */
--color-secondary-50: #f6f6f6;
--color-secondary-100: #e7e7e7;
--color-secondary-200: #d1d1d1;
--color-secondary-300: #b0b0b0;
--color-secondary-400: #888888;
--color-secondary-500: #6d6d6d;
--color-secondary-600: #5d5d5d;
--color-secondary-700: #4f4f4f;
--color-secondary-800: #454545;
--color-secondary-900: #3d3d3d;
--color-secondary-950: #1a1a1a;
/* Support colors (optional) */
--color-primary-support-50: #fef7ee;
--color-primary-support-100: #fdecd3;
--color-primary-support-200: #fad5a5;
--color-primary-support-300: #f7b76d;
--color-primary-support-400: #f38f33;
--color-primary-support-500: #f0710b;
--color-primary-support-600: #e15701;
}
You can also extend other theme values like spacing, border radius, or add custom CSS properties:
@theme {
/* Custom spacing */
--spacing-128: 32rem;
/* Custom border radius */
--radius-4xl: 2rem;
/* Custom breakpoint */
--breakpoint-3xl: 1920px;
/* Custom font family */
--font-brand: "Your Custom Font", sans-serif;
}
For more information on theme customization, visit the official Tailwind CSS documentation on theme configuration.
