Dipp'd Pattern Library

Our brand blueprint for web 👋

Basic Interactive Elements

CTA Button

HTML Code

<a href="#0"><button class="cta-button">Order Now</button></a>
					

CSS Code

button{
								font-family:"ubuntu mono", monospace;
								font-weight:bold;
								font-size:1rem;

								color:black;
								border-radius: 0;
								border-style:solid;
								border-color:black;
								border-width:3px;
								padding:1rem 2rem;

								box-shadow: .5rem .5rem black;
								background-color:#FED10A;
								margin-right:1rem;

								transition: transform .2s; /* Animation */
							}

							button[type]:hover{
								transform:scale(1.05);
							}

							button.cta-button:focus{
							outline:0rem;
							}

							button[type]:focus{
								outline:0rem;
							}
					

Form Submit and Reset Buttons

HTML Code

<button type="submit">Submit</button>
						<button type="reset">Reset</button>
						

CSS Code

button[type="reset"]{
							background-color:#c6c6c6
							}
					

Text Input Field and Label

HTML Code

<label for="address">Address</label>
						<input type="text" placeholder="Placeholder Text">
					

CSS Code

input{
							font-family:"ubuntu mono", monospace;

							margin-top:.5rem;
							padding:.75rem;
							
							border-radius:10px;
							border-color:#CCC;
							border-width: 1px;

							box-shadow: .5rem .5rem;
						}

						input[type]:focus{
							outline:0rem;
						}

						input[type="address"]::placeholder{
							color:#ddd;
						}
					

Colors

Primary

gold

#FED10A

R: 254
						G: 209
						B: 10

violet

#6339A1

R: 99
						G: 57
						B: 161

white

#FFFFFF

R: 255
						G: 255
						B: 255

black

#000000

R: 0
							G: 0
							B: 0

Information Content Pages

teal

#2D6E62

R: 45
						G: 110
						B: 98

teal-dark

#194940

R: 25
						G: 73
						B: 64

teal-light

#55D1B9

R: 85
						G: 209
						B: 185

teal-white

#D5F3ED

R: 213
						G: 243
						B: 237

Shop Content Pages

burgundy

#B92575

R: 185
						G: 37
						B: 117

burgundy-dark

#84124F

R: 132
						G: 18
						B: 79

burgundy-light

#E04B8A

R: 224
						G: 75
						B: 138

burgundy-white

#FFB6D0

R: 255
						G: 182
						B: 208

Typography

Headings

Montserrat. This is our heading typeface.

HTML Code

<h1>H1 Heading</h1>
						

CSS Code

h1{
						font-size:4rem;
					}
					

Still Montserrat, but smaller

HTML Code

<h2>H2 Heading</h2>
					

CSS Code

h4{
						font-size:2rem;
					}
					

Montserrat is now at regular weight

HTML Code

<h3>H3 Heading</h3>
					

CSS Code

h3{
						font-size:1.5rem;
						font-weight: normal;
					}
					

Regular weight Montserrat and smaller

HTML Code

<h4>H4 Heading</h4>
					

CSS Code

h4{
						font-size:1.25rem;
						font-weight: normal;
					}
					
Kinda cute now, it's used for hierarchy in tight spaces such as the footer

HTML Code

<h5>H5 Heading</h5>
					

CSS Code

h5{
						margin:0;
					}
					

Paragraph

This is Ubuntu Mono. Meet our typeface for our paragraphs.

HTML Code

<p>Enter paragraph here.</p>
					

CSS Code

p{
						font-size:1rem;
						font-family: "ubuntu mono", monospace;
						font-weight: lighter;
					}
					

Bullet List

  • Item no.1
  • Item no.2
  • Item no.3

HTML Code

<ul>
					<li>Item no.1</li>
					<li>Item no.2</li>
					<li>Item no.3</li>
					</ul>

CSS Code

/*For Regular Bullet Lists*/

						/*DEFAULT*/


						/*For Footer Lists*/
						
						.footer-grid-wrapper ul{
						list-style-type:none;
						margin:1rem 0;
						padding:0;
					}
					

Number List

HTML Code

<ol>
						<li>Item Number One</li>
						<li>Item Number Two</li>
						<li>Item Number Three</li>
						</ol>
					

CSS Code

ol{
							font-family: balloon-urw-drop-shadow, sans-serif;
							font-weight: 400;
							font-style: normal;
						}
					

Website Grid Structure

12 Column Grid

For flexible layouts the 12 column grid is the foundation for the site's overall structure

1
2
3
4
5
6
7
8
9
10
11
12

HTML Code

<div class="grid-structure">
						<div class="placeholder-content">1</div>
						<div class="placeholder-content">2</div>
						<div class="placeholder-content">3</div>
						<div class="placeholder-content">4</div>
						<div class="placeholder-content">5</div>
						<div class="placeholder-content">6</div>
						<div class="placeholder-content">7</div>
						<div class="placeholder-content">8</div>
						<div class="placeholder-content">9</div>
						<div class="placeholder-content">10</div>
						<div class="placeholder-content">11</div>
						<div class="placeholder-content">12</div>
						</div>
					

CSS Code

.grid-structure{
						display:grid;
						grid-template-columns:repeat(12, 1fr);
						}
					

2 Column Grid

Use Cases: Cart Overview Page

50%
50%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content half">1</div>
						<div class="placeholder-content half">2</div>
						</div>
					

CSS Code

.grid-structure{
						display:grid;
						grid-template-columns:repeat(12, 1fr);
						}

						.third{
						grid-column:span 6;
						}
					

3 Column Grid

Use Cases: Featured Products Section

33%
33%
33%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content third">1</div>
						<div class="placeholder-content third">2</div>
						<div class="placeholder-content third">3</div>
						</div>
					

CSS Code

.grid-structure{
							display:grid;
							grid-template-columns:repeat(12, 1fr);
						}

						.third{
							grid-column:span 4;
						}
					

4 column grid

Use Cases: Product Page

25%
25%
25%
25%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content quarter">1</div>
						<div class="placeholder-content quarter">2</div>
						<div class="placeholder-content quarter">3</div>
						<div class="placeholder-content quarter">4</div>
						</div>
					

CSS Code

.grid-structure{
							display:grid;
							grid-template-columns:repeat(12, 1fr);
						}

						.quarter{
							grid-column:span 3;
						}
					

Modular Pattern Elements

Product Grid Item

Product grid for the shopping page. Each item will have a photo, description, name, and dietary information. Users will be able to add or remove quantities through interacting with the buttons.

Wine glaze topped with a sprinkle of rose petals.

Wine glaze topped with a sprinkle of rose petals.

Vegan

+

Gluten-free

Petals

symbol to categorize this donut as vegan symbol to categorize this donut as glueten-free
A pillowy glazed donut encircled with delicate coconut shavings. Formed for all coconut lovers, you will be going “coco” for this.

A pillowy glazed donut encircled with delicate coconut shavings. Formed for all coconut lovers, you will be going “coco” for this.

Vegan

+

Gluten-free

Coconut

symbol to categorize this donut as vegan symbol to categorize this donut as glueten-free
Layered chocolately goodness encase our original blend. With a double ganache glaze and chocolate bits, there’s cocoa in every bite.

Layered chocolately goodness encase our original blend. With a double ganache glaze and chocolate bits, there’s cocoa in every bite.

Vegan

+

Gluten-free

Choco

symbol to categorize this donut as vegan symbol to categorize this donut as glueten-free

HTML Code

<div class="product-grid-item-wrapper">
					<div class="product-grid-item">
						<img src="img/donut.png" alt="red berry donut with three stripes across the upper left corner">
						<div class="product-grid-item-description">
							<p>Wine glaze topped with a sprinkle of rose petals.</p>
							<div class="product-grid-item-dietary">
								<p class="vegan">Vegan</p> + <p class="gluten-free">Gluten-free</p>
							</div> 
						</div> 
					</div> 

					<div class="product-grid-item-info">
						<h4>Petals</h4>
						<img src="img/vegan.png" alt="symbol to categorize this donut as vegan">
						<img src="img/gluten-free.png" alt="symbol to categorize this donut as glueten-free">
					</div>
					
					<div class="product-grid-item-quantity">
						<button type="quantity">-</button>
						<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0">
						<button type="quantity">+</button>
					</div>
				</div> 
					

CSS Code

.product-grid-item-quantity input[type=number]::-webkit-inner-spin-button, 
						.product-grid-item-quantity input[type=number]::-webkit-outer-spin-button { 
						  -webkit-appearance: none;
						}
								.product-grid-item{
								margin:2.5rem 2.5rem 2.5rem 2.5rem;
								}

								#product-grid-item{
									background-color:#FFB6D0;
								}

								.product-grid-wrapper{
									display:grid;
									grid-template-columns: repeat(3, 1fr);
								}

								.product-grid-item-wrapper{
									display:flex;
									flex-direction: column;
									justify-content: center;
									align-self: center;
								}

								.product-grid-item{
									position:relative;
									display:flex;
									flex-direction: column;
									justify-content: center;
									align-content: center;
									z-index: 0;
								}

								.product-grid-item img{
									width: clamp(10vw,100%,50vw);
									max-height: 100%;
									margin:auto;
								}

								.product-grid-item-description{
									position:absolute;
									color:white;
									width:100%;
									height:100%;
									border-radius: 10px;
									text-align: center;
									padding:5%;

									display:flex;
									flex-direction: column;
									align-content: center;
									justify-content: center;

									opacity: 0;
									transition: opacity .2s;
								}

								.product-grid-item-description p{
									margin-top:0;
								}

								.product-grid-item-description:hover{
									opacity: 1;

									display:flex;
									flex-direction: column;
									align-content: center;
									justify-content: center;

									background-color: rgba(0,0,0,0.7);
								}

								.product-grid-item-dietary{
									display:inline;
								}

								.vegan{
									display:inline;
									color:#64D9C2;
								}

								.gluten-free{
									display:inline;
									color:#FFF5C0;
								}

								.product-grid-item-info{
									display:flex;
									justify-content: center;
									align-content: center;
								}
								.product-grid-item-info img{
									align-self: center;
									margin-left:.5rem;
								}

								.product-grid-item-quantity{
									display: flex;
									justify-content: center;
									align-items: center;
								}

								input[type="number"]{
									font-family:"ubuntu mono", monospace;

									text-align: center;

									margin-top:0;
									padding:.5rem;
									width:3rem;
									margin:0 .5rem;

									border-radius:5px;
									border: 1px solid #CCC;

									box-shadow: none;
								}

								input[type="number"]::placeholder{
									color:#ddd;
								}

								input[type=number]::-webkit-inner-spin-button, 
								input[type=number]::-webkit-outer-spin-button{ 
								  -webkit-appearance: none;
								}

								button[type="quantity"]{
									font-family:"ubuntu mono", monospace;
									font-weight:bold;
									font-size:1rem;
									color:black;

									width:2rem;
									height:2rem;
									border:none;
									border-radius: 50%;
									padding:0rem;
									background-color:#FED10A;
									box-shadow:none;
									margin-right:0;

									transition: transform .2s; /* Animation */
								}

								button[type="quantity"]:hover{
									transform:scale(1.15);
								}

Order Tracker Bar

This thing will be sticky at the bottom and keep track of the order's bill.

Subtotal $0.00

0 / 6 Donuts Selected

HTML Code

<div class="order-tracker-bar-wrapper burgundy-light">
				<div class="order-bill-wrapper">
					<h3>Subtotal $0.00</h3>
					<h4>0 / 6 Donuts Selected</h4>
				</div>
				<a href="#0"><button>Review Order</button></a>
			</div>
					

CSS Code

.order-tracker-bar-wrapper{
								padding: 1rem 2rem;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;
							}

							.order-tracker-bar-wrapper h3,
							.order-tracker-bar-wrapper h4{
								margin:0;
							}

							.order-tracker-bar-wrapper h4{
								font-size:1rem;
							}
							

Social Media Card

Used on the landing page, this social media container displays instagram posts from Dipp'd customers that provides information for newcomers on what the brand is and how others are receiving it. The container itself always contains an image, a text area and a lower "author" bar. Users are encouraged from this element to learn more and join the Dipp'd movement.

HTML Code

<div class="social-media-card-grid">
						<div class="social-media-card-wrapper">
							<div class="social-media-card-image">
								<img src="img/instagram-post1.png" alt="instagram post from dippd customer">
							</div>

							<div class="social-media-card-text">
								<p>London fogs & vegan donuts season is upon us 😇</p>
							</div>

							<div class="social-media-card-footer">
								<div class="social-media-card-tag">	
									<p>@moeliseismail</p>
								</div>
								<div class="social-media-card-logo">
									<img src="img/instagram-icon-social-media.png" alt="instagram logo for footer of social media card">
								</div>
							</div>

						</div>
					</div>
				

CSS Code

.social-media-card-grid{
						display:grid;
						grid-template-columns:repeat(3, 1fr);
						margin-bottom:2.5rem;
					}

					.social-media-card-wrapper{
						grid-column:1/2;
						display:flex;
						flex-direction:column;
						box-shadow:1.5rem 1.5rem black;
					}

					.social-media-card-text{
						height:clamp(5rem, 100vw, 8.5rem);
						margin:0.938rem 0.938rem 0.938rem 0.938rem;
					}

					.social-media-card-text p{
						font-size:1.313rem;
						margin:0rem;
					}

					.social-media-card-footer{
						display:grid;
						grid-template-columns: 4fr 0.5fr; 
						background:#55D1B9;
						align-items:center;
					}

					.social-media-card-tag{
						grid-column:1/2;
						margin-left:0.938rem;
					}

					.social-media-card-tag p{
						grid-column:1/2;
						font-size:1.313rem;
					}


					.social-media-card-logo{
						grid-column:2/3;
					}
				

Checkout Product Preview

This checkout product preview organism is found on the checkout page that provides users with information on their current order. An image representation of the users order (in the form of a box) is presented along with details regarding their items and price.

An image of a donut box order

Half Dozen Donuts

$21.00

Subtotal

$21.00

Shipping

--

Total

$21.00

HTML Code

<div class="checkout-product-preview-menu">
							<div class="checkout-product-preview-wrapper">
								<div class="top-checkout">
									<img src="img/donut-box-example.png" alt="An image of a donut box order">
								</div>
								<div class="bottom-checkout">
									<div class="product-name-and-value">
										<p>Half Dozen Donuts</p>
										<p>$21.00</p>
									</div>

									<div class="divider-line"></div>

									<div class="subtotal-name-and-value">
										<p>Subtotal</p>
										<p>$21.00</p>
									</div>

									<div class="shipping-name-and-value">
										<p>Shipping</p>
										<p>--</p>
									</div>

									<div class="divider-line"></div>

									<div class="total-value">
										<p>Total</p>
										<p>$21.00</p>
									</div>
								</div>
							</div>
						</div>
					

CSS Code

.checkout-product-preview-menu{
							padding:2.5rem 6.25rem 2.5rem 2.5rem;
							background:#6339A1;
						}

						.checkout-product-preview-wrapper{
							display:grid;
							grid-template-columns: 1fr;
							background:#6339A1;
						}

						.bottom-checkout{
							margin-top:1.5rem;
						}

						.bottom-checkout > .divider-line{
							width:100%;
						}

						.product-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.subtotal-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.shipping-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.total-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.top-checkout img{
							width:clamp(10vw, 50%, 50vw);
							max-height:100%;
							margin:auto;
						}

						.product-name-and-value p, .subtotal-name-and-value p, .shipping-name-and-value p{
							font-family:montserrat, sans-serif;
							font-size:1.125rem;
							color:white;
							margin-top:0rem;
							margin-bottom:0.625rem;
						}

						.total-value p{
							font-family:montserrat, sans-serif;
							font-size:1.125rem;
							font-weight:bold;
							color:white;
							margin-top:0rem;
						}
					

FAQ UI Element

Found on the FAQ page. For the desktop version, when the user hovers over the question, the answer shows. In the mobile, when the user touches the question, the answer will show. This element will be repeated for all questions on the page.

I live in Vancouver, can I order Dipp’d donuts online?

Unfortunately, Dipp’d only ships within the area of greater Toronto.

HTML Code

<div class= "faq-element-grid">
							<div class= "faq-element-wrapper">
								<div class= "faq-question teal">
									<p>I live in Vancouver, can I order Dipp’d donuts online?</p>
									<p class= "down-arrow">▼</p>
								</div>
								<div class= "faq-answer gold">
									<p>Unfortunately, Dipp’d only ships within the area of greater Toronto.</p>
									<p class= "up-arrow">▲</p>
								</div>
							</div>
						</div>
					

CSS Code

.faq-element-grid{
							display:grid;
							grid-template-columns:repeat(9,1fr);
						}

						.faq-element-wrapper{
							grid-column:1/span 9;
							position:relative;
						}

						.faq-element-wrapper .down-arrow{
							color:#FED10A;
							grid-column-start: 9;
							padding-left:0;
							font-family: ubuntu mono, monospace;
						}

						.faq-element-wrapper .up-arrow{
							color:#11362F;
							grid-column-start: 9;
							padding-left:0;
						}

						.faq-question{
							display:grid;
							grid-template-columns:repeat(9,1fr);
							background-color:#2D6E62;
							box-shadow:0.5rem 0.5rem #11362F;
						}

						.faq-question p{
							grid-column: 1/span 8;
							font-size: 1.75rem;
							color:white;
							font-weight:500;
							font-family:montserrat, sans-serif;
							padding-left:1.75rem;
						}

						.faq-answer{
							position:absolute;
							background-color:#FED10A;
							display:grid;
							grid-template-columns:repeat(9,1fr);
							opacity:0;
							transition: 0.3s ease;
							width:100%;
							height:100%;
							top:0;
						}

						.faq-answer p{
							grid-column: 1/span 8;
							font-size: 1.75rem;
							color:black;
							font-weight:400;
							padding-left:1.75rem;
						}

						.faq-element-wrapper:hover .faq-answer{
							opacity:1;
						}
					

Product Order Box Overview

Found on the My Box page, this product order box overview organism displays to the user their current order at Dipp'd Donuts with a representation of their box. 6 donuts are shown at a time with the counter below detailing how many boxes are part of the order. This organism allows users to click through and see what donuts they have, or return back to the shopping page.

An image of a donut box order in larger scale

1 of 3 box(es)

HTML Code

<div class="product-order-box-overview-grid">
										<div class="product-order-box-overview-return">
											<p class="left-arrow"><a href="#0">◀</a></p>
											<p><a href="#0">Return to shop</a></p>
										</div>

										<div class="product-order-box-overview-donuts">
											<div class="product-order-box-overview-image">
												<img src="img/donut-box-example-big.png" alt="An image of a donut box order in larger scale">
											</div>
										</div>

										<div class="product-order-box-overview-counter">
											<p class="left-arrow"><a href="#0">◀</a></p>
											<p> 1 of 3 box(es)</p>
											<p class="right-arrow"><a href="#0">▶</a></p>
										</div>

									</div>
								

CSS Code

.product-order-box-overview-grid{
										display:grid;
										grid-template-columns:repeat(6,1fr);
									}

									.left-arrow{									
										grid-column-start: 9;
										padding-left:0;
										font-family: ubuntu mono, monospace;
										margin-right:0.938rem;
									}

									.right-arrow{									
										grid-column-start: 9;
										padding-left:0;
										font-family: ubuntu mono, monospace;
										margin-left:0.938rem;
									}

									.product-order-box-overview-return{										
										grid-column:1/span 6;
										margin-left:3rem;
										display:flex;
										flex-direction:row;
									}

									.product-order-box-overview-donuts{										
									grid-column:1/span 6;
									display:flex;
									flex-direction:row;
									justify-content:center;
									align-content:center;
									}

									.product-order-box-overview-counter{										
										grid-column:1/6;
										display:flex;
										flex-direction:row;
										align-content:center;
										justify-content: center;
									}

									.product-order-box-overview-donuts img{
										width:clamp(10vw, 100%, 50vw);
										max-height:100%;
										margin:auto;
									}

									.product-order-box-overview-return p{										
										margin-top:0rem;
										margin-bottom:0rem;
										font-weight:bold;
										font-scale:1.5rem;
									}
									.product-order-box-overview-counter p{
										margin-top:0rem;
									}

									.product-order-box-overview-return a, .product-order-box-overview-counter a{
										text-decoration: none;
										color:#84124F;
									}
								

Product Order Page Donut Counters

This will be on the box overview page. The user will be able to see their selections and either remove or quick add donuts to their box.

Dipp'd Box(es)

$21.00

Donut Selections

HTML Code

<div class= "product-order-donut-counters-wrapper">
										<div class= "product-order-donut-counters-grid">
											 <h2>Dipp'd Box(es)</h2>
											 <h4>$21.00</h4>
											 <h3>Donut Selections</h3>
											 <div class= "product-order-donut-counters-left">
												 <div class= "product-name">
												 	<label>Petals</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Coconut</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Choco</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											<div class= "product-order-donut-counters-center">
												 <div class= "product-name">
												 	<label>Orange</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Silver</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Almond</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											<div class= "product-order-donut-counters-right">
												 <div class= "product-name">
												 	<label>Avocado</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Berry</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Grape</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											 <a href="#0"><button class="cta-button">Checkout</button></a>
										</div>
									</div>
								

CSS Code

.product-order-donut-counters-wrapper{
										background:#FFB6D0;
										padding:1.5rem;
										display:grid;
										grid-template-columns:repeat(5,1fr);
									}

									.product-order-donut-counters-grid{
										grid-column: 1/span 5;
										display:grid;
										grid-template-columns:repeat(5,1fr);
										grid-template-rows:repeat(7, auto);
									}

									.product-name input[type=number]::-webkit-inner-spin-button{
									  	  opacity: .5;
									}

									.product-name input[type=number]::-webkit-inner-spin-button:hover,
									.product-name input[type=number]::-webkit-inner-spin-button:active {
										  opacity: 1;
									}

									.product-order-donut-counters-grid h2{
										grid-column: 1/span 5;
										grid-row:1;
										color:#84124F;
										margin-bottom:0.5rem;
										font-weight:bold;
									}

									.product-order-donut-counters-grid h4{
										grid-column:1;
										grid-row:2;
										margin-top:0;
										font-weight:bold;
									}

									.product-order-donut-counters-grid h3{
										grid-column:1/span 3;
										grid-row:3;
										color:#84124F;
										font-weight: bold;
										margin-top:0;
									}

									.product-order-donut-counters-left{
										grid-column:1;
										grid-row:4;
									}

									.product-order-donut-counters-center{
										grid-column:2;
										grid-row:4;
									}

									.product-order-donut-counters-right{
										grid-column:3;
										grid-row:4;
									}

									.product-order-donut-counters-grid a{
										grid-column:1/span 2;
										grid-row:5;
										margin-top:1rem;
									}

									.product-name{
										display:flex;
										margin: 0.5rem;
										justify-content: space-between;
										align-items: center;
									}

									.product-name label{
										font-family: ubuntu mono, monospace;
										padding-right: 2rem;
									}