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
- Size: 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)
- Size: 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
- Size: 15px
- Letter-spacing: 50px (ALL CAPS)
- Letter-spacing: 0px (Sentence Case)
- Font-family: Gotham Book
- Colour: #161616 ($color-dark-gray)
H4 title / H4 Title
- Size: 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")
- Size: 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")
- Size: 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.
- Size: 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
- Size: 13px
- Line-height: 22px
- Letter-spacing: 20px
- Text-decoration: Underline
- Text-Transform: Uppercase
- Size: 13px
- Line-height: 22px
- Letter-spacing: 20px
- Text-Transform: Uppercase
- Text-decoration: None
Form Components
- .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
and.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