Colors

  • #C8E8E0$color-light-greenButtons, offer banner
  • #B6E0D6$color-dark-greenUsed on top of floral backgrounds
  • #EEEEEE$color-lighter-greybackground color of browser window when window is expanded wider than 1300 PX
  • #232526$color-black

Typography

Headings

H1 Title

  • Taille : 30px
  • Letter-spacing: 50px (ALL CAPS)
  • Font-family: Gotham Medium
  • Colour: #161616 ($color-dark-gray)
  • text-transform: uppercase

H2 Title / H2 Title
H2 Title / H2 Title (strong)

  • Taille : 22px
  • Letter-spacing: 50px (ALL CAPS)
  • Letter-spacing: 0px (Sentence Case)
  • Font-family: Gotham Book / Gotham Medium (strong)
  • Colour: #161616 ($color-dark-gray)

H3 title / H3 Title

  • Taille : 15px
  • Letter-spacing: 50px (ALL CAPS)
  • Letter-spacing: 0px (Sentence Case)
  • Font-family: Gotham Book
  • Colour: #161616 ($color-dark-gray)

H4 title / H4 Title

  • Taille : 14px
  • Letter-spacing: 50px (ALL CAPS)
  • Letter-spacing: 0px (Sentence Case)
  • Font-family: Gotham Medium
  • Colour: #161616 ($color-dark-gray)
H5 title / H5 Title
H5 title / H5 Title (class "light")
  • Taille : 13px
  • Letter-spacing: 50px (ALL CAPS)
  • Letter-spacing: 0px (Sentence Case)
  • Font-family: Gotham Book
  • Colour: #161616 ($color-dark-gray) and #6D6D6D ($color-light-gray) for class "light"
H6 title / H6 Title
H6 title / H6 Title (class "light")
  • Taille : 12px
  • Letter-spacing: 50px (ALL CAPS)
  • Letter-spacing: 0px (Sentence Case)
  • Font-family: Gotham Book
  • Colour: #161616 ($color-dark-gray) and #6D6D6D ($color-light-gray) for class "light"

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nibh magna, et malesuada lectus hendrerit nec. Donec euismod, odio ut gravida varius, libero ipsum rhoncus dui, a sodales eros sem ut est. Quisque dignissim maximus vestibulum. Quisque vulputate est sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nibh magna, et malesuada lectus hendrerit nec. Donec euismod, odio ut gravida varius, libero ipsum rhoncus dui, a sodales eros sem ut est. Quisque dignissim maximus vestibulum. Quisque vulputate est sapien.

  • Taille : 14px
  • Line-height: 22px
  • Letter-spacing: 0px
  • Font-family: Gotham Book

  • Colour: #161616 ($color-dark-gray) or #6D6D6D ($color-light-gray) for emphasized text

Links

Paragraph link

Primary Link (class "primary")
  • Taille : 13px
  • Line-height: 22px
  • Letter-spacing: 20px
  • Text-decoration: Underline
  • Text-Transform: Uppercase
Navigation Link
  • Taille : 13px
  • Line-height: 22px
  • Letter-spacing: 20px
  • Text-Transform: Uppercase
  • Text-decoration: Aucun(e)

Form Components

Button
  • .button

Carousel navigation(slick.js library)

Arrows

  • one
    with class .carousel-controls at the top level
  • Two
  • Use slick.js; don't write these elements manually

Dots (for mobile)

  • One
    with class .carousel-dots at the top level
  • Inside this
    , a list with a
  • Class .slick-active is used to highlight the currently active dot in dark grey

Drop Down

Text Input