A D20 dice that is gold on a transparent background

Deluxe Dice

Branding

About

DeluxeDice sells dice and dice accessories for table top role-playing games like Dungeons & Dragons. Our target audience is anyone who plays table top RPG games.

Colour Palette

A D8 dice that is purple on a whtie background

Purple | #CCB2D5
Used as an accent color.

A D4 dice that is lilac on a whtie background

Lilac | #86538C
Used as a main titles color.

A D10 dice that is yellow on a whtie background

Yellow | #F8E392
Used as a main titles color.

A D6 dice that is orange on a whtie background

Orange | #FEB664
Used as a secondary title color.

A D20 dice that is grey on a whtie background

Grey | #7F7F7F
Used as a body copy color.

Fonts

Header - Yeseva One

Header - Yeseva One

Header - Yeseva One

Montserrat is the font used for body copy.

Potential Logos

A D20 dice that is pink on a whtie background A D20 dice that is purple on a white background A D20 dice that is orange on a white background A D20 dice that is yellow on a white background

Interactive Elements

In-text link

CSS selector:

.in-text-link

Sample code:

<p> This is an <a class="in-text-link" href="#">in-text link</a> example </p>

Rendered element:

This is an in-text link example.

Navigation Button

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Nav 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:

.input-label, .labelled-input

Sample code:

<label class="input-label" for="form-name">Name:</label> <input class="labelled-input" type="text" id="form-name" placeholder="Jane Doe">

Rendered element:

Radio Button with Label

CSS selector:

.labelled-radio, .radio-label

Sample code:

<class="labelled-radio" input type="radio" id="option1" name="example" value="yes" checked> <label for="option1">Yes</label> <class="labelled-radio" input type="radio" id="option2" name="example" value="no"> <label for="option2">No</label> <class="labelled-radio" input type="radio" id="option3" name="example" value="maybe"> <label for="option3">Maybe</label>

Rendered element:

Select an option:




Image as a Link

CSS selector:

.img-link

Sample code:

<a class="img-link" href="https://www.wizards.com/d20modern/d20mdice/dice.htm"> <img src="img/dice.jpg" title="DND Dice" alt="DND dice that are light green and semi-transparent"></a>

Rendered element:

DND dice that are mint green and shiny

Text Elements

Headings

CSS selector:

.heading

Sample code:

<h2 class="heading">Heading 2</h2> <h3 class="heading">Heading 3</h3> <h4 class="heading">Heading 4</h4> <h5 class="heading">Heading 5</h5>

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS selector:

p

Sample code:

<p>Lorem ipsum...</p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer est libero, tincidunt non cursus eget, imperdiet sit amet ante. Aliquam et sodales magna. Nam ac vehicula arcu, maximus gravida ex. Mauris aliquet eget risus a molestie. Suspendisse posuere vehicula velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare justo lectus, ac tincidunt metus porttitor vel.

Numbered Lists

CSS selector:

ol, li

Sample code:

<ol> <li>Item one</p> <li>Item two</p> <li>Item three</p> </ol>

Rendered element:

  1. Item one
  2. Item two
  3. Item three

Combined Elements

Main Navigation

CSS selector:

.navigation .navigation-item

Sample code:

<ul class="navigation"> <li><a class="navigation-item" href="#">Home</a></li> <li><a class="navigation-item" href="#">About</a></li> <li><a class="navigation-item" href="#">Contact</a></li> </ul>

Rendered element:

Product Listing

CSS selector:

.product

Sample code:

<figure class="product"> <a href="#"> <img class="img-link product-img" src="img/dice.jpg" title="DND Dice" alt="DND dice that are light green and semi-transparent"></a> <figcaption class="product-info">Green Dice - $15</figcaption> </figure>

Rendered element:

DND dice that are mint green and shiny
Green Dice - $15

Payment Form

CSS selector:

.checkout

Sample code:

<section class="checkout"> <label class="input-label" for="first-name">First Name:</label> <input class="labelled-input" type="text" id="first-name" placeholder="Jane"> <label class="input-label" for="last-name">Last Name:</label> <input class="labelled-input" type="text" id="last-name" placeholder="Doe"> <label class="input-label">Country:</label> <select name="country"> <option value="Canada">Canada</option> <option value="USA">USA</option> <option value="Mexico">Mexico</option> </select> <label class="input-label" for="payment">Address:</label> <input class="labelled-input" type="text" id="form-name" placeholder="123 Exam[le St"> <p>Please select a shipping option:</p> <input class="labelled-radio" type="radio" id="standard" name="example" value="stand" checked> <label class="radio-label" for="standard">Standard</label> <input class="labelled-radio" type="radio" id="express" name="example" value="exp"> <label class="radio-label" for="express">Express</label> <a class="button-submit" href="#">Submit</a> </section>

Rendered element:







Please select a shipping option:




Submit

Checkout Cart

CSS selector:

.cart

Sample code:

<section class="cart"> <table> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> <tr> <td><figure><img src="img/mermaid.jpg" title="DND Dice" alt="DND dice that are purple, blue and green and semi-transparent."><figcaption class="product-info">Mermaid's Delight Dice - $15</figcaption></figure> </td> <td>1</td> <td>$15.00</td> </tr> <tr> <td><figure><img src="img/pink-blue.jpg" title="DND Dice" alt="DND dice that are pink and blue."><figcaption class="product-info">Pixie Dust Dice - $12</figcaption></figure> </td> <td>2</td> <td>$24.00</td> </tr> <tr> <td><figure><img src="img/purple.jpg" title="DND Dice" alt="DND dice that are purple."><figcaption class="product-info">Mage Fire Dice - $12</figcaption></figure> </td> <td>1</td> <td>$32.00</td> </tr> <tr> <td><figure><img src="img/gold.jpg" title="DND Dice" alt="DND dice that are gold."><figcaption class="product-info">Dragon's Treasure Dice - $20</figcaption></figure> </td> <td>1</td> <td>$20.00</td> </tr> <tr> <td></td> <td></td> <td>Total: $71.00</td> </tr> </table> </section>

Rendered element:

Product Quantity Price
DND dice that are purple, blue and green and semi-transparent.
Mermaid's Delight Dice - $15
 1 $15.00
DND dice that are pink and blue
Spearmint Dice - $12
 2 $24.00
DND dice that are purple
Vaporwave Dice - $12
 1 $12.00
DND dice that are gold
Sweet Tooth Dice - $20
 1 $20.00
Total: $71.00