The Department of Global Communications (DGC) of the United Nations has established a uniform brand standard for all United Nations websites. This standard is designed to ensure a visually consistent user experience as web users navigate across United Nations websites.
All United Nations entities publishing publicly available websites are required to comply with these standards.
This guide aims to help United Nations website publishers comply with the required standards, follow best practices and adopt the appropriate tone regarding public communication. It also offers downloadable assets to facilitate production of compliant United Nations websites.
United Nations entities are welcome to contact DGC/WSS (webmaster@un.org) in the early stages of any web publishing project to receive appropriate advice and guidance. Sharing your deliverables – such as wireframes, mock-ups and campaign assets – will allow WSS to identify potential issues in the early stages and avoid costly remediation at a later stage.
The popular 'Roboto' font is a rounded, clean typeface with a straightforward, geometric design that offers clean lines. The font includes the ability to present it in thin, light, regular, medium, bold and black weights.
The 'Roboto family' is use for the body and the 'Roboto Condensed' for the headings.
Roboto Light
Roboto Regular
Roboto Regular Italic
Roboto Medium
Roboto Bold
Roboto Black
Roboto Condensed Regular
Roboto Condensed Bold
All HTML headings, <h1>
through <h6>
, are available. .h1
through .h6
classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
The global default font-size
is 1.4rem (14px) based on the CSS psuedo-class :root
value of 62.5% (1rem = 10px). The line-height
is 2 rem (20px). REM is currently the most accessible method to define font-size.
If needed to accommodate the design, the font size can be increased to 1.6rem (16px).
This is applied to the <body>
, paragraphs <p>
, and lists <ul> <ol>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse enim urna, tincidunt id lectus in, porttitor sagittis justo. Etiam quis arcu ullamcorper, faucibus nibh euismod, luctus lacus. Proin rutrum quam et tortor faucibus, eu suscipit nisi vehicula. Ut ullamcorper dui sit amet viverra ultricies. Aenean hendrerit, lorem pharetra lacinia commodo, magna felis laoreet nunc, at gravida lorem leo ac nunc.
Aliquam tortor velit, malesuada in ullamcorper ac, tempus in dui. Ut ultrices aliquam augue, ut feugiat libero vehicula gravida. Vivamus consequat, metus in euismod dignissim, justo ligula vulputate ligula, ut rhoncus odio sem vitae quam. Mauris ac mattis nibh. Pellentesque sit amet mauris at metus accumsan auctor. Cras accumsan velit libero, non ultrices augue sagittis sit amet.
Labels are applied in the home page and in sidebar menus across the different pages.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse enim urna, tincidunt id lectus in, porttitor sagittis justo. Etiam quis arcu ullamcorper, faucibus nibh euismod, luctus lacus. Proin rutrum quam et tortor faucibus, eu suscipit nisi vehicula. Ut ullamcorper dui sit amet viverra ultricies.
#009edb
#333333
#4D4D4D
#F2F2F2
Blue is used for page elements but NOT for text nor backgrounds.
Light Grey is used for page elements such as borders and backgrounds, but NOT for text (For details, see the guidelines for accessibility-compliant use of colour).
Dark Grey is used for body text, and Grey for the Site Title, the Navbar, and some subheadings.
The language bar should always be displayed fixed at the top of the page. The welcome message button on the left corner should link to the UN home page . Available languages should be placed on the far right side, in English alphabetical order.
The United Nations logo, including the emblem, are available for use in the six official languages of the UN (Arabic, Chinese, English, French, Russian, Spanish).
Please note that the United Nations logo is only available to UN System partners. Please send inquiries to webmaster@un.org.
To provide consistent and cohesive digital services across different UN websites the UN emblem and the words 'United Nations' should always be placed on the upper left side of the header and link to un.org. The guidelines should be followed - please refer to the 'Masthead' section above.
In a co-branded communication, the divider line between the two logos should be used, ensuring that both logos are of equal visual weight. The arrangement of the logo of the campaign, conference, and/or agency name requires approval from the Department of Global Comumunications through the Web Services Section (webmaster@un.org).
The logo of your unit, department, or project is not necessary and may confuse the audience about the message you are trying to get across. The best way to develop your unit’s, department's or project's image is through consistent use of color, font type, imagery, and by using the UN logo and an approved co-branding element.
Rows must be placed within a .container (fixed-width) for proper alignment and padding
The gutters are defined as 30px (15px on each side of a column)
.col- (iPhone 7 dimensions used below) Max container width: None (auto)
.col-sm- (Tablet 7" dimensions used below) Max container width: 540px
.col-md- (Ipad Portrait dimensions used below) Max container width: 750px
.col-lg- (Desktop dimensions used below) Max container width: 970px
.col-xl- (Desktop HD dimensions used below) Max container width: 1170px
.col-xxl- (Wide desktop HD dimensions used below) Max container width: 1350px