techrepublic style guides

Design and Style GuideJune 2016

7px

7px

Logo colorR:255 G:255 B:255(#F5F5F5)

7px

7px7px

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.

TechRepubl ic design and s ty le guide

Welcome

These guidelines contain the information you need to consider when designing the TechRepublic web pages, and other assets for the brand.

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.


Contents

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


01 Logo

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


Logo

Symbol Logotype

Logo

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


Logo

7pxclearancespace

7px clearance space14px ideal clearance space

safe space

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


Logo

On screen: 150 px W

Minimum size

background color: R:017 G:116 B:199(#1174c7)

Logo colorR:255 G:255 B:255(#F5F5F5)

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 e�ects.

Logo Variations


Logo

Do Don’t

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


06 Typeface

Proxima Nova (Bold)

ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()

On all primary text, headers and secondary buttons

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


Typeface

Proxima Nova (Reg)

ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()

On all secondary text, including content labels

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


Type Use

TechRepublic homepage sample

Proxima Nova Bold

primary text, headers and secondary buttons

Proxima Nova Regular

secondary text, including content labels

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


09 Color Specificat ions

R:106 G:118 B:127HEX #6A767F

R:028 G:104 B:160HEX #1C68A0

R:042 G:133 B:197HEX #2A85C5

R:202 G:214 B:222HEX #C AD6DE

Main Colorscontent and menu bar

Blue Variationsdrop downs and secondary links

R:060 G:138 B:065HEX #3C8A41

R:085 G:175 B:071HEX #55AF47

Other Colorsbuttons

R:034 G:121 B:183HEX #2297B7

From desktop to mobile, the TechRepublic website is designed to be responsive and adaptive to the screen size user views content.

Grids to Guide


10 Gr id 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 border20 px gutter

10 px border

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


1 1 Genera l Padding Guide

30 px

30 px

30 px

30 px

30 px