FR

Welcome to HEXO! We can’t wait to share everything with you...but first, let’s get to know each other better.

From what we can tell, you're located in ${ selected_province.name }?

I live in:

  • ${province.name}

We're sorry, we are unable to serve customers in Quebec at this time.

Great, thank you.

Are you ${ age } or older?

Thank you!

Go ahead and look around. The world of HEXO is just a click away!

Learn about cannabis

What is Cannabis?

Cannabis is the term commonly used for the plant or flower of the Cannabaceae family. It’s been consumed by humans for longer than we’ve written stuff down.

Sativa and Indica

There are two main types of cannabis for human use: Sativa and Indica. Each has a different shape, size, leaf and effect. Crossed with each other, they make hybrids. Indica is generally considered to provide a calming and relaxing effect. Sativa can have more energizing, uplifting and cerebral effects.

Hybrids

And those hybrids? Somewhere between the two, with a dominant effect from one of the two parent plants.

THC and CBD

The active compounds in cannabis are cannabinoids. Cannabis has more than 100 of them, of which THC and CBD are the most common.

Odour

Ever noticed the distinct smell of cannabis? You can thank terpenes for that. They’re volatile aromatic compounds in the essential oil of plants, including cannabis.

Trichomes

Terpenes and cannabinoids like THC and CBD are both contained in trichomes, tiny and sticky hairs on the cannabis flower.

Finished!

Want to learn more? Start browsing.
Your Bag (0)

Order Summary

Grams Total 0 of 30g max
Subtotal $0.00
Shipping $14.00
Taxes $26.43
Total $444.43

Design Guide

Table of Contents

  1. Brand
  2. Typography
    1. Body Text
    2. Colours
    3. Headings
  3. Colour Palette
  4. Forms
    1. Form Controls
    2. Validation States
  5. Buttons
  6. Components
  7. Spacing
  8. Iconography
  9. Imagery
  10. Dos and Don'ts

1. Brand

2. Typography

2.1 Body Text

Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.

<p>Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.</p>

2.2 Colours

2.3 Headings

h1. Heading 1

<h1>h1. Heading 1</h1>

h2. Heading 2

<h2>h2. Heading 2</h2>

h3. Heading 3

<h3>h3. Heading 3</h3>

h4. Heading 4

<h4>h4. Heading 4</h4>
h5. Heading 5
<h5>h5. Heading 5</h5>
h6. Heading 6
<h6>h6. Heading 6</h6>

3. Colour Palette

4. Forms

4.1 Form Controls

Custom Dropdown

Custom Dropdown Alt Color

		
<form>
	<div>
		<label for="example-text-input">Text Input</label>
		<input id="example-text-input" type="text" placeholder="Text Here"/>
	</div>
	<div>
		<label for="example-email-input">Email Input</label>
		<input id="example-email-input" type="email" placeholder="Email Here">
	</div>
	<div>
		<label for="example-password-input">Password Input</label>
		<input id="example-password-input" type="password" placeholder="Password Here">
	</div>
	<div>
		<label for="example-number-input">Number Input</label>
		<div class="quantity-stepper">
			<button type="button" class="quantity-stepper__minus">-</button>
			<input id="example-number-input" type="number" value="1">
			<button type="button" class="quantity-stepper__plus">+</button>
		</div>
	</div>
	<div>
		<label for="example-form-control-select">Select</label>
		<div class="select-wrapper">
			<select id="example-form-control-select">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<button type="button">+</button>
		</div>
	</div>
	<div>
		<p>Custom Dropdown</p>
		<div class="select-wrapper">
			<input id="my-select-1" type="checkbox" />
			<label for="my-select-1"><span>Select an option</span><button type="button">+</button></label>
			<ul>
				<li><label for="my-select-1">1</label></li>
				<li><label for="my-select-1">2</label></li>
				<li><label for="my-select-1">3</label></li>
				<li><label for="my-select-1">4</label></li>
				<li><label for="my-select-1">5</label></li>
			</ul>
		</div>
	</div>
	<div>
		<p>Custom Dropdown Alt Color</p>
		<div class="select-wrapper alt">
			<input id="my-select-2" type="checkbox" />
			<label for="my-select-2"><span>Select an option</span><button type="button">+</button></label>
			<ul>
				<li><label for="my-select-2">1</label></li>
				<li><label for="my-select-2">2</label></li>
				<li><label for="my-select-2">3</label></li>
				<li><label for="my-select-2">4</label></li>
				<li><label for="my-select-2">5</label></li>
			</ul>
		</div>
	</div>
	<div>
		<label for="example-form-control-textarea1">Example textarea</label>
		<textarea id="example-form-control-textarea1" rows="3"></textarea>
	</div>
	<div>
		<label>
			<input type="checkbox" value="">
			Check this out! Example checkbox
		</label>
	</div>
	<div>
		<label>
			<input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
			Example Radio Button 1
		</label>
		<label>
			<input type="radio" name="exampleRadios" id="example-radios2" value="option2">
			Example Radio Button 2
		</label>
	</div>
</form>
		
	

4.2 Validation States

5. Buttons

Link
		
<div>
	<a href="#" role="button">Link</a>
	<button class="btn btn--large" type="submit">Button</button>
	<input  class="btn btn--medium" type="button" value="Input">
	<input  class="btn btn--small" type="submit" value="Submit">
	<input  class="btn btn--micro" type="reset" value="Reset">
</div>
		
	
Link
		
<div>
	<a href="#" role="button">Link</a>
	<button class="btn--accent btn--large" type="submit">Button</button>
	<input  class="btn--accent btn--medium" type="button" value="Input">
	<input  class="btn--accent btn--small" type="submit" value="Submit">
	<input  class="btn--accent btn--micro" type="reset" value="Reset">
</div>
		
	
Link
		
<div>
	<a href="#" role="button">Link</a>
	<button class="btn btn--outline btn--micro" type="reset" value="Reset">
</div>
		
	
Link
		
<div>
	<a href="#" role="button">Link</a>
	<button class="btn--accent btn--outline btn--large" type="submit">Button</button>
	<input  class="btn--accent btn--outline btn--medium" type="button" value="Input">
	<input  class="btn--accent btn--outline btn--small" type="submit" value="Submit">
	<input  class="btn--accent btn--outline btn--micro" type="reset" value="Reset">
</div>
		
	
Link
		
<div>
	<a href="#" role="button">Link</a>
	<button class="btn--accent btn--outline btn--large disabled" type="submit">Disabled</button>
	<input  class="btn--accent btn--outline btn--medium" disabled type="button" value="Disabled">
	<input  class="btn--accent btn--outline btn--small" disabled type="submit" value="Disabled">
	<input  class="btn--accent btn--outline btn--micro" disabled type="reset" value="Disabled">
</div>
		
	

6. Components

7. Spacing

8. Iconography

9. Imagery

10. Dos and Don'ts