Franchise Direct Latin america Style Guide 20160613 .pdf

File information


Original filename: Franchise_Direct_Latin_america_Style_Guide_20160613.pdf

This PDF 1.5 document has been generated by Adobe InDesign CC 2015 (Macintosh) / Adobe PDF Library 15.0, and has been sent on pdf-archive.com on 23/03/2017 at 21:27, from IP address 98.242.x.x. The current document download page has been viewed 331 times.
File size: 2.6 MB (26 pages).
Privacy: public file


Download original PDF file


Franchise_Direct_Latin_america_Style_Guide_20160613.pdf (PDF, 2.6 MB)


Share on social networks



Link to this file download page



Document preview


Franchise Direct Latin America
Website Style Guide
13.06.2016

Introduction
The website style guide is the same tool that our
developers, designers, user experience experts and
product management team use day-to-day to build
and maintain the Franchise Direct Latin America
website. This guide provides a common language
around the UI and design of the site with strict
standards that ensure brand cohesion and
code consistency.
By maintaining all of the website's primary elements
in a single document, we can see how modular
components can be reused, as well as how changes
to those elements will affect the site overall. The style
guide also serves as a curated, archival collection for
design and UX/UI decisions made during the course
of the site's development. Anyone working on the
Franchise Direct Latin America website is encouraged
to stay familiar with this style guide and help ensure
that it is kept up-to-date.
All deviations from this style guide, new functionality,
and new applications to the site needs to be approved
by the Franchise Direct Latin America website
management and design teams. Upon approval these
new components need to be added and/or updated
in the style guide with great detail for further use
and maintenance.

Adaptive Views
Desktop
Desktop < 1200 px 1200 px | 12 columns | 70 px columns | 30 px gutters | 15 px margins
15px

30px

70px

1200px

3

Adaptive Views
Desktop
Desktop < 1200 px 1200 px | 12 columns | 70 px columns | 30 px gutters | 15 px margins

4

Adaptive Views
Tablet
Tablet < 1000 px
15 px

768 px | 6 columns | 98 px columns | 30 px gutters | 15 px margins
30 px

98 px

768px

5

Adaptive Views
Tablet
Tablet < 1000 px

768 px | 6 columns | 98 px columns | 30 px gutters | 15 px margins
15 px

30 px

98 px

768px

6

Adaptive Views
Mobile
Mobile < 768 px
15 px

320px | 2 columns | 130 px columns | 30 px gutters | 15 px margins
30 px

98 px

320px

7

Color Palette and Fonts
Primary

Secondary

Tertiary

PANTONE 7693C

PANTONE 631C

PANTONE 137 C

PANTONE 7690C

#BA5B39

PANTONE 339 C

PANTONE 1585 C

PANTONE 7541 C

PANTONE 192 C

#004876

#0076A9

#FF671B

#37B0C9

#D9E0E2

#FFA400

#00AE8E

#EB0045

PANTONE 7541 C
50% Opacity

#ECEFF0

Fonts

Roboto Bold

Roboto Slab Bold

Roboto Regular

Roboto Slab Regular

Roboto Light

Roboto Slab Light

8

Text Styles
Headings
Desktop

Tablet

Mobile

Heading 1

Heading 1

Heading 1

Roboto Slab Bold

Roboto Slab Bold

Roboto Slab Bold

size: 60 px

size: 48 px

size: 30 px

120% line-height

120% line-height

120% line-height

use: Homepage Banner

use: Homepage Banner

Use: Homepage Banner

Heading 2

Heading 2

Heading 2

Roboto Slab Bold

30 px margin below

Roboto Slab Bold

30 px margin below

Roboto Slab Bold

30 px margin below

size: 36 px

use: Section headers

size: 30 px

use: Section headers

size: 24 px

use: Section Headers

120% line-height

120% Line Height

120% line-height

9


Related documents


franchise direct latin america style guide 20160613
computer application in business
super basic indesign guide
better web type cheat sheet
nreyesportfoliosamples 2010
a4 brochure 2016 digital

Link to this page


Permanent link

Use the permanent link to the download page to share your document on Facebook, Twitter, LinkedIn, or directly with a contact by e-Mail, Messenger, Whatsapp, Line..

Short link

Use the short link to share your document on Twitter or by text message (SMS)

HTML Code

Copy the following HTML code to share your document on a Website or Blog

QR Code

QR Code link to PDF file Franchise_Direct_Latin_america_Style_Guide_20160613.pdf