When I worked for CBS Interactive, I created some simple style guides for ZDNet to help me and future designers create the same branding for the company.

1. Design and Style Guide
June 2016

2. The purpose of this guideline
document is to provide
guidelines and usage
specifications for using the
ZDNet logo and branding
guidelines for the ZDNet
website.
This document provides
visual guidelines and
recommendations to
implement the branding
for ZDNet. These
guidelines can help echo
the product and brand
experience into your
environment.
ZDNet design and style guide
Welcome
These guidelines contain the
information you need to
consider when designing the
ZDNet web pages, and other
assets for the brand.

3. Name & Logo
Typeface & Use
Color Specifications
Grid and Space
General Padding Guide
Branding is achieved through a
combination of several factors.
This includes the name and
logo, use of color, text,
graphics, style, and other
design elements.
ZDNet design and style guide
Contents

4. Originally found by publisher
Ziff Davis as a general interest
technology portal, the company
has evolved into an enterprise
IT-focused online publication
owned by CNET Networks.
Behind the Name
ZDNet design and style guide
01 Name and Logo

5. It is good to have at least 7px
border space from the corners
of the logo to anywhere the logo
is placed. Ideal to have 14px
clearance space. This lets the
logo breathe and flow naturally
in the environment it is in. Safe
space means other elements
beyond the 14px clearance
space is good to place other
elements with the logo.
Let the logo breathe and flow
ZDNet design and style guide
Logo
safe space
7px clearance space
14px ideal
clearance space

6. Main colors of red and white.
White signifies clarity and
transparency, and red signifies
energy, strength and power.
Together the logo signifies
dominance towards the IT news
field with absolute clarity and
transparency.
Logo colors
ZDNet design and style guide
Logo
Minimum size
On screen: 50 px W
background color:
R:213 G:222 B:227
(#D5DEE3)
Logo color
R:225 G:031 B:023
(#E11F17)

7. To ensure brand consistency,
ZDNet color variations should
only come in its original colors,
with only 2 dark colors as its
background. This ensures that
the logo stands out, but
unobstrusive, while keeping the
brand essence.
Logo should always be clear,
legible, and with no obstructions
and/or complex effects.
Logo Variations
ZDNet design and style guide
Logo
Do Don’t

8. Raleway is an elegant sans-serif
typeface, designed in a single
thin weight. It is a display face
that features both old style and
lining numerals, standard and
discretionary ligatures, a pretty
complete set of diacritics, as
well as a stylistic alternate
inspired by more geometric
sans-serif typefaces than it's
neo-grotesque inspired default
character set.
Raleway Family
Use
ZDNet design and style guide
06 Typeface
Raleway(Bold)
ABCDEF
abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
On all primary text, headers and secondary buttons

9. Use
The huge variety of font weights
and widths will ensure
immenense flexibility, and
consistency for the future
growth of the brand identity.
Raleway Family
ZDNet design and style guide
Typeface
Raleway (Reg)
ABCDEF
abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
On all secondary text, including content labels

10. ZDNet is an online trade
publication and social
community for IT professionals.
Mainly used in its online
publication, Raleway is an
elegant sans-serif typeface
family intended for headings and
other large size usage. Initially
designed by Matt McInerney as
a single thin weight, it was
expanded into a 9 weight family
by Pablo Impallari and Rodrigo
Fuenzalida in 2012 and iKerned
by Igino Marini.
Where Type Thrives
ZDNet design and style guide
Type Use
ZDNet homepage sample
Raleway Bold
primary text, headers and
secondary buttons
Raleway Regular
secondary text, including
content labels

11. Colors create the overall look
and feel of the ZDNet brand.
Blue stands for stability and
depth, loyalty and trust.
Combining it with gray which is a
neutral color, it signifies formal,
conservative, and reliable news.
Independent from bias therefore,
more credible.
Colors
ZDNet design and style guide
09 Color Specifications
HEX #DE1400
all red icons, buttons,
editor ratings, and text
HEX #080E14
all primary text, headers,
secondary buttons
HEX #6a767f
all secondary text,
including content labels
HEX #CAD6DE
all dividers, secondary icons,
and secondary header text
Main Colors
HEX #1174c7
all secondary links
HEX #56AAF6
all sponsored labels
HEX #162736
all dropdowns
HEX #4190C7
user ratings
Other Colors

12. From desktop to mobile, the
ZDNet website is designed to be
responsive and adaptive to the
screen size user views content.
Grids to Guide
ZDNet design and style guide
10 Grid and Space
1230 px, 12 column grid (desktop)
70 px 30 px
980 px, 12 column grid (tablet)
60 px 20 px
140 px 140 px
320 px, 2 column grid (phone)
10 px border
20 px gutter
10 px border

13. 30 px of vertical padding
in-between all groupings of content
is necessary to maintain a balance
of space, as well maintain a uniform
separation in keeping with the 30px
margin widths.
Vertical Padding Guide
ZDNet design and style guide
11 General Padding Guide
30 px
30 px
30 px
30 px
30 px