Style Guide Template

Interactive Elements

In-text link

Our Coffees

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button-nav">default button</a>

Rendered element:

default button

Submit/Reset Buttons

CSS selector:

.button-submit

Sample code:

<a href="#" class="button-submit">Submit</a>

Rendered element:

Submit

Text Input Field with Label

CSS selector:

text

Sample code:


        <form> 

         <label>Starbucks Card number: </label> 

         <input type="text" name="number">
        </form>

Rendered element:

Radio Button with Label

CSS selector:

.payment-method, .checkmark

Sample code:


        <label class="payment-method">Fruity 

         <input type="radio" name="radio"> 

         <span class="checkmark"></span>
        </label>

Rendered element:

Payment Method:

Visa MasterCard Paypal Starbucks Rewards Card

Image as a Link

CSS selector:

.image-main

Sample code:


        <a href="https://www.starbucksreserve.com/en-us">
        <img src="sources/starbucks-logo.png" alt="HTML tutorial" style="width:30%">
        </a>

Rendered element:

Text Elements

Headings

CSS selector:

h2, h3, h4, h5

Sample code:


        <h2>About Us</h2>

Rendered element:

About Us

Our Heritage

The Story of Starbucks Coffee Canada

Support Us

Paragraphs

CSS selector:

Sample code:


        <p>The first Starbucks to open in...</p>

Rendered element:

The first Starbucks to open in Canada was at the Seabus Skytrain Station in Vancouver on March 1, 1987. This humble store was Starbucks Coffee’s first international location, and since then Canadians have been embracing the Starbucks Experience in more than 1,070 company-operated and licensed locations across Canada. In 1996, Starbucks opened for business in Toronto, Ontario, with five stores opening their doors on the same day. Today, you can find our stores from Victoria, British Columbia to Toronto, Ontario; from Halifax, Nova Scotia to its most northerly coffeehouse in Whitehorse, Yukon. To support the growing business, Starbucks invested in the region’s infrastructure by establishing a regional support centre in Toronto and now there are offices also located in Vancouver, Calgary, and Montreal.

Numbered Lists

CSS selector:

Sample code:


          <ol type="1">
          <li>Choose a Coffee</li>
          </ol>

Rendered element:

Choose a Coffee
Choose a Size
Customize
Order and Pay

Combined Elements

Main Navigation

CSS selector:

button, div

Sample code:


          <div class="dropdown">
         <button>
          <div class="menu-button"></div>
          <div class="menu-button"></div>
        </button>
         <div class="dropdown-content">
          <a href="about.html">About Us</a><br>
         </div>
        </div>

Rendered element:

Product/Service Listing

CSS selector:

.container, .block

Sample code:


          <div class="container">

           <div class="block">

            <h4>SUN-DRIED BRAZIL VALE VERDE ESTATE</h4>

            <a href = "https://www.starbucksreserve.com/en-us/coffee/sun-dried-brazil-vale-verde-estate">

             <img src="sources/SDBrazilValeVerde.jpg" alt="HTML tutorial" style="width:100%">

            <a>

            <h5>$85<br><a href = "checkout.html" class="in-text-style">add to cart</a></h5>

           </div>

          </div>

Rendered element:

SUN-DRIED BRAZIL VALE VERDE

$85
add to cart

GUATEMALA LA COLINA FARM

$85
add to cart

Payment Form

CSS selector:

.payment-method, .checkmark

Sample code:


          <label class="payment-method">Visa

           <input type="radio" checked="checked" name="radio">

           <span class="checkmark"></span>

          </label>



          <form>

           </div><label>Starbucks Rewards Card number: </label>

           </div><input type="text" name="number">

          </form>

          <a class="button-submit" href="#">Submit</a>

Rendered element:

Visa MasterCard Paypal Card number:

Submit

Checkout Cart

CSS selector:

.container-checkout, .block-checkout

Sample code:


        <div class="container-checkout">

         <div class="block-checkout">

          <h4>COLOMBIA HUILA PINK BOURBON</h4>

          <img src="sources/ColombiaHuilaPinkBourbon.jpg" alt="HTML tutorial" style="width:100%">

          <h5>C$95 (12oz, 340g)</h5>

         </div>

        </div>

COLOMBIA HUILA PINK BOURBON

C$95 (12oz, 340g)

PRINCI™ BLEND

C$100 (16oz, 453g)

SUN-DRIED BRAZIL VALE VERDE ESTATE

C$85 (16oz, 440g)

Total Amount: C$195

Color Palettes

Brandy Punch #D0842B
White #FFFFFF
Ship Gray #3F3F41
Thunder #322E30
Black #050505

The Brand

STARBUCKS RESERVE ™ offers the rarest, most extraordinary coffees. They push their own boundaries of craft, developing a unique roast for each individual customer lot before experimenting with coffee as an art form—brewing, aging, infusing and blending it into imaginative and often surprising creations. They target men and women aged from 25 to 40 (young adults to adults) by offering a pleasurable and relaxed customer experience.

Citations

Dalton Maag. Designer. 2010. Ubuntu [Font]. Retrieved from https://fonts.google.com/specimen/Ubuntu
Paul D. Hunt. Designer. 2012. Source Code Pro [Font]. Retrieved from https://fonts.google.com/specimen/Source+Code+Pro
Starbucks Corperation. 2019. All images [Image]. Retrieved from https://www.starbucksreserve.com/en-us/coffee/archive

Interactive Elements

In-text link

Navigation Link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Radio Button with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

CSS selector:

Sample code:

Rendered element:

About Us

Our Heritage

The Story of Starbucks Coffee Canada

Support Us

Paragraphs

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

CSS selector:

Sample code:

Rendered element:

Product/Service Listing

CSS selector:

Sample code:

Rendered element:

SUN-DRIED BRAZIL VALE VERDE

$85add to cart

GUATEMALA LA COLINA FARM

$85add to cart

Payment Form

CSS selector:

Sample code:

Rendered element:

Checkout Cart

CSS selector:

Sample code:

COLOMBIA HUILA PINK BOURBON

C$95 (12oz, 340g)

PRINCI™ BLEND

C$100 (16oz, 453g)

SUN-DRIED BRAZIL VALE VERDE ESTATE

C$85 (16oz, 440g)

Total Amount: C$195

Color Palettes

The Brand

Citations

$85
add to cart

$85
add to cart