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.

  1. Doloremque laudantium, totam rem aperiam, eaque
  2. Ipsa quae ab illo inventore veritatis et quasi architecto beatae
  3. Vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
  4. 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.

The UN home page uses the Superfish menu plugin. You can add a basic version of the menu (example below) or add a horizontal second tier. Click here for more information on how to implement other versions of the menu (vertical, nav-bar and supersubs)

Example

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)

Extra Small Devices Layout

Small Devices: Tablets (≥576px)

.col-sm- (Tablet 7" dimensions used below) Max container width: 540px

Small Devices Layout

Medium Devices: Tablets (≥768px)

.col-md- (Ipad Portrait dimensions used below) Max container width: 750px

Medium Devices Layout

Large Devices: Desktops (≥992px)

.col-lg- (Desktop dimensions used below) Max container width: 970px

Large Devices Layout

Extra large: Desktops (≥1200px)

.col-xl- (Desktop HD dimensions used below) Max container width: 1170px

Extra Large Devices Layout

Extra extra large: Desktops (≥1400px)

.col-xxl- (Wide desktop HD dimensions used below) Max container width: 1350px

Extra Extra Large Devices Layout

Secondary and footer navigation

A secondary footer would be optional and should be placed above the main footer. This will allow partners to add additional resources links and supporting information that doesn't belong in the footer. This section can be set to display on specific pages, whereas the footer displays on all pages.