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
Fluid spaces
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-whiteUse the customizer "Button Style" selector to change these buttons
Lien TestTooltip
Placeholders
Banner placeholder
