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

1. Design and Style Guide
June 2016
7px
7px
Logo color
R:255 G:255 B:255
(#F5F5F5)
7px
7px
7px

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

3. 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.
TechRepublic design and style guide
Contents

4. A republic is a group where
certain equality is given between
its members. The word “tech” is
an informal word for “technology.
When people think of tech,
people think of computers and
innovation. In the city sprawling
with big tech names and
startups, putting the two words
together mean that everyone is
held with an equal opportunity to
rise above the technology
space. It’s only fitting to have
such a name where the best
minds clash, compete, and
collaborate for progress and
innovation, and the brand is
there to watch it all unfold and
tell the story.
The TechRepublic Logo
TechRepublic design and style guide
01 Logo

5. The TechRepublic logo is
composed of two main parts: the
symbol and the logotype.
Together, this makes the
TechRepublic logo. It is simple but
not dull, straight-forward but not
bash, clear, reliable and credible.
The logo = symbol + logotype
TechRepublic design and style guide
Logo
Symbol Logotype
Logo

6. 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 th e logo breathe and flow
TechRepublic design and style guide
Logo
7px
clearance
space
7px clearance space
14px ideal clearance space
safe space

7. Main colors of blue and white.
White signifies clarity and
transparency, and blue the
signifies integrity and friendliness.
Attractive qualities that the brand
wants to emulate especially when
dealing with news in the tech
space.
Logo colors
TechRepublic design and style guide
Logo
On screen: 150 px W
Minimum size
background color:
R:017 G:116 B:199
(#1174c7)
Logo color
R:255 G:255 B:255
(#F5F5F5)

8. To ensure brand consistency,
TechRepublic color variations
should only come in two shades
of blue. Logo should be straight
forward, clear and legible all the
time. This symbolizes clarity,
friendliness, and credibility, which
is also present in the content
TechRepublic publishes on a
regular basis.
Logo is always clear, solid
colored, and with no obstructions
and/or complex effects.
Logo Variations
TechRepublic design and style guide
Logo
Do Don’t

9. Proxima Nova (2005) bridges the
gap between typefaces like
Futura and Akzidenz Grotesk. The
result is a hybrid that combines
modern proportions with a
geometric appearance. Through
its versatility, Proxima Nova has
become one of the most popular
web fonts, in use on thousands of
websites around the world.
Proxima Nova Family
Use
TechRepublic design and style guide
06 Typeface
Proxima Nova (Bold)
ABCDEF
abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
On all primary text, headers and secondary buttons

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

11. TechRepublic is an online trade
publication and social community
for IT professionals. Mainly used
in the website, wide array of the
Proxima Nova font family makes it
ideal to make the website
consistent, while not making it
dull. Headers and main texts use
Proxima Nova Bold, while Proxima
Nova Regular is used on
secondary text including content
labels.
Where Type Thrives
TechRepublic design and style guide
Type Use
TechRepublic homepage sample
Proxima Nova Bold
primary text, headers and
secondary buttons
Proxima Nova Regular
secondary text, including
content labels

12. Colors create the overall look and
feel of the TechRepublic brand.
Blue stands for stability and depth,
loyalty and trust. Combining it with
gray which is a neutral color, gray
signifies conservative, reliable,
formal and independent. The
TechRepublic brand embodies
these in the posts it daily
publishes in the tech space.
Unbiased, neutral, reliable and
credible.
Green is a positive and optimistic
color. It is perfect for the
TechRepublic brand as it observes
and relays credible information.
Green is used for the
TechRepublic button to promote
growth and optimism in the
actions user make.
Colors
TechRepublic design and style guide
09 Color Specifications
R:106 G:118 B:127
HEX #6A767F
R:028 G:104 B:160
HEX #1C68A0
R:042 G:133 B:197
HEX #2A85C5
R:202 G:214 B:222
HEX #C AD6DE
Main Colors
content and menu bar
Blue Variations
drop downs and secondary links
R:060 G:138 B:065
HEX #3C8A41
R:085 G:175 B:071
HEX #55AF47
Other Colors
buttons
R:034 G:121 B:183
HEX #2297B7

13. From desktop to mobile, the
TechRepublic website is designed
to be responsive and adaptive to
the screen size user views
content.
Grids to Guide
TechRepublic 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

14. 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
TechRepublic design and style guide
11 General Padding Guide
30 px
30 px
30 px
30 px
30 px