George Street is a street in Sydney that the ServiceRocket and Atlassian offices shared in their early years that was the alleyway in building the companies' partnership. It is also the home of the ServiceRocket-Atlassian Design Guideline that is the repository of the design principles, guides, and assets of ServiceRocket's Atlassian business.
The following principles help us by guiding our design decisions in making the many elements and components that make up this design guideline.
Empowering means that enabling customers to be successful and perform better using our tools and solutions.
It is a design that lets its users to focus so they can be efficient.
An implementation for us to position ourselves and our users and customers to be at best possible scenario to improve and take advantage their Atlassian products.
Being purposeful is being smart and direct in providing a solution that solves the right problems.
These are products and implementations that are backed by research and our experience.
It is also a conscious and consistent effort to improve the problem and how we solve those problems.
To be engaging is being true to our roots - being fun but professional, humble but confident.
It means encompassing an inviting atmosphere for people to want to interact with because of our culture, history, and we keep our work up-to-date.
A design that is centered to people— us and our customers. Implementations that are accessible and relatable through our stories - internal and external.
Being accessible also means that our designs available.
Designs that are easy and not complicated, open and useful.
Our colors are selected for purpose and utility, with consideration for it to be adaptable and engaging. Some of these colors are also linked to our company and/or different products or partners.
Our typography is contemporary and up-to-date. It’s flexible and adaptable to cater to different mediums and different styles and lends support to our messaging.
Our primary font is Hind Madurai from the Indian Type Foundry and is part of a the Hind Multi-script project. The font pairs a humanist-style and monolinear strokes aligning to the flexibility for being accessible and engaging.
Body text. 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.
Open Sans is the substitute and secondary font. The font is a great substitute font given it's range (font weight) but also is a great pairing font with Hind Madurai (default Body Text is Open Sans, not Hind Madurai). A widely accessible system font in all OSes and is web friendly.
Body text. 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.
Georgia is the serif font to be used in conjunction with our primary font. The font is to co-work with the main font where legibility and readability is of primary concern. This are mainly to be used (but not limited to) in legal documents, case studies, etc. wherein the copy is long.
Body text. 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.
Our logos are carefully developed in-house by the product team and our creatives team. The goal is to be able to make easy recognizable symbols that are relatable to the product they signify.
The symbol follows a basic pattern wherein the symbol can only reside in a boundary of a square inside symbol's main circle. This defines a required padding that forms a wall around the perimeter of a circle. The recommended outside margin follows the same dimension as the inside wall.
The Connector Symbols follow a design language that relays the idea of connecting two objects together by always utilizing two arrows. These arrows are implemented on the first letter of the product name where the Atlassian App is connecting to:
The full lockup logo is basically the signature of the app combining the logo's symbol and a wordmark that uses the core typography and primary color. It's spacing is similar to the symbol with no modifications or additions to the text to have a clear presentation of the app.
Below are the downloadable logo packs that contains the Symbols, Wordmarks, and Full Lockups in PNG and SVG formats.
The iconography sets that we use both mimics and pushes forward the design language with its mild curves and implementation of soft colors. The guide offers 2 sets, one for general use and one for system but both can be used interchangeably and independently.
These icons are part of the 6150 pack. There are 38 categories of icons ranging from nature to web development.
Note that there more than a thousand icons and each of them has to be re-colored to align with our design guideline. Ad-hocly modify each icon when needed to use.
For system icons we use FontAwesome, for its simplicity, and ease of use. FontAwesome icons share the same characteristics with many of our design elements, particularly our general use icons and logos.
Similar to our iconography, we use two sets of illustration sets - custom and Humaaans. Both offer a whimsical approach that relays an idea and our diversity.
Humaaans is a design library built in Sketch by Pablo Stanley. The library lets us customize the base palette, create new symbols and basically create illustrations that aligns to our guidelines and branding.
Our modified Humaaans Sketch library is contstantly being updated so always reference the copy from the link below to always get the most up to date copy.
The extended library includes single or groups of Humaans that interact with different mockups and elements to represent a given scenario or an apps related topic, challenge, or solution.
An important asset in our guideline as our photography open up our products and solutions to be more accessible and engaging. Our photographs are centered to the people and culture of ServiceRocket and follows a specific style of being friendly and natural.
The primary button is used to direct and attract users to do primary actions in the UI. The suggested colors to be used as background color for the primary button are the primary colors detailed above (Blue, Green, Yellow, Red).
The secondary button is used to display secondary options to users wherein the action to be done is not the primary action in the UI. The suggested colors to be used as background color for the primary button are the primary colors detailed above (Blue, Green, Yellow, Red).
Click here to get more information about our solutions.
The basic link is a simple implementation with mainly primary blue and font weight changing. It retains the standard web link implementation on hover which underlines the text.
The text input is the most basic field for form fields and is the most used. The text input follows the subtle characteristics of our icons and buttons.
The following are the branding and marketing approved assets that had been templated to follow the guidelines set in this page. These are provided to make it easy for other people to create beautiful and branding aligned assets in an efficient way.
Showcasing our products with clear graphics is key for helping users get to the "aha" moment.
These are the official graphic assets for external communications, website and marketplace. In this libraries you will find: human illustrations, product screenshots, videos, gifs, conceptual images of various sizes and editable files of all the things mentioned.
'%3e%3cg id='Final-Copy-2_2_' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st0' d='M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg id='final---dec.11-2020'%3e%3cg id='_x30_208-our-toggle' transform='translate(-1275.000000, -200.000000)'%3e%3cg id='Final-Copy-2' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st1' d='M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8 h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z'/%3e%3cpath id='x' class='st2' d='M24.6,4c0.2,0.2,0.2,0.6,0,0.8l0,0L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0 l0,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8l0,0L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8 c0.2-0.2,0.6-0.2,0.8,0l0,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z'/%3e%3cpath id='y' class='st3' d='M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8l0,0L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1l0,0 L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l0,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Notice at Collection
.svg)
.png)
