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.

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

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]

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 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.

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 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

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

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

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

There are several views of the featured image, each can have different dimensions so it is usually important to place the image focus in the center.

When the image does not fit the container around it, it is cropped either on sides or on top and bottom.

Moreover the featured image can have two layouts inside an article detail.

Following are definitions of the featured image sizes in various contexts:

Aspect ratio: 16/9 width: 16 points height: 9 points

Examples:

• 160 x 90
• 1024×576
• 1920×1080

The first position in the grid has special behaviour for desktop and mobile:

Aspect ratio: 1/1 width: 1 point height: 1 point

Examples:

• 160 x 160
• 1024×1024
• 1920×1920

Due to the layout in the desktop view, the first article position must be slightly offset from the 16/9 aspect ratio, therefor the image has an extra few pixels at the bottom.

Examples:

• 1920×1080 would have extra 25 pixels at the bottom and would need to be 1920×1105.5 px
• 1024×576 would result in 1024×590
• In the desktop view, the image has a size of 792×456

Width: variable, scales with window width, limited to 1380px max Height:

• Desktop: 600px
• Mobile: 390px

At the highest resolution, the image has size of 1380×600 pixels resulting in an aspect ratio of 23/10 At the lowest resolution, the image has a size of 320×390 pixels, resulting in an aspect ratio of 32/39, or approximately 11/13