Colors

  • #C8E8E0 $color-light-green Buttons, offer banner
  • #B6E0D6 $color-dark-green Used on top of floral backgrounds
  • #EEEEEE $color-lighter-grey background color of browser window when window is expanded wider than 1300 PX
  • #232526 $color-black

Typography

Headings

H1 Title

  • Format : 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)

  • Format : 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

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

H4 title / H4 Title

  • Format : 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")
  • Format : 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")
  • Format : 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.

  • Format : 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")
  • Format : 13px
  • Line-height: 22px
  • Letter-spacing: 20px
  • Text-decoration: Underline
  • Text-Transform: Uppercase
Navigation Link
  • Format : 13px
  • Line-height: 22px
  • Letter-spacing: 20px
  • Text-Transform: Uppercase
  • Text-decoration: Aucun

Form Components

Button
  • .button

Carousel navigation(slick.js library)

Arrows

  • one <div> with class .carousel-controls at the top level
  • Two <button> elements inside, with classes .slick-prev et .slick-next respectively, and shared class .slick-arrow
  • Use slick.js; don't write these elements manually

Dots (for mobile)

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

Drop Down

Text Input

Darphin.ca est alimenté par de l’électricité renouvelable.*

*L’électricité utilisée pour alimenter notre centre de données de commerce électronique au Canada est couverte par des certificats d’énergie renouvelable.

 

Trouver un magasin Aide COMMANDE PAR TÉLÉPHONE
En | Fr