Typography

AaOpens Sans[download]

  • Thin

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • Regular

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • Bold

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • Extra-Bold

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz


AaOpens Sans
Condensed[download]

  • Thin

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • Bold

    abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz


Titles & Text

Section Titles

Open Sans Condensed / 64px

Content Titles

Open Sans Condensed / 48px

News Labels

Open Sans / 14px / uppercase / weight 700 / spacing 1px

Body Text

Open Sans

Color Palette


Gradients

Interface Elements

Buttons

Icons

WIP: Icons used on the website

Photos

WIP: Carousel with stock pictures used in the website

Company Cards

Background is a composition of a picture related to business, blended with a gradient background, based on brand colors.

CSS automatically sets the picture's opacity to 40%, and attributes multiply blend mode to the gradient.

You may need to use an graphics editor (such as Pixelmator) software to ajust pictures or to compose the background (to see if picture/gradient combo works).

Because of high density displays (like high end laptops) and smartphones, images need to be larger than they look on the website


Tips

  • Photos should always be in JPG (.jpg) file format. PNG (.png) is only used for graphic images
  • Mind the size of the image files

Resources

* Paid