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.
font-family: 'Roboto', sans-serif;
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.
Weights and styles
Roboto
Roboto Light
Roboto Regular
Roboto Regular Italic
Roboto Medium
Roboto Bold
Roboto Black
Roboto Condensed
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.
Example
h1. United Nations heading
h2. United Nations heading
h3. United Nations heading
h4. United Nations heading
h5. United Nations heading
h6. United Nations heading
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>.
Example
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.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
- Cras non sodales quam. Fusce posuere dolor eget
- Metus sollicitudin interdum. Nullam eleifend aliquet ante malesuada tincidunt
- Nulla facilisi. Vestibulum auctor nisi cursus semper placerat.
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.
- Doloremque laudantium, totam rem aperiam, eaque
- Ipsa quae ab illo inventore veritatis et quasi architecto beatae
- Vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
- Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.
Labels are applied in the home page and in sidebar menus across the different pages.
This is a label
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.
Blue
#009edb
Dark Grey (80% black)
#333333
Grey (70% black)
#4D4D4D
Light Grey (5% black)
#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)
Extra Small Devices: Phones (<576px)
.col- (iPhone 7 dimensions used below) Max container width: None (auto)
Small Devices: Tablets (≥576px)
.col-sm- (Tablet 7" dimensions used below) Max container width: 540px
Medium Devices: Tablets (≥768px)
.col-md- (Ipad Portrait dimensions used below) Max container width: 750px
Large Devices: Desktops (≥992px)
.col-lg- (Desktop dimensions used below) Max container width: 970px
Extra large: Desktops (≥1200px)
.col-xl- (Desktop HD dimensions used below) Max container width: 1170px
Extra extra large: Desktops (≥1400px)
.col-xxl- (Wide desktop HD dimensions used below) Max container width: 1350px