- FF Meta.font-family--ff-meta
- D1 | Display 1I am a D1 Display Style.D1 Display style
with a Linebreak.header--large - D2 | Display 2I am a D2 Display Style.D2 Display style
with a Linebreak.display--d2 - H1 | HeadlineI am an H1 Headline.H1 Headline
with a Linebreak.headline--h1 - H2 | HeadlineI am an H2 Headline.H2 Headline
with a Linebreak.headline--h2 - H3 | HeadlineI am an H3 Headline.H3 Headline
with a Linebreak.headline--h3 - Body Copy - Large
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was...
.body--large - Body Copy - Regular
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was...
.body--regular - Body Copy - Small
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was...
.body--small - Eyebrow
The Aveda Mission
.text--eyebrow - Disclaimer
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was...
.text--disclaimer
- Brand Colors
Styleguide updates 2020
White (#FFFFFF) for Site background. Reversed out text, buttons, or icons on dark backgrounds
Almost Black (#120E02) for text, utility nav and footer background, button fill and outline, icons
Light Linen (#F4F2EE) for module, banner and section backgrounds. Use very sparingly, default to white background
Belgian Linen (#EDEAE4) for keylines, outlines, and rollover states (as needed)
Dark Linen (#E6E3DD) for accents or rollover states for Belgian linen or Light linen modules (as needed)White
#fff
$whiteAlmost Black
#120E02
$color-off-blackLight Linen
#F4F2EE
$color-light-linenBelgian Linen
#EDEAE4
$color-belgian-linenDark Linen
#E6E3DD
$color-dark-linenUSE SPARINGLY
Green 1 (#007041) for limited use for button fills or interface elements
Green 2 (#009F4D) for star ratings
Green 3 (#154734) for accents or rollover states for Green 1 and Green 2Green 1
#007041
$color-green-1Green 2
#009F4D
$color-green-2Green 3
#154734
$color-green-3 - HERO FRANCHISE COLOR PALETTES
Hero franchise pages have the opportunity to include accents that compliment the franchise color palette.
Each includes the base neutral palette of #FFFFFF and #F2F4EE.
Darkest colors for buttons and accent text - align with packaging palettesnutriplenishTM
White
#fffLight Warm Grey
#F4F2EE#ECC286#DF7D75#BE585Cbotanical repairTM
White
#fffLight Warm Grey
#F4F2EE#B8C0C8#75AFAD#295E56invatiTM
White
#fffLight Warm Grey
#F4F2EE#DEC89F#917493#295E56Almost Black
#120E02hair & scalp check
White
#fffLight Warm Grey
#F4F2EE#E3DCCD#BB9A28 - System ColorsError
#f00
$color-errorSuccess
#07bb5b
$color-green
New icon implementation:
Uses the SVG sprite.
Code example:
<svg role="img" class="icon icon--twitter"> <title >ADA title goes here</title> <use xlink:href="#twitter"></use> </svg>
- accountbagcalendarcaret--cta-rightcaret--downcaret--down2caret--leftcaret--left2caret--rightcaret--upcheckcheckboxcheckbox--checkedcheckbox2checkbox2--checkedcheckoutcircle-caret--leftcircle-caret--rightcircle_questioncloseclose-crossedit-penemaileye-hideeye-showfacebookfacebook-v2filtergift-iconhamburgerhead--outlinehead--solidheart--filledheart--outlinehide_password_iconicon--fb-iconicon--klarnaicon--password-checkicon-erroricon-green-tickicon-infoicon-tickinformationinstagraminstagram-v2leaflinelivechatlivechat--outlinelocationlocation--filledlocation-searchlogologo--mobilemap-markermap-marker2microphoneminuspinterestpinterest--circleplaypluspure-privilegeradioradio--checkedschedulescissorssearchsearch2shareshippingshow_password_iconstarstiktoktwittervideo-playweiboyoutubeyoutube--playStyleguide Tools