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 webappThese guidelines are to be adhered to rigorously by all agents of Tomas Swift Metcalfe Unip. Lda. representing the SwiftMo® brand in any capacity.
titles:
font-family: 'Ubuntu', sans-serif;
paragraphs:
font-family: 'Roboto Slab', serif;
apps:
font-family: 'roboto', sans-serif;
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.
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:
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 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.
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;
}
"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 have the same characteristics as paragraph elements except font size is slightly smaller (19px) and justified so list items stack neatly.
ul li { font-family: "Roboto", Helvetica, Arial, sans-serif;
line-height: 1.61;
color: #333333;
font-size: 19px;
text-align: justify;
}
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.
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;
}
main heading
h1 {
font-size: 36px;
font-family: ubuntu;
font-variant: small-caps;
color: #0d2647;
border-top-style: solid;
border-top-color: #ffcc33;
}
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;
}
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;
}
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;
}
The following logos are to be used online:
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.
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.
hex: #ffcc33
hex: #337ab7
hex: #0d2647
hex: #f15925
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
white hex: #fff
grey variant hex: #333
grey variant hex: #555
grey variant hex: #999
grey variant hex: #cccccc
black code: black
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 coloursneutral 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.
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.
Freelance local guides, each passionate about cycling and their region
book your tour todayGet some of the most practical routes in the Algarve each designed with passion to bring you the the best road cycling experience.
get your routesWant 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 transfercontact us phone: 00 351 922011153 or e-mail: [email protected]