George Street

George Street

The ServiceRocket-Atlassian
Design Guideline

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.

Principles

The following principles help us by guiding our design decisions in making the many elements and components that make up this design guideline.

Construct solutions and designs that empower users to be successful.

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.

Solutions Examples
  • Completing project documentations to easily handover when the project ends.
  • Sending referrences/links as a follow-up after a support call.
  • Keeping an updated list of available trainings and webinars via the website and making it easy for people to signup.
Apps Examples
  • Completing project documentations to easily handover when the project ends.
  • Sending referrences/links as a follow-up after a support call.
  • Keeping an updated list of available trainings and webinars via the website and making it easy for people to signup.
Ensure actions and messaging to be purposeful.

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.

Solutions Examples
  • Creating and following a meeting agenda for external and internal meetings.
  • Establishing and sticking with the scope of a contract and not letting scope creep.
  • Providing a clear and direct path on how one can sign up to a newsletter.
Apps Examples
  • Consistent use of terminologies within the application.
  • Using user personas in determining product decisions.
  • Using of branding colors within the application with careful attention to the effects of it to the usability of the application.
Create an atmosphere that invites people to engage with us.

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.

Solutions Examples
  • Using relevant terminologies that are aligned with Atlassian’s and are not dated.
  • Showing our success through our customer stories and also the people behind those success.
  • Proactively reaching out to customers whose contracts and licenses are about to expire, with ready-made packages to make it easy for them to renew.
Apps Examples
  • Use of vibrant, up-to-date, and relatable illustrations in marketing and in-app pages.
  • The use of in-app surveys to ask how the application is performing.
  • Making sure the performance of our websites and applications are optimal for the best user experience.
Make accessible designs that are focused on people’s needs first.

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.

Solutions Examples
  • Highlighting our people and culture through videos and photography.
  • Making easily accessible our many stories with our customers showing many use cases that users can easily relate to.
  • Making it frictionless for people to reach us by being open and transparent in our instructions and mediums.
Apps Examples
  • Testing the colors and texts we use are of proper ratio for contrast for readability.
  • Internationalization is provided to our websites and our products.
  • Our support website and other mediums for communication are easy to use and are available 24/7.

Colors

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.

Color Theory
Primary Colors
FF3A20
A91400
D71A01
FF3A20
FF604B
FF8474
FFAC07
9E6900
C98600
FFAC07
FFBE3D
FFCC67
221F1F
C1BFBD
E6E5E5
30AC51
077825
149837
30AC51
4EBF6C
7BD693
076BFF
003D97
0052CC
076BFF
1A76FF
4991FC
Accent Colors
F0FAFF
FFFDF0
F4F9EA
8791A4
E1EDFF
FFF5F5

Typography

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.

Primary Font

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.

Download the Hind Madurai via Google Fonts

Page title

Hind Madurai, 500-Medium, #076bff

Page subtitle

Hind Madurai, 300-Light, #8791a4

Section title

Hind Madurai, 600-Semibold, #076bff

Subsection title

Hind Madurai, 400-Normal, #4991fc

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, 400-Normal, #221f1f
Helper text e.g. Caption.
Open Sans, 400-Normal, #333
Call to Action
Hind Madurai, 500-Medium, #076bff
Substitute / Secondary Font

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.

Open Sans, 400-Normal, #221f1f
Serif Font

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.

Georgia, 400-Normal, #221f1f

Logos

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.

Symbol Framework

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.

Connector Design Language

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:

  • B for Box
  • D for Drift
  • G for Google Drive
  • S for Salesforce
  • W for Workplace
Full-lockup Framework

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.

Proper spacing is given to the symbol and the wordmark, and a recommended margin between other elements is suggested.
An implementation of the full lockup with a two line wordmark for apps with longer names.
The Composition App full lockup logo

Icons

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.

General Use Icons

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.

System Icons

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.

Illustrations (Work in Progress)

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

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.

Download the George Street Humaaans Sketch library
Scenes
Extended Humaaans Library

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.

Download the Extended Humaaans Library
groups
Singles
MOCKUPS

Photography

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.

Browse our photography assets (not yet available)

Buttons & Links

Primary Button
Sample primary button (try interacting with it)

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).

Normal
Font: Hind Madurai
Font weight: 500 Medium
Text transform: Uppercase
Font color: #FFFFFF
Background-color: #076BFF
Radius: 2px
Inner padding: 16px across
HOVER
Font: Hind Madurai
Font weight: 500 Medium
Text transform: Uppercase
Font color: #FFFFFF
Background-color: #4991FC
Radius: 2px
Inner padding: 16px across
Normal
Font: Hind Madurai
Font weight: 600 Semibold
Text transform: Uppercase
Font color: #4991FC
Background-color: none
Radius: 2px
Inner padding: 16px across
HOVER
Font: Hind Madurai
Font weight: 600 Semibold
Text transform: Uppercase
Font color: #FFFFFF
Background-color: #4991FC
Radius: 2px
Inner padding: 16px across
Pressed
Font: Hind Madurai
Font weight: 500 Medium
Text transform: Uppercase
Font color: #FFFFFF
Background-color: #003D97
Radius: 2px
Inner padding: 16px across
DISABLED
Font: Hind Madurai
Font weight: 500 Medium
Text transform: Uppercase
Font color: #C1BFBD
Background-color: #E6E5E5
Radius: 2px
Inner padding: 16px across
Cursor: Not-allowed
Secondary Button
Sample secondary button (try interacting with it)

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).

Normal
Font: Hind Madurai
Font weight: 600 Semibold
Text transform: Uppercase
Font color: #4991FC
Background-color: none
Radius: 2px
Inner padding: 16px across
HOVER
Font: Hind Madurai
Font weight: 600 Semibold
Text transform: Uppercase
Font color: #FFFFFF
Background-color: #4991FC
Radius: 2px
Inner padding: 16px across
Pressed
Font: Hind Madurai
Font weight: 600 Semibold
Text transform: Uppercase
Font color: #4991FC
Background-color: none
Radius: 2px
Inner padding: 16px across
DISABLED
Font: Hind Madurai
Font weight: 400 Normal
Text transform: Uppercase
Font color: #C1BFBD
Background-color: #E6E5E5
Radius: 2px
Inner padding: 16px across
Cursor: Not-allowed
Basic Link

Click here to get more information about our solutions.

Sample link (try interacting with it)

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.

Normal
Font: Hind Madurai
Font weight: 500 Medium
Font color: #076BFF
HOVER
Font: Hind Madurai
Font weight: 500 Medium
Font color: #076BFF
Text-decoration: Underline

Input Fields

Text Input / Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sample text input (try interacting with it)

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Normal
Label Font: Hind Madurai
Font weight: 500 Medium
Font color: #221F1F
Border color: #C1BFBD
Radius: 2px
Background-shadow: Black, 10% Opacity
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
FOCUSED
Label Font: Hind Madurai
Font weight: 500 Medium
Font color: #221F1F
Border color: #4991FC
Radius: 2px
Background-shadow: Black, 20% Opacity
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
DISABLED
Label Font: Hind Madurai
Font weight: 500 Medium
Font color: #C1BFBD
Border color: #C1BFBD
Radius: 2px
Cursor: Not-allowed

Marketing Assets (In Progress)

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.