P01 - Style Guide Template for company: The Glazing Studio

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

Code:

<p> Learn more about our <a href="#classes" target="_self">pottery painting classes</a> for all skill levels. </p>

Rendered element:

Learn more about our pottery painting classes for all skill levels.

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#contact" class="button-nav">Contact Us</a>

Rendered element:

Contact Us

Submit/Reset Buttons

Code:

<form>
  <div class="form-group">
    <label for="name">Your name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-actions">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

Rendered element:

Text Input Field with Label

Code:

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="text" id="email" name="email">
  </div>
</form>

Rendered element:

Radio Button with Label

Code:

<form>
  <p>How many people are you reserving for?</p>
  <div class="radio-group">
    <input type="radio" id="one" name="group_size" value="1">
    <label for="one">1 person</label>
  </div>
  <div class="radio-group">
    <input type="radio" id="two" name="group_size" value="2">
    <label for="two">2 people</label>
  </div>
  <div class="radio-group">
    <input type="radio" id="three" name="group_size" value="3">
    <label for="three">3 people</label>
  </div>
  <div class="radio-group">
    <input type="radio" id="fourplus" name="group_size" value="4+">
    <label for="fourplus">4+ people</label>
  </div>
</form>

Rendered element:

How many people are you reserving for?

Image as a Link

Code:

<a href="#classes">
  <img src="img/group_painting.png" alt="Group of people painting pottery together in a glazing studio">
</a>
<p>Book your group pottery painting session today.</p>

Rendered element:

Group of people painting pottery together in a glazing studio

Book your group pottery painting session today.

Text Elements

Headings

Code:

<h1>The Glazing Studio</h1>
<h2>Pottery Painting Classes</h2>
<h3>Group & Private Sessions</h3>
<h4>Perfect for beginners and creatives</h4>

Rendered element:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Code:

<p> Welcome to <strong>The Glazing Studio</strong>, a creative space where you can relax, paint, and bring ceramic pieces to life. Our studio offers walk-in pottery painting sessions as well as guided classes designed for all skill levels, from first-time painters to experienced creatives.<br><br> Whether you are visiting solo, with friends, or planning a group event, we provide a calm and welcoming environment with step-by-step support from our team. Each session allows you to create something personal, expressive, and completely your own.<br><br> At The Glazing Studio, we believe creativity should feel <em>accessible, enjoyable, and pressure-free</em>, making it easy for anyone to explore pottery painting at their own pace. </p>

Rendered element:

Welcome to The Glazing Studio, a creative space where you can relax, paint, and bring ceramic pieces to life. Our studio offers walk-in pottery painting sessions as well as guided classes designed for all skill levels, from first-time painters to experienced creatives.

Whether you are visiting solo, with friends, or planning a group event, we provide a calm and welcoming environment with step-by-step support from our team. Each session allows you to create something personal, expressive, and completely your own.

At The Glazing Studio, we believe creativity should feel accessible, enjoyable, and pressure-free, making it easy for anyone to explore pottery painting at their own pace.

Numbered Lists

Code:

<h4>Pottery Painting Process:</h4>

<ol>
  <li>Choose a ceramic piece from our studio collection.</li>
  <li>Select your glaze colors and start painting at your own pace.</li>
  <li>Leave your piece with us for glazing and firing in the kiln.</li>
  <li>Pick up your finished piece once it is ready.</li>
</ol>

Rendered element:

Pottery Painting Process:

  1. Choose a ceramic piece from our studio collection.
  2. Select your glaze colors and start painting at your own pace.
  3. Leave your piece with us for glazing and firing in the kiln.
  4. Pick up your finished piece once it is ready.

Combined Elements

Main Navigation

Code:

<nav>
  <a href="#home">Home</a>
  <a href="#classes">Classes</a>
  <a href="#groups">Group Sessions</a>
  <a href="#about">About Us</a>
  <a href="#contact">Contact Us</a>
</nav>

Rendered element:

Product / Service Listing

Code:

<div class="service-list">

  <article class="service-item">
    <img src="img/image3.png" alt="Walk-in pottery painting sample piece and glaze colors">
    <div class="service-text">
      <h4>Walk-In Pottery Painting</h4>
      <p>Paint at your own pace with a wide selection of ceramic pieces.</p>
      <p class="service-price">$25 per piece</p>
    </div>
  </article>

  <article class="service-item">
    <img src="img/image4.png" alt="Guided pottery class session in progress">
    <div class="service-text">
      <h4>Guided Pottery Classes</h4>
      <p>Instructor-led pottery painting sessions for all skill levels.</p>
      <p class="service-price">$45 per person</p>
    </div>
  </article>

  <article class="service-item">
    <img src="img/group_painting.png" alt="Group pottery painting session at a shared table">
    <div class="service-text">
      <h4>Group Pottery Painting Sessions</h4>
      <p>Ideal for birthdays, team events, and celebrations.</p>
      <p class="service-price">Starting at $40 per person</p>
    </div>
  </article>

</div>

Rendered element:

Walk-in pottery painting sample piece and glaze colors

Walk-In Pottery Painting

Paint at your own pace with a wide selection of ceramic pieces.

$25 per piece

Guided pottery class session in progress

Guided Pottery Classes

Instructor-led pottery painting sessions for all skill levels.

$45 per person

Group pottery painting session at a shared table

Group Pottery Painting Sessions

Ideal for birthdays, team events, and celebrations.

Starting at $40 per person

Payment Form

This example shows a checkout form for a gift card purchase (text inputs + radio inputs + submit/reset).

Code:

<form class="payment-form">
  <fieldset>
    <legend>Buyer details</legend>
    <div class="form-group">
      <label for="buyer_name">Name:</label>
      <input type="text" id="buyer_name" name="buyer_name">
    </div>
    <div class="form-group">
      <label for="buyer_email">Email:</label>
      <input type="text" id="buyer_email" name="buyer_email">
  </div>
  </fieldset>

  <fieldset>
    <legend>Gift card amount</legend>
    <div class="radio-group">
      <input type="radio" id="amt_25" name="gift_amount" value="25">
      <label for="amt_25">$25</label>
    </div>
    <div class="radio-group">
      <input type="radio" id="amt_50" name="gift_amount" value="50">
      <label for="amt_50">$50</label>
    </div>
    <div class="radio-group">
      <input type="radio" id="amt_100" name="gift_amount" value="100">
      <label for="amt_100">$100</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Payment method</legend>
    <div class="radio-group">
      <input type="radio" id="pay_card" name="pay_method" value="Card">
      <label for="pay_card">Card</label>
    </div>
    <div class="radio-group">
      <input type="radio" id="pay_apple" name="pay_method" value="Apple Pay">
      <label for="pay_apple">Apple Pay</label>
  </div>
  </fieldset>

  <fieldset>
    <legend>Card details</legend>
    <div class="form-group">
      <label for="card_name">Name on card:</label>
      <input type="text" id="card_name" name="card_name">
    </div>
    <div class="form-group">
      <label for="card_number">Card number:</label>
      <input type="text" id="card_number" name="card_number" placeholder="1234 5678 9012 3456">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="expiry">Expiry (MM/YY):</label>
        <input type="text" id="expiry" name="expiry" placeholder="MM/YY">
      </div>
      <div class="form-group">
        <label for="cvv">CVV:</label>
        <input type="text" id="cvv" name="cvv" placeholder="123">
      </div>
    </div>
  </fieldset>

  <div class="form-actions">
    <button type="submit">Pay Now</button>
    <button type="reset">Reset</button>
  </div>
</form>

Rendered element:

Buyer details
Gift card amount
Card details

Checkout Cart

Code:

<h4>Cart</h4>

<p>Walk-in Pottery Painting <span>$35</span></p>
<p>Guided Pottery Class <span>$55</span></p>

<hr>

<p><strong>Total: $90</strong></p>

Rendered element:

Cart

Walk-in pottery painting item

Walk-in Pottery Painting

$35

Guided pottery class item

Guided Pottery Class

$55


Total $90

Branding

Basic Branding Ideas

What does the company do or offer?

The Glazing Studio is a pottery painting studio that offers walk-in ceramic painting sessions, guided classes, and group pottery painting experiences. Customers can choose from a variety of ceramic pieces, select glaze colors, and paint at their own pace in a relaxed studio environment. Finished pieces are glazed and fired by the studio and are ready for pickup after completion.

Who is the company to potential customers?

If The Glazing Studio were a person, it would be calm, welcoming, and encouraging. The studio feels patient with beginners, supportive without being overwhelming, and genuinely excited about creativity. It reassures customers that there is no right or wrong way to create, making everyone feel comfortable exploring pottery painting regardless of their experience level.

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

The Glazing Studio entices customers by offering a low-pressure and enjoyable creative escape from everyday routines. It provides a hands-on experience where people can relax, spend time with friends or family, and create something personal and meaningful. The welcoming atmosphere, flexible session options, and the promise of a finished ceramic piece make the studio appealing for both casual visits and special occasions.

Brand Components

Fonts

The Glazing Studio uses a clean, modern type system that feels calm, welcoming, and creative.

Primary Heading Font: Commissioner (Black 900)

Used for major headings such as the studio name and section titles.

Rendered font sample:

The Glazing Studio

Code (how the sample is shown):

<p class="font-sample font-heading">The Glazing Studio</p>

Body Text Font: Noto Sans (Regular 400)

Used for paragraphs and longer descriptive text to ensure readability and a relaxed tone.

Rendered font sample:

Welcome to The Glazing Studio, a creative space where you can relax and paint at your own pace. We offer walk-in ceramic painting sessions, guided classes, and group pottery painting experiences. Customers can choose from a variety of ceramic pieces, select glaze colors, and paint at their own pace in a relaxed studio environment. Finished pieces are glazed and fired by the studio and are ready for pickup after completion.

Code (how the sample is shown):

<p class="font-sample font-body">Welcome to The Glazing Studio...</p>

Font references:
Commissioner on Google Fonts
Noto Sans on Google Fonts

Colour Palette

The color palette is designed to feel calm and professional, while still referencing creativity and warmth.

  • Primary Blue (Headings & Links): rgb(31, 51, 181) / #1F33B5
  • Charcoal (Body Text): #2B2B2B
  • Soft Off-White (Background): #F7F4EF
  • Clay Accent (Highlights & Buttons): #C65A3A
  • Glaze Gold (Secondary Accent): #D9A441

Code:

<li><span class="swatch swatch-primary-blue"></span> ... #1F33B5</li>

Blue provides clarity and trust, charcoal keeps text readable, and warm clay and gold accents reference pottery and glaze materials.

Brand Application Sample

This sample demonstrates how typography, colour, imagery, and interaction work together in a realistic page section for The Glazing Studio website.

Rendered element:

Welcome to The Glazing Studio

The Glazing Studio is a calm and welcoming pottery painting space where creativity feels accessible and pressure-free. Whether you are stopping by for a walk-in session or booking a guided class, our studio encourages visitors to paint at their own pace and enjoy the process.

Learn more about our pottery painting classes or explore our available services below.

Our Services

Walk-in pottery painting sample piece and glaze colors

Walk-In Pottery Painting

Paint at your own pace with a wide selection of ceramic pieces, from mugs and plates to decorative items, and create something uniquely your own.

$25 per piece

Guided pottery class session in progress

Guided Pottery Classes

Instructor-led pottery painting sessions for all skill levels, offering step-by-step guidance and support throughout the creative process.

$45 per person

Group pottery painting session at a shared table

Group Pottery Painting Sessions

Ideal for birthdays, team events, and celebrations, these group pottery painting sessions encourage shared creativity in a relaxed and social setting.

Starting at $40 per person

Imagery and Art Direction

  • Warm, candid photography inside the studio
  • People painting pottery together at shared tables
  • Close-ups of hands, brushes, glaze, and ceramic textures
  • Natural lighting and relaxed compositions

The imagery should communicate a calm, welcoming, and pressure-free creative environment.

Rendered imagery samples:

People painting pottery together in the studio Close-up of pottery painting process Paint brushes and glaze colors on a table Finished ceramic pieces displayed on shelves

Code:

<div class="imagery-samples">
  <img src="img/group_painting.png" alt="...">
  <img src="img/image1.png" alt="...">
  <img src="img/image2.png" alt="...">
  <img src="img/image3.png" alt="...">
</div>

Home

Welcome to The Glazing Studio. Explore our classes, group sessions, and studio information below.

Product / Service Listing Page Template: CLASSES

Walk-in pottery painting sample piece and glaze colors

Walk-In Pottery Painting

Drop in anytime and paint a ceramic piece at your own pace.

$25 per piece

Guided pottery class session in progress

Guided Pottery Class

Instructor-led session with techniques, tips, and support throughout.

$45 per person

Group pottery painting session at a shared table

Group Painting Session

Celebrate with friends, coworkers, or family at a shared painting table.

Starting at $40 per person

Close-up of pottery painting process

Beginner Technique Mini Class

Learn brush control, layering, and simple patterns in a short session.

$30 per person

Paint brushes and glaze colors on a table

Glaze Exploration Workshop

Experiment with glaze combos and effects with guided suggestions.

$50 per person

Finished ceramic pieces displayed on shelves

Seasonal Theme Night

A themed session with inspiration prompts and featured pieces.

$35 per person

Group Sessions

Planning a birthday, team event, or celebration? Reserve a group pottery painting session.

Checkout web-page Template

This section combines navigation, a cart summary, and a payment form (checkout layout).

Checkout

Confirm your cart items and fill out the payment form below to complete your purchase.

Your Cart

Walk-in pottery painting item

Walk-in Pottery Painting

$35

Guided pottery class item

Guided Pottery Class

$55


Total $90

Continue shopping

Payment

Buyer details
Payment method
Card details

Contact Us

Email us or visit the studio for walk-ins, bookings, and questions.

Citations