Typography

Fonts

FT Polar Book

Headings + Body

Type: Sans Serif
Weights: Normal (400)
Source: Frostype.xyz

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
h1-Big
Class
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h6
Class

Body

paragraph-big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-reg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow
Lorem Ipsum
slider-txt-alt
This is some text inside of a div block.
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List
Rich text block

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Color

Background

Black

#1d1c1a
u-bg-black

Gray

#969290
u-bg-gray

Light gray

#302f2c
u-bg-light-gray

Cream

#fef9e3
u-bg-cream

Light cream

#f8f6ee
u-bg-light-cream

White

#f8f8f8
u-bg-white

Light green

#ebf3ae
u-bg-light-green

Dark green

#26463e
u-bg-dark-green

Text

Aa

Black

#212121
u-text-black
Aa

Gray

#969290
u-text-darkgray
Aa

White

#FFFFFF
u-text-white

Components

Buttons

Default

btn-link-wrap

Bouton responsable

btn-link-wrap-responsable
our responsible commitment
our responsible commitment

Bouton responsable inversé

btn-link-wrap-responsable
cc-invert

Text Link

All Links
Text

Text Link Light

u-text-white

Slider bouton

swiper-button
swiper-btn-prev

Slider bouton

swiper-button
swiper-btn-prev

Plus bouton

swiper-button
swiper-btn-prev

Menu link - Small

btn-link-wrap

Menu link - Big

btn-link-wrap

Buttons - Big arrow

Retour texte link
Text link

Buttons - Small arrow

Texte link

Lines

Label info

catégorie

Label Info (BG White)

Category

Label Info Outline

Category

Label Info Outline (sur image)

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Card - Projet

Category

SkinClinic — Regina

Célébrer la beauté des formes et de la lumière.

Category

Manger!

Mettre sur pied une exposition éco conçue pour le musée de la santé Armand-Frappier.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text link

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text link

Card - Journal

interview Alexendre joyce

5 mins
design
société

Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

développer un environnement durable

7 mins
design
société

Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

étude: humaniser la stratégie

10 mins
stratégie
entreprise

Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

Prevent Style Clean Up

découvrir

Text in all caps

u-text-caps
découvrir

Flip an element - Rotate 180 vertical

u-transform-flip
découvrir

Text Line Height 1-

u-text-line-height-1
découvrir

cc-flex-justify-between

cc-flex-justify-between
découvrir

u-text-40-ch

u-text-40-ch
découvrir

u-text-50-ch

u-text-50-ch
découvrir

.menu_accordion.is-active

découvrir

.menu_accordion-portrait-wrap.is-active

u-ml-1-negatif

menu_accordion.is-active

Notre démarche

Nous avons une démarche claire mais nous “monterons le volume” à certaine étapes selon les besoins de votre projet.

01

Diagnostic

Comprendre, se projeter et planifier

02

Atelier de cocréation

Se réunir pour faire émerger les idées

03

Stratégie

Se réinventer et accélérer l’innovation

04

Création

Design et concrétisation de la vision

05

Déploiement

Passer des idées à l'action

06

Impact

Maximiser les retombées positives

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-1
margin-bottom: 1em;
u-mb-2
margin-bottom: 2em;
u-mb-3
margin-bottom: 3em;
u-mb-6
margin-bottom: 6em;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1em;
u-mr-2
margin-right: 1em;
u-ml-1
margin-left: 1em;
u-ml-2
margin-left: 2em;

Padding

Top

u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1em;
u-pt-2
padding-top: 2em;
u-pt-3
padding-top: 3em;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1em;
u-pb-2
padding-bottom: 2em;
u-pb-3
padding-bottom: 3em;

Other

u-p-0
padding: 0;
u-p-1
padding: 1em;
u-pr-1
padding-right: 1em;

Alignment

u-text-center
text-align: center;
u-text-right
text-align: right;

Overflow

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Display + position

u-d-none
display: none;
u-d-none-md
display: none;
u-d-none-sm
display: none;
u-d-none-xs
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-d-inline-block
display: inline-block;
u-position-relative;
position: relative;

Size

u-w-100
width: 100%;
u-h-100
height: 100%;

Helpers

u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties

Layout

Section

section

Padding vertical

padding-vertical

Container

container

Grid

col
col
col
col
col
col
col
col
col-lg-4
col
col-lg-4
col
col-lg-4
col
col
col

Grid - Desktop

col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12
col
col-lg-4
col
col-lg-4
col
col-lg-4

Grid - Tablet

col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12

Grid - Mobile Landscape

col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12

Grid - Mobile Portrait

col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12

Align columns

row
row-align-center
col
col
col
row
row-align-end
col
col
col

Justify columns

row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col

Reorder columns

col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last

Other columns modifiers

Shrink Column

col
col-shrink
col

Gutterless Column

row
row-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters