Introduction
Welcome to the ADEK Design System! This library is a collection of UI components for the Department of Education and Knowledge, built from our official Figma design system.
What is the ADEK Design System?
The ADEK Design System is the department's single source of truth for product UI: design tokens, base components, and application components available as production-ready React and Angular code. Just copy, paste, and build.
Every value on this site - the brand blue #003CFF, Montserrat with its negative letter spacing, the 8px radius, the skeuomorphic button shadow - is replicated 1:1 from the ADEK Figma libraries, so what you ship matches what design approved.
It's the starting point for any ADEK project: everything you need to design and build consistent, modern interfaces across the department.
Tech stack
We keep the stack minimal so you can focus on building. React and Angular are available today; .NET and Vanilla JS are on the way, and their pages explain what you can use in the meantime.
Accessibility
Accessibility isn't optional - it's the baseline for government services.
Every interactive component ships with the 4px brand focus ring for keyboard users, semantic HTML (real buttons, labels, and role attributes), and text colors that meet WCAG 2.2 AA contrast against the backgrounds they're paired with in the token system.
How is this different from a library?
Unlike component libraries installed as a dependency, the React side of this system gives you the source code: when you copy a component, it becomes part of your project. No package versions to manage, no vendor lock-in, full freedom to adapt it to your service's needs.
The Angular side works the opposite way by design: teams install adek-ui once with ng add and receive updates centrally - the right trade-off for the department's larger Angular estate. Both approaches share the same tokens, so the result is identical.
Next steps
Pick the installation guide for your framework, or open the Figma libraries to explore the designs behind the code.
FAQs
What is the ADEK Design System?
It is the official component library of the Department of Education and Knowledge: every color, radius, font size, and letter-spacing value is replicated 1:1 from the ADEK Figma libraries, and every component ships as copy-paste-ready React and Angular code.
Which frameworks are supported?
React (tested with React 19 and Next.js 15) and Angular 17+ via the adek-ui library, available today. .NET (Razor and Blazor) and Vanilla JS packages are on the roadmap - their install pages describe what you can use in the meantime. All of them share the same CSS token files, so they render pixel-identical output.
When will .NET and Vanilla JS be ready?
They are in the works. Until they ship, both stacks can already use the three ADEK stylesheets and the documented CSS class names to get the exact same look with no framework dependency. Email design@adek.gov.ae to tell us which components your service needs first.
Do I need to install a package to use the React components?
No. React components are self-contained TypeScript files - copy the code from any component page, import the two shared stylesheets once, and you own the code with no dependency to manage.
How do I install the Angular library?
Once adek-ui is published to the department registry, a single command - ng add adek-ui - installs the package, registers the stylesheets in angular.json, and adds the Montserrat font links. Until then, follow the manual steps on the Install - Angular page.
Where do the design tokens come from?
From the variables in the ADEK Core Figma file. They live in styles/tokens.css as CSS custom properties; updating that one file re-themes every component in both frameworks.
Who do I contact about access or missing components?
The design team at design@adek.gov.ae - they manage the Figma libraries and prioritize new components.