SDCo-BrandLogo

Brand
Design System

ROLE:

UI/UX Design, Brand Development

While working at Sphero I led the creation of an official brand style guide for the business. This involved developing a core system that served as a base for all asset creation moving foward. From this documentation, I was able to easily create templated files for internal teams to use in order to maintain a consistent brand throughout all channels.

Colors

A systemized organization of essential colors established a universal palette for all teams in the business. These groups became primary, secondary and system.

#3E3E3E
#18ACF2
#F7C708
#D8D8D8
#3E3E3E
#25BCCA
#664B9E
#0082CA
#262626
#3E3E3E
#6EDCD9
#EEA330
#F54055
Grid System

In order to maintain consistency all the way through development, I incorporated a strict guide to follow. Everything was designed around an 8 px grid.

A responsible grid ensured our website worked on all devices. Where needed, elements were redesigned to fit appropriately within the dimensions available.

Primary and seconday buttons create a visual language through out the site. States of buttons provide the user with feedback and interaction.

Button Label

30px

Text Length

30px

Button Label

30px

Text Length

30px

Default

On Hover

Pressed

Button
Button
Button
Button
Button
Button
Watch Now
Watch Now
Watch Now
Button
Button
Button
Button
Button
Button
Button States

Headline

Montserrat

Paragraph

Roboto 16px Regular

Small Paragraph

Roboto 13px Regular
ABCDEFG
HIJKLMN
OPQRSTU
VWXYZ
H1
H2
H3
H4
H5
Sphero is a robotic toy innovator in the education space producing educational bots to help kids explore the world of code
Sphero is a robotic toy innovator in the education space producing educational bots to help kids explore the world of code
Typography
Components Examples
Components Examples

<

Next Project

>

Designing with grit and passion.
Let's team up and get your job done.

©MMXIX Saucey Designs. LLC. All Rights Reserved.