PDF Archive

Easily share your PDF documents with your contacts, on the Web and Social Networks.

Share a file Manage my documents Convert Recover PDF Search Help Contact



VERY Quick Styleguide .pdf


Original filename: VERY-Quick-Styleguide.pdf

This PDF 1.3 document has been generated by / Mac OS X 10.13.3 Quartz PDFContext, and has been sent on pdf-archive.com on 13/02/2018 at 11:21, from IP address 212.98.x.x. The current document download page has been viewed 112 times.
File size: 20 MB (1 page).
Privacy: public file




Download original PDF file









Document preview


Quick SoluJon for Branding Consistency
A Very Quick SoluJon…

Typography
Lato Light - AaBbCcDdEeFfGgHhIiJjKkLlMmNnOo…

H1

FONT SIZE 48PX
COLOR #000

Lato Light - AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXx…

H2

FONT SIZE 32PX
COLOR #000

Lato Regular - AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890…
H3

FONT SIZE 24PX
COLOR #000

Lato light - AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890…
P1

FONT SIZE 16PX
COLOR #000

Lato regular - AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890…
P2

FONT SIZE 14PX
COLOR #000

Colors
DEEP PURPLE

dpurple1

#300B27

dpurple2

#451039

dpurple3

#641753

dpurple4

#834575

dpurple5

#9B6A90

PURPLE

purple1

#531E44

purple2

#772B62

purple3

#AB3F8D

purple4

#BB65A3

purple5

#C883B5

DEEP GREY

dgrey1

#332F39

dgrey2

#403B48

dgrey3

#504A5B

dgrey4

#6A6473

dgrey5

#807B87

GREY

grey1

#B8B5B5

grey2

#C9C8C8

grey3

#DCDBDB

grey4

#EBEBEB

grey5

#FAFAFA

OTHER

red

#E74C3C

orange

#FF9800

green

#2ECC71

BuLons
BUTTON 1 - INACTIVE

BUTTON 1 - IDLE

BuYon 1

BUTTON 1 - HOVER

BuYon 1

BuYon 1

Width: 220px
Height: 40px
Fill: #807B87
Label: Lato Bold, 14px

Width: 220px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 10px 20px 0 rgba(48, 11, 39, .15)

Width: 220px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 5px 10px 0 rgba(48, 11, 39, .3)

BUTTON 2 - INACTIVE

BUTTON 2 - IDLE

BUTTON 2 - HOVER

BuYon 2

BuYon 2

BuYon 2

Width: 220px
Height: 40px
Stroke: #807B87
Label: Lato Bold, 14px

Width: 220px
Height: 40px
Stroke: #AB3F8D
Label: Lato Bold, 14px

Width: 220px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px

BUTTON 3 - INACTIVE

BUTTON 3 - IDLE

BUTTON 3 - HOVER

BuYon 3

BuYon 3

BuYon 3

Width: 200px
Height: 40px
Fill: #807B87
Label: Lato Bold, 14px

Width: 200px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 10px 20px 0 rgba(48, 11, 39, .15)

Width: 200px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 5px 10px 0 rgba(48, 11, 39, .3)

BUTTON 4 - INACTIVE

BUTTON 4 - IDLE

BUTTON 4 - HOVER

BuYon 4

BuYon 4

BuYon 4

Width: 200px
Height: 40px
Stroke: #807B87
Label: Lato Bold, 14px

Width: 200px
Height: 40px
Stroke: #AB3F8D
Label: Lato Bold, 14px

Width: 200px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px

BUTTON 5 - INACTIVE

BUTTON 5 - IDLE

BUTTON 5 - HOVER

BuYon 5

BuYon 5

BuYon 5

Width: 180px
Height: 40px
Fill: #807B87
Label: Lato Bold, 14px

Width: 180px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 10px 20px 0 rgba(48, 11, 39, .15)

Width: 180px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 5px 10px 0 rgba(48, 11, 39, .3)

BUTTON 6 - INACTIVE

BUTTON 6 - IDLE

BUTTON 6 - HOVER

BuYon 6

BuYon 6

BuYon 6

Width: 180px
Height: 40px
Stroke: #807B87
Label: Lato Bold, 14px

Width: 180px
Height: 40px
Stroke: #AB3F8D
Label: Lato Bold, 14px

Width: 180px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px

BUTTON 7 - INACTIVE

BUTTON 7 - IDLE

BUTTON 7 - HOVER

BuYon 7

BuYon 7

BuYon 7

Width: 150px
Height: 40px
Fill: #807B87
Label: Lato Bold, 14px

Width: 150px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 10px 20px 0 rgba(48, 11, 39, .15)

Width: 150px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px
Box-shadow: 0 5px 10px 0 rgba(48, 11, 39, .3)

BUTTON 7 - INACTIVE

BUTTON 7 - IDLE

BUTTON 7 - HOVER

BuYon 8

BuYon 8

Width: 150px
Height: 40px
Stroke: #807B87
Label: Lato Bold, 14px

BuYon 8

Width: 150px
Height: 40px
Stroke: #AB3F8D
Label: Lato Bold, 14px

Width: 150px
Height: 40px
Fill: #AB3F8D
Label: Lato Bold, 14px

ApplicaJon examples
All

New

Pending

Booked

Processing

Create new order

Finished

2

BOOKING

Lawrence Shelton

Robert Gardner
16:23
30.10.2017

Tue, 31.10.2017

37 Feeney Freeway

9:00 AM
FINISHED

ZignaTWO

Lawrence Shelton

FROM

AUTOMATED MESSAGE

16:23
30.10.2017

$189,00

Hi Robert,
Travel expenses included

Thank you very much for choosing me as your photographer for this
booking. I will reach back to you as soon as possible with a date & gme
confirmagon or a counter suggesgon.

Image retouching
2 Virtual stagings

Meanwhile, I wish you have a wonderful day!

2D Floor plan

If you have any quesgons, feel free to contact me at (2521) 355 356
Best regards,
Tyler Phillips
Zigna Photographer

Choose the number of images
5

See examples
Thank your so much Tyle

Some notes & Jps
There are going to be moments when you will have to go a liLle bit beyond this guide, especially when it comes to body text.

This is very far from a definite style guide, but it should fix some small issues for the moment.

When you have big parts of color, avoid going for the same purple as the buLons. Too much color is not good.
Instead, go for some darker shade, maybe .purple1 or .dpurple3. A good example is the top of the chat given as example above.

Choose this package


Document preview VERY-Quick-Styleguide.pdf - page 1/1

Related documents


very quick styleguide
plugnz
pyramid
szablon
css3 cheat sheet
css3 cheat sheet


Related keywords