Content Delivery Network Visual Reference Guide

Use this CDN to free-up space on your server, assure your project is using the correct styles and assets, and improve load times. With this index you'll be able to copy the correct paths to the files you need or download various assets for other uses. Use of assets is subject to the Samaritan's Purse Permissions of Use. Email ApplicationDevelopers@samaritan.org if you have any questions about the use of this CDN or need to report an issue.

 

Global — SP Logos

These are the official logos for use in your project. Please adhere to the usage suggestions provided for each asset. Logos may not be altered from their original forms. (Do not remove or seperate elements, invert, skew, rotate, etc.)

 

Global — SP Colors

Use these colors in the design of Global Samaritan's Purse digital properties. Do not use tint or shade derivitives of these colors. Instead you may include any value of neutral gray including black and white.

 

Global — SP Fonts

The primary font used on Samaritan's Purse digital properties is Roboto. There are two methods for its implementation.

Option 1. The first option is to link to it from Google's API as a <link> element within the <head> of your HTML document. Copy and paste the following link into the <head> of your HTML document.

        
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Roboto+Condensed:400,400i,700,700i|Roboto+Mono|Roboto+Slab:400,700" rel="stylesheet">

Option 2. The second option is to implement it by referencing this CDN via @font-face at-rules inside your project's CSS file. Copy and paste the following at-rules into your project's CSS file.

        
@font-face {
font-family: 'Roboto-Flex';
src: url('https://cdn.samaritanspurse.org/global/sp/fonts/Roboto-Flex.woff') format('woff-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
@font-face {
font-family: 'Roboto-Flex';
src: url('./global/sp/fonts/Roboto-Flex.woff2') format('woff2 supports variations'),
url('https://cdn.samaritanspurse.org/global/sp/fonts/Roboto-Flex.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}

Roboto

Roboto Condensed

Roboto Mono

Roboto Slab

Roboto Flex

Roboto Flex is a TrueType variable font with 733 characters. It has 13 axes and 0 named instances. It has 2 layout features. To learn more about variable fonts, please read the Variable Fonts Guide MDN page.

This font is hosted in .woff and .woff2 formats for maximum browser compatibility. You can check the latest browser compatibility by searching for .woff on caniuse.com. Be sure to set fallbacks as necessary.

Variations with their value ranges:

The examples below are only to provide proof that the font is being served and to show example variation settings. They are not to be used as a style guide. Your settings will be different. Maybe you'll find this CSS-Tricks page or the wakamaifondue.com site helpful.

 

Global — SP Favicons

The following code and assets should be used so that the Samaritan's Purse brand icon displays clearly on all web, iOS, Android and Windows viewports.

Step 1

Copy and paste the following code into the head of your HTML document.

<!-- The following link & meta lines relate to the proper rendering of favicon across various platforms & browsers --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#798034"> <meta name="theme-color" content="#ffffff">

Step 2

Download, expand and place the contents of sp-favicons.zip in the root of your project.

 

USA — SP Social Media

 

USA — OCC Logos

 

Global — OCC Colors

Use these colors in the design of Global Operation Christmas Child properties. Do not use tint or shade derivitives of these colors. Instead you may include any value of neutral gray including black and white.

 

Global — OCC Favicons

The following code and assets should be used so that the OCC brand icon displays clearly on all web, iOS, Android and Windows viewports.

Step 1

Copy and paste the following code into the head of your HTML document.

<!-- The following link & meta lines relate to the proper rendering of favicon across various platforms & browsers --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#798034"> <meta name="theme-color" content="#ffffff">

Step 2

Download, expand and place the contents of occ-favicons.zip in the root of your project.

 

USA — OCC Event Icons

 

USA — OCC Extranet Icons

 

USA — OCC Email Template Assets

These assets are for specific use within various OCC email templates. Do not use these assets elsewhere.

 

USA — U.S. Disaster Relief Icons

 

USA — U.S. Disaster Relief Colors

Use these colors in the design of U.S. Disaster Relief digital properties. Only use the tint and shade derivitives of these colors shown below.

 

USA - Samaritan's Purse Required Links

 

USA - Samaritan's Purse Required Text

 

Global - Samaritan's Purse Required Links

 

Global - Samaritan's Purse Required Text