Style Guide

Layout

Screen Sizes

Keep in mind that this is a mobile first design so media queries should start with min-width: instead of max-width:

480px

$screen-xs-min

48em

$screen-sm-min

64em

$screen-md-min

75em

$screen-lg-min

Grid System

The grid system is based off of Flexbox Grid instead of the Twitter Bootstrap grid system. According to Can I Use flexbox has about 84% overall support and Autoprefixer will help close some of that 17% gap.

They have some pretty comprehensive documentation on their website flexboxgrid.com so I won't re-invent the wheel.

Read the Docs

Visual

Colors

#111833

$brand-darker-blue
$brand-primary

#feb904

$brand-yellow
$brand-secondary

#0d475d

$brand-dark-blue

#fece50

$brand-light-yellow

#1881a9

$brand-light-blue

#283675

$brand-purple

Typography

Fonts

Avenir© Pro 45 Book

$font-family-avenir-medium or $font-family-primary

Avenir© Pro 45 Book

Avenir© Pro 45 Book

Avenir© Pro 45 Book

Avenir© Pro 45 Book

Avenir© Pro 95 Black

$font-family-avenir-bold

Avenir© Pro 95 Black

Avenir© Pro 95 Black

Avenir© Pro 95 Black

Avenir© Pro 95 Black

Chaparral Pro

$font-family-chap-pro

Chaparral Pro

Chaparral Pro

Chaparral Pro

Chaparral Pro

Headings

Avenir© Pro 45 Book

$font-family-avenir-medium or $font-family-primary

Heading 1 32px

Heading 2 24px

Heading 3 18.72px

Avenir© Pro 95 Black

$font-family-avenir-bold or $font-family-primary

Heading 1 32px

Heading 2 24px

Heading 3 18.72px

Chaparral Pro

$font-family-chap-pro

Heading 1 32px

Heading 2 24px

Heading 3 18.72px

Paragraphs 16px

Avenir© Pro 45 Book

$font-family-avenir-medium or $font-family-primary

Lorem ipsum dolor sit amet, cu duo omittam facilisis, et pro unum fugit nominati. Ad nisl eruditi vis. Ut facer elaboraret dissentias vim, alterum admodum adipiscing vis ei, sit noluisse voluptua ne. Summo tempor his at, integre mandamus ei vim. Vim ad posse inciderint. Ei autem elaboraret scripserit est, sumo mutat quaeque no vis, mel nostrud suscipiantur an. Laoreet voluptatum eam no, cu meliore assentior disputando vel. Malis postulant reprehendunt in eum, blandit assueverit appellantur sea ne. Vitae democritum reformidans est no, veri adipisci ne qui. Nec ei elaboraret quaerendum neglegentur, perfecto indoctum intellegat duo id. Te qui imperdiet reformidans. Quando volumus referrentur ea mei. Mentitum antiopam consetetur cu eos, enim zril sed te. Odio elitr mediocritatem et ius. Cu cum voluptatum inciderint, clita vivendo reformidans ei eum, cu indoctum incorrupte vim. Liber elitr vivendum no pro. Eu sadipscing theophrastus cum, graeco sanctus mei at, mentitum petentium in sea. Vide oportere maiestatis nam at. Pro reque assentior disputando ne. Et rebum dicant impedit vim, sit suas petentium in. In vix appareat eloquentiam, no ludus platonem has. Cu corpora deleniti recusabo has, an vel saepe tollit, ad dicat malorum eum. Recteque maiestatis sed in. Summo solet deleniti sed in. Vel impedit maiestatis ne. His ipsum inciderint et, cu dicam dolore fierent mea. Eu mel esse mutat reprimique, vim ea dolore interpretaris. No dicit meliore maiestatis has, sit ex homero option. Officiis maluisset eam ne, est omnis diceret accusamus ea, sea at denique vivendum consequuntur.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Avenir© Pro 95 Black

$font-family-avenir-bold

Avenir Next Bold is only to be used for headings. More specifically: h1, h2 and h3's.

Chaparral Pro

$font-family-chap-pro

Lorem ipsum dolor sit amet, cu duo omittam facilisis, et pro unum fugit nominati. Ad nisl eruditi vis. Ut facer elaboraret dissentias vim, alterum admodum adipiscing vis ei, sit noluisse voluptua ne. Summo tempor his at, integre mandamus ei vim. Vim ad posse inciderint. Ei autem elaboraret scripserit est, sumo mutat quaeque no vis, mel nostrud suscipiantur an. Laoreet voluptatum eam no, cu meliore assentior disputando vel. Malis postulant reprehendunt in eum, blandit assueverit appellantur sea ne. Vitae democritum reformidans est no, veri adipisci ne qui. Nec ei elaboraret quaerendum neglegentur, perfecto indoctum intellegat duo id. Te qui imperdiet reformidans. Quando volumus referrentur ea mei. Mentitum antiopam consetetur cu eos, enim zril sed te. Odio elitr mediocritatem et ius. Cu cum voluptatum inciderint, clita vivendo reformidans ei eum, cu indoctum incorrupte vim. Liber elitr vivendum no pro. Eu sadipscing theophrastus cum, graeco sanctus mei at, mentitum petentium in sea. Vide oportere maiestatis nam at. Pro reque assentior disputando ne. Et rebum dicant impedit vim, sit suas petentium in. In vix appareat eloquentiam, no ludus platonem has. Cu corpora deleniti recusabo has, an vel saepe tollit, ad dicat malorum eum. Recteque maiestatis sed in. Summo solet deleniti sed in. Vel impedit maiestatis ne. His ipsum inciderint et, cu dicam dolore fierent mea. Eu mel esse mutat reprimique, vim ea dolore interpretaris. No dicit meliore maiestatis has, sit ex homero option. Officiis maluisset eam ne, est omnis diceret accusamus ea, sea at denique vivendum consequuntur.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Nec quot dicat ad, usu id vide philosophia. Ad nulla dicant laboramus mel, suas invidunt facilisis eam te. Sale affert mei id? Mel epicurei efficiendi instructior id. Explicari salutatus no nam. Vix ea mutat singulis democritum, quo quando electram ex. Ea quo fastidii appetere, cu quodsi sensibus has! Ex sed eius inani accusata, agam justo.

Buttons

Primary

Darker blue to light blue (See "Colors" section above).

<a href="#" class="btn primary">Primary</a> Primary

Darker blue to yellow (See "Colors" section above).

<a href="#" class="btn primary bg-yellow">Primary</a> Primary

Light blue to dark blue.

<a href="#" class="btn primary blue">Primary</a> Primary

Yellow to light yellow.

<a href="#" class="btn primary yellow">Primary</a> Primary

Secondary

Darker blue outline to darker blue fill with white text (See "Colors" section above).

<a href="#" class="btn secondary">Secondary</a> Secondary

Darker blue outline to darker blue fill with yellow text (See "Colors" section above).

<a href="#" class="btn secondary txt-yellow">Secondary</a> Secondary

Light blue outline to light blue fill with white text.

<a href="#" class="btn secondary blue">Secondary</a> Secondary

Yellow outline to yellow fill with white text.

<a href="#" class="btn secondary yellow">Secondary</a> Secondary

Forms

Text input field

                      
                        <!-- label will be hidden, it's only for accesibility purposes -->
                        
<label for="{{field_name}}">Lorem Ipsum Dolor</label>
<input type="text" name="{{field_name}}" class="input" id="{{field_name}}" placeholder="{{placeholder_text}}">

Text area

                      
                        <!-- label will be hidden, it's only for accesibility purposes -->
                        
<label for="{{field_name}}">Lorem Ipsum Dolor</label>
<textarea cols="40" rows="8" name="{{field_name}}" id="{{field_name}}" class="input" placeholder="{{placeholder_text}}"></textarea>

Select dropdown menu

                      
                        <!-- label will be hidden, it's only for accesibility purposes -->
<label for="{{field_name}}">Lorem Ipsum Dolor</label>
<div class="dropdownContainer">
  <select name="{{field_name}}" id="{{field_name}}" class="input">
    <option value="{{choice_one}}">{{choice_one}}</option>
    <option value="{{choice_two}}">{{choice_two}}</option>
    <option value="{{choice_three}}">{{choice_three}}</option>
  </select>
</div>

Copy

TL;DR

“That rug really tied the room together.” — The Dude

This guide captures the many White Russians, bath robes, decorative rugs and bowling balls that furnish our proverbial room. You might not need everything in the room but you will feel the absence of any of these key components.

Here’s what you need to know:

Content

Great content is…

  • Simple
  • Useful
  • Active
  • Accessible

Easy, right? Right.

Style & Voice

Netplus is…

  • Direct
  • Approachable
  • Determined
  • Pragmatic

Netplus is a cross-functional, cross-generational and diverse agency. Therefore, our brand can assume many different voices. Collectively, however, our voice communicates a sense of humor and approachability, without sacrificing any perception of expertise.

Quick Style Tips

  • Use active voice.
  • Be specific.
  • Write for all readers.
  • Avoid excessive industry jargon.

Take a deep dive in the Netplus Style & Voice guide.

Copy Mechanics

Language evolves. Copy should, too. That’s why we consider the following “rules” to be more like “polite suggestions” when it comes to displaying copy online.

  • For the most part, we follow AP Style.
  • We do not employ serial/Oxford commas. That’s right! No. Serial. Commas.
  • We’re OK with contractions and (occasionally) abbreviations.
  • Copy should always be easily scannable to accommodate different kinds of readers.
  • Keep sentences and words short.
  • When in doubt, use sentence case.
  • Use bold, italics and underline sparingly—but never together.
  • When writing from the perspective of the brand, use the royal “we,” or “us.”
  • When writing about a person, use their preferred pronoun or default to using their name.
  • In the wise words of George Orwell, “Never use a foreign phrase, a scientific word or a jargon word if you can think of an everyday English equivalent.”
  • Break a rule here and there. It’s quite liberating!

Syle & Voice

Look, style and voice are important. How important, you ask? Very. Think of style as the clothing you wear. You make tons of decisions about your clothes—how it looks on your body, the color, the fit and, most importantly, what it says to the people around you. Sure, there are some fluctuations here and there, but you probably have style, something that people remember about you.

This is like brand style. There are many constants but it remains relatively dynamic, adapting to seasonality and time.

This section explains the differences between style and voice and explore the many nuances of both.

Voice

In the wise words of George Orwell, “Never use a foreign phrase, a scientific word or a jargon word if you can think of an everyday English equivalent.”

Words

Verbs Nouns Adjectives
empower ingenuity modern
thrive perspective enriching
galvanize substance tangible
inspire confidence evocative
innovative value proven
resonate solutions discerning
resolve challenges pragmatic
partnership meticulous
supporter driven
scrappy
substantial
measurable
insightful
winning

To be avoided at all cost…

Verbs Nouns Adjectives
gamify ROI bleeding edge
send over the wall self-starter results-driven
pivot low hanging fruit actionable
touch base best pratices out of the box
take the pulse paradigm shift viral
elevate synergy bite-sized
growth-hacking disruptive
status holistic
ninja passionate
guru authentic
thought leadership best in class
content provider

Blog

  • Total length: 400-700 words
  • Avoid lengthy paragraphs; try to keep them 4-5 sentences long (~4 lines in length).
  • Make use of bolding and italicizing when needed to emphasize/accentuate words.
  • Make use of headers and subheaders to break up text and create a rhythm to the overall post
  • Make use of relevant images and such to further break up text and help visualize your points
  • Don’t be afraid to include textual links throughout to backup your points or provide references.
  • Keep the language simple, clear and personable. Avoid overusing marketing jargon, technical language, etc. Also try to keep the tone fun and casual, but evidently well-informed.
  • Follow AP style guidelines when in doubt.
  • If articles by employees are published elsewhere, e.g., Targeted Marketing, Philly Ad Club, etc., instead of republishing it in its entirety on the website, we’ll write a short post and link to the article on the native site (e.g., “Read the full article at [WEBSITE].”)

Web Elements

With few exceptions, use lowercase capitalization when describing web elements like, “email,” “ecommerce,” or “internet.”

  • Use titles, headings, subheadings, bulleted lists and other web elements to break up large chunks of copy. Doing so will help orient readers and visitors as they peruse our digital space.
  • Be sure to include the most important keywords in your first and second headings.
  • Calls to action (CTAs) should always contain a verb or action.
  • Leverage numbered lists when presenting instructions or a series in chronological order.
  • Employ unordered or bulleted lists when presenting any other series or list.
  • Avoid title case, except in the following situations: blog titles, form headers and form field names. Drop-down menu or other menu items should remain sentence case.

    For example:
    • To name
    • From name
    • Subject line
  • Give any images featured on your page alt text and an image title where appropriate.

SEO & Meta Tags

  • With the exception of the homepage, page titles should follow the naming convention listed below:

    [Topic or Title, including a primary keyword] · Netplus

  • Always include an action and primary keyword in your meta description.
  • Provide a link if you are referencing another website, content or external resource.
  • Avoid vague or generic contextual links like “learn more here” or “here.” Instead, use descriptive words to prepare the user for the next leg of the journey. (Example: Learn more about our proven SEO practice, and the people behind it.)

Name Standards, Copyrights & Trademarks

  • Netplus Marketing can be shortened to, “Netplus.” The shortened version is the preferred version when referring to our brand and agency.
  • Do not use any other shortened version of the brand name in copy, including “n+,” “nplus” or “netplus mktg.”
  • Always use title case when referring to Netplus Marketing or Netplus in copy.

© 2017 Netplus Marketing, Inc. All rights reserved.