Skip to content

Instantly share code, notes, and snippets.

@danielgolden

danielgolden/page-brand.php

Created June 26, 2015 15:13
Show Gist options
  • Save danielgolden/8ce940595600aed47a33 to your computer and use it in GitHub Desktop.
Save danielgolden/8ce940595600aed47a33 to your computer and use it in GitHub Desktop.
Download ZIP
Template for the online version of the CURE brand guildelines
Raw
page-brand.php
<?php
/*
* Template Name: Brand Guidelines
*/
function brand_guidelines_scripts () {
wp_dequeue_style('main-css');
wp_enqueue_style('brand', '/css/brand.min.css');
wp_enqueue_script('bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js', array('jquery'), '3.3.1', $in_footer = true);
}
add_action('wp_enqueue_scripts', 'brand_guidelines_scripts', 20);
get_header();
?>
<main id="main" data-target=".brand-container">
<div class="row brand-container" >
<div class="aside-nav" data-spy="affix" data-offset-top="135" data-offset-bottom="200">
<ul class="nav nav-tabs" role="tablist">
<li><a href="#section-brand-guidelines">Brand Guidelines</a></li>
<li><a href="#section-logo">Logo</a></li>
<li><a href="#section-color">Color Palette</a></li>
<li><a href="#section-typography">Typography</a></li>
</ul>
<ul class="nav nav-tabs" role="tablist">
<li><a href="#section-writing-style">Writing and Style</a></li>
<li><a href="#section-writing-guidelines">Writing Guidelines</a></li>
</ul>
<ul class="nav nav-tabs" role="tablist">
<li><a href="#section-resources">Additional Resources</a></li>
<li><a href="#section-map">CURE Map</a></li>
</ul>
</div>
<div class="aside-nav-content" id="aside-nav-content">
<h1 id="section-brand-guidelines">Brand Guidelines</h1>
<p class="lead-paragraph">
CURE is an organization that strives for excellence in all areas of operation and
communication as part of its mission to be “Healing the sick and proclaiming the
kingdom of God.”
</p>
<p>
The spirit of the Brand Standards Guide is to provide a tangible resource to help
ensure the proper level of excellence is applied to all matters of organizational
communication - both internal and external - where the CURE brand is represented.
</p>
<p>
Visually, the brand image represents what the organization stands for. While the
mission of CURE reaches far beyond logos and branding, the visual and written
aspects of communication coming from the organization should appropriately reflect
the weight of CURE’s mission at all times.
</p>
<h3 id="section-logo">Our Logo <a href="#" class="btn-secondary-small">Download Logos</a></h3>
<p>
The CURE logo is the visual representation of CURE’s brand image. The primary green
color represents life, and the lime green color represents energy and urgency. In
marketing and collateral it should always be given a place of appropriate visual
hierarchy.
</p>
<div class="row logo-examples">
<div class="col-3">
<h5>Standard Logo</h5>
<p class="brand-caption">The standard logo should be used whenever possible.</p>
<a href="/img/curekids2014/cure-logo.svg" download class="brand-image standard-logo"></a>
</div>
<div class="col-3">
<h5>Standard Logo - Inverted</h5>
<p class="brand-caption">For use against dark backgrounds.</p>
<a href="/img/cure-logo-one-color.svg" download class="brand-image standard-logo-inverted"></a>
</div>
<div class="col-3">
<h5>Stacked Logo</h5>
<p class="brand-caption">Use where space or layout do not permit the standard logo.</p>
<a href="/img/cure-logo-stacked.svg" download class="brand-image stacked-logo"></a>
</div>
</div>
<h4>Guidelines</h4>
<div class="row">
<div class="col-2">
<p>You should...</p>
<ul class="check-list">
<li>Use the logo to link back to CURE</li>
<li>Use the logo in a blog post about CURE</li>
<li>Use a vector file format of the logo for use in print</li>
<li>Send an email to design@cure.org with questions about logo use</li>
</ul>
</div>
<div class="col-2">
<p>You should not...</p>
<ul class="x-list">
<li>Warp the logos proportions or rotate the logo</li>
<li>Recreate the logo using an alternate font family</li>
<li>Use the logo on a low contrast background</li>
<li>Apply the logo with shadows, patterns, or intricate backgrounds</li>
</ul>
</div>
</div>
<hr>
<h3 id="section-color">Color Palette <a href="#" class="btn-secondary-small">Download Swatches</a></h3>
<p>
The CURE brand color palette is designed to convey a handful of key concepts. The majority of
shades are based around skintones, for the intention of highlighting that what CURE does is
all about people, and a global perspective on humanity - thus shades from light to dark.
</p>
<div class="row">
<div class="col-4">
<div class="color color-green-primary"></div>
<span class="color-name">Primary Green</span>
<ul class="color-values">
<li>#198c45</li>
<li><strong>RGB:</strong> 25, 140, 69</li>
<li><strong>CMYK:</strong> 85, 21, 99, 7</li>
</ul>
</div>
<div class="col-4">
<div class="color color-lime-green"></div>
<span class="color-name">Lime Green</span>
<ul class="color-values">
<li>#92d400</li>
<li><strong>RGB:</strong> 146, 212, 0</li>
<li><strong>CMYK:</strong> 47, 0, 100, 0</li>
</ul>
</div>
<div class="col-4">
<div class="color color-brown-primary"></div>
<span class="color-name">Primary Brown</span>
<ul class="color-values">
<li>#2f2511</li>
<li><strong>RGB:</strong> 47, 37, 17</li>
<li><strong>CMYK:</strong> 59, 63, 81, 71</li>
</ul>
</div>
<div class="col-4">
<div class="color color-brown-secondary"></div>
<span class="color-name">Secondary Brown</span>
<ul class="color-values">
<li>#928a76</li>
<li><strong>RGB:</strong> 146, 138, 118</li>
<li><strong>CMYK:</strong> 42, 39, 54, 6</li>
</ul>
</div>
</div>
<hr>
<h3 id="section-typography">Typography</h3>
<h4>Frutiger</h4>
<p>
The Frutiger Family is the primary typeface of the CURE brand. It is typically
used for headings (75 Black or 76 Black Italic), body copy (55 Roman), captions
(56 Italic) and most normal uses.
</p>
<ul class="typography-example">
<li class="frutiger-light">
<span class="large-example">Aa</span>
<span class="typeface-name">Frutiger 45 Light</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li class="frutiger-roman">
<span class="large-example">Aa</span>
<span class="typeface-name">Frutiger 55 Roman</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li class="frutiger-bold">
<span class="large-example">Aa</span>
<span class="typeface-name">Frutiger 65 Bold</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li class="frutiger-black">
<span class="large-example">Aa</span>
<span class="typeface-name">Frutiger 65 Black</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
</ul>
<h4>Tisa Pro</h4>
<p>
Tisa Pro is the secondary typeface of the CURE Brand. Tisa should be used in cases
where a complementary typeface is required, or in cases where a formal aesthetic
is appropriate.
</p>
<ul class="typography-example tisa-typography-example">
<li>
<span class="large-example">Aa</span>
<span class="typeface-name">Tisa Pro Regular</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li>
<span class="large-example">Aa</span>
<span class="typeface-name">Tisa Pro Regular Italic</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li>
<span class="large-example">Aa</span>
<span class="typeface-name">Tisa Pro Bold</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
<li>
<span class="large-example">Aa</span>
<span class="typeface-name">Tisa Pro Bold Italic</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
</ul>
<h4>Hand of Sean</h4>
<p>
The Hand of Sean font is the brand complement typeface. Projecting a playful, handwritten
feel, it’s perfect for scenarios where a complementary typeface is needed for callouts,
etc. Typically used in the brand lime green color, and kerned positively apart enough to
be legible.
</p>
<ul class="typography-example hand-of-sean-typography-example">
<li>
<span class="large-example">Aa</span>
<span class="typeface-name">Hand of Sean</span>
<span class="uppercase-example">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<span class="lowercase-example">abcdefghijklmnopqrstuvwxyz</span>
</li>
</ul>
<hr>
<h1 id="section-writing-style">Writing and Style</h1>
<p class="lead-paragraph">
To ensure consistency and excellence across all media, CURE holds all representations of the
organization to the highest standards, including all uses of the written word.
</p>
<h3 id="section-writing-guidelines">Writing Guidelines</h3>
<p>
The CURE brand is represented in writing by the use a of a professional yet comfortable tone.
When writing as the organization or as an individual representing the organization, avoid the
use of an informal voice. Special attention should be paid to avoid non-standard usages of the
English language, such as beginning sentences with conjunctions, proper use of
their/there/they’re, etc.
</p>
<p>All writing for CURE must be approved by the Communication Manager before it is published.</p>
<h4>Style Guide</h4>
<p>CURE has adopted the following style standards:To</p>
<ul>
<li>
CURE always uses the Oxford comma. In a list of three or more items or clauses, the conjunction
should always be preceded by a comma.
</li>
<li>
Numbers smaller than 10 should be written out, while numbers from 10 and higher should be
represented with numerals. Numbers from 1 million and higher may be represented as a combination
of numeral and text, as demonstrated in this sentence. In the event that numbers both smaller
and larger than 10 appear in the same sentence, however, all of the numbers should use numerals.
</li>
<li>
The word “gospel” should only be capitalized if it is referring to a specific book (e.g., the
<em>Gospel of Matthew</em>) or to the collection of those books from the Bible (the Gospels). When
referring to the general message of the Christian faith, use a lowercase “gospel.”
</li>
<li>
The word “Bible” should always be capitalized unless it is being used as a reference to something
other than the Holy Bible (i.e., “Seth Godin’s new book is the bible of marketing”).
</li>
<li>
Pronouns referring to God should be capitalized (i.e., “When God created the world, He began with
light.”) The only exception to this rule is when quoting a translation of the Bible that does not
follow this style, in which case the quote itself should follow the translation exactly. However,
other writing in the same piece outside of the quote should still follow this rule.
</li>
<li>The word “kingdom” in the phrase “kingdom of God” should remain lowercase.</li>
<li>
The word “hospital” in the phrases “CURE hospital” and “CURE hospitals” should remain
lowercase.
</li>
<li>
When referring to a specific CURE hospital, there are two acceptable naming conventions. You may use
either CURE plus the name of the country where the hospital is located (e.g., CURE Kenya, CURE
Philippines, etc.) or the legal name of the hospital (e.g., AIC CURE International Hospital, Tebow
CURE Hospital, etc.). Do not use the CURE name plus the city (e.g., CURE Kijabe, CURE Davao, etc.).
There is one exception to this rule; Oasis Hospital is always referred to as “Oasis Hospital” and
should not be referred to as “CURE UAE.”
</li>
</ul>
<p>
CURE generally follows the <em>Chicago Manual of Style</em>, and that document can be used as a style
reference to guide your writing.
</p>
<h4>General Name Usage</h4>
<p>
When CURE is mentioned in copy text (articles, emails, headlines, etc.) it should always be styled
using all capital letters, e.g. “CURE” rather than “cure” or “Cure.”
</p>
<p>
Because “International” does not appear in the CURE logo, it is acceptable to refer to CURE
International as simply “CURE” in writing. The word “International” can be included or left out at
the discretion of the writer.
</p>
<div class="row">
<div class="col-2">
<p>Do:</p>
<ul class="check-list">
<li>CURE</li>
</ul>
</div>
<div class="col-2">
<p>Don’t:</p>
<ul class="x-list">
<li>Cure</li>
<li>cure</li>
</ul>
</div>
</div>
<h4>Website URL Usage</h4>
<p>
When the Website URL is mentioned in copy text, it should always be styled using all lowercase letters,
e.g., “cure.org” rather than CURE.org or Cure.org . The only exception to this rule would be in a
context where the URL is used in a sentence that is otherwise styled in all capital letters, e.g.
“VISIT CURE.ORG FOR MORE INFORMATION.”
</p>
<p>
When mentioning the URL, never include a “www” prefix. The URL may be represented as “cure.org” or
“http://cure.org” only. The “www” prefix is unnecessary and does not serve any useful purpose. The
inclusion of “http://” or “https://” is optional. In most scenarios it is not needed, but it may be used
when needed to emphasize that a web address is being given.
</p>
<div class="row">
<div class="col-2">
<p>Do:</p>
<ul class="check-list">
<li>cure.org</li>
<li>http://cure.org</li>
<li>https://cure.org</li>
</ul>
</div>
<div class="col-2">
<p>Don’t:</p>
<ul class="x-list">
<li>Cure.org</li>
<li>CURE.org</li>
<li>www.cure.org</li>
<li>http://www.cure.org</li>
</ul>
</div>
</div>
<hr>
<h1 id="section-resources">Additional Resources</h1>
<h3 id="section-map">CURE Map <a href="#" class="btn-secondary-small">Download Map</a></h3>
<p>
The map below is a visual representation of the of each of the locations where we have
hospitals, clubfoot clinics, hydrocephalus programs, and partnerships. This map is updated
every 6 months and each of the countries where we’re located are included on the map.
</p>
<a href="#" class="cure-map" download><img src="/img/curekids2014/cure-map.jpg" alt="CURE Map"></a>
</div>
</div>
</main>
<script>
$('.aside-nav').on('affix.bs.affix', function() {
$('.aside-nav-content').addClass('affix-active');
});
$('.aside-nav').on('affixed-top.bs.affix', function() {
$('.aside-nav-content').removeClass('affix-active');
});
$('body').scrollspy();
</script>
<?php
get_footer();
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment