Historical Population
Interactive data visualisation in d3.js of historic refugee data.
Dataviz
Styleguide
Fonts
Consistency in the use of a typeface plays an important role in reinforcing our organisation’s image. Maintaining rules of type layout will help ensure we have a uniform identity.
Primary typeface: Proxima Nova
Should be used as the primary font for all high level publications and products. The Proxima Nova font family can be found on Adobe Typekit.
Secondary typeface: Lato
The secondary typeface may be used when Proxima Nova is not available and is recommended for digital work, as it’s easy to implement on websites. Lato can be found on Google Fonts.
System typeface: Arial
In certain situations, the primary and secondary typefaces may be unavailable. In these cases, it is acceptable to use an approved crossplatform system typeface generally available on most computers.
Basic Colours
UNHCR uses a basic colour palette to avoid using different versions of the same colour. We encourage using the primary colour set on most materials. Percentage tints can be used where appropriate.
Use CMYK colours on coated and uncoated paper for offset printing, such as magazines, brochures, leaflets, full colour ads, etc.
Use RGB colours for computer presentations, digital displays, TV productions, etc.
Use HEX colours online.
Logo
For all other communication with a wide audience, the visibility logo will be used. Only officially approved language versions of the visibility logo should be used.
Both the horizontal and vertical versions of the visibility logo are available for use. Deciding which version to use depends primarily on the space available for the logo. You should never attempt to remake, edit or change the logo in any way.
Text Styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Page Headers
Header style 1
Guidance notes and reccomendations when to use this header style.
Somalia
Internal displacement
Displacements Monitored by UNHCR Protection and Return Monitoring Network (PRMN)
Header style 2
Guidance notes and reccomendations when to use this header style.
Somalia
Internal displacement
Displacements Monitored by UNHCR Protection and Return Monitoring Network (PRMN)
Header style 3
Guidance notes and reccomendations when to use this header style.
Somalia
Internal displacement
Displacements Monitored by UNHCR Protection and Return Monitoring Network (PRMN)
Buttons
Standard button
Basic buttonsButton size
Guidance notes and reccomendations when to use each button size.Button groups
Guidance notes and reccomendations when to use button groups.Button colors
Guidance notes and reccomendations when to use each colors. Some colours we don't recommend to use can be deleted. Semantic-UI colours to be made consistent with the guidelinesRadio buttons
Horizontal radio buttons
Usage and guidance notes go here.Vertical radio buttons
Usage and guidance notes go here.Visualization Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Visualization Colours
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
