{"id":91,"date":"2022-01-27T14:33:17","date_gmt":"2022-01-27T19:33:17","guid":{"rendered":"https:\/\/www.ramapo.edu\/brand\/?page_id=91"},"modified":"2022-04-21T10:24:21","modified_gmt":"2022-04-21T14:24:21","slug":"design-standards","status":"publish","type":"page","link":"https:\/\/www.ramapo.edu\/brand\/design-standards\/","title":{"rendered":"Design Standards"},"content":{"rendered":"<ul>\n<li><a href=\"#s1\">Color Palette<\/a><\/li>\n<li><a href=\"#s2\">Color Usage<\/a><\/li>\n<li><a href=\"#s3\"><span class=\"s1\">Graphic Elements<\/span><\/a><\/li>\n<li><a href=\"#s4\"><span class=\"s1\">Duotones<\/span><\/a><\/li>\n<li><a href=\"#s5\"><span class=\"s1\">Typography<\/span><\/a><\/li>\n<\/ul>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<h3><a id=\"s1\"><\/a>Color Palette<\/h3>\n<p>Beyond our logo, color is the most recognizable aspect of our visual brand identity.<\/p>\n<h4>Primary Palette<\/h4>\n<p>Using our primary palette appropriately is one of the easiest ways to make sure our materials reflect a cohesive Â鶹´«Ã½ brand.<\/p>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#862633\" width=\"70%\" height=\"125\"><\/td>\n<td bgcolor=\"#72111F\" width=\"30%\" height=\"125\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>Maroon<\/strong><\/p>\n<p>PANTONE:<span class=\"Apple-converted-space\">\u00a0 <\/span>202 C<br \/>\nCMYK: 1 \/ 98 \/ 58 \/ 44<br \/>\nRGB: 134 \/ 38 \/ 51<br \/>\nHEX: #862633<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong> Maroon 50% Opacity<br \/>\nMultiply Effect on Maroon*<\/strong><\/p>\n<p>HEX: #72111F<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#25282A\" width=\"70%\" height=\"125\"><\/td>\n<td bgcolor=\"#545658\" width=\"30%\" height=\"125\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>\u00a0Cool Black<\/strong><\/p>\n<p>PANTONE: 426 C<br \/>\nCMYK: 81 \/ 87 \/ 55 \/ 83<br \/>\nRGB: 37 \/ 40 \/ 42<br \/>\nHEX: #25282A<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>\u00a0Cool Black: 75% Tint<\/strong><\/p>\n<p class=\"p1\">HEX: #545658<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h4>Secondary Palette<\/h4>\n<p>Our secondary palette serves to accent our primary colors and should be used sparingly.<\/p>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#C41E1E\" width=\"70%\" height=\"100\"><\/td>\n<td bgcolor=\"#A42228\" width=\"30%\" height=\"100\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>Red<\/strong><\/p>\n<p>PANTONE: 199 C<br \/>\nCMYK: 0 \/ 100 \/ 79 \/ 0<br \/>\nRGB: 196 \/ 30 \/ 39**<br \/>\nHEX: #C41E1E**<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong> Red 25% Opacity<br \/>\non Maroon*<\/strong><\/p>\n<p>HEX: #A42228**<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#D7D2CB\" width=\"50%\" height=\"100\"><\/td>\n<td bgcolor=\"#EAE9E5\" width=\"25%\" height=\"100\"><\/td>\n<td bgcolor=\"#F7F7F5\" width=\"25%\" height=\"100\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>Warm Gray<\/strong><\/p>\n<p>PANTONE: Warm Gray 1 C<br \/>\nCMYK: 10 \/ 10 \/ 11 \/ 0<br \/>\nRGB: 215 \/ 210 \/ 203<br \/>\nHEX: #D7D2CB<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong> 50% Tint*<\/strong><\/p>\n<p>HEX: #EAE9E5**<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong> 20% Tint*<\/strong><\/p>\n<p>HEX: #F7F7F5**<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#CBA052\" width=\"70%\" height=\"100\"><\/td>\n<td bgcolor=\"#DAC094\" width=\"30%\" height=\"100\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>GOLD<\/strong><\/p>\n<p>PANTONE: 7407 C<br \/>\nCMYK: 8 \/ 29 \/ 71 \/ 9<br \/>\nRGB: 203 \/ 160 \/ 82<br \/>\nHEX: #CBA052<\/p>\n<p><em><b>Only to be used for graphic elements or for text on a dark background.<\/b><\/em><\/td>\n<td align=\"left\" valign=\"top\">\n<p class=\"p1\"><b>Gold 50% Tint*<\/b><\/p>\n<p>HEX: #DAC094<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td bgcolor=\"#BC8C3D\" width=\"60%\" height=\"100\"><\/td>\n<td width=\"5%\" height=\"100\"><\/td>\n<td bgcolor=\"#B09455\" width=\"35%\" height=\"100\"><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong>DARK GOLD<\/strong><\/p>\n<p>PANTONE: 4026 C<br \/>\nCMYK: 7 \/ 37 \/ 79 \/ 17<br \/>\nRGB: 188 \/ 140 \/ 61<br \/>\nHEX: #BC8C3D<\/p>\n<p><em><strong>Only to be used as 18+pt text or bold text on a white background <\/strong><\/em><\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\">\n<\/td>\n<td align=\"left\" valign=\"top\">\n<p align=\"top\"><strong> Special Occasions ONLY<\/strong><\/p>\n<p>PANTONE: 10128 C<br \/>\nMetallic Gold<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><i>*Different tints\/shades may be used then the versions that are displayed.<span class=\"Apple-converted-space\">\u00a0 <\/span>**Color differs from the PANTONE swatch breakdown for website purposes.<\/i><\/p>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-8\">\n<h3><a id=\"s2\"><\/a>Color Usage<\/h3>\n<p class=\"p1\">It is important that we consider all people when designing for our community which means that we have to design for those whom may have disabilities such as color blindness. Meeting ADA (American Disability Act) standards is important to our outreach efforts. Here are examples of unacceptable\/acceptable ways to use the colors from the color palette. Please contact the office of Marketing and Communications if you have questions about usage.<\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<div class=\"infoBox col-sm-12 col-lg-12 \"><div class=\"boxTitle\">Designer Tip<\/div><div class=\"boxContent\">\n<p class=\"p1\">If you need assistance to make sure your designs meet accessibility standards, please reference the following websites:<\/p>\n<ul>\n<li class=\"p2\"><span class=\"s1\"><a href=\"http:\/\/coolors.co\/contrast-checker\" target=\"_blank\" rel=\"noopener\">Contrast Checker<\/a><\/span><\/li>\n<li class=\"p2\"><a href=\"http:\/\/hclwizard.org:3000\/cvdemulator\/\"><span class=\"s1\">Colorblind Simulator<\/span><\/a><\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n<\/div>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Acceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-117\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg\" alt=\"Education Emboldened postcard - acceptable\" width=\"630\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg 630w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable-300x203.jpg 300w\" sizes=\"(max-width: 630px) 100vw, 630px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Unacceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-116\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Ramapo_BrandGuidelines_FINAL.jpg\" alt=\"Education Emboldened postcard - unacceptable red font on maroon background\" width=\"630\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Ramapo_BrandGuidelines_FINAL.jpg 630w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Ramapo_BrandGuidelines_FINAL-300x203.jpg 300w\" sizes=\"(max-width: 630px) 100vw, 630px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<p class=\"p1\"><span class=\"s1\"><span style=\"color: #c41e1e;\"><strong>\u00d7<\/strong> <\/span>There is not enough contrast between the red text and the maroon background, which does not meet accessibility standards for colorblindness. It is acceptable to have graphic elements in red on maroon, but not text. Gold text on a maroon background works better. but note that the gold text must be 18+ pt or bold.<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Acceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-118\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_acceptable-gold.jpg\" alt=\"Make History Acceptable Postcard\" width=\"613\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_acceptable-gold.jpg 613w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_acceptable-gold-300x201.jpg 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Unacceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-119\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_unacceptable-gold.jpg\" alt=\"Make History Unacceptable Postcard\" width=\"613\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_unacceptable-gold.jpg 613w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_a-chance-to-make-history_unacceptable-gold-300x201.jpg 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<p><span style=\"color: #c41e1e;\"><strong>\u00d7<\/strong><\/span> <span class=\"s1\">There is not enough contrast between the gold colored text and white background to meet ADA standards. This instance you may want to use the darker gold, red, or maroon color.<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Acceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-120\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-acceptable.jpg\" alt=\"Bold Doesn't Look Back acceptable text example\" width=\"613\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-acceptable.jpg 613w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-acceptable-300x151.jpg 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">Unacceptable<\/span><\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-121\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-unacceptable.jpg\" alt=\"Bold Doesn't Look Back unacceptable text example\" width=\"613\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-unacceptable.jpg 613w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/color-usage_pushing-ahead-unacceptable-300x151.jpg 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<p><span style=\"color: #c41e1e;\"><strong>\u00d7<\/strong><\/span> <span class=\"s1\">Red text on the cool black background does not meet ADA standards.\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<h3 class=\"p1\"><a id=\"s3\"><\/a><span class=\"s1\">Graphic Elements<\/span><\/h3>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-4\">\n<p class=\"p1\"><span class=\"s1\" style=\"color: #c41414;\"><b>A. Circle Accent \/ <\/b><\/span>Circle accents are set in any color and multiplied over photos and pattern holding-shapes.<\/p>\n<p class=\"p1\"><span class=\"s1\"><b><span style=\"color: #c41414;\">B. Underline \/<\/span> <\/b><\/span>Underline <b>Action Condensed <\/b>in headlines to add emphasis and visual interest. Thickness should mimic the weight of the type.<\/p>\n<p class=\"p1\"><span class=\"s1\" style=\"color: #c41414;\"><b>C. Cross-Hatch Pattern \/ <\/b><\/span>Patterns can be set in colors from our palette and placed in a rectangular or (semi-) circular holding shape.<\/p>\n<p class=\"p1\"><span class=\"s1\" style=\"color: #c41414;\"><b>D. Mega-Type \/ <\/b><\/span>Outline<b> Open Sauce<\/b>, set in a large type size, and place it breaking the edge of the grid to accent pieces.<\/p>\n<p class=\"p1\"><span class=\"s1\" style=\"color: #c41414;\"><b>E. Cutouts \/ <\/b><\/span>Cut out people, places, or things and set them in full-color or duotone for a distinctive way to include photography.<\/p>\n<p class=\"p1\"><span class=\"s1\" style=\"color: #c41414;\"><b>F. Checker Pattern \/ <\/b><\/span>See \u201cCross-Hatch Pattern.\u201d<\/p>\n<p class=\"p1\"><span class=\"s1\"><b><span style=\"color: #c41414;\">G. Badge \/<\/span> <\/b><\/span>Set in our bright red, these shapes contain short phrases or numbers and are multiplied over photos and pattern holding shapes.<\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-127\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/graphic-elements2.jpg\" alt=\"RCNJ Graphic Elements in use examples\" width=\"800\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/graphic-elements2.jpg 800w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/graphic-elements2-256x300.jpg 256w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/graphic-elements2-768x900.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<h3 class=\"p1\"><a id=\"s4\"><\/a><span class=\"s1\">Duotones<\/span><\/h3>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-9\">\n<p class=\"p2\">Color duotones are an effective way to add color and create a neutral backdrop for text and graphics. We can use a duotone effect on our cutouts, full-bleed images, and photos cropped into a shape.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-104 aligncenter\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/duo-tones-examples.png\" alt=\"Duotone examples\" width=\"700\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/duo-tones-examples.png 700w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/duo-tones-examples-300x287.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<div class=\"infoBox col-sm-12 col-lg-12 \" style=\"float: right;margin-left: 1%;margin-bottom: 1%;\"><div class=\"boxTitle\">Designer Tip<\/div><div class=\"boxContent\">\n<p>To make a photograph duotone in InDesign, first open the image in Photoshop. In the top menu, select <b>Image &gt; Mode &gt; Grayscale.<\/b> Save the image as a <b>TIFF <\/b>or <b>jpeg<\/b>, and import into InDesign. Click once on the image to change the background color. Click twice to change the foreground color.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<h3 class=\"p1\"><a id=\"s5\"><\/a><span class=\"s1\">Typography<\/span><\/h3>\n<p class=\"p2\">Just as we choose different words to convey different messages, the typeface we use can have a profound effect on our communications. Consistently using the official fonts selected for Ramapo strengthens and reinforces the brand.<\/p>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4>Headers<\/h4>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-123\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font-496x1024.png\" alt=\"Action Condensed font and alternatives\" width=\"363\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font-496x1024.png 496w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font-145x300.png 145w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font-768x1586.png 768w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font-744x1536.png 744w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/action-condensed-font.png 839w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4>Headers, Subheads, Body Copy<\/h4>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-124\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font-590x1024.png\" alt=\"Open Sauce One font and alternatives\" width=\"432\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font-590x1024.png 590w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font-173x300.png 173w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font-768x1334.png 768w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font-884x1536.png 884w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/open-sauce-font.png 1018w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Hierarchy Examples<\/div><div class=\"c_content\">\n<p class=\"p1\">Follow these best practices when working with Ramapo\u2019s typefaces.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-129\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Hierarchy-Example.png\" alt=\"Hierarchy examples\" width=\"850\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Hierarchy-Example.png 850w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Hierarchy-Example-300x275.png 300w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/Hierarchy-Example-768x704.png 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<\/div><\/div>\n<div class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Typography Tips<\/div><div class=\"c_content\">\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">LEADING<\/span><\/h4>\n<p class=\"p2\">Line spacing, called leading, should be set tight,<br \/>\nbut not too tight. For body copy, try leading that\u2019s two or three points higher than the type size.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-130 alignnone\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/leading-example.png\" alt=\"Visual examples of leading\" width=\"404\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/leading-example.png 404w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/leading-example-209x300.png 209w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><\/p>\n<\/div>\n<div class=\"sColumn col-sm-12 col-md-12 \">\n<h4 class=\"p1\"><span class=\"s1\">TRACKING<\/span><\/h4>\n<p class=\"p2\">The space between letters is referred to as tracking. As a rule, set tracking slightly looser for captions, and slightly tighter for headlines.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-131 alignnone\" src=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/tracking-example.png\" alt=\"Visual examples of Tracking\" width=\"471\" srcset=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/tracking-example.png 471w, https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/tracking-example-257x300.png 257w\" sizes=\"(max-width: 471px) 100vw, 471px\" \/><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Color Palette Graphic Elements Duotones Typography Color Palette Beyond our logo, color is the most recognizable aspect of our visual brand identity. Primary Palette Using our primary palette appropriately is one of the easiest ways to make sure our materials reflect a cohesive Â鶹´«Ã½ brand. Secondary Palette Our secondary palette serves to accent our [&hellip;]<\/p>\n","protected":false},"author":457,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-91","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design Standards - Brand Guidelines || Â鶹´«Ã½ of New Jersey<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ramapo.edu\/brand\/design-standards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Standards\" \/>\n<meta property=\"og:description\" content=\"Color Palette Graphic Elements Duotones Typography Color Palette Beyond our logo, color is the most recognizable aspect of our visual brand identity. Primary Palette Using our primary palette appropriately is one of the easiest ways to make sure our materials reflect a cohesive Â鶹´«Ã½ brand. Secondary Palette Our secondary palette serves to accent our [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ramapo.edu\/brand\/design-standards\/\" \/>\n<meta property=\"og:site_name\" content=\"Brand Guidelines\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RamapoCollege\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-21T14:24:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ramapocollegenj\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/\",\"url\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/\",\"name\":\"Design Standards - Brand Guidelines || Â鶹´«Ã½ of New Jersey\",\"isPartOf\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg\",\"datePublished\":\"2022-01-27T19:33:17+00:00\",\"dateModified\":\"2022-04-21T14:24:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ramapo.edu\/brand\/design-standards\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage\",\"url\":\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg\",\"contentUrl\":\"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg\",\"width\":630,\"height\":426,\"caption\":\"Education Emboldened postcard - acceptable\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/design-standards\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Â鶹´«Ã½ of New Jersey Home Page \u00bb Marketing and Communications \u00bb Brand Guidelines\",\"item\":\"https:\/\/www.ramapo.edu\/brand\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Standards\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#website\",\"url\":\"https:\/\/www.ramapo.edu\/brand\/\",\"name\":\"Brand Guidelines\",\"description\":\"Â鶹´«Ã½ of New Jersey Brand Guidelines\",\"publisher\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ramapo.edu\/brand\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#organization\",\"name\":\"Â鶹´«Ã½ of New Jersey\",\"url\":\"https:\/\/www.ramapo.edu\/brand\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ramapo.edu\/wp-content\/uploads\/2015\/10\/Ramapologo.png\",\"contentUrl\":\"https:\/\/www.ramapo.edu\/wp-content\/uploads\/2015\/10\/Ramapologo.png\",\"width\":224,\"height\":88,\"caption\":\"Â鶹´«Ã½ of New Jersey\"},\"image\":{\"@id\":\"https:\/\/www.ramapo.edu\/brand\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RamapoCollege\",\"https:\/\/x.com\/ramapocollegenj\",\"https:\/\/instagram.com\/ramapocollegenj\/\",\"https:\/\/www.linkedin.com\/edu\/school?id=18868\",\"https:\/\/www.pinterest.com\/ramapocollege\/\",\"http:\/\/www.youtube.com\/user\/ramapocollege\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design Standards - Brand Guidelines || Â鶹´«Ã½ of New Jersey","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ramapo.edu\/brand\/design-standards\/","og_locale":"en_US","og_type":"article","og_title":"Design Standards","og_description":"Color Palette Graphic Elements Duotones Typography Color Palette Beyond our logo, color is the most recognizable aspect of our visual brand identity. Primary Palette Using our primary palette appropriately is one of the easiest ways to make sure our materials reflect a cohesive Â鶹´«Ã½ brand. Secondary Palette Our secondary palette serves to accent our [&hellip;]","og_url":"https:\/\/www.ramapo.edu\/brand\/design-standards\/","og_site_name":"Brand Guidelines","article_publisher":"https:\/\/www.facebook.com\/RamapoCollege","article_modified_time":"2022-04-21T14:24:21+00:00","og_image":[{"url":"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@ramapocollegenj","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/","url":"https:\/\/www.ramapo.edu\/brand\/design-standards\/","name":"Design Standards - Brand Guidelines || Â鶹´«Ã½ of New Jersey","isPartOf":{"@id":"https:\/\/www.ramapo.edu\/brand\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage"},"image":{"@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg","datePublished":"2022-01-27T19:33:17+00:00","dateModified":"2022-04-21T14:24:21+00:00","breadcrumb":{"@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ramapo.edu\/brand\/design-standards\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/#primaryimage","url":"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg","contentUrl":"https:\/\/www.ramapo.edu\/brand\/wp-content\/uploads\/sites\/364\/2022\/01\/eductaion-emboldened-acceptable.jpg","width":630,"height":426,"caption":"Education Emboldened postcard - acceptable"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ramapo.edu\/brand\/design-standards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Â鶹´«Ã½ of New Jersey Home Page \u00bb Marketing and Communications \u00bb Brand Guidelines","item":"https:\/\/www.ramapo.edu\/brand\/"},{"@type":"ListItem","position":2,"name":"Design Standards"}]},{"@type":"WebSite","@id":"https:\/\/www.ramapo.edu\/brand\/#website","url":"https:\/\/www.ramapo.edu\/brand\/","name":"Brand Guidelines","description":"Â鶹´«Ã½ of New Jersey Brand Guidelines","publisher":{"@id":"https:\/\/www.ramapo.edu\/brand\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ramapo.edu\/brand\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ramapo.edu\/brand\/#organization","name":"Â鶹´«Ã½ of New Jersey","url":"https:\/\/www.ramapo.edu\/brand\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ramapo.edu\/brand\/#\/schema\/logo\/image\/","url":"https:\/\/www.ramapo.edu\/wp-content\/uploads\/2015\/10\/Ramapologo.png","contentUrl":"https:\/\/www.ramapo.edu\/wp-content\/uploads\/2015\/10\/Ramapologo.png","width":224,"height":88,"caption":"Â鶹´«Ã½ of New Jersey"},"image":{"@id":"https:\/\/www.ramapo.edu\/brand\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RamapoCollege","https:\/\/x.com\/ramapocollegenj","https:\/\/instagram.com\/ramapocollegenj\/","https:\/\/www.linkedin.com\/edu\/school?id=18868","https:\/\/www.pinterest.com\/ramapocollege\/","http:\/\/www.youtube.com\/user\/ramapocollege"]}]}},"_links":{"self":[{"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/pages\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/users\/457"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":27,"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/pages\/91\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/pages\/91\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/www.ramapo.edu\/brand\/wp-json\/wp\/v2\/media?parent=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}