Styleguide

This style guide page contains styles and components used through the website.
You can change any style from this page and it will be updated throughout the site.

I. Typefaces & color palettes
A. Typefaces

Both of the typefaces used in this template are available on Google Fonts. 
You can find Syne here, and IBM Plex Sans here.

Syne - Aa Bb Cc Dd
IBM Plex Sans - Aa Bb Cc Dd
B. Color palette

Primary Color

#212426

Secondary Color

#f0f0f0

Accent Color

#64a2ec

II. text elements
A. Headings

heading H1

Properties: 7.6EM / 1

heading H2

Properties: 6.8EM / 0.9

Heading H3

Properties: 6EM / 1

Heading H4

Properties: 4.5EM / 1

Heading H5

Properties: 3EM / 1

Heading H6

Properties: 2.2EM / 1

B. Rich text

For blog posts, a unique font size for title is used to fit with the max height of blog posts wrapper. In that way, the layout of these pages stays consistent and clear.

h1 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin

H2 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin

H3 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin

H4 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin
H5 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin

H6 in a rich text

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sin

A person writing something on a paper sheet
Image caption text
C. Paragraphs & texts

This is a paragraph text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Properties: 1.25EM / 1.5

This is a paragraph text with all caps letterS.

This is a paragraph text with underline

This is a paragraph text in white with an opacity of 80%

This is a paragraph text in black.

This is a paragraph text in black with an opacity of 80%

This is a very small text

This is a small text

This is a normal size text

This is a large text

  • This is a list item

  • This is a list item

  • This is a list item

  • This is a list item

  1. This is a list item

  2. This is a list item

  3. This is a list item

  4. This is a list item

This is a block quote. Mainly used in rich text elements
This is a text link
III. Buttons

Button Oval - Icon

contact us
contact us

Button Oval - Text

Button Text

IV. Spacings rules

For this template, global spacings have been created. You can use them as combo classes for all your elements. This allows you to have consistent and reusable spacings on your pages and in your layouts.

Spacing sizes have been defined like this :

  • XXSmall = 0.5EM
  • Xsmall = 1EM
  • Small = 2EM
  • Medium = 3EM
  • Large = 4EM
  • XLarge = 6EM
  • XXLarge = 8EM

You should use those spacing classes as combo classes for your components.

HOW IT WORKS ?

  • For exemple, if you want to add a small bottom margin to an element, you can use this combo class : Margin Bottom Small
  • If you want to add a large padding on the right of an element, you can use this combo class : Padding Right Large
  • If you want to add a medium padding on an element, you can use this combo class : Padding Medium
V. useful global classes

For this template, global classes have been created. Those are classes that you may reuse easily across the website.
This allows you to have consistent and reusable layouts, and make your work faster and more efficient .

container full - Takes 100% of the available width

container XL - Takes 90% of the available width

container L - Takes 80% of the available width

container M - Takes 60% of the available width

container S - Takes 40% of the available width