Stylebook

Version 1.0

Stylebook

Version 1.0

Jump To :

Colors

Typography

Shadows

Iconography

Buttons

Jump To :

Colors

Typography

Shadows

Iconography

Buttons

1.0 Color System

Helps you to create a color theme that reflects your brand’s style.

Helps you to create a color theme that reflects your brand’s style.

1.1 Primary

Linear Gradient

#000000

rgb(0,0,0)

White

#FFFFFF

rgb(255, 255, 255)

1.1 Secundary

Black

#000000

rgb(0,0,0)

White

#FFFFFF

rgb(255, 255, 255)

1.3 Shades of Grey

Grey 1

#161616

rgb(22, 22, 22)

Grey 1

#161616

rgb(22, 22, 22)

Grey 2

#262626

rgb(38, 38, 38)

Grey 2

#262626

rgb(38, 38, 38)

Grey 3

#393939

rgb(57, 57, 57)

Grey 3

#393939

rgb(57, 57, 57)

Grey 4

#525252

rgb(82, 82, 82)

Grey 4

#525252

rgb(82, 82, 82)

Grey 5

#6F6F6F

rgb(111, 111, 111)

Grey 5

#6F6F6F

rgb(111, 111, 111)

Grey 6

#8D8D8D

rgb(141, 141, 141)

Grey 6

#8D8D8D

rgb(141, 141, 141)

Grey 7

#A8A8A8

rgb(168, 168, 168)

Grey 7

#A8A8A8

rgb(168, 168, 168)

Grey 8

#C6C6C6

rgb(198, 198, 198)

Grey 8

#C6C6C6

rgb(198, 198, 198)

Grey 9

#E0E0E0

rgb(224, 224, 224)

Grey 9

#E0E0E0

rgb(224, 224, 224)

Grey 10

#F4F4F4

rgb(244, 244, 244)

Grey 10

#F4F4F4

rgb(244, 244, 244)

2.0 Typography

Headlines, subtitles, body, and captions are creating a cohesive typography experience for your product.

Responsive Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Responsive Paragraphs

Standard Paragraph – Fusce dapibus, tellus ac cursus commodo,

tortor mauris condimentum nibh, ut fermentum massa justo

sit amet risus.

3.0 Shadows

Shadows express the degree of elevation between surfaces. Usage needs to be consistent throughout the product.

4.0 Iconography

Icons are used to communicate an application, a capability, or some other concept or specific entity with meaning for the user.

5.0 Buttons

Buttons communicate actions that users can take.