Brand
Logos
Colours
Typefaces
Typography
The modular typography uses a system generated by Typografier. There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm.
Size adjustments
Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.
Vertical spacing
The vertical spacing classes generated by Typografier provide a range of different sizes for both top & bottom padding and bottom margins. These same sizes would be applied to the island classes.
Horizontal spacing
The horizontal spacing classes generated by Typografier provide range of different sizes for left & right padding. These same sizes would be applied to the island classes.
Font sizes
There are multiple font-sizes available based on a typographic scale. The font-sizes and line-heights increase as the screen gets wider to better use the available space.
Utility classes
Modules
Modulifier generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns.
Images & embed containers
Embed containers should be used for all content images, enforcing aspect ratios but also giving browsers a placeholder for the graphic before it loads to prevent unnecessary text reflows.
<div class="embed embed-4by3">
<img class="embed-item" src="/images/4by3.jpg" alt="">
</div>
Media objects
A simple pattern that provides and image beside some text—good for comments with avatars and many other situations. Will usually be combined into larger patterns.
<div class="media">
<div class="media-img">
<img src="/images/square.jpg" alt="">
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
Skip links
A helpful accessibility feature that should be included immediately within the <body>
tag on the top of most pages.
<ul class="skip-links">
<li><a href="#main">Jump to main content</a></li>
<li><a href="#nav">Jump to main navigation</a></li>
<li><a href="#pause">Pause all animations</a></li>
</ul>
Icons
The sprite sheet contains the following icons for use in the website. Combine the icons with Modulifier & Typografier classes for lots of variability.
Icons
Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.
<a class="icon-link exa" href="#">
<i class="icon i-1">
<svg><use xlink:href="/images/icons.svg#icon-id"></use></svg>
</i>
<span class="icon-label">Icon label</span>
</a>
Icon classes
Classes that can be used on elements & combined to make nicely aligned icons and labels.
Grid
The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint.
Grid sizes
Utility classes
Mix & match classes for grids and units to make any responsive layout necessary for templates.
Layouts
Below is a reference of all the layouts available for pages within the website.
Navigation
The navigation is to be used throughout the website in order to help users navigate. The design follows with simplicity and a dark blue colour scheme that allows for easy use and accessibility.
Navigation can be combined in grids and units, along with links and colours.
The Top Footer navigation is to be used in the footer at every page.
{% pattern navigation/top-footer %}
The Bottom Footer navigation is to be used in the footer at every page.
{% pattern navigation/bottom-footer %}
The Breadcrumbs are to be used in a page with multiple sections to further into, in order to guide the users through the website. This style will be present on the checkout page.
{% pattern navigation/breadcrumbs %}
The Return will be used in the products detail page in order to allow the user to return to the main page, along with in the checkout page and wherever the return need be.
{% pattern navigation/return %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
button_text
|
string
|
"RETURN TO CART" | |||||||||||||||||||||
button_aria
|
string
|
"Return to cart button" | |||||||||||||||||||||
button_url
|
url
|
/products/ |
The header is created with a simple design that is meant to match the style of the business through simplicity and colour.
The Header can be combined with buttons, icons, and banners and is to be used on every page.
{% pattern header/header %}
Sections
The sections are formed to be used throughout the website wherever a section style is needed.
Sections can be combined with cards, buttons, icons, grids and colours.
The Slideshow Image Section is to be used on the homepage and other areas that require the showcasing of products. This can be combined with cards and icons.
{% pattern sections/slideshow heading="OUR CRYSTAL COLLECTION" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"OUR CRYSTAL COLLECTION" |
The Text Section is to be used on the homepage and other areas in the website that require a stylised section with text.
{% pattern sections/text-section heading="OUR STORY" text="ATHENA X NOVA was started in 2019 by the founder, Nila Babaei. The goal of the company is to provide products and information for spirituality and mindfulness. Crystals are beautiful rock formations that have amazed humans for thousands of years. They are used for many different things, not just for decoration. Many of the first radios ever invented used crystals to transmit the radio waves. Some watches, like quartz watches, still use crystals to this day. They have always been viewed as something of beauty and are still often placed with diamonds or other stones inside pieces of jewelry. Crystals are nothing more than an established batch of molecules or atoms. Crystals come in many different shapes and sizes, and each one has different characteristics. What they are made of determines how it will form. Crystals harness the life giving elements of the Earth and the universe. Harnessing the energy of the Sun, the Moon, and the oceans, semi-precious stones connect us to Earth as soon as we come into contact with them. Many people wonder if crystals have healing powers, and while there are many anecdotes describing the curative effects of healing stones, it really depends on your own experience. It takes a conscious effort to open your heart and mind to the power of crystal healing, butonce you begin, the journey is studded with beautiful, mysterious, and unique crystals that will rock your world." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"OUR STORY" | |||||||||||||||||||||
text
required
|
string
|
"ATHENA X NOVA was started in 2019 by the founder, Nila Babaei. The goal of the company is to provide products and information for spirituality and mindfulness. Crystals are beautiful rock formations that have amazed humans for thousands of years. They are used for many different things, not just for decoration. Many of the first radios ever invented used crystals to transmit the radio waves. Some watches, like quartz watches, still use crystals to this day. They have always been viewed as something of beauty and are still often placed with diamonds or other stones inside pieces of jewelry. Crystals are nothing more than an established batch of molecules or atoms. Crystals come in many different shapes and sizes, and each one has different characteristics. What they are made of determines how it will form. Crystals harness the life giving elements of the Earth and the universe. Harnessing the energy of the Sun, the Moon, and the oceans, semi-precious stones connect us to Earth as soon as we come into contact with them. Many people wonder if crystals have healing powers, and while there are many anecdotes describing the curative effects of healing stones, it really depends on your own experience. It takes a conscious effort to open your heart and mind to the power of crystal healing, butonce you begin, the journey is studded with beautiful, mysterious, and unique crystals that will rock your world." |
The Newsletter Section is to be used on the homepage in order to promote users to interact with the business and recieve updates.
{% pattern sections/newsletter-section %}
The Crystal Info is to be used on the product detail page in order to showcase the products information. This can be combined with different text content and colours to relate to any crystal.
{% pattern sections/crystal-info header="GARNET" text-main="The Garnet crystal meaning is rooted in ancient history and comes from the Latin word ‘granatum’, which means pomegranate, a reference to its intense red color that resembles the glistening, deep red seeds of the fruit. The Garnet crystal was also cherished by early medieval jewelers who incorporated the stone into everything from rings and brooches to buckles and necklaces. Even then, it was more than just a fashion statement but was thought of as a protective talisman against negative energy." firsticon="PASSION" secondicon="MANIFESTATION" thirdicon="CREATIVITY" firstpic="passion" secondpic="manifestation" thirdpic="creativity" text="What’s really beneath the surface?" properties-i="- Flow of Chi" properties-ii="- Detox" properties-iii="- Love-attracting" properties-iv="- Healing" properties-v="- Enlightenment" properties-vi="- Abundance" properties-vii="- Vitality" chakra="Heart" shape="Tumbled" properties-vii="7" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
header
required
|
string
|
"GARNET" | |||||||||||||||||||||
color
required
|
class
|
rd-gem
orange-gem
yellow-gem
green-gem
blue-gem
purple-gem
|
|||||||||||||||||||||
colorii
required
|
class
|
rd-gem-ii
orange-gem-ii
yellow-gem-ii
green-gem-ii
blue-gem-ii
purple-gem-ii
|
|||||||||||||||||||||
text-main
required
|
string
|
"The Garnet crystal meaning is rooted in ancient history and comes from the Latin word ‘granatum’, which means pomegranate, a reference to its intense red color that resembles the glistening, deep red seeds of the fruit. The Garnet crystal was also cherished by early medieval jewelers who incorporated the stone into everything from rings and brooches to buckles and necklaces. Even then, it was more than just a fashion statement but was thought of as a protective talisman against negative energy." | |||||||||||||||||||||
firsticon
required
|
string
|
"PASSION" | |||||||||||||||||||||
secondicon
required
|
string
|
"MANIFESTATION" | |||||||||||||||||||||
thirdicon
required
|
string
|
"CREATIVITY" | |||||||||||||||||||||
firstpic
required
|
string
|
"passion" | |||||||||||||||||||||
secondpic
required
|
string
|
"manifestation" | |||||||||||||||||||||
thirdpic
required
|
string
|
"creativity" | |||||||||||||||||||||
text
required
|
string
|
"What’s really beneath the surface?" | |||||||||||||||||||||
properties-i
required
|
string
|
"- Flow of Chi" | |||||||||||||||||||||
properties-ii
required
|
string
|
"- Detox" | |||||||||||||||||||||
properties-iii
required
|
string
|
"- Love-attracting" | |||||||||||||||||||||
properties-iv
required
|
string
|
"- Healing" | |||||||||||||||||||||
properties-v
required
|
string
|
"- Enlightenment" | |||||||||||||||||||||
properties-vi
required
|
string
|
"- Abundance" | |||||||||||||||||||||
properties-vii
required
|
string
|
"- Vitality" | |||||||||||||||||||||
chakra
required
|
string
|
"Heart" | |||||||||||||||||||||
shape
required
|
string
|
"Tumbled" | |||||||||||||||||||||
properties-vii
required
|
hardness
|
7 |
The Products Showcasing is to be used on the product details page in order to promote other similar products. This can be combined with cards and buttons.
{% pattern sections/products-showcasing %}
The Crystal Items Section is to be used on the product list page to explain what the items are. It is to be placed above the cards, below the header. It can also be used as a header for any page in the website (eg. Blog, About Us).
{% pattern sections/crystal-start %}
The footer is created with a simple design that can be responsive with different sizes.
The Footer can be combined with buttons and grids and is to be used on every page.
{% pattern footer/footer %}
Cards
The cards follow a simple and minimalist theme to work together in a gridular form.
Cards can be combined with buttons and images.
The Image Card is to be used on the homepage for showcasing the products and any other section of the website that contains product showcasing.
{% pattern cards/image-card image="amethyst.jpg" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
image
required
|
string
|
"amethyst.jpg" |
The Crystal Type Card is to be used on the products list page to organize and show all the available products.
{% pattern cards/crystal-type-card data=Product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
Product
|
The Crystal Info Card is to be used on the products information page to allow user to directly purchase the product.
{% pattern cards/crystal-info-card image="amethyst.jpg" price="$20.00" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
image
required
|
string
|
"amethyst.jpg" | |||||||||||||||||||||
price
required
|
string
|
"$20.00" | |||||||||||||||||||||
button_text
|
string
|
"ADD TO CART" | |||||||||||||||||||||
button_aria
|
string
|
"Add to cart button" | |||||||||||||||||||||
button_col
|
class
|
btn-light
btn-orange
btn-yellow
btn-green
btn-blue
btn-purple
|
The Recommendations Card is to be used on the products information page to show users other options similar to the ones they added to their cart.
{% pattern cards/recommendations-card image="amethyst.jpg" header="Amethyst" price="$20.00" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
image
required
|
string
|
"amethyst.jpg" | |||||||||||||||||||||
header
required
|
string
|
"Amethyst" | |||||||||||||||||||||
price
required
|
string
|
"$20.00" |
The Checkout Card is to be used for the checkout page in order to have a collected place with all the information for the prices and totals.
{% pattern cards/check-out-card price="$20.00" pricetotal="$21.50" text="x1 Amethyst" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
price
required
|
string
|
"$20.00" | |||||||||||||||||||||
pricetotal
required
|
string
|
"$21.50" | |||||||||||||||||||||
text
required
|
string
|
"x1 Amethyst" |
Buttons
The buttons use a simple design in order to unite with the website’s minimalist theme.
Buttons can be combined with font-size classes to make different sized buttons.
The Navigation button is to used solely in the navigation.
{% pattern buttons/navigation text="HOME" url="/index/" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"HOME" | |||||||||||||||||||||
url
required
|
url
|
/index/ |
The Footer button is to be used solely in the footer and can be combined with different text weights.
{% pattern buttons/footer text="Terms & Conditions" aria="Terms & Conditions button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Terms & Conditions" | |||||||||||||||||||||
aria
required
|
string
|
"Terms & Conditions button" | |||||||||||||||||||||
url
required
|
url
|
# |
The Solid Dark Blue button is the standard website’s button style. It is used in the homepage and the checkout page, but can be present in other areas of the website.
{% pattern buttons/solid-dark-blue text="SIGN UP" aria="Sign up button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"SIGN UP" | |||||||||||||||||||||
aria
required
|
string
|
"Sign up button" | |||||||||||||||||||||
url
required
|
url
|
# |
The Transparent Dark Blue button is to be used on the homepage along with any banners on the website. This is to be combined with the header on the homepage to form the banner.
{% pattern buttons/transparent-dark-blue text="READ OUR BLOG" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"READ OUR BLOG" | |||||||||||||||||||||
url
required
|
url
|
# |
The Light button is to be used in the product detail page for accenting the related crystals colour and can be combined with different colours to match the crystal.
{% pattern buttons/light text="ADD TO CART" aria="Add to cart button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"ADD TO CART" | |||||||||||||||||||||
aria
required
|
string
|
"Add to cart button" | |||||||||||||||||||||
col
required
|
class
|
btn-light
btn-orange
btn-yellow
btn-green
btn-blue
btn-purple
|
|||||||||||||||||||||
url
required
|
url
|
# |
The Ghost button is to be used for smaller details, included on most pages. It can be minimized with a different font-size.
{% pattern buttons/ghost text="RETURN TO CART" aria="Return to cart button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"RETURN TO CART" | |||||||||||||||||||||
aria
required
|
string
|
"Return to cart button" | |||||||||||||||||||||
url
required
|
url
|
# |
The Breadcrumbs button is to be combined into the breadcrumb navigation present on the checkout page.
{% pattern buttons/breadcrumbs text="CART" aria="Cart button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"CART" | |||||||||||||||||||||
aria
required
|
string
|
"Cart button" | |||||||||||||||||||||
url
required
|
url
|
# |
The Gray and Blue Hover is another basic website style, which is to be used in the checkout page and products list page and can be minimized with a different font-size.
{% pattern buttons/grey-and-blue-hover text="APPLY" aria="Apply button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"APPLY" | |||||||||||||||||||||
aria
required
|
string
|
"Apply button" | |||||||||||||||||||||
url
required
|
url
|
# |
The Light Blue Hover is another basic website style, which is to be used in the product details page and can be minimized with a different font-size.
{% pattern buttons/light-blue-hover text="ADD TO CART" aria="Add to cart button" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"ADD TO CART" | |||||||||||||||||||||
aria
required
|
string
|
"Add to cart button" | |||||||||||||||||||||
url
required
|
url
|
# |
Banners
The banners are to be used to showcase the websites most important features.
Banners can be combined with buttons, images, and the header.
The Call To Action banner is an example of the call-to-action present on the homepage. The developper must only take the matching button and apply that pinned to the header, as the images of both remain the same.
{% pattern banners/call-to-action text="hidden" text="ib" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"hidden" | |||||||||||||||||||||
text
required
|
string
|
"ib" | |||||||||||||||||||||
button_text
|
string
|
"SHOP NOW" | |||||||||||||||||||||
button_url
|
string
|
"/products/" |
The Blog Banner is to be used on the homepage and the style can be used in other areas of the website where there needs to be a call-out on a specific section of the website.
{% pattern banners/blog-banner %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
button_text
|
string
|
"READ OUR BLOG" | |||||||||||||||||||||
button_url
|
string
|
"#" |
Forms
The forms are formed to be used throughout the website wherever the input forms need be.
Forms can be combined with buttons.
The Main Form field is be used on the checkout page and wherever the original form style is to be placed. It can be combined with headers and used in a grid system.
{% pattern forms/main-form header="EMAIL" placeholder="EMAIL" error="Please provide email" for="email" id="email" aria="email-error" id-2="email-error" type="email" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
header
required
|
string
|
"EMAIL" | |||||||||||||||||||||
placeholder
required
|
string
|
"EMAIL" | |||||||||||||||||||||
error
required
|
string
|
"Please provide email" | |||||||||||||||||||||
for
required
|
string
|
"email" | |||||||||||||||||||||
id
required
|
string
|
"email" | |||||||||||||||||||||
aria
required
|
string
|
"email-error" | |||||||||||||||||||||
id-2
required
|
string
|
"email-error" | |||||||||||||||||||||
type
required
|
string
|
"email" |
The Radio Button Form is to be used in place of any button style, and will be used in the checkout page.
{% pattern forms/radio-button-form text="Keep me up to date on news and exclusive offers" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Keep me up to date on news and exclusive offers" |
The Data List is to be used for any list form style needed throughout the website.
{% pattern forms/data-list %}
The Date Picker is to be used wherever the style is present on the website.
{% pattern forms/date-picker %}
The Discount Code Input is to be used on the checkout page and can be combined with buttons.
{% pattern forms/discount-code-input header="GIFT CARD OR DISCOUNT CODE" placeholder="GIFT CARD OR DISCOUNT CODE" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
header
required
|
string
|
"GIFT CARD OR DISCOUNT CODE" | |||||||||||||||||||||
placeholder
required
|
string
|
"GIFT CARD OR DISCOUNT CODE" |
The Email Input can be used on the homepage in order for users to sign-up for email updates and can be combined with buttons.
{% pattern forms/email-input header="EMAIL" placeholder="name@example.com" error="Please provide email" aria="email-error" id="email-error" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
header
required
|
string
|
"EMAIL" | |||||||||||||||||||||
placeholder
required
|
string
|
"name@example.com" | |||||||||||||||||||||
error
required
|
string
|
"Please provide email" | |||||||||||||||||||||
aria
required
|
string
|
"email-error" | |||||||||||||||||||||
id
required
|
string
|
"email-error" |
The Let Us Know Form is to be used for users to be able to directly contact the business. This can be combined with buttons.
{% pattern forms/let-us-know-form text="Have a question, ask away!" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Have a question, ask away!" |
The Search Form is to be used in the header to allow users to find something throughout the entirety of the website.
{% pattern forms/search %}