Fonts - 2021 Style Refresh

• Ano Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--ano-regular
  $ano_regular-font
• Ano Bold Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--ano-bold-regular
  $ano-bold_regular-font

Fonts - Legacy Styles

• Roboto Mono Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--roboto
  $roboto-mono_regular-font
• Roboto Mono Bold
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  . font--roboto-bold
  $roboto-mono_bold-font
• Trade Gothic
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--tradegothic
  $tradegothic-cond-font
• Helvetica
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--helvetica
  $helvetica-font
• Ano Black Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--ano-black-regular
  $ano-black_regular-font
• Ano Bold Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

  .font--ano-bold-regular
  $ano-bold_regular-font

• Primary CTA (rounded button) - outlined (light with dark label)
  Button
  .cta-primary
• Primary CTA (rounded button) - filled (dark bg light label)
  Disabled
  .cta-primary--dark
• Secondary CTA (text) - dark (dark text)
  Text Link
  .cta-secondary
• Secondary CTA (text) - inverted (light text on dark bg)
  Text Link
  .cta-secondary--inverted
• Secondary CTA (text with arrow icon) - dark (dark text)
  Text Link
  .cta-secondary--with-arrow
• Secondary CTA (text with arrow icon) - inverted (light text on dark bg)
  Text Link
  .cta-secondary--inverted-with-arrow
• Cover CTA (large text) - dark (dark text)
  Text Link
  .cta-cover
• Cover CTA (large text) - inverted (light text on dark bg)
  Text Link
  .cta-cover--inverted/div>
• Cover CTA (large text with arrow icon) - dark (dark text)
  Text Link
  .cta-cover--with-arrow
• Cover CTA (large text with arrow icon) - inverted (light text on dark bg)
  Text Link
  .cta-cover--inverted-with-arrow

• Dark Button
  Button
  .button .elc-button
• Dark Button - Disabled
  Disabled
  .button--disabled .elc-button--disabled
• Dark Button - Underlined on hover
  Button
  .button--underline .elc-button--underline

• Text CTA
  I am a link
  .link .elc-link
• Text CTA - Underlined
  I am link
  .link--underline
• Link Small - Uppercase
  I am a link
  .link--small .elc-link--small

• • icon--MAC-logo
  • icon--add-dark
  • icon--add-light
  • icon--afterpay
  • icon--arrow-left
  • icon--arrow-left-lrg--black
  • icon--arrow-left-lrg--white
  • icon--arrow-left-white
  • icon--arrow-right
  • icon--arrow-right-lrg--black
  • icon--arrow-right-lrg--white
  • icon--arrow-right-white
  • icon--bag
  • icon--bag-white
  • icon--bars
  • icon--chat
  • icon--check
  • icon--chevron-down
  • icon--chevron-up
  • icon--close
  • icon--close--white
  • icon--close-thick
  • icon--deliver
  • icon--filter
  • icon--gift
  • icon--heart
  • icon--heart-filled
  • icon--home
  • icon--house
  • icon--info
  • icon--lipstick
  • icon--marker
  • icon--minus
  • icon--pause
  • icon--play
  • icon--play--outline
  • icon--play-light
  • icon--plus
  • icon--products
  • icon--promo
  • icon--search
  • icon--search-white
  • icon--social-facebook
  • icon--social-instagram
  • icon--social-pinterest
  • icon--social-ticktok
  • icon--social-twitter
  • icon--social-youtube
  • icon--star
  • icon--user
  • icon--user-white

  <svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter">
    <title id="my-unique-id">ADA title goes here</title>
    <use xlink:href="#twitter"></use>
  </svg>
  

• Input
  input
• Input - Error
  .error
• Input - Success
  .success
• Textarea
  textarea
• Textarea - Error
  .error
• Textarea - Success
  .success
• Dropdown - Native select CHOOSE ONEOption 1Option 2Option 3
  select > option
• Radio
  Radio 1
  Radio 2
  Radio 1 - disabled
  Radio 2 - disabled
  input type="radio"
• Checkbox
  Unchecked
  Checked
  Unchecked - Disabled
  Checked - Disabled
  input type="checkbox"