Style Guide

- For Winter Sports Club -

By: Thomas Karl Andersson

Last updated: 11 Nov, 2018


treeTypography

Abril Fatface is also in the logo

'Abril Fatface' is used as the main headline.
'Lora' is used for the sub-headline. 'Lora' is always italic and should never be used without 'Abril Fatface' as a headline.
'Lora' should never be bigger than 'Abril Fatface', and never smaller than the Body text.
Body text, paragraphs, are Source Sans Pro. And the size can be between 16px to 20px.
Navigation and links should also be in Source Sans Pro, but with a font-weight of 700.

All text color is white.


Desktop sizes:
  • Headline: 61px
  • Sub-headline: 31px
  • Paragraphs: 16-20px
  • Navigation/links: 16-20px

Mobile sizes:
  • Headline: 51px
  • Sub-headline: 21px
  • Paragraphs: 14-18px
  • Navigation/links: 14-18px

Here how to use them in CSS:

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lora:700|Source+Sans+Pro');

font-family: 'Source Sans Pro', sans-serif;

font-family: 'Abril Fatface', cursive;

font-family: 'Lora', serif;



Example of usage:


This is Winter Sport
Can be warm and cold sometimes

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Commodi ea link est excepturi, fugiat
id nobis omnis voluptas. Accusamus animi autem link dolore, eaque hic maxime quae saepe suscipit tempora!

treeLayout

Max 3, is how we do it

The page must be build using the following grid sizes, 1of1, 1of2 or 1of3. When going responsive, all sizes becomes 1of1.
A normal page setup looks preferably like this:
1of3 Header
1of1 Image
1of2 Content
1of3 Footer
Example of usage, desktop:


Header - 1 of 3
1/3
1/3
1/3
Image - 1 of 1
1/1
Content - 1 of 2
1/2
1/2
Footer - 1 of 3
1/3
1/3
1/3
Example of usage, mobile:


Header - 1 of 1
1/1
Image - 1 of 1
1/1
Content - 1 of 2
1/1
1/1
Footer - 1 of 3
1/1
1/1
1/1

treeInteractive

Make sure the user gets an fantastic experience

  • Links will have a clean hover effect with a white line.
  • Images must have a scale hover effect.
  • Boxes and items that should have a 3D effect, must have a shadow
  • Menu items should act like Links
  • If sub-menu, make sure the hover background is the brand colour that is lighter than the colour of the menu


Example of usage:


Link with hover


scale image


treeColours

Blue is the colour of the Winter Sport Club

Blue and White are the main colours, there are two lighter blues and two darker.
The reason why that is the cast is because they should be use to create a 'dept' and for use of shadows. This will give you some fine '3d effects'.
Never use any kind of opacity or/and filter that alters the hex code.
HEX: 75A7E1
RGB: 117,167,225
HEX: 5382BF
RGB: 83,130,191
HEX: FFFFFF
RGB: 255,255,255
HEX: 1B4D8C
RGB: 27,77,140
HEX: 023059
RGB: 2,48,89

treeForm

Easy, clean and user-friendly = Perfect form

The form element and the buttons, should be minimalistic and clean.
Things that's important:
  • appearance: none;
  • border-radius: 5px; (!button)
  • padding: 10px;
  • resize: none; (textarea)
  • button:hover 10% darken
How they should look:

treeMedia

A winter sport image says more..

The most important thing about the images when use as background, is that they are suppose to be full width of the webpage,
not inside a wrapper/container. They should not have any margin or padding.
No css filter. The images are already using the right filter.
The following is important when using image as background:
  • background-image: url('../assets/images/photos/FILENAME.jpg');
  • background-position: center;
  • background-repeat: no-repeat;
  • background-size: cover;
  • background-attachment: fixed;

If external video should be presented on the site, make
sure the video is half the browser window and align: center of the page, autoplay is not allowed.
The allowed images can be downloaded from here:
(right-click, Save Image As...)

image image image image image image
Pattern:
The following pattern should be used right before the footer and right after the last content section.
Height must be at least 200px.
On mobile view. There is no need for the pattern and it cloud have display: none;

treeOther

Remember the other things

The site should minimum contain the following different pages:
  • Home
  • News
  • About
  • Contact
  • Membership

When in need of a icon, use the Font Awesome library. (https://fontawesome.com/)
Or if you need some 'icon' from the logo. Just save them from her:
icon icon icon icon icon icon icon


If need of an accordion menu, the following should be used:

Section 1

Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for dummytekst helt siden 1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å lage et prøveeksemplar av en bok. Lorem Ipsum har tålt tidens tann usedvanlig godt, og har i tillegg til å bestå gjennom fem århundrer også tålt spranget over til elektronisk typografi uten vesentlige endringer. Lorem Ipsum ble gjort allment kjent i 1960-årene ved lanseringen av Letraset-ark med avsnitt fra Lorem Ipsum, og senere med sideombrekkingsprogrammet Aldus PageMaker som tok i bruk nettopp Lorem Ipsum for dummytekst.

Section 2

Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for dummytekst helt siden 1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å lage et prøveeksemplar av en bok. Lorem Ipsum har tålt tidens tann usedvanlig godt, og har i tillegg til å bestå gjennom fem århundrer også tålt spranget over til elektronisk typografi uten vesentlige endringer. Lorem Ipsum ble gjort allment kjent i 1960-årene ved lanseringen av Letraset-ark med avsnitt fra Lorem Ipsum, og senere med sideombrekkingsprogrammet Aldus PageMaker som tok i bruk nettopp Lorem Ipsum for dummytekst.

Section 3

Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for dummytekst helt siden 1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å lage et prøveeksemplar av en bok. Lorem Ipsum har tålt tidens tann usedvanlig godt, og har i tillegg til å bestå gjennom fem århundrer også tålt spranget over til elektronisk typografi uten vesentlige endringer. Lorem Ipsum ble gjort allment kjent i 1960-årene ved lanseringen av Letraset-ark med avsnitt fra Lorem Ipsum, og senere med sideombrekkingsprogrammet Aldus PageMaker som tok i bruk nettopp Lorem Ipsum for dummytekst.

treeDos and donts

Do the dos and do the donts

Dos:
  • Always use 100px margin-bottom on page sections
  • If you find some text hard to read, make sure to use a darker blue for the background
  • Always stick to the color scheme
  • Keep the page structured, every site should 'look' alike
  • Make sure the site follows the WCAG standards
Donts:
  • Place any irrelevant ads across the page
  • Make sure there is no horizontal scrolling (especially on mobile)
  • Don't use all capitals when writing text
  • Never place the simple logo on top of a image
  • The pattern should never be in direct contact with an image

treeBrand Personality and Target Audience

The soul of the page and the users

The brand personality is simple and clean, and almost a little 'hipsterish' with
a touch of humor that's still very serious.

You should also get a nice club felling, meaning: you should fell like this club take care of each other and are open for new members.

The target audience is between the age of 15-40. And could also be older!
as long as the person is doing some kind of winter sport, the person is a potential user of the website.
The typical user is either a person seeking information about what is happening in the Club or
a person how whats to know how to become a member of the club.