home

These guidelines are to be adhered to rigorously by all agents of Tomas Swift Metcalfe Unip. Lda. representing the SwiftMo® brand in any capacity.

Online brand guidelines.

fonts:

titles:
  font-family: 'Ubuntu', sans-serif;
paragraphs:
  font-family: 'Roboto Slab', serif;
apps:
  font-family: 'roboto', sans-serif;

Rationalle

The fonts chosen are fast loading font with reasonably similar defaults. Roboto Slab serif font was chosen for it's legibility in copy text. One sans-serif font for use in applications requiring user interaction. Ubuntu used in titles for being highly legible. Roboto is used in apps to facilitate user flow and due to it's familiarity.

Web Copy

tone of voice and stylistic guidelines

All copy is to be produced in the first person voice of the actual person producing it. The style is unassuming, honest and fundamentally correct in any assertions made to the best available knowledge or standard at the time of writing. Opinion is to be stated as such opinion is not fact. Where possible evidence or a logical progressing accompanies assertions, even if the person writing is an authority on the subject.

Language must be accessible, avoiding jargon. Sentences must be complete and kept short and topic broken into paragraphs. Where possible supporting should be provided.Content must be useful to people who want to do sport, regardless of level or experience and anyone discovering the areas in which SwiftMo® operates.

One content piece per subject should exist and this reviewed and revised once per year. Content must be kept to the following lengths:

800 - 1600 word items -Cornerstone content:

• about
• race bike rentals
• routes
• training
• regional descriptions

500 - 600 word items -Standard content:

• Blog posts

150 - 300 word items -Micro content:

• map item descriptions

>120 words -Shared content:

• social media content

UK English is to be used throughout. A comma must not be used following or preceeding a conjunction.

Hyperbole is not to be used. Sarcasm is not to used. Rhetoric must be rational. We strive to be the absolute best and promote the best, hence these litterary devices are unecessary.

Brand values which can be found on the brans-values page are to be reflected in all the copy.

images

Images are to be stored in .png format at 300 d.p.i..

Logos are stored in .svg format.

Main photographs use 24bit .png with a maximum 1024px and displyed at half this size to accommodate retina displays.

Secondary photographs use 8bit .png with a maximum width of 1024px.

cornerstone content:

• <= 3 main photograph
• <= 3 secondary photographs

main content:

• <= 1 main photograph
• <= 3 secondary photographs

micro content:

• <= 1 secondary photograph

social content:

• <= 1 main photograph

paragraph element

Each paragraph <p> is precented aligned to the left to keep spacing consistence between words, to help readability.

p {
   font-family: 'Roboto Slab', serif;
   line-height: 1.61;
   color: #333333;
   margin-top: 1em;
   letter-spacing: -.003em;
   font-size: 21px;
   display: block;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   margin-bottom: 10px;
 }

example paragraph element for online material:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu ip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepte ur sint occaecat cupidatat non proident, sunt in culpa qui officia de serunt mollit anim id est laborum."

list elements

List elements have the same characteristics as paragraph elements except font size is slightly smaller (19px) and justified so list items stack neatly.

• lorem
• ipsum
• bike

ul li {  font-family: "Roboto", Helvetica, Arial, sans-serif;
   line-height: 1.61;
   color: #333333;
   font-size: 19px;
   text-align: justify;
 }

font variants:

The following attributes are not to be applied independantly of the paragraph <p> element as they will render differently.

The Bold font variant (<b>) is used to provide emphasis for particular words in a sentence.

Emphasis or italic element (<em>) is used to provide emphasis for a complete sentence within a paragraph.

Underline (<u>) is not used in text for any purpose other than for hyperlinks.

title and heading heirarchy

• Titles are to start with a lowercase letter.
• <title> Title tag is used once per page. It is displayed in searches; use it wisely. Display key words.
• <h1> h1 is used once per page as a subtitle, it must add information and contain keywords or phrase.
• <h2> h2 is used in page to title relevant blocks.
• <h3> h3 is used within blocks to title paragraphs
• <h4> h4 is used as a stand alone emphasised sentence.

page title -names a page.

title {
   font-size: 40px;
   display: block;
   font-family: ubuntu;
   font-weight: 500;
   border-bottom-style: solid;
   border-bottom-color: #ffcc33;
   color: #0d2647;
   margin-bottom: 10px;
   margin-top: 10px;
 }

h1 lorem ipsum bike

main heading

 h1 {
   font-size: 36px;
   font-family: ubuntu;
   font-variant: small-caps;
   color: #0d2647;
   border-top-style: solid;
   border-top-color: #ffcc33;
 }

h2 lorem ipsum bike

first tier subheading.

 h2 {
   font-variant: small-caps;
   font-family: ubuntu;
   color: #0d2647;
   -webkit-transform: skew(16deg);
   -moz-transform: skew(16deg);
   transform: skew(-16deg);
   padding-bottom: 0px;
   border-bottom-style: solid;
   border-bottom-color: #ffcc33;
   font-size: 34px;
   border-bottom-width: 10px;
   height: 37px;
 }

h3 lorem ipsum bike

second tier subheading

 h3 {
   font-size: 28px;
   color: #428bca;
   font-weight: 700;
   font-variant: small-caps;
   font-family: ubuntu;
   -moz-text-decoration-color: #ffcc33;
   text-decoration-color: #ffcc33;
   border-bottom-style: solid;
   border-bottom-color: #ffcc33;
 }

h4 lorem ipsum bike

third tier subheading used for captions and breadcrumbs.

 h4 {
   margin-top: 14px;
   margin-bottom: 14px;
   font-family: ubuntu;
   font-weight: 600;
   color: #0d2647;
   letter-spacing: 0.125em;
 }

logo suite

web

The following logos are to be used online:

title logo:

online logo dimensions:

 mainlogo {
   width: 180px;
   height: 48px;
}

The image is to be presented floating, with a minimum 2px padding-top from the containing div and a maximum of 10px. In this possition the image is to be displayed as is without distortion or alteration.

printed media

There is no size limits for this use case. The image must preserve it's original aspect ratio and have a minium border equivalent to the thickness of the top stroke of the "t" element (fifth letter) in the logo.

A small line of text stating a business purpose is currently required on all none web media.

multitone

title logo:

monotone

title logo:

colour breakdown

main colours: