Website Graphical Charter

Text hierarchy & Typography

Hierarchy

H1 / Main title

H2 / Secondary Title

H3 / Subtitle

H4 / Last level title

Paragraph style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla nisl vitae quam accumsan, sed ultrices diam molestie. Maecenas vel felis quis nunc consectetur euismod eu id odio.

Paragraph style 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla nisl vitae quam accumsan, sed ultrices diam molestie. Maecenas vel felis quis nunc consectetur euismod eu id odio.

Paragraph style 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla nisl vitae quam accumsan, sed ultrices diam molestie. Maecenas vel felis quis nunc consectetur euismod eu id odio. Phasellus euismod dui at nisi consequat, eget venenatis ante faucibus. Sed malesuada erat non dolor consectetur, vel efficitur eros pulvinar. Nunc nec tellus eget velit mollis finibus. Sed nec eros ut nulla iaculis hendrerit.

Buttons (colors can change)

Typography

Arial Black

Arial Bold

Open Sans

Open sans ( colors can be differents regarding pages )

Open sans

logo font

Colors

Thermagenix logo colors

website colors

Brand red

RGB : 255 / 0 / 0
HEX : #FF0000

Variant red

RGB : 224 / 45 / 41
HEX : #E02D29

Brand Blue

RGB : 38 / 76 / 152
HEX : #264d98

Brand Blue

RGB : 38 / 76 / 152
HEX : #264d98

Pure white
& Pure black

Headlines and highlights

We use the thermagenix logo colors to highlight titles

Page Title

Background is the same as “negative section” with an overlay of pure black with 50% opacity. The template of this section is saved and don’t have to be fully constructed each time. User just have to change the text

Title highlight

The first letter in red is obtained by diverting the "citation" class accessible for all texts on the site with the Squarespace text editor. The presented version is an H2 tag within a quote tag. User just have to put the text in the correct color (white or blue") and select blockquote. The first red letter is automated so that it appears correctly also in english version.