t.00 351 922011153

 e.[email protected]

Add our webapp to your homescreen to have access to routes and maps offline, as well as your booking summary on any services you have ordered.

Add the SwiftMo webapp

home

SwiftMo® brand guidelinesThe use of the SwiftMo® and any of the content displayed on this page and any other page on this website is expressly forbidden and dealt with enthusiastically.

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.
title Lorem ipsum bike

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:

hex: #ffcc33

hex: #337ab7

hex: #0d2647

hex: #f15925

secondary colours:

atention green hex: #3c763d

inactive element code: aliceblue

alert red hex: #d9534f

blue variant hex: #428bca

blue variant hex: #31708f

blue variant hex: #247ba0

brown hex: #f0ad4e

neutral colours:

white hex: #fff

grey variant hex: #333

grey variant hex: #555

grey variant hex: #999

grey variant hex: #cccccc

black code: black

brand colour balance:

With some tolerance depending on the application, brand colourbalance has the following ratios:

84:4:4:2:1:1:0.5:0.5:0.5:0.5:0.5:0.5

A border is demarking a white area representing neutral colours

colour usage

neutral colours make up most of our content, white being the main colour.

yellow is used border and text decoration.

drak blue is used extensively in headings.

light blue is used colour used in minor headings and breadcrumbs.

is used only in the logo.

is used in inactive tabs in certain menus.

is used to in calls to action.

is used for positve confirmations.

Personal presentation & attitude:

SwiftMo is a sports brand. We are sports professionals and our personal presentation must reflect this. Employees in any client facing function are required to wear the company track suit and polo shirt and hoodie.

guides

Freelance local guides, each passionate about cycling and their region

book your tour today
routes

Get some of the most practical routes in the Algarve each designed with passion to bring you the the best road cycling experience.

get your routes
transfers

Want to see the very best of the region, or neighbouring regions? Working in tandem with partners we have transfers for you and your bike, be it to the airport or new places to ride. E-mail us at [email protected]

get your transfer

contact us phone: 00 351 922011153 or e-mail: [email protected]