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 22:27, from IP address 98.242.x.x.
The current document download page has been viewed 400 times.
File size: 2.68 MB (26 pages).
Privacy: public file
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
Franchise_Direct_Latin_america_Style_Guide_20160613.pdf (PDF, 2.68 MB)
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..
Use the short link to share your document on Twitter or by text message (SMS)
Copy the following HTML code to share your document on a Website or Blog