UNICEF Design System
The status of this project is ALFA. So, incompatible changes may appear.
The goal of this project is to:
- Define a common user interface across applications.
- Speed up the design time allowing the design team to focus on user needs rather on tiny interaction details.
- Speed up the development time by reusing the HTML and CSS.
Designers, product managers and anyone that has to define the user interface of a web application we provide the following UX/UI design guidelines.
For developers, we provide a reference implementation. Documentation for developers can be found here
This reference implementation is based on based on Bootstrap 4.3.
In order to use the UNICEF's UI in your project you can reference a CDN or download using npm.
CDNs can offer a performance benefit by hosting on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of the files from the same CDN, it won't have to be re-downloaded.
For the CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/css/unicef.css">
<!-- All js bundled --> <script src="https://cdn.jsdelivr.net/npm/@unicef/design-syste/dist/js/unicef-bundle.min.js"></script> <!-- only the scripts that were created by UNICEF (no requirement)--> <script src="https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/js/unicef.min.js"></script>
This bootstrap customization is based on SASS, and therefore you can easily override the CSS classes for your particular project.
First, install the npm package
npm install @unicef/design-system
unicef.scss in your global
scss file. For example:
/* you may need to change the path to the node_modules dir */ @import "../node_modules/@unicef/design-system/scss/unicef"
We have used bootstrap variables whenever possible. Custom created variables are defined in
In order to make bootstrap version leaner, the following colors have been
dark. This means
that, for example,
<button class="btn btn-info">Info button</button> will not
work. You can activate them back in
Get source code from git repository
$ git clone https://github.com/unicef/design-system.git
$ cd design-system $ npm install $ bundle install
To run the local server
$ bundle exec jekyll serve --livereload
Then browse to
While developing run in another terminal the
$ gulp watch
To continuously compile SASS run
$ gulp watch-sass
Just clone the project and make a pull request.
Distributed under GLPv3.