Style Guide

Fluid Headings

H1 Headline (h1, .h1)

H2 Headline (h2, .h2)

H3 Headline (h3, .h3)

H4 Headline (h4, .h4)

H5 Headline (h5, .h5)

Fluid Body

.body-big

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

body, .body-medium [default]

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

.body-small

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

.body-mini

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

Static Headings

H1 Headline (.h1-static)

H2 Headline (.h2-static)

H3 Headline (.h3-static)

H4 Headline (.h4-static)

H5 Headline (.h5-static)

Static Body

.body-big-static

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

.body-medium-static

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

.body-small-static

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

.body-mini-static

Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl

Font Style

Italic (.italic)

Normal (.not-italic) [default]

Font Weight

Light 300 (.font-light)

Regular 400 (.font-regular) [default]

Medium 500 (.font-medium)

Bold 700 (.font-bold)

Black 900 (.font-black)

Colors

Basic

--color-black
.bg-black
.font-black
.nova-color-scheme-bg-black
.nova-color-scheme-fg-black

--color-gray-light
.bg-gray-light
.font-gray-light
.nova-color-scheme-bg-gray-light
.nova-color-scheme-fg-gray-light

Neutral

--color-white
.bg-white
.font-white
.nova-color-scheme-bg-white
.nova-color-scheme-fg-white

--color-purple-dark
.bg-purple-dark
.font-purple-dark
.nova-color-scheme-bg-purple-dark
.nova-color-scheme-fg-purple-dark

--color-neutral
.bg-neutral
.font-neutral
.nova-color-scheme-bg-neutral
.nova-color-scheme-fg-neutral

Purple

--color-purple
.bg-purple
.font-purple
.nova-color-scheme-bg-purple
.nova-color-scheme-fg-purple

--color-purple-medium
.bg-purple-medium
.font-purple-medium
.nova-color-scheme-bg-purple-medium
.nova-color-scheme-fg-purple-medium

--color-purple-light
.bg-purple-light
.font-purple-light
.nova-color-scheme-bg-purple-light
.nova-color-scheme-fg-purple-light

--color-purple-ultra-light
.bg-purple-ultra-light
.font-purple-ultra-light
.nova-color-scheme-bg-purple-ultra-light
.nova-color-scheme-fg-purple-ultra-light

Accent

--color-blue-light
.bg-blue-light
.font-blue-light
.nova-color-scheme-bg-blue-light
.nova-color-scheme-fg-blue-light

--color-green-acid
.bg-green-acid
.font-green-acid
.nova-color-scheme-bg-green-acid
.nova-color-scheme-fg-green-acid

Gray

--color-gray-4
.bg-gray-4
.font-gray-4

--color-gray-3
.bg-gray-3
.font-gray-3

--color-gray-2
.bg-gray-2
.font-gray-2

States

--color-error
.bg-error
.font-error

--color-success
.bg-success
.font-success

--color-warning
.bg-warning
.font-warning

--color-disabled
.bg-disabled
.font-disabled

Gradient

Gradient purple

--gradient-purple
.bg-gradient-purple
.font-gradient-purple
.nova-color-scheme-bg-purple
.nova-color-scheme-fg-purple

Gradient white-purple-dark

--gradient-white-purple-dark
.bg-gradient-white-purple-dark
.font-gradient-white-purple-dark
.nova-color-scheme-bg-white-purple-dark
.nova-color-scheme-fg-white-purple-dark

Gradient neutral-purple-dark

--gradient-neutral-purple-dark
.bg-gradient-neutral-purple-dark
.font-gradient-neutral-purple-dark
.nova-color-scheme-bg-neutral-purple-dark
.nova-color-scheme-fg-neutral-purple-dark

Use the customizer "Background color" selector to change this color

--color-gradient-purple
.bg-gradient-purple
.font-gradient-purple
.nova-color-scheme-bg-gradient-purple
.nova-color-scheme-fg-gradient-purple

Spaces

Static spaces

4px --space-xs
8px --space-sm
12px --space-md
16px --space-lg
24px --space-xl
32px --space-2xl
40px --space-3xl
48px --space-4xl
56px --space-5xl
64px --space-6xl
72px --space-7xl
80px --space-8xl
96px --space-9xl
120px --space-10xl

Fluid spaces

none-xs --space-none-xs
xs-sm --space-xs-sm
sm-md --space-sm-md
sm-lg --space-sm-lg
md-lg --space-md-lg
md-xl --space-md-xl
lg-xl --space-lg-xl
xl-2xl --space-xl-2xl
xl-3xl --space-xl-3xl
2xl-3xl --space-2xl-3xl
2xl-5xl --space-2xl-5xl
3xl-5xl --space-3xl-5xl
3xl-8xl --space-3xl-8xl
3xl-10xl --space-3xl-10xl

Fluid Grilles (flex)

grid grid--3-col grid--4-col-tablet grid--6-col-desktop

grid grid--2-col grid--3-col-tablet grid--5-col-desktop

grid grid--1-col grid--2-col-tablet grid--4-col-desktop

grid grid--1-col grid--1-col-tablet grid--3-col-desktop

grid grid--1-col grid--1-col-tablet grid--2-col-desktop

grid grid--1-col grid--1-col-tablet grid--1-col-desktop

Static Grilles (flex)

grid grid-static grid--3-col grid--4-col-tablet grid--6-col-desktop

grid grid-static grid--2-col grid--3-col-tablet grid--5-col-desktop

grid grid-static grid--1-col grid--2-col-tablet grid--4-col-desktop

grid grid-static grid--1-col grid--1-col-tablet grid--3-col-desktop

grid grid-static grid--1-col grid--1-col-tablet grid--2-col-desktop

grid grid-static grid--1-col grid--1-col-tablet grid--1-col-desktop

Icons

Dawn Icons

Default Icons

Customized Icons

Icons used by snippets/icon-accordion.liquid

Default Icons

Customized Icons

Added Icons

Use the customizer "Custom Icon" selector to change this icon

Flags

Buttons

.button--primary .button--primary-white
.button--product .button--product-white
.button--product.row-reverse .button--calcul

Use the customizer "Button Style" selector to change these buttons

Lien Test
.button--icon .button--icon.rotate-180 .button--secondary .button--secondary-white
.button--link .button--link-white
.button--navigation Elite (20SEER) Magasiner Pro (24SEER) Magasiner .button--navigation-white

Tooltip

Placeholders

Banner placeholder

Banner placeholder

Form elements

Colors
Color

Snippets

Breadcrumbs (nova-breadcrumbs)