ServiceRocket | Atlassian Platinum Solution Partner - Services, Apps, Training and Support

Branding Guidelines

This document details the different elements used in ServiceRocket's branding of different assets related to our work with Atlassian. Colors, fonts, photos, images and icons can be found here. If there are missing assets that needs to be added or updated, please raise a ticket on the Marketing Jira.

Fonts

Font Family: Hind Madurai

The font Hind Madurai is a free font published and served from Google Fonts. Download: Hind Madurai on Google Fonts.
The font is mainly used on Headers and branding texts, as sampled on the right.

H1. Hind Madurai. 400. 2.5REM.

H2. Hind Madurai. 400. 2.1REM.

H3. Hind Madurai. 400. 1.5REM.

H4. Hind Madurai. 400. 1.2REM.

H5. Hind Madurai. 500. 1REM.

Font Family: Open Sans

A freely available font.
The font is mainly used on main copies.

ServiceRocket brings enterprise-level experience and a deep understanding of business use cases to help you achieve your business outcomes. Whether you're implementing Atlassian for IT/DevOps, Software Development, Customer Support, HR or other business teams, we've seen what works and what doesn't and have designed implementation packages that leverage this experience.

Colors

Primary Palette

The primary palette is constructed from ServiceRocket and Atlassian's Color, and also incorporating different colors from ServiceRocket's different products.

Atl-Sr Blue

HEX: 184067
RGB: 24, 64, 103
CMYK: 77%, 38%, 0%, 60%

ServiceRocket Blue

HEX: 059acc
RGB: 5, 154, 204
CMYK: 98%, 25%, 0%, 20%

Ld Orange

HEX: E1603A
RGB: 225, 96, 58
CMYK: 0%, 57%, 74%, 12%

Whitesmoke

HEX: E8EAEE
RGB: 232, 234, 238
CMYK: 3%, 2%, 0%, 7%

Secondary Palette

The secondary palette are palettes stemming out of the primary colors. These are mainly used to differentiate the different services and products ServiceRocket does for Atlassian.

ITSM Blue

HEX: 2a4480
RGB: 42, 68, 128
CMYK: 67%, 47%, 0%, 50%

Services Blue

HEX: 5090cf
RGB: 80, 144, 207
CMYK: 61%, 30%, 0%, 19%

Apps Blue

HEX: 1960a7
RGB: 25, 96, 167
CMYK: 85%, 43%, 0%, 35%

Ads Blue

HEX: 2051ff
RGB: 32, 81, 255
CMYK: 87%, 68%, 0%, 0%

Green

HEX: 4cdbc4
RGB: 76, 219, 196
CMYK: 65%, 0%, 11%, 14%

Yellow

HEX: ffd15c
RGB: 255, 209, 92
CMYK: 0%, 18%, 64%, 0%

Red

HEX: ff7058
RGB: 255, 112, 88
CMYK: 85%, 43%, 0%, 35%

Logos

Composition

Bring your content to life - tabs, highlights, instant focus, menus and expandable sections

Images

Template

Success Portals Header

HTML code for headers of Success Portals (see comment). Note that H1 tag with class name "header-title" needs to be manually changed depending on where the header is used.

<!-- Docs, Community, Support and Ideas Portals Header -->

<header></header>

<div class="ideas-header"></div>

   <div class="ideas-inner-header w-clearfix"></div>

     <a href="/"></a>

         <img src="https://assets.website-files.com/5a677ce05577f10001188a29/5a7ca38ce85c8900015b85a3_ServiceRocket%20Full%20Lockup.svg" class="ideas-header-image">

       <div class="header-title-holder"></div>

         <h1 class="header-title">Ideas for Atlassian Apps</h1>

         <h2 class="header-subtitle">by ServiceRocket</h2>

       

   

   <a href="https://atlassian.servicerocket.com/contact-us" class="button button--flat button--flat-reverse ideas-button w-button">Contact Us</a>

   <div class="menu-holder"></div>

       <a href="https://atlassian.servicerocket.com/atlassian-apps/all-atlassian-apps" class="ideas-header-link">Marketplace</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://docs.servicerocket.com/" class="ideas-header-link">Docs</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://success.servicerocket.com/support/servicedesk/customer/portal/3/create/45" class="ideas-header-link">Support</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://servicerocket-community.force.com/atlassian/s/" class="ideas-header-link">Community</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://atlassian.servicerocket.com" class="ideas-header-link">Back to Main ➝</a>

 

   <div class="mobile-menu-holder"></div>

       <button onclick="showDropDownMenu()" class="dropbtn">Ideas ▾</button>

         <div id="menuDropDown" class="dropdown-content"></div>

           <a href="https://atlassian.servicerocket.com/atlassian-apps/all-atlassian-apps">Marketplace</a>

           <a href="https://docs.servicerocket.com/">Docs</a>

           <a href="https://success.servicerocket.com/support/servicedesk/customer/portal/3/create/45">Support</a>

           <a href="https://atlassian.servicerocket.com/contact-us">Contact Us</a>

           <a href="https://atlassian.servicerocket.com">Back to Main ➝</a>

         

       

   

   

 

Hubspot Pages Header

HTML code for headers of Success Portals (see comment). Note that H1 tag with class name "header-title" needs NOT to be manually changed as it needs to be used with the "Hubspot Script" (see below) that automatically updates the header title.

<!-- Newsletters, Customer Stories, Guides, Blogs, Podcasts -->

<header></header>

<div class="ideas-header"></div>

   <div class="ideas-inner-header w-clearfix"></div>

     <a href="/"></a>

         <img src="https://assets.website-files.com/5a677ce05577f10001188a29/5a7ca38ce85c8900015b85a3_ServiceRocket%20Full%20Lockup.svg" class="ideas-header-image">

       <div class="header-title-holder"></div>

         <h1 class="header-title" id="header-title"></h1>

         <h2 class="header-subtitle">by ServiceRocket</h2>

       

   

   <a href="https://atlassian.servicerocket.com/contact-us" class="button button--flat button--flat-reverse ideas-button w-button">Contact Us</a>

   <div class="menu-holder"></div>

       <a href="https://www.servicerocket.com/success/newsletters" class="ideas-header-link">Newsletters</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://www.servicerocket.com/success/stories" class="ideas-header-link">Customer Stories</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://www.servicerocket.com/success/guides" class="ideas-header-link">Guides</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://blog.servicerocket.com/adoption" class="ideas-header-link">Blogs</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://www.servicerocket.com/success/webinars" class="ideas-header-link">Webinars</a>

       &nbsp;&nbsp;●&nbsp;&nbsp;<a href="https://atlassian.servicerocket.com" class="ideas-header-link">Back to Main ➝</a>

 

   <div class="mobile-menu-holder"></div>

       <button onclick="showDropDownMenu()" class="dropbtn">Ideas ▾</button>

         <div id="menuDropDown" class="dropdown-content"></div>

           <a href="https://www.servicerocket.com/success/newsletters">Newsletters</a>

           <a href="https://www.servicerocket.com/success/stories">Customer Stories</a>

           <a href="https://www.servicerocket.com/success/guides">Guides</a>

           <a href="https://blog.servicerocket.com/adoption">Blogs</a>  

           <a href="https://www.servicerocket.com/success/webinars">Webinars</a>  

           <a href="https://atlassian.servicerocket.com/contact-us">Contact Us</a>

           <a href="https://atlassian.servicerocket.com">Back to Main ➝</a>

         

       

   

   

 

Shared Footer

Shared footer of websites outside the main website.

<div class="footer"></div>

   <div class="inner-footer"></div>

       <div class="logo-block"><img src="https://assets.website-files.com/5a677ce05577f10001188a29/5a7ca38ce85c8900015b85a3_ServiceRocket%20Full%20Lockup.svg" class="footer-logo"></div>

       <div class="copyright-block"></div>

© Copyright 2018 ServiceRocket Inc. All rights reserved.  ● <a href="https://www.servicerocket.com/legaldocs/privacy-policy" target="_blank" class="link">Privacy Policy</a> ● <a href="https://www.servicerocket.com/legaldocs/privacy-policy" target="_blank" class="link">Terms &amp; Conditions</a>

   

Shared Script

Script for the dropdown of the header button. To be used by the Header HTML.

<script></script>

/** START Drop down Menu Script **/

/** When the user clicks on the button,

toggle between hiding and showing the dropdown content */

function showDropDownMenu() {

   document.getElementById("menuDropDown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

 if (!event.target.matches('.dropbtn')) {

   var dropdowns = document.getElementsByClassName("dropdown-content");

   var i;

   for (i = 0; i < dropdowns.length; i++) {

     var openDropdown = dropdowns[i];

     if (openDropdown.classList.contains('show')) {

       openDropdown.classList.remove('show');

     }

   }

 }

}

/** END Drop down Menu Script **/

Hubspot Script

Script to automatically update the title of the Hubspot header based on the URL of the page.

<script></script>

/** START title Script **/

/** READ: The following script is to dynamically change the Header title of the page

   depending on the URL. This is mainly to be used for Hubspot pages - Blogs, Podcasts, Webinars, etc

   because these pages use 1 template. **/

// without jQuery (doesn't work in older IEs)

document.addEventListener('DOMContentLoaded', function(){

   var url = window.location.href;

   var label = "Resources for Atlassian"

   if(url){

       if(url.includes("blog")){

       label = "Software Adoption Blog for Atlassian";

     } else if(url.includes("stories")){

       label = "Customer Stories for Atlassian";  

     } else if(url.includes("guides")){

       label = "Guides & Ebooks for Atlassian";

     } else if(url.includes("podcast")){

       label = "Nice Work! A Podcast for Atlassian";  

     } else if(url.includes("webinars")){

       label = "Webinars for Atlassian";  

     } else if(url.includes("events")){

       label = "Events";  

     }

   }

   document.getElementById('header-title').innerHTML = label;

   }, false);

/** END title Script **/

Shared Style

CSS of the header and the footer.

<style></style>

@import url('https://fonts.googleapis.com/css?family=Hind+Madurai');

@media only screen and (max-width: 4000px) {

   .menu-holder {

       display: block;

   }

   .header-title-holder {

       float: left;

   }

   .header-title {

       font-size: 1.7rem;

   }

   .header-subtitle {

       font-size: 1.3rem;

   }

   .ideas-header-image {

       height: 70px;

   }

   .ideas-inner-header {

       height: 100px;

       padding-left: 2rem;

       padding-right: 2rem;

       background-repeat: no-repeat, repeat;

   }

   .ideas-header {

       margin-bottom: 5rem;

   }

   .mobile-menu-holder {

       display: none;

   }

}

@media only screen and (max-width: 1655px) {

   .menu-holder {

       display: none;

   }

   .header-title-holder {

       float: left;

   }

   .header-title {

       font-size: 1.5rem;

   }

   .header-subtitle {

       font-size: 1.1rem;

   }

   .ideas-header-image {

       height: 60px;

   }

   .ideas-inner-header {

       height: 100px;

       padding-left: 1.5rem;

       padding-right: 1.5rem;

       background-repeat: no-repeat, repeat;

   }

   .ideas-header {

       margin-bottom: 3rem;

   }

   .mobile-menu-holder {

       display: none;

   }

}

@media only screen and (max-width: 767px) {

   .header-title-holder {

       display: none;

   }

   .header-title {

       font-size: 1.3rem;

   }

   .header-subtitle {

       font-size: 1rem;

   }

   .ideas-header-image {

       height: 50px;

       margin-top: .5rem;

   }

   .ideas-header {

       margin-bottom: 1.5rem;

   }

   .button.button--flat.button--flat-reverse.ideas-button {

       display: none;

   }

   .ideas-inner-header {

       background-position: -40% 0%, 0% 100%;

   }

   .dropbtn {

   color: white;

   padding: 16px;

   border: none;

   cursor: pointer;

   background-color: transparent;

   font-size: 1.3rem;

}

.mobile-menu-holder {

   position: relative;

   display: inline-block;

   float: right;

}

.dropdown-content {

   display: none;

   position: absolute;

   background-color: #184067;

   min-width: 160px;

   overflow: auto;

   box-shadow: 0px 1px 0px 0 rgba(24, 64, 103, .25);

   z-index: 3;

   margin-top: -15px;

   margin-left: -50px;

}

.dropdown-content a {

   color: white;

   font-size: 1rem;

   padding: 12px 16px;

   text-decoration: none;

   display: block;

   font-family: 'Hind Madurai', sans-serif;

}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}

}

.ideas-inner-header {

   display: block;

   width: 100%;

   margin-right: auto;

   margin-left: auto;

   padding-top: 1rem;

   background-image: url("https://assets.website-files.com/5a677ce05577f10001188a29/5aa6d9cd41b9c7473bbd6823_Atlassian%20ServiceRocket%20External%20Portal%20Header%20Bg%20White.svg"), url("https://assets.website-files.com/5a677ce05577f10001188a29/5aa6dc8cf416ef28f402605d_Atlassian%20ServiceRocket%20External%20Portal%20Header%20Bg.svg");

}

.portal-aha-header {

    background-color: #184067;

}

h1 {

   zoom: 120%;

}

/* Headings */

h1, h2, h3, h4, h5, h6 {

   margin:10px 0;

   color: #184067;

   font-family: 'Hind Madurai', sans-serif;

}

.title > h3 {

   color: white

}

.title h3 p > a {

   color: #029BD0

}

.title h3 p > a:hover {

   color: #029BD0

}

.bottom-footer {

    position: absolute;

    left: 0;

    bottom: 0;

    margin-top: 10px;

    width: 100%;

    background-color: #184067;

    color: white;

    font-size: 11px;

}

.bottom-footer .container .row {

    margin: 10px 5px 10px 5px;

}

html {

    position: relative;

    min-height: 100%;

}

body {

    margin: 0 0 30px;

   /* bottom = footer height + margin of the footer */

}

.btn-vote.voted .vote-count, .btn-vote.voted .vote-count-title {

    color: #1D94D1;

    border-color: #1D94D1;

}

.btn-vote.voted {

    border-color: #1D94D1;

}

.btn-vote.voted .vote-status {

    background-color: #1D94D1;

}

/** Custom Header Below **/

div {

   display: block;

}

* {

   box-sizing: border-box;

}

.ideas-header-image {

   margin-right: 1rem;

   float: left;

}

.ideas-header {

   width: 100%;

   height: 100px;

   box-shadow: 0px 1px 0px 0 rgba(24, 64, 103, .25);

   background-color: #184067;

}

.ideas-header-heading {

   float: left;

   font-family: 'Hind Madurai', sans-serif;

   color: #184067;

   font-size: 19px;

   font-weight: 600;

   line-height: 44px;

   margin-top: 15px;

   margin-bottom: 10px;

   margin: 0.67em 0;

}

.button.button--flat.button--flat-reverse.ideas-button {

   margin-top: 15px;

   margin-left: 20px;

   float: right;

}

.button.button--flat.button--flat-reverse {

   border-color: #fff;

   color: #fff;

}

.button.button--flat {

   border: 2px solid #059acc;

   background-color: transparent;

}

.button {

   padding: 0.6499999999999999rem;

   border-radius: 3px;

   box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .55);

   font-family: 'Hind Madurai', sans-serif;

   font-size: 1rem;

   line-height: 1rem;

   font-weight: 500;

   letter-spacing: 0.03rem;

   text-transform: uppercase;

   text-decoration: none;

   display: inline-block;

   cursor: pointer;

}

.menu-holder {

   margin-top: 25px;

   float: right;

   font-family: 'Hind Madurai', sans-serif;

   color: #fff;

   font-size: 0.9rem;

   font-weight: 300;

}

.ideas-header-link {

   color: #fff;

   text-decoration: none;

}

img {

   max-width: 100%;

   vertical-align: middle;

   display: inline-block;

}

a.ideas-header-link:hover, a.ideas-header-link:focus {

   color: white;

   text-decoration: underline;

}

.header-title-holder {

   max-width: 670px;

   color: white;

   margin-left: 60px;

   margin-top: 0px;

}

.header-title {

/*    font-size: 1.7rem;*/

   font-weight: 100;

   color: white;

   letter-spacing: initial;

   line-height: inherit;

}

.header-subtitle {

   line-height: 3px;

   margin-top: 0px;

   font-weight: 100;

/*    font-size: 1.3rem;*/

   color: white;

   letter-spacing: initial;

}

/** Footer Style below **/    

.footer {

   height: 75px;

   box-shadow: 0px -1px 0px 0 rgba(24, 64, 103, .25);

   padding-top: 25px;

   margin-bottom: 25px;

}  

.inner-footer {

   max-width: 1280px;

   margin: auto;

}

.logo-block {

   float: left;

   margin-right: 1rem;

   margin-left: 1rem;

}

.footer-logo {

   height: 50px;

}

.copyright-block {

   float: right;

   padding-top: 25px;

   font-family: 'Hind Madurai', sans-serif;

   color: #184067;

   font-size: 14px;

   margin-right: 1rem;

   margin-left: 1rem;

}

.link:visited {

   color: #184067;

}

.link {

   text-decoration: none;

   color: #184067;

}

ServiceRocket | Atlassian Platinum Solution Partner - Services, Apps, Training and Support
Subscribe to our Newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Facebook Social Share Button
Twitter Social Share Button
LinkedIn Social Share Button
Instagram Social Share Button