Primary styling classes

Hero header (H1)

Used on top of Hero section image
Absolute positioning so use combo class with page names to adjust text position when needed
Combo class 'static' sets the position back to static
H1 | 60 (3.75 em) | Candara Normal | X | White
Used in: on top of Hero section image
Page description  and the Aury gold span
Use once in every page to introduce what the page is about. Positioned just after the hero section (or on top of the page if no hero section)
"Aury" captioned using the 'Aury gold span' styling class.

A Section description can be used to add less important information

To confirm with Bob: can be the H1 when there is no hero section?
36px (2.5 em) | Candara - normal| X | Blue Aury #124667
Used in: All pages
section header (h2)
Used in all pages to introduce a section in a page (ex: 06 reasons to choose Aury, Client testimonials, ..)
Section header text is encapsulated between 2 dashed lines (div with 'dashed line class')
H2 | 48px (3em) | Candara - Bold| AA | Blue Aury #124667
Used in: All pages
Section description
Used after the section header or the page description to give additional information
24px (1.5 em) | HK Grotesk - Normal | X | Blue Aury #124667
Used in: All pages
Paragraph Header (h3)
Used to introduce a content of paragraph, as card name for grid based components and for tabs title (with combo class 'Tab')
24px (1.5em) | Candarab | AA | Blue Aury #124667
Used in: All pages
Paragraph
Used for content text and combined with 'italic', 'bold' and 'underline' combo classes and color class
The 'nopadding' classes remove the bottom padding
18 px (1.125 em) | HK Grotesk - Normal | X | Black #333333
Used in: All pages
CTA & LINKS
CTA header
Used only on CTA banner Talk with an expert
60px (3.75 em) | Candara Normal | X | White
Used in: CTA banner (may not be needed)
Used only on the banner for the hotline email and phone numbers
16 px (1 em) | HK Grotesk - Normal| Aa | Dark Blue Aury #124667
Used in: Banner
Used only on the navbar menu - It is a variation of the banner link class in white with an hover class and padding
16 px (1em) | HK Grotesk - Normal | Aa | White
Used in: Navbar
-
14px (0.875 em) | HK Grotesk - Normal | AA | Black #333333
Used in: footer
Smaller sized text used for the links in the footer
14 px (0.875 em) | HK grotesk - Normal | X | #9e9e9e
Used in: footer
Use exclusively in the breadcrumb components (collections navigation), 'Current' indicates the current position
24 px (1.5 em) | HK Grotesk - Normal| Ag
Used in: footer
Primary button for CTA, to use as stand alone or in banners
24 px (1.5 em) | Candarab - Normal
Used in: footer
CTA paragraph
Secondary button for CTA. To use inside content section
16px (1em) | Candarab - Normal
Used in: All pages
TAB LINK SERVICE
Use to style vertical tabs title
24 px (1.5 em) | HK Grotesk - Normal | AA | Black (A:50%))
Used in: footer
EFFECTS (HOVER...)
COMPONENTS SPECIFICS

Home hero header (H1)

Used only in the Home Hero section
Absolute positioning so use combo class with page names to adjust text position when needed
Combo class 'static' sets the position back to static
H1 | 60px (3.75 em) | Candara Normal | No caps formating | White
Used in: Home Hero section only
Large numbers
Used only in Home infographic section
24 px (1.5 em) | Bold | Ag
Used in: Infographic section
COLORS
#124667
Blue Aury
#d4af37
Gold Aury
#998a6f
Dark Taupe
#124667
Black
#c49870
SKIN
#9a5d3f
brown sugar
#8e392b
burnt umber red
#56664f
green
#998a6f
Beige