Blue Clover Devices

The Style Guide

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY
Using this Guide

The purpose of this guide is to ensure consistent use of

the Blue Clover Devices brand throughout all company
materials, including, and especially, marketing and sales
materials. In addition, the BCD Messaging Framework
contains key concepts that are crucial to effective and
consistent messaging.

Please familiarize yourself with the brand guidelines

and messaging framework, and refer back to this
document frequently. An effective company identity
relies on every employee maintaining the brand and
messaging standards.

The BCD Style

BCD is THE IoT ODM. Our style is designed to be
unassuming, straight forward, informational, clear,
consistent, and honest. Primarily, our customers
are businesses and we stay away from flashy, “wow-
factor“ design in order to maintain a professional,
business appearance.

Blue Clover Devices The Style Guide Version 1.0—07.14.14

Contents

Logo Layout
The Blue Clover Devices Logo ..................................... 4 Paper Sizes ................................................................... 16
Logo Specifications and Usage ............................... 5 Grids ................................................................................ 17
Logo Don’ts ..................................................................... 6 Rules .............................................................................. 18
Favicon/Shortened Logo Options ............................ 7
Imagery
Typography Product ............................................................................ 19
Primary Typeface ........................................................... 8 People and Settings .................................................... 20
Body Text Ratios ........................................................... 9 Graphical Elements .................................................... 21
Header to Body Ratios ................................................ 10
Alignment ....................................................................... 11 General Guidelines
Business Document Typeface ................................. 12 Bringing It All Together ................................................. 22
Coding Typeface ............................................................ 13

Color
Primary Color Palette .................................................. 14
Secondary Color Palette and Tints .......................... 15

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY
Logo
The Blue Clover Devices Logo

This section covers exactly how you can use the Blue
Clover logo. The logo should only be used as specified
in this document. The logo itself should never be altered
beyond the options presented in this guide.

The blue clover represents the uniqueness of BCD.

It’s also a refreshing, positive symbol of growth, life,
commitment to sustainability of our business.

Blue Clover Devices Blue Blue Clover Devices Grey

PANTONE 294 C PANTONE Cool Gray 9C
C100 M90 Y29 K19 C55 M47 Y44 K10
R33 G52 B105 R119 G119 B122
HEX 002E6C HEX 7877A

4 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Logo
Logo Specifications and Usage

The logo must always have “clear space” around it. Minimum clear space Full-color logo

The amount of clear space is the same has the height

of the clover leaf. This space must be kept empty of
graphics and images.

Having clear space ensures that the BCD logo is always

easy to read and never competes with anything other
elements on the page.
Full-color reverse logo
Also, the logo should only be used in specific color
combinations. The acceptable colors are shown to
the right.

Minimum size (print) Minimum size (web)

19mm 80px

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 5
Logo
Logo Don’ts

On this page you’ll find a few examples of what not

to do with the BCD logo.

If in doubt about a particular scenario not shown

please adhere strictly to the rules presented on the
previous page. SOLUTIONS
Don’t change or alter the Don’t lock-up text to the logo. Don’t distort, rotate or crop the Don’t add drop shadows to the
colors in any way. logo in any way. logo.

Occus essit, sit entio

ipsanim usapiet ommod
quia num quibus ut
offici quam, cumGa.

Don’t use a one-color version of Don’t create alternate versions Don’t add an outline or use the Don’t use the logo in text.
the logo.* of the logo. logo in outline form.

Always ensure proper legibility. Don’t add graphics to the logo.

*If a printer is unable to use color continue to use the color version of the logo and allow the printer to convert to gray scale

6 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Logo
Favicon

The only occasion for using the clover alone is

as a 16px square web favicon.

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 7
Typography
Primary Typeface

Roboto is the primary typeface for Blue Clover Devices. Roboto Thin Roboto Medium
Font weights from Light to Black are available for use, ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
however Roboto Thin should not be used. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
The following pages cover how, when, and when not to abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
use Roboto. 1234567890 1234567890

Roboto Light Roboto Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890

Roboto Regular Roboto Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890

8 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Typography
Body Text Ratios

Roboto Light is the text weight designated for body BlueClover Devices is an ODM servicing clients in the IoT marketplace. Our proven
copy. Medium is used when it is necessary to highlight development and production process is designed specifically to bring new products to
a certain word or phrase in a sentence or paragraph. market as efficiently as possible.
Bold should be used for subheads and for stand-alone
10pt on 13.2pt Our cross-cultural organization bridges the best of class in hardware and software with
text that needs greater emphasis such as highlighting
8.5pt leading above design and manufacturing.
specific text in a table or a chart. Black is reserved for
headlines.

The ratio for leading in body copy is 10 to 13.2

(or 132% leading) and paragraph spacing is 85% of BlueClover Devices is an ODM servicing clients in the IoT marketplace.
the font size and is always specified as space before Our proven development and production process is designed specifically
not after the paragraph. Using 10 pt type as our
to bring new products to market as efficiently as possible.
example again, paragraph spacing would be 8.5 pts.
Our cross-cultural organization bridges the best of class in hardware
12pt on 15.8pt
10.2pt leading above and software with design and manufacturing.

BlueClover Devices is an ODM servicing clients in

the IoT marketplace. Our proven development and
production process is designed specifically to bring
new products to market as efficiently as possible.
Our cross-cultural organization bridges the best
16pt on 21.1pt
13.6pt leading above of class in hardware and software with design.

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 9
Typography
Header to Body Ratios

Paragraph heads are always the same size as body

but at least two weights heavier. Medium is the
preferred choice.
Header 1
Roboto Black 35pt ODM Evolved
Excellence in Manufacturing and Design
Header 2
Main Header: preferred weight is black. Roughly 290% Roboto Light 17.5pt
larger than the body (from the baseline to the cap height
of two lines of copy)

Secondary headers should be roughly half the height of Paragraph Head

the header and the weight should match the weight of Roboto Bold 12pt Enabling the Promise of IoT
the body copy.
BlueClover Devices is an ODM servicing clients in the IoT
marketplace. Our proven development and production process
is designed specifically to bring new products to market as
efficiently as possible. Our cross-cultural organization bridges
the best of class in hardware and software with design and
manufacturing. Our goal is to deliver reliable results, develop
Body
Roboto Light 12pt lasting partnerships, and produce useful enduring products.

10 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Typography
Alignment

Alignment should be left justified rag right as much Our cross-cultural organization bridges the
as possible. best of class in hardware and software with
design and manufacturing. Our goal is to
Left Aligned deliver reliable results.

Our cross-cultural organization bridges the

best of class in hardware and software with
design and manufacturing. Our goal is to
Right Aligned deliver reliable results.

Our cross-cultural organization bridges the

best of class in hardware and software with
design and manufacturing. Our goal is to
Center Aligned deliver reliable results.

Our cross-cultural organization bridges the

best of class in hardware and software with
design and manufacturing. Our goal is to deliver
Justified reliable results.

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 11
Typography
Business Document Typeface

Palatino is the primary font used in text heavy Palatino Regular

documents (e.g. legal documents, contracts or other ABCDEFGHIJKLMNOPQRSTUVWXYZ
documents that are not marketing focused and generally
created in text editor applications). abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOTE: Font substitutions may occur when files are
opened in native applications on other devices. So 1234567890
sending a MS Word file that has been prepared using
Palatino will not necessarily display in Palatino. However
Palatino Bold
a PDF will preserve the font selection across devices.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890

12 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Typography
Coding Typeface

Menlo is the fixed width font for showing code. Menlo Regular
NOTE: It is often useful to use color when showing
ABCDEFGHIJKLMNOPQRSTUVWXYZ
code. Please refer to the secondary color palette abcdefghijklmnopqrstuvwxyz
when doing so. abcdefghijklmnopqrstuvwxyz
1234567890

Menlo Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 13
Colors
Primary Color Palette

BC Devices uses two primary colors and a primary

highlight color. The primary colors are the same as PANTONE Black 6 C
those in the logo. C73 M67 Y65 K80
R21 G21 B21
Tints of the primary colors are offered here and can be
used, for example, to add definition to a row in a table, PANTONE Cool Gray 11
C67 M58 Y55 K35
give emphasis on a sidebar or create a tint behind a tab
R78 G78 B80
or button on the web

NOTE: BCD Blue and Gray should only be used to BCD Gray BCD Blue BCD Orange
represent the brand and should not be mixed in with
secondary colors.

The highlight orange is to be used as the first choice in

highlighting for special call outs. It’s important not to
overuse the highlight color. Please keep use minimal to Blue Clover Devices Grey Blue Clover Devices Blue Blue Clover Devices Orange
PANTONE Cool Gray 9C PANTONE 294 C PANTONE D536-2U
ensure effectiveness C55 M47 Y44 K10 C100 M90 Y29 K19 C0 M73 Y98 K0
R119 G119 B122 R33 G52 B105 R242 G105 B36
An alternate background color for pages can be used HEX 7877A HEX 002E6C HEX 7877A
to enhance the effect of white or highlights in pictures,
PANTONE 7682 C 100%
as well as add contrast to juxtaposed white pages, and C63 M43 Y8 K0
differentiating sections in a document or website. 60% Tint R174 G174 B175 R174 G174 B175

NOTE: The tints of the BCD Blue are not exact tints PANTONE 277 C 100%
but have been altered slightly in hue and saturation to C30 M13 Y1 K0
25% Tint R221 G221 B221 R221 G221 B221
maintain a truer visual impression of the BCD Blue color.
The gray color is a true tint from the main color and we PANTONE 277 C 60%
C8 M3 Y0 K0
have also provided matching darker shades in lieu of 10% Tint R241 G241 B242 R241 G241 B242
true black. The highlight color should not be tinted.

14 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Colors
Secondary Color Palette and Tints

The secondary palette is designed to be used where

different colors help convey information clearly, such as
a pie chart or table, or the need for clear delineation of
areas on a page. PANTONE 7406U PANTONE 632U
C0 M31 Y97 K0 C76 M28 Y2 K0
Ideally these colors are not used in high volume and R253 G183 B30 R35 G149 B206
are always used in a context where it is clear to the HEX FCB61D HEX 2295CE
reader that multiple colors are needed to organize
the information and NOT used to simply add color to
60% Tint R254 G212 B120 R123 G191 B226
a page.

Tints are provided in order to accommodate additional

needs. When more colors are needed consider cycling 25% Tint R254 G237 B199 R200 G229 B243
through the lighter tints.

The creme color shown in the lower right is the only 10% Tint R255 G248 B232 R233 G244 B250
color that can be used as a full background color on
pages. This is an alternate to having a white page and
can be used to contrast a section of a document or a
web site.

PANTONE 370U PANTONE Cool Gray 1C

C65 M27 Y100 K9 C13 M11 Y12 K0
R101 G140 B60 R219 G217 B214
HEX 658B3C HEX DAD8D6

60% Tint R163 G186 B138 R233 G232 B231

25% Tint R217 G226 B206 R246 G245 B245

10% Tint R240 G243 B236 R251 G251 B251

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 15
Layout
Paper Sizes

Blue Clover Devices uses ISO A standard page sizing.

A0 A1

A Series Formats

Size mm Inches

0 841x1189 33.1x46.8

1 594x841 23.4x33.1

2 420x594 16.5x23.4

3 297x420 11.7x16.5
A4 A5 A2
4 210x297 8.3x11.7

5 148x210 5.8x8.3
A8 A6

6 105x148 4.1x5.8 A7

7 74x105 2.9x4.1 A3

8 52x74 2.0x2.9

9 37x52 1.5x2.0

10 26x37 1.0x1.5

16 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Layout
Grids

All pages should be based on a grid structure, whether Five column

vertical grid
they are printed or on-line. For horizontal layouts such as example
web pages, Power Point presentations, and horizontally
oriented printed pieces, we use a 6 column, 5 row grid.

For vertically oriented pages (either web or print) the grid

will be either 4 or 5 columns and 6 rows (this is ideal for
a vertically oriented A4 page size for example).

Gutters and space between rows in the grid should be

12% of the column and row widths respectively. Five column
horizontal
Page margins should be twice the gutter width on all grid example
four sides. This can be reduced in the case of technical
documents—but not below the width of the gutter.
Four column
vertical grid
example

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 17
Layout
Rules

Rules may be used as graphical elements to separate 7.0pt

information on a page or to top off content. There
are three thicknesses of rules to suit different design 2.0pt
needs (.25pt, 2pt, and 7pt). Solid rules should never
be used vertically.
.25pt
Dotted and dashed rules should be used only
when necessary to indicate something temporary
or ‘phantom.’ And, never used interchangeably with
solid rules.

12pt on 12pt

Custom dotted line

18 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Imagery
Product

This section outlines brand standards for photos

and imagery.

Soft natural light: avoid overly dramatic lighting and

highlighting, or overly dramatic shadows.

Normal perspective: Just as with lighting - nothing Don’t use extreme angles
overly dramatic. A simple “human” angle and perspective or harsh lighting
of the product being shot.

Completeness: Show the entire product when possible,

not just a part of it. If showing a detail show all of the
detail. Present a complete view of the subject. Images
should not bleed off the layout.
Don’t crop the product
or show overly
reflective surfaces

Don’t shoot on a dark

or textured background

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 15
Imagery
People and Settings

Lighting: soft, natural lighting is ideal. Both for

maintaining consistency with the product pictures
as well as not over dramatizing the subject.

Focus: Subject of the photograph should be clear.

A picture of a person working should show that person
concentrated on what their activity and show what Don’t use clique imagery or
monochromatic color effects
they are doing. A picture featuring a person not
working should show that person - facing the camera -
with a smile.

Completeness: Like the product shots, show the entire

subject of the photo. It should always be clear what
a picture is about. Avoid abstract or metaphorical
Make sure the image has
photographs. Images should not bleed off the layout. a clear point of view and
is not too cluttered

Keep the photo natural and

don’t over use blur effects

debiti aut
doluptas
am q
Don’t place text on
top of images
16 Blue Clover Devices The Style Guide Version 1.0—07.14.14
Imagery
Graphical Elements

Graphical imagery and design should be kept to a

minimum. When used, keep it simple, ideally stick to
straight forward geometric shapes (e.g. circles, triangles,
Outlined
squares, and rectangles). They should always be used Basic Shapes
with a purpose in mind that is clear to the viewer.
Either categorization, emphasis or organization of the
information on the page.

BCD will not make use of icons or symbols for

Filled
decorative purposes to represent concepts, areas of Basic Shapes
their business, categories etc. When icons are needed
to clarify information they should be simplified and
based on the basic shapes mentioned above. Icons
should never have unnecessary decorative flourishes.

Example of icon built

using basic shapes

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY 17
General Guidelines
Bringing It All Together

Here we give some guidance on how elements should be White space separates
the main content areas
balanced in any given design. Always adhere to the grid, from the edges of the The five column layout
typography and imagery rules as stated in this guide. page and logo gives the page struc-
ture but also allows for
“White” (or unused) space is a key element in any layout. flexibility
It gives the viewer an opportunity to take a breath and
digest the information that is being presented, along
the lines of the silence in between words and sentences
when someone is speaking. Try to have a minimum of
Molupta Turestem
25% white space spread throughout any layout.
Equatiatet omnihitis eum quis sit ipsandelit queIdebiti aut doluptas am Lorem Ipsum Dolor
quia cum fuga. Nam nobitatio coressi cone venis estio molla voluptate
Equatiatet omnihitis eum quis sit ipsandelit
Images should always be contextual and have a clear con pliti a dit alique audi cus, aspel inciis dolupta ssitae prat acea namus
num dessunt, etur?
queIdebiti aut doluptas am quia cum fuga.
Nam nobitatio coressi cone venis estio molla

purpose. Always refer to images with copy, either a Igendic tet lam qui cor accullorem quas consedia duci consequ
ationsequam aborepra nonem aut autaqui utae prore nimus alicabore
voluptate con pliti a dit alique audi cus, aspel
inciis dolupta ssitae prat acea namus num

caption or from the body copy of the piece. Never bleed rendit ventiis. dessunt, etur?

Igendic tet lam qui cor accullorem quas

images off the page or abut them against each other. Special consideration
Iquae vel molupta
turestem eumet eaque
eati aut volo te dem
consedia duci consequ ationsequam aborepra
nonem aut autaqui utae prore nimus alicabore

Try to keep margins intact so that the grid is effective.

volorehenis nam quiant.

is given to the photo vid quunt odissita aut ea sitatem repelese

Mi, nonsed que maio.
Dolestiosam niet mo
millibeatet utecus et
pore, volupta apicabo restecatur? Epero eius
allowing it to breath next
esteceat.

inus doluptur, iderumetur, si omnimus, quam

intiaerum rendit ventiis.
Breaking the grid: It will not always be possible to stay to the body copy
Qui none nonsedi gnienit

perfectly in line with the grid. Always start by lining up EsErsped quas incil ipsam demquam receatem
quo quibus eostior untotae vitatiae. Itati rem

the top and the left. etur, tem exernatem estis ide necestis nimi,
sunto ium remolup tataquo offic torat quo
dolum erum quam quatur ad utetur anto
occabor eperatur? Quiam velestio blanis autem
sequam iuntiuntia quiat.

Duci consequ ationsequam aborepra nonem aut

autaqui utae prore nimus alicabore vid quunt
odissita aut ea sitatem repelese pore, volupta
apicabo restecatur?Im faccus sandignis et laut
faccum qui sequam ilisi vent volor arumet unte
repeligenis intur?

18 Blue Clover Devices The Style Guide Version 1.0—07.14.14

Blue Clover Devices The Style Guide Version 1.0—07.14.14 PROPRIETARY AND CONFIDENTIAL—FOR INTERNAL USE ONLY
Hong Kong Registered Office San Francisco USA Office

BCD China Electronics Ltd Blue Clover Devices

20/F Tung Wai Comm Bldg 1001 Bayhill Dr, Ste 200

109-111 Gloucester Road San Bruno, CA 94066 USA

Wanchai, Hong Kong +1-650-616-407

Blue Clover Devices The Style Guide Version 1.0—07.14.14