Styleguide

Basic Interactive Elements Text Styling Modular Pattern Elements Citations Sitemap & Wireframes

Basic Interactive Elements

In-Text Link

This is some body text. Within the body text, there is an in-text link you can click.

Sample Code

<a href="link here"> link </a>

Call to Action Button

This is our call to action body, a bolded boxed button in bright green.

SEND

Sample Code

<a href="#" class="button">SEND</a>

Submit and Reset Button for Forms

This is our submit and reset button for forms, we used a bright green bolded boxed button for submit and a neutral grey button for reset.


SUBMIT RESET

Sample Code

<a href="#" class="button">SUBMIT</a> <a href="#" class="button2">RESET</a>

Text Input Field and a Label

This is our text input field for the contact page.


Your name

Sample Code

<form class="form"> <h3>Your name </h3> <input type="email" class="form" placeholder="" /> <button type="button" class="btn">SUBSCRIBE</button>

Colour swatches

darkgreen

Muted Forest Green
Main brand colour

hex:#738A7D, rgb:(115,138,125)
green

Bright Green
Call to action

hex:#6EB78E, rgb:(110,183,142)
darkgrey

Neutral Grey
For text and supporting elements

hex:#E2E2E2, rgb:(226,226,226)
lightgrey

Light Grey
Background for section modules

hex:#F2F2F2, rgb:(242,242,242)
black

Dark Neutral
Dark backgrounds for lighter elements to pop out against

hex:#2C2C2C, rgb:(44,44,44)

Text Styling

Headers

This is H1.

This is H2.

This is H3.

Sample Code

<h1>This is H1</h1>

<h2>This is H2</h2>

<h3>This is H3</h3>

Modular Patterns

Main Navigation Module

Sample Code

<div class="nav_module" id="myTopnav"> <a href="#" class="active">shop</a> <a href="#">on sale</a> <a href="#">blog</a> <a href="#">stories</a> <div class="right_float"> <a href="#">user</a> <a href="#">cart <strong>(3)</strong></a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> <a class="title">ensemble</a> </div>

UI of Single Product

Elm Management Chair

$410

Comfortable

Adjustable

Ergonomic

Inferior chairs use burlap fabric where the cotton flattens when you sit on it. Elm’s frame is made from matte _(not steel). Using BIFMA-rated Class 4 lifts that are the most durable in the industry, ensuring a lifetime of trouble-free raising and lowering. The aluminum base is the strongest base on the market — supporting over 400 lbs with a beautiful chrome-plated finish.

ADD TO CART


80 REVIEWS (4.5/5)

Great Value

5.0

I never write reviews for anything, but I am so impressed by the quality of this chair that I had to. Sitting in this chair I would have thought it cost at least twice what it actually does. The seat material feels very high quality as well. It looks fantastic and is also comfortable. Overall, the chair feels like it was made the right way without cutting corners. Assembly was simple and shipping was fast.

Best chair I’ve own

5.0

Best office chair I've ever owned...no joke. Put rollerblade wheels on and wow. Sweet.

Sample Code

<div class="product_module"> <div class="product_img"> <img src="img/theperfectchair.png"> </div> <div class="desc"> <h2>the perfect chair</h2> <h3><strong>$193</strong></h3> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <a href="#" class="button3">ADD TO CART</a> </br> <div class="sample_img"> <img src="img/sampleimg1.png"> <img src="img/sampleimg2.png"> <img src="img/sampleimg3.png"> </div> </div> </div>

Contact Information Module

Contact Information

700 Royal Avenue New Westminster, BC, V3M1A6

(604) 123-4567

info@ensemble.com

Grid Structure 1

— Category Page Products Grids 4 columns, 3 elements per row on desktop

1 - 2 columns, 1 - 2 elements per row

Bohemian Throne
$198
Cascadia Desk Chair
$230
80s Lounger
$210
The Perfect Chair
$210
Fiona Desk Chair
$350
Anthropics Superseat
$210
Anthropics Superseat
$210
Anthropics Superseat
$210
Anthropics Superseat
$210

Grid Structure 2

— Browse More Template 4 columns, 4 elements per row on desktop

2 columns, 1 - 2 elements per row

The Cloud Chair
$398
The Organized Desk
$390
Ultimate Wallshelf
$210
Candle Desk Lamp
$98

Grid Structure 3

— Sets Template 2 columns, 2 elements per row on desktop

1 column, 1 elements per row

the boho set

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VIEW

the boho set

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VIEW

Grid Structure 4

— Testimonial Template 3 columns, 3 elements per row on desktop

1-2 column, 1-2 elements per row

Rachel

16 purchases

Samantha

12 purchases

Jason

27 purchases

Checkout Module

Checkout

First name

Last name

ADDRESS

CITY

PROVINCE

PHONE NUMBER

EMAIL

Payment

card number

MM/YY

CVC

Shipment

Cart Preview in Checkout

Order Summary

Elm Management Chair ($410)

The Vogue Chair ($299)

Subtotal

$709

Tax

$70

Shipping

FREE

Total

$779

PURCHASE

Sample Code

&lt;div class="checkout-container-div"&gt; &lt;div class="order-summary-container"&gt; &lt;div class="order-summary"&gt; &lt;div class="order-summary-listing"&gt; &lt;h1&gt;Order Summary&lt;/h1&gt; &lt;div class="list-wrapper"&gt;&lt;img src="img/cart-checkout-1.png" class="order-summary-image"&gt; &lt;/div&gt; &lt;div class="list-wrapper order-listing-desc"&gt; &lt;h4&gt;Elm Management Chair &lt;strong&gt;($410)&lt;/strong&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="order-summary-listing"&gt; &lt;div class="list-wrapper"&gt;&lt;img src="img/cart-checkout-2.png" class="order-summary-image"&gt; &lt;/div&gt; &lt;div class="list-wrapper order-listing-desc"&gt; &lt;h4&gt;The Vogue Chair &lt;strong&gt;($299)&lt;/strong&gt; &lt;/div&gt; &lt;/div&gt;

Shopping Cart



Elm Management Chair
$410
The Vogue Chair
$299

Order Summary

Subtotal

$709

Tax

$70

Shipping

FREE

Total

$779

CHECKOUT
View Figma Prototype