Saycoffee
digital styleguide

Text

Headers

The class for the headers is header__text
The levels of headers is defined by its combo class --1
--2 --3 --4 --5 --6
The lead text class is lead__text
The body text class is body__text
The levels of body is defined by its combo class --18 --14

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Lead text

Body 18
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.

Body 14
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.

Text alignment

The alignment is determent by the combo class --t-a-l --t-a-c --t-a-r

Text align left
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.

Text align center
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.

Text align right
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.

Elements

Sections

When creating a new section use the element section

The base class is section to customize the section then add a combo class
Existing combo classes --hero --blog-hero --product-category-hero

Content Wrapper

The content wrapper is div block that wraps the content and placed as second element inside of the section. The class is content__wrapper

Buttons

The base class is button
The specific button is defined by the combo class --primary --secondary

Colors

Background color – BG color

The BG color is a combo class and named by the colors name fx --bg-green

If you add new color then remember to add it to color swatch for easy access

--bg-white-smoke

--bg-rosy-brown

--bg-yellow

--bg-sc-orange

--bg-sand

--bg-silver

--bg-old-lace

--bg-dim-grey

--bg-powder-blue

--bg-sienna

--bg-see-green

--bg-dark-green

--bg-peach

--bg-bisque

--bg-slate-grey

--bg-light-green

--bg-light-coral

--bg-light-coral

Spacing

Margin

Margin can be placed on Top, Right, Bottom, and Left side of an element. To create space on both top and bottom web just use Y and for Right and left we use X. Simply use one the mentioned combo classes below.

Metrics
The spacing is using VH (View Height) and VW (View Width) is increasing as following:
1.25vh/vw 2.5vh/vw 5vh/vw 7.5vh/vw 10vh/vw 15vh/vw 20vh/vw

Margin bottom

Classes

--m-b-1.25 --m-b-2.5 --m-b-5 --m-b-7.5 --m-b-10 --m-b-15 --m-b-20

Margin Bottom 1.25vh
Margin Bottom 2.5vh
Margin Bottom 2.5vh
Margin Bottom 5vh
Margin Bottom 7.5vh
Margin Bottom 10vh
Margin Bottom 15vh
Margin Bottom 20vh

Margin Top

Classes

--m-t-1.25 --m-t-2.5 --m-t-5 --m-t-7.5 --m-t-10 --m-t-15 --m-t-20

Margin Top 1.25vh
Margin Top 2.5vh
Margin to 5vh
Margin Bottom 5vh
Margin Bottom 10vh
Margin Bottom 15vh
Margin Bottom 20vh

Margin X-axis

Classes

--m-x-1.25 --m-x-2.5 --m-x-5 --m-x-7.5 --m-x-10 --m-x-15 --m-x-20

Margin Top 1.25vh
Margin Top 2.5vh
Margin to 5vh
Margin Bottom 5vh
Margin Bottom 10vh
Margin Bottom 15vh
Margin Bottom 20vh

ON-TIME DELIVERY

It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.

Pavé coffee bag
Pavé coffee bag

Cyclist packaging

It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.

ON-TIME DELIVERY

It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.

Pavé coffee bag
Pavé coffee bag

Cyclist packaging

It’s windy. The cool breeze of the ocean. It gives, a sense of beauty, in motion.

Fresh and delicious quality coffee.

Saycoffee prides itself on its commitment to quality, sustainability and comfort.

Browse our coffees