AthenaXNova · Pattern Library

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.

Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.

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.

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.

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.

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.

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.

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.

A helpful accessibility feature that should be included immediately within the <body> tag on the top of most pages.

All the different utility classes available from within Modulifier.

The sprite sheet contains the following icons for use in the website. Combine the icons with Modulifier & Typografier classes for lots of variability.

Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.

Classes that can be used on elements & combined to make nicely aligned icons and labels.

Icons sizes available from Modulifier & Typografier.

The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint.

Mix & match classes for grids and units to make any responsive layout necessary for templates.

Below is a reference of all the layouts available for pages within the website.

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.

The Bottom Footer navigation is to be used in the footer at every page.

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.

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 Refund Policy is to be used in the checkout form page in order to allow the user to have access to the policy before purchasing anything.

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.

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 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.

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).

The Form is the style to be used on the checkout page.

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.

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"

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`	#

The Cart button is to stay at the top-right corner throughout every page of the website.

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`						"#"

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.

The Date Picker is to be used wherever the style is present on the website.

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.

The Number Picker is to be used in the areas that it is requires in order to allow users to pick a quantity or amount.

AthenaXNova Pattern Library

AthenaXNova Pattern Library

Patterns