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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum
Typography

In the process of configuring specific parameters for the guide, I built tools for teams so they could easily select components and customize based on parameters I set in the software.

Typography
Components Examples

Once assets and components were created and approved, I developed a simple navigation that started a journey for visitors and returning guests. This map allowed the website to be set up in a way that would allow flexibility in the future for additional pages.

Components Examples

Sign up for the newsletter.

Thank you! Check your inbox!
Oops! Something went wrong while submitting the form.
©MMXIX Saucey Designs. LLC. All Rights Reserved.