Visual elements

Everything we create should be consistent with who we are as a brand. Good design and conent is what gives SKOOT life and personality . Whether the communication is internal, to a user, or to an investor, the message and design should always feel like it is coming from the brand itself.

Logos

The SKOOT logo is the initial identifier of our company and our brand. Think of it as a snapshot of who we are. Follow these guidelines on how to use them correctly.

The logo

Use the full logo when possible.

The mark

The mark can be used in cases where an icon is required. Place it in a circle or square.

Square

The space around the logo should equal the size of the Os in the icon.

Circle

When in a circle, reduce the logo by 10% to allow the icon to breath.

Clear space

Always surround the logo with clear space, free from any other elements. The minimum space around the logo is equivalent to the “o”s in SKOOT on all four sides.

Colour

Colour distinguishes our brand and helps users identify status, see actions, locate help, and to indicate next steps. The colours are selected to be clear and accessible.

Brand colours

Our primary brand colours comprise of green, white and navy. They should be used in a logical way to guide the user and to highlight certain information.

Brand colours

Colour
Green
Hex
#21A34C
Usage
Actions, Buttons, Links, progress, success and authentication
Colour
Navy
Hex
#17263D
Usage
Body text and headings
Colour
White
Hex
#FFFFFF
Usage
Surfaces and action text

Raw colours

Neutrals
neutral1
#FFFFFF
neutral2
#F6F8FB
neutral3
#EAECF0
neutral4
#D4D9E0
neutral5
#B8C0CC
neutral6
#858B9C
neutral7
#5D6376
neutral8
#394256
neutral9
#17263D
Red
red1
#FCEAEC
red2
#F1A0A8
red3
#D81E30
red4
#B81020
red5
#65141C
Orange
orange1
#FFE6D9
orange1
#FFB58C
orange1
#FF853F
orange1
#B94D0F
orange1
#692A06
Yellow
yellow1
#FFF9E6
yellow2
#FFE68E
yellow3
#FFC805
yellow4
#A67803
yellow5
#663802
Green
green1
#D9FAE6
green2
#89EAB0
green3
#21A34C
green4
#197A39
green5
#0A5222
Blue
blue1
#E5F7FD
blue2
#8CDAF5
blue3
#00ACE9
blue4
#005B9D
blue5
#05286B
Pink
pink1
#FFDEF7
pink2
#FFC4F2
pink3
#FF7CE1
pink4
#C623A1
pink5
#770F60
Purple
purple1
#F0EFFD
purple2
#D3D0FA
purple3
#6E63EF
purple4
#3F2C8D
purple5
#2A1860

Tokens

Typography

SKOOT’s typeface is Rubik. Rubik allows other elements on the page to shine, but its friendly x-height makes it easy to read. We use a combination of Regular (400) and Medium (500) weights to help with hierarchy.

Headings

All headings are set in Rubik Medium (500) and have letter-spacing of 0.2%.

Content

All other content is set in Rubik Regular (400).