P01 - Style Guide

By Alyssa Lalani

The Book Worm Branding

About the Company

Welcome to The Book Worm!

We are an inclusive local kids book store aiming to get children engaged and excited about reading

Our online services provide our customers with the opportunity to purchase books and have them delivered to their home, as well as signing their kids up for immersive reading activites. We have a variety of youth books that range from picture books to young adult novels depending your child's reading level. We also like to hightlight the book of the month, a featured book, as well as local authors. Some in person activites we include include parent and child reading sessions for kids under the age of 2, todler book clubs which bring kids together to read a story ages 3-5 and reading races which encourages reading marathon competions amoung youth.

User Personas

  1. Holly (mom) and Jason (baby)

    As a single working mom Holly is struggling to find bonding and learning opportunities. Our weekend read with me classes for toddlers and babies. It provides a sense of community amoung new parents while encouraging and fostering reading abilities at a young age.

  2. Miriam (mom) + Vanessa (teen)

    As a teenager Vanessa hates reading. She finds it boring and hard to get engaged with. Her mom Miriam would like to get her daughter to increase her reading level. Vanessa can participate in our reading races which enourgaes reading on a regular basis to win prizes!

  3. Clide (teen)

    Clide is an introverted teen who loves to read but perfers to do it in his own time. He would like our review platform on our purchases page where he can engage with other readers from the comfort of his bedroom.

Colors

Rendered element:

Primary: HEX#FD5F60
Shade: HEX#DC4748
Use: Primary Brand
CSS: color-p1
CSS: color-p1s

Primary: HEX#5BAFE4
Shade: HEX#4596CA
Use: Primary Brand
CSS: color-p2
CSS: color-p2s

Primary: HEX#7CD86E
Shade: HEX#6ABC5E
Use: Acent
CSS: color-a1
CSS: color-a1s

Primary: HEX#FFDC5B
Shade: HEX#EBC63E
Use: Acent
CSS: color-a2
CSS: color-a2s

Primary: HEX#434342;
Shade: HEX#1D1D1B;
Use: Neutral
CSS: color-n1
CSS: color-n1s

Primary: HEX#A7A7A7
Shade: HEX#F2F2F2
Use: Neutral
CSS: color-n2
CSS: color-n2s

CSS selector:

.color-swatch //create new color block

.color-item-top //create top rounded swatch

.color-item-bottom //create bottom rounded swatch

.flex-container-color // container for colours

.flex-item-color // item for colours


.color-p1 //primary red

.color-p1s //primary red shade

.color-p2 //primary blue

.color-p2s //primary blue shade

.color-a1 //acent green

.color-a1s //acent green shade

.color-a2 //acent yellow

.color-a2s //acent yellow shade

.color-n1 //neutral dark grey

.color-n1s //netural black grey

.color-n2 //netural light grey

.color-n2s //neutral white grey

Sample code:
<div class="flex-container-color"></div>
<div class="color-swatch flex-item-color">
<div class="color-item-top color-p1"></div>
<div class="color-item-bottom color-p1s"></div>
<div class="colour-label">
<p>Primary: HEX#FD5F60<br>
Shade: HEX#DC4748<br>
Use: Primary Brand<br>
CSS: color-p1<br>
CSS: color-p1s<br>
</p>
</div>
</div>

Logo Variation

Rendered element:
The Book Work Logo Red The Book Work Logo Blue The Book Work Logo Green The Book Work Logo Yellow The Book Work Logo Grey
CSS selector:

.logo-item

.flex-container-brand

.flex-item-brand

Sample code:
<div class="logo-item flex-container-brand">
<img class="logo-item flex-item-brand" src="img/logo-red.svg" alt="The Book Work Logo Red">
<img class="logo-item flex-item-brand" src="img/logo-blue.svg" alt="The Book Work Logo Blue">
<img class="logo-item flex-item-brand" src="img/logo-green.svg" alt="The Book Work Logo Green">
<img class="logo-item flex-item-brand" src="img/logo-yellow.svg" alt="The Book Work Logo Yellow">
<img class="logo-item flex-item-brand" src="img/logo-grey.svg" alt="The Book Work Logo Grey">
</div>

Brand Imagery

Rendered element:
Worm Mascot Swiggle Red Worm Mascot Straight Red Worm Mascot Curve Red Worm Mascot Swiggle Blue Worm Mascot Straight Blue Worm Mascot Curve Blue Worm Mascot Swiggle Green Worm Mascot Straight Green Worm Mascot Curve Green Worm Mascot Swiggle Yellow Worm Mascot Straight Yellow Worm Mascot Curve Yellow Worm Mascot Swiggle Grey Worm Mascot Straight Grey Worm Mascot Curve Grey
CSS selector:

.brand-item

.brand-pattern

.flex-container-brand

Sample code:
<div class="brand-item flex-container-brand">
<img class="brand-item" src="img/worm-imagery/worm-swiggle-red.svg" alt="Worm Mascot Swiggle Red">
<img class="brand-item" src="img/worm-imagery/worm-straight-red.svg" alt="Worm Mascot Straight Red">
<img class="brand-item" src="img/worm-imagery/worm-curve-red.svg" alt="Worm Mascot Curve Red">
<img class="brand-item" src="img/worm-imagery/worm-swiggle-blue.svg" alt="Worm Mascot Swiggle Blue">
<img class="brand-item" src="img/worm-imagery/worm-straight-blue.svg" alt="Worm Mascot Straight Blue">
<img class="brand-item" src="img/worm-imagery/worm-curve-blue.svg" alt="Worm Mascot Curve Blue">
<img class="brand-item" src="img/worm-imagery/worm-swiggle-green.svg" alt="Worm Mascot Swiggle Green">
<img class="brand-item" src="img/worm-imagery/worm-straight-green.svg" alt="Worm Mascot Straight Green">
<img class="brand-item" src="img/worm-imagery/worm-curve-green.svg" alt="Worm Mascot Curve Green">
<img class="brand-item" src="img/worm-imagery/worm-swiggle-yellow.svg" alt="Worm Mascot Swiggle Yellow">
<img class="brand-item" src="img/worm-imagery/worm-straight-yellow.svg" alt="Worm Mascot Straight Yellow">
<img class="brand-item" src="img/worm-imagery/worm-curve-yellow.svg" alt="Worm Mascot Curve Yellow">
<img class="brand-item" src="img/worm-imagery/worm-swiggle-grey.svg" alt="Worm Mascot Swiggle Grey">
<img class="brand-item" src="img/worm-imagery/worm-straight-grey.svg" alt="Worm Mascot Straight Grey">
<img class="brand-item" src="img/worm-imagery/worm-curve-grey.svg" alt="Worm Mascot Curve Grey">
</div>

<div class="brand-pattern">
<img src="img/pattern.svg" alt="Geometric Brand Pattern">
</div>

Interactive Elements

In-text link

Rendered element:
This is an example

This is a paragraph element. It is a long established fact that a reader will be distracted by the readable content of a page when looking This is an example . The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

CSS selector:

.in-txt-link

Sample code:
<a class="in-txt-link" href="#" target="_blank">This is an example</a>

Basic Button Link

Rendered element:
Default Button
CSS selector:

.btn-basic

Sample code:
<a href="#" class="button-basic">Default Button</a>

Add Cart Button Link

Rendered element:
Add to Cart shopping cart icon
CSS selector:

.btn-add-cart

Sample code:
<a class="btn-add-cart" href="#"> Add to Cart <img class="icon" src="img/Icons/add-cart.svg" alt="shopping cart icon"> </a>

Navigation Link

Rendered element:
Default Nav
CSS selector:

.button-nav

Sample code:
<a href="#" class="txt-nav">Default Nav</a>

Submit/Reset Buttons

Rendered element:
CSS selector:

.btn-submit

.btn-reset

Sample code:
<input class="btn-submit" type="submit" value="Submit"> <input class="btn-reset" type="reset" value="Reset">

Text Input Field with Label

Rendered element:
CSS selector:

label

input[type=text]

Sample code:
<div class="flex-container-payment"> <div class="flex-item-lg"> <form method="post" action="#"> <label for="label">Label:<label> <input type="text" id="label" name="label" placeholder="placeholder"> </form> </div> </div>

Radio Button with Label

Rendered element:

Please select an option:




CSS selector:

.form-radio-label

-
Sample code:
<form method="post" action="#">
<input type="radio" id="option 1" name="example" value="1">
<label class="form-radio-label" for="option 1">Option 1</label><br>
<input type="radio" id="option 2" name="example" value="2">
<label class="form-radio-label" for="option 2">Option 2</label><br>
<input type="radio" id="other" name="example" value="other">
<label class="form-radio-label" for="other">Other</label><br>
</form>

Filter Checkboxes with Label

Rendered element:

Please select an option:

CSS selector:

.form-check-container

.checkmark

.form-check-container input

.form-check-container:hover input ~ .checkmark

.form-check-container input:checked ~ .checkmark

.checkmark:after

.form-check-container input:checked ~ .checkmark:after

.form-check-container .checkmark:after

Sample code:
<form method="post" action="#">
<h4>Please select an option:</h4>
<label class="form-check-container">0-2 years
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="form-check-container">3-5 years
<input type="checkbox">
<span class="checkmark"></span>
</label> <label class="form-check-container">6-8 years
<input type="checkbox">
<span class="checkmark"></span>
</label> <label class="form-check-container">9-12 years
<input type="checkbox">
<span class="checkmark"></span>
</label> </form>

Drop Down Menu with Label

Rendered element:
CSS selector:

.form-drop-down

Sample code:
<label for="quantity">Choose a size:</label> <select class="form-drop-down" name="quantity" id="quantity">
<option value="1">1l</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Image as a Link

Rendered element:
The day you begin by By Jacqueline Woodson & Rafael Lopez
CSS selector:

.img-link

Sample code:
<a href="https://pixabay.com/photos/puppies-puppy-pup-dog-dachshund-3687656/" target="_blank"> <img class="img-link" src="img/puppies.jpg" alt="Two cute puppies wrestling"> </a>

Text Elements

Headings

Rendered element:

This is a h1 heading

Font-Dosis, Style-normal, weight-bold, size-5rem

This is a h2 heading

Font-Dosis, Style-normal, weight-bold, size-2.5rem

This is an underlined h2 heading

Font-Dosis, Style-normal, weight-300, size-2.2rem/p>

This is a h3 heading

Font-Dosis, Style-normal, weight-300, size-2.2rem

This is a h4 heading

Font-Dosis, Style-normal, weight-500, size-2rem

This is a h5 heading

Font-Open Sans, Style-normal, weight-bold, size-2.2rem

This is a product listing book title

Font-Dosis, Style-normal, weight-600, size-1.5rem

This is a product listing book author

Font-Dosis, Style-normal, weight-500, size-1.3rem

This is a product price listing $25.99

Font-Dosis, Style-normal, weight-600, size-1.5rem

CSS selectors:

h1 //page title

.h2 //bold sub-section

h3 //regular sub-section

h4 //small subtitle

h5 //body paragraph title

element-bottom //underlined title

.txt-center //center text

.product-list-title" //product listing book author

.product-list-author //product listing book author

.product-list-price //product price listing

Sample code:
<h1>This is a h1 heading</h1> <h2>This is a h2 heading</h2> <h2 class="element-bottom">This is a h2 heading</h2> <h3>This is a h3 heading</h3> <h4>This is a h4 heading</h4> <h5>This is a h5 heading</h5> <a class="product-list-title" href="#">This is a product listing book title</a> <a class="product-list-author" href="#">This is a product listing book author</a> <h5 class="product-list-price">This is a product price listing $25.99</h5>

Paragraphs

Rendered element:

This is a paragraph element. It is a long established fact that a reader will be distracted by the readable content of a page when looking. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

CSS selector:

p

flex-container

flex-item-lg

Sample code:
<div class="flex-container">
<p class="flex-item-lg">This is a paragraph element.</p>
</div>

Title & Paragraphs

Rendered element:

About the Book

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS selector:

p

.flex-container-center

.flex-container-product-single-txt

.flex-container

.flex-item-feature-txt

.element

Sample code:
<div class="flex-container">
<p class="flex-item-lg">This is a paragraph element.</p>
</div>

Feature Background White & Drop Shadow

Rendered element:

Welcome to The Book Worm!

CSS selector:

.feature-background-white

Sample code:
<div class="margin-top">
<section class="flex-container-center">
<div class="feature-background-white">
<h4 class="txt-center">Welcome to The Book Worm!</h4>
</div>
</section>
</div>

Feature Background Basic & Drop Shadow

Rendered element:

Welcome to The Book Worm!

CSS selector:

.feature-background

Sample code:
<div class="margin-top">
<section class="flex-container-center">
<div class="feature-background">
<h4 class="txt-center">Welcome to The Book Worm!</h4>
</div>
</section>
</div>

Numbered Lists

Rendered element:
  1. list item a
  2. list item b
  3. list item c
CSS selectors:

ol

.ol-li

Sample code:
<ol>

<li class="ol-li">list item a</li>
<li class="ol-li">list item b</li>
<li class="ol-li">list item c</li>

</ol>

Unordered Lists

Rendered element:
CSS selectors:

.txt-ul

.txt-ul-li

Sample code:
<ul>

<li class="ul-li">list item</li>
<li class="ul-li">list item</li>
<li class="ul-li">list item</li>

</ul>

Combined Elements

Main Navigation

Rendered element:
CSS selector:

.topnav

.topnav-home

.topnav-cart

.topnav-body

#myTopnav

Aside Filter Menu

Rendered element:
CSS selector:

.aside-filter

.flex-item-lg

.aside-form

.form-check-container

.checkmark

Product/Service Listing

Rendered element:
The lightning thief The Lightning Thief By Rick Riordan
Four and a half starts out of 5
$25.99
Add to Cartshopping cart icon
CSS selector:

.product-list-title

.product-list-author

.product-list-rating

.product-list-review

.product-list-price

.btn-add-cart

.cart-icon

.flex-item-product

.flex-container-product

.product-img-link

.flex-item-md

Payment Form

Rendered element:

Billing Address

Payment





Total

Items (3): $50.62
Taxes: $5.63
Delivery: FREE
Total: FREE
Place Order Now
CSS selector:

.flex-container-payment

.flex-item-payment-75

.payment-form-background

.flex-item-payment-50

.btn-submit

.flex-item-payment-25

.element-bottom

.element

.price

.btn-basic

#place-now

Checkout Cart

Rendered element:

Your Cart:

The day you begin by By Jacqueline Woodson
$25.99
Delete
the lightning theif by Rick Riordian
$15.99
Delete

Order Summary:

Items (3): $50.62
Taxes: $5.63
Delivery: FREE
Total: FREE
Checkout
CSS selector:

.flex-container

.flex-item-sm

.checkout-img-link

.flex-item-lg

.product-list-title

.product-list-author

.form-drop-down

.btn-submit

.btn-add-cart

.flex-container-payment

.flex-item-payment-75

.payment-form-background

.flex-item-payment-50

.flex-item-payment-25

.element-bottom

.element

.price

.btn-basic

Order Summary

Rendered element:

Order Summary

The day you begin by By Jacqueline Woodson & Rafael Lopez
The Day You Begin By Jacqueline Woodson
$25.99
Delete
The day you begin by By Jacqueline Woodson & Rafael Lopez
The Day You Begin By Jacqueline Woodson
$25.99
Delete

Sub-total: $55.90

CSS selector:

.flex-container-order-sum

.payment-form-background

.flex-container

.flex-item-nav

.flex-item-cart

.btn-submit

.checkout-img-link

.form-drop-down

.product-section

.h4-no-margin

Featured Book

Rendered element:
The day you begin by By Jacqueline Woodson & Rafael Lopez

Feature Book of the Month

The Day You Begin By Jacqueline Woodson

National Book Award winner Jacqueline Woodson and two-time Pura Belpré Illustrator Award winner Rafael López have teamed up to create a poignant, yet heartening book about finding courage to connect, even when you feel scared and alone.

Learn More
CSS selector:

.background-img

.margin-top

.flex-container-feature

.feature-background-white

.flex-item-feature-img

.feature-img-link

.flex-item-feature-txt

.product-list-title

.product-list-author

.btn-basic

Footer

Rendered element:
CSS selector:

.footer-basic

.footer-list-inline

.footer-list-inline-item

Single Book Page Listing Component

Rendered element:
The day you begin by By Jacqueline Woodson & Rafael Lopez

The Day You Begin

By Jacqueline Woodson

Aug 20, 2018 |

Four and a half starts out of 5

Format Options

Hard Cover Paperback

$25.99

Add to Cartshopping cart icon
CSS selector:

.flex-container-product-single

.flex-container-feature-product-single

.flex-item-product-single

.feature-img-no-link

.no-margin

.flex-container

.btn-reset

.cart-icon

Contact Component

Rendered element:

Send us a message...

Have a book you want requested? Trouble signing up for an event? Idea you think we would like? Let us know! Please fill out the form below and we will get back to you shortly.

CSS selector:

.flex-container-center

.feature-background-white

.txt-center

.flex-container-payment

.flex-item-payment-50

.flex-item-lg

.btn-reset

.btn-reset

Title Component

Rendered element:

Welcome to
The Book Worm!

We are an inclusive local kids book store aiming to get children engaged and excited about reading. We are champions of learning and creativity.

Shop Books See Events
CSS selector:

.margin-top

.background-img

.flex-container-center

.eature-background-white"

.txt-center

.btn-basic

Calendar

Rendered element:
CSS selector:

.elfsight-app-457da460-c3ce-4342-b268-b4f0dc49b19f

Event Component

Rendered element:
Mother daughter reading week image

Mother Daughter Reading Week

March 10th - 17th

Bond with your daughter in our mother daughter reading week event. Read the books from our curated list or choose your own. Each book you and your daughter read together will enter you to win one of our draw prizes at the end of the week, the more books you read the more enteries you get! Our draw prizes will include; a 50$ gift card to The Book Worm, One free book of your choice, and a calligraphy set

Learn More
CSS selector:

.flex-container-center

.flex-container-event

.feature-background-event

.feature-background-white"

.event-img

.flex-item-md

.btn-basic

Flexbox Example 1: Product Listing

Rendered element:
the Land of Stories The Land of Stories By Chris Colfer
Four and a half starts out of 5
$25.99
Add to Cartshopping cart icon
charlie and the chocolate factory Charlie and the Chocolate Factory By Rol Dahl
Four and a half starts out of 5
$25.99
Add to Cartshopping cart icon
the miraculous journey of edward tulane The Miraculous Journey of Edward Tulane By Kate Dicamilo
Four and a half starts out of 5
$25.99
Add to Cartshopping cart icon
The lightning thief The Lightning Thief By Rick Riordian
Four and a half starts out of 5
$25.99
Add to Cartshopping cart icon
CSS selector:

.product-list-title

.product-list-author

.product-list-rating

.product-list-review

.product-list-price

.btn-add-cart

.cart-icon

.flex-item-product

.flex-container-product

.product-img-link

.flex-item-md

Flexbox Example 2: Cart

Rendered element:

Your Cart:

The day you begin by By Jacqueline Woodson
$25.99
Delete
the lightning theif by Rick Riordian
$15.99
Delete

Order Summary:

Items (3): $50.62
Taxes: $5.63
Delivery: FREE
Total: FREE
Checkout
Back to top
CSS selector:

.flex-container

.flex-item-sm

.checkout-img-link

.flex-item-lg

.product-list-title

.product-list-author

.form-drop-down

.btn-submit

.btn-add-cart

.flex-container-payment

.flex-item-payment-75

.payment-form-background

.flex-item-payment-50

.flex-item-payment-25

.element-bottom

.element

.price

.btn-basic