P02 - Style Guide Template

Interactive Elements

In-text link

Sample code:

<p>I want to see the <a href = "#" class="text-link">catalogue</a> and choose delicious desserts!</p>

Rendered element:

I want to see the catalogue and choose delicious desserts!

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">About Us</a>

Rendered element:

About Us

Submit/Reset Buttons

Sample code:

<button type = "form-button" type = "submit">Submit</button> <button type = "form-buttonRESET" type = "reset">Reset</button>

Rendered element:

Text Input Field with Label

Sample code:

<label for = "form-phone">Phone Number:</label>
        <input type = "text" name = "form-phone" id = "form-phone" placeholder = "+ x(xxx)xxx-xx-xx">

Rendered element:

Phone Number:

Radio Button with Label

Sample code:

<label class="radio">
        <input type="radio" name="plan">
        <span class="custom-radio"></span>
        Add Utensils
        </label>

Rendered element:

Add Utensils

Image as a Link

Sample code:

<a href = "#" class = "image-link"><img src = "img/maple-cake.jpg" alt="a piece of maple syrup flavor cake lying on a plate"></a>

Rendered element:

a piece of maple syrup flavor cake lying on a plate

Text Elements

Headings

Sample code:

<h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5>

Rendered element:

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Paragraphs

Sample code:

<p>A delicious slice of a cheesecake, drizzled in maple syrup. Right from the oven. Made with our love.</p>

Rendered element:

A delicious slice of a cheesecake, drizzled in maple syrup. Right from the oven. Made with our love.

Numbered Lists

Sample code:

 
          <ol class = "ordered-list">
            <li> 125 Maple Street, Vancouver, BC M5H 2N2</li>
            <li> 47 Caramel Street West, Vancouver, BC M4L 5Y7</li>
            <li> 220 Electric  Avenue, Toronto, ON M5V 2Z3</li>
            <li> 138 Autumn Avenue, Toronto, ON 4Y5 6G1</li>
          </ol>

Rendered element:

125 Maple Street, Vancouver, BC M5H 2N2
47 Caramel Street West, Vancouver, BC M4L 5Y7
220 Electric Avenue, Toronto, ON M5V 2Z3
138 Autumn Avenue, Toronto, ON 4Y5 6G1

Combined Elements

Main Navigation

Sample Code:

 
          <nav class = "main-nav">
            <a href = "#" class = "nav-link">Home</a>
            <a href = "#" class = "nav-link">Menu</a>
            <a href = "#" class = "nav-link">Contact and Locations</a>
            <a href = "#" class = "nav-link">About Us</a>
          </nav>

Rendered element:

Product/Service Listing

Sample code:


          <div class="product-listing">
            <h4 class = "product-name">Maple Syrup Cheesecake</h4>
            <a href = "#">
              <img src="img/maple-cake.jpg" alt = "A delicious slice of a cheesecake." class="product-image">
            </a>
            <p class="product-description">A rich and creamy cheesecake with real maple syrup topping.</p>
            <p class="product-allergens">Contains: Dairy, Eggs, Gluten, Nuts</p>
            <div class = "card-footer">
              <p class="product-cost">$6.35</p>
              <a href = "#" class =" product-link">Add to Cart</a>
            </div>
          </div>

Rendered element:

Maple Syrup Cheesecake

Contains: Dairy, Eggs, Gluten, Nuts

A rich and creamy cheesecake with real maple syrup topping.

$6.35

Add to Cart

Payment Form

Sample Code:


          <form class="payment-form">
            <div class="form-elements">
              <label for="form-name">Full Name:</label>
                <input type="text" name="form-name" id="form-name" placeholder="+ x(xxx)xxx-xx-xx">
              <label for="form-phone-num">Phone Number:</label>
                <input type="text" name="form-phone-num" id="form-phone-num" placeholder="John Johnson">
              <label for="form-email">Email:</label>
                <input type="text" name="form-email" id="form-email" placeholder="john_johnson@bakery.ca">
              <label for="form-address">Address:</label>
                <input type="text" name="form-address" id="form-address" placeholder="Caramel Avenue 123">
              <label for="form-post">Postal Code:</label>
                <input type="text" name="form-post" id="form-post" placeholder="A1A 1A1">
            </div>

            <p>Choose Your Payment Method:</p>

            <label class="radio">
            <input type="radio" name="plan">
            <span class="custom-radio"></span>
            Credit/Debit Card
            </label>
            <label class="radio">
            <input type="radio" name="plan">
            <span class="custom-radio"></span>
            PayPal
            </label>
            <button class="form-button" type="submit">Submit</button>
          </form>

Rendered element:

Checkout Cart

Sample Code:


        <div class="checkout-cart">
          <h4>Your Cart</h4>
          <ul class="cart-items">
            <li class="cart-item">
              <div class="cart-item-name">Maple Syrup Cheesecake</div>
              <div class="cart-item-price">$6.35</div>
              <div class="cart-item-image">
                <img src="img/maple-cake.jpg" alt="Maple Syrup Cheesecake">
              </div>
            </li>
            <li class="cart-item">
              <div class="cart-item-name">Walnut Oat Latte (No caffeine)</div>
              <div class="cart-item-price">$7.35</div>
              <div class="cart-item-image">
                <img src="img/walnut-latte.jpg" alt="Walnut Oat Latte">
              </div>
            </li>
            <li class="cart-item">
              <div class="cart-item-name">Sugar Cookie</div>
              <div class="cart-item-price">$2.35</div>
              <div class="cart-item-image">
                <img src="img/sugar-cookie.jpg" alt="Sugar Cookie">
              </div>
            </li>
          </ul>
          <p class="cart-total">Total: $16.05</p>
        </div>

Rendered element:

Your Cart

Product

Price
Maple Syrup Cheesecake

$6.35
Walnut Oat Latte (No caffeine)

$7.35
Sugar Cookie

$2.35
Total:

$16.05

Branding Ideas

What does the company do, or offer?

Name: MaPastry. "Ma" stands for maple, "Pastry"... for pastry! MaPastry is a company, which consists of cafes chain, which offer baked goods with maple syrup as their signature dishes alongside traditional Canadian desserts and drinks, like coffee and tea. Baked goods with maple syrup are chosen as signature dishes, since maple syrup is one of most well-known ingredients around to world and a lot of people think about Canada when they see maple syrup. This correlates with one the company’s goals to spread Canadian food culture around the world through offering traditional desserts. And of course, MaPastry is a warm home for its own nation, where they can always have a taste ot their cultural food. MaPastry offers both in-cafe visits and food deliveries.

Who is the company to potential customers? (as a person)

MaPastry is a brand with a warm and welcoming vibe , being cultural grounded. As a brand, it is very approachable, comforting, offering a sense familiarity to Canadians, while also remaining curious to people, who explore Canadian culture. MaPastry values are warmth, comfort and preservation of traditions. Our company presents itself as a bridge to culture and delicious food experience through desserts and drinks.

Why might this company entice someone to purchase a product or service?

MaPastry attracts customers by offering something that feels both familiar and meaningful. For Canadians, the flavours create a sense of comfort and connection to home. For visitors and newcomers, the café becomes an easy way to experience Canadian food culture through desserts and drinks. By focusing on warmth, tradition, and a clear cultural identity, MaPastry stands out from more generic café chains.

Branding Components

Fonts

Arima Madurai & Charis SIL

Arima Madurai is used for headings to give the brand a warm and friendly feel. Its rounded letterforms help communicate MaPastry’s welcoming café atmosphere and make the brand feel approachable and easy to connect with, making a closer contact between the company and customer. Charis SIL is used for body text because it is clean and easy to read, giving a fast access to information. Together, Charis SIL and Arima Madurai create a balance between warm personality and clarity, showing combination of MaPastry’s values: coziness and tradition, combined with modern time.

Colour Palette

MaPastry's color palette is built around warm colors, which are inspired by earth themes and baking good. Creamy white is being used for background, keeping interface calm and soft, while golden and browny tones translate sweetness of our production (yeah, like a maple syrup) and will be used for UI elements along with green, which is being used for contrast, but still keeping cozy theme, while darker brown will be used for text. Red will be the primary color for the header.

Potential Imagery

Imagery of Mapastry strives inviting and warm atmospere, drawing attention with its high-quality photos of desserts and visuals elements, inspired by food items. Apart from that there might will be additional decorative elements, inspired by nature like maple leaves, possibly wooden textures or small animals in some sections to translate the atmosphere of Canada to both locals and newcomers. Combining softness of headings and clean body text font, mostly warm, analogus and neutral color palette and visual elements, representing parts of Canada lead to inviting look for the MaPastry website. Together, these componenets communicate warmth, comfort, and cultural identity, giving a pleasing experience for both big groups of potential customers.

a second idea for main page of the MaPastry's website

a picture of pastry dishes: donut, croissants, pancakes and maple leaf

a drawing of the bakery with pastry goods and bottle of maple syrup

Citations

Creator. (Role). (Year). Title [Media]. Retrieved from URL.
Carlee. (2025, November 11). Maple Brown Butter Glaze [Image]. Cooking With Carlee. Retrieved February 2, 2026, from https://cookingwithcarlee.com/maple-browned-butter-glaze/.
Donangelo, K. (n.d.). Giant Sugar Cookies [Image]. Kathryns Kitchen Blog. Retrieved February 2, 2026, from https://kathrynskitchenblog.com/giant-sugar-cookie-recipe/.
Ferko, T. (2020, February 26). The Best Oat Milk Latte at Home (Easy 5-min Homemade Coffee) [Image of oat milk latte in mug]. My Vegan Minimalist. Retrieved February 2, 2026, from https://myveganminimalist.com/oat-milk-latte-foamy-vegan/.
Figma Community. Retrieved February 2, 2026, from https://www.figma.com/community/file/988557441862958442.
Google. (n.d.). Arima Madurai & Mulish [Web fonts]. Google Fonts. Retrieved February 2, 2026, from https://fonts.google.com/.
Google. (n.d.). Charis SIL [Web font]. Google Fonts. Retrieved February 2, 2026, fromhttps://fonts.google.com/.
Matteson, Steve. Designer. 2011. Open Sans [Font]. Retrieved from https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
Adobe Firefly. (2026). AI-generated image of a cafe with pastry and maple syrup bottles [AI‑generated image]. Adobe Firefly. https://firefly.adobe.com/generate/image
Adobe Firefly. (2026). AI-generated image of bakery pastry, such as donut, croissant, pancakes and maple leaft [AI‑generated image]. Adobe Firefly. https://firefly.adobe.com/generate/image