====== Document sizes ======


Mobile: 320 - 767px

Tablet: 768 - 1023px

Desktop: 1024px+

The designs should be always made for the lowest resolution in its category, e.g. 320px for mobile, 768px for tablet. Desktop can be made in any size above 1024px. Note that the main container, which holds all the content of the page, does not stretch past 1248px. Nevertheless backgrounds can stretch to the full size of the window and elements can be pushed outside of the main container as well.


====== Icons ======

All icons should be provided in vector SVGs. Ideally, all svgs should have square canvas in order to easily position them against other content.

//TODO: List all the available icons on the website at the moment//


====== Fonts ======


The website uses Proxima Nova for all the text found on the website.

Available font weights are:

300: Light

400: Regular

700: Bold

900: Black


Base font size for the text is 16px.

All the headlines are relative to the base font size

Headline 1: 48px [3 x 16px]

Headline 2: 28.8px [1.8 x 16px]

Headline 3: 20px [1.25 x 16px]

Headline 4: 18.4px [1.15 x 16px]

Headline 5: 14px [0.875 x 16px]

Headline 6: 12px [0.75 x 16px]


====== Buttons ======


There are two button variants
Regular button

Font size: 12px [base font size * 0.75]

Line height: 14.4px [1.2 * button font size = 1.2 * 12px]

Spacing: 16.8px [1.4 * button font size = 1.4 * 12]

Total height: 48px [line height + top spacing + bottom spacing]
Big button

Font size: 20px [base font size * 1.25]

Line height: 20px [1 * button font size = 1 * 20px]

Spacing (sides): 28px [1.4 * button font size = 1.4 * 20]

Spacing (top/bottom): 14px [0.7 * button font size = 0.7 * 20]

Total height: 48px [line height + top spacing + bottom spacing]


====== Banners ======

Banners should be png or jpg images. You can decide based on its content, in most cases, if the banner contains a photo it should be a jpeg, if it's graphics only, then it should be png. Alternatively, if the png is smaller in data size, then png should be used.

===== Top of the page =====

{{ :skoda-ep:skoda-wlc-2016:technical_information:banner-top.png?200 |}}

Mobile version: 700px (must be readable from 250px)

Tablet version: 830px (must be readable from 576px)

Desktop version: 1056px (must be readable from 832px)



===== Teaser banner (between articles) =====

{{ :skoda-ep:skoda-wlc-2016:technical_information:teaser-banner.png?100 |}}

Teaser banner MUST have exact aspect ratio or it will be cropped on sides/top and bottom

Mobile/Tablet: 
  * landscape version
  * width: 740px
  * height: 416px
  * must be readable when scaled down to 292px width = much larger font

Desktop: 
  * portrait version
  * width: 384 px
  * height: 457 px 
  * must be readable from 310px width


===== Sidebar =====

{{ :skoda-ep:skoda-wlc-2016:technical_information:banner-sidebar.png?200 |}}


Mobile version: 740px (must be readable from 292px)

Tablet version: 310px (must be readable from 224px)

Desktop version: 384px (must be readable from 310px)