Design advice

All NIHR Comms

 

This guide is intended for webmasters who have an NIHR website. It lists a series of specifications used on the main NIHR website that can be applied to your website to ensure it matches NIHR web style and approach.

NIHR branding

The corporate NIHR logo is placed top left on the main NIHR website, in the website header.

Your NIHR sub-logo should likewise be place top left on your NIHR website, in the website header. You can download your sub-logo from the NIHR Hub. Full guidance on using NIHR sub-logos is available on the visual identity pages.

The NIHR website uses the Lato font. This is a free Google font. You can download the various versions from the NIHR Hub. The backup font should be sans-serif. The default font size should be 1em/rem (which equates to 16px).

The NIHR website uses the NIHR colour palette, with specific colour codes for specific audiences.

 

General style

The NIHR web style makes heavy use of white space to give a sense of openness and clean design. Pages are topped with full-width hero images, either as a stand alone element or below a heading bar containing useful elements like page title and search bar.

The majority of lines in the site are horizontal, not vertical. Rectangular blocks have rounded corners at the leading end. These are used for summaries, quick links, and other short pieces of content, and often overlay hero images.

Motifs

NIHR design motifs are used, but sparingly, as accents to design. These are used in two ways:

  • Overlaying elements: eg photos or structural elements. Generally these are offset slightly. See the NIHR website homepage for example.
  •  Accent images: eg for headers. Generally these are coded as background images. See the Apply for Funding page for example.

Icons

The NIHR website uses the Font Awesome icon library.

Code blocks

Below are several snippets of CSS that you can replicate on your site, if you wish. This list will be updated as we expand the NIHR code library.

Buttons

This code will ensure your buttons match those on the NIHR website.

.button {
border: 1px solid #fa453c;
border-radius: 100px;
cursor: pointer;
padding: 0.3em 1em;
color: #193E72;
font-size: 1.2em;
font-weight: 800;
background-color:#FFF;
margin-bottom: 1rem;
}

.button a {
color: #193E72;
font-size: 1.2rem;
font-weight: 800;
background-color:#FFF;
}

.button:hover, .button:hover a {
color: #fff;
background-color: #fa453c;
}

Headings

This code will ensure your headings are the same size as those on the NIHR website. Headings are in NIHR blue.

h1, h1 a {
font-size: 1.8rem;
}
h2, h2 a {
font-size: 1.6rem;
}
h3, h3 a {
font-size: 1.4rem;
}
h4, h4 a {
font-size: 1.2rem;
}
h5, h5 a {
font-size: 1rem;
}
h6, h6 a {
font-size: 0.8rem;
}

 

Accessibility

We chose to stop using PDF documents for the main NIHR website, using HTML instead as it is more accessible. You can find out more in the full NIHR Accessibility Statement on the NIHR website and in the accessibility pages on the NIHR Communications website.

How to describe the NIHR

Please use the following description of the NIHR:

The NIHR funds, enables and delivers world-leading health and social care research that improves people's health and wellbeing and promotes economic growth.”

Please link to the NIHR website from this description.

 

Acceptable Use Policy

We have recently developed an  Acceptable Use Policy in conjunction with PA Consulting. All sites on the NIHR domain are required to comply with the terms of this AUP.

Related pages

Documents