UN Web Style Guide

This is a template showcasing the different styles and libraries used on the UN.org home page.

font-family: 'Roboto', sans-serif;

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Weights and styles

Roboto Light

Roboto Regular

Roboto Regular Italic

Roboto Medium

Roboto Bold

Roboto Black

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.3rem (13px) 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.

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.

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.

Example

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

#00ADEF

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.

United Nations

Arabic

United Nations

Chinese

United Nations

English

United Nations

French

United Nations

Russian

United Nations

Spanish

United Nations

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

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

Extra Small Devices Layout

Medium Devices: Tablets (≥768px)

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

Extra Small Devices Layout

Large Devices: Desktops (≥992px)

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

Extra Small Devices Layout

Extra large: Desktops (≥1200px)

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

Extra Small Devices Layout