Styleguide

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
Buttons & Links - 2021 Style Refresh
  • 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
Buttons - Legacy Styles
  • 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 Links - Legacy Styles

Colors

  • Brand Colors
    White
    HSL(0, 0%, 100%)
    $color--white
    Gray White
    HSL(0, 0%, 94%)
    $color--gray--white
    Gray Lightest
    HSL(0, 0%, 85.9%)
    $color--gray--lightest
    Gray Lighter
    HSL(0, 0%, 78%)
    $color--gray--lighter
    Gray Light
    HSL(0, 0%, 60%)
    $color--gray--light
    Gray
    HSL(228, 2.3%, 41.8%)
    $color--gray
    Gray Dark
    HSL(0, 0%, 30%)
    $color--gray--dark
    Gray Darker
    HSL(0, 0%, 20%)
    $color--gray--darker
    Gray Darkest
    HSL(0, 0%, 16%)
    $color--gray--darkest
    Gray Medium
    HSL(0, 0%, 64%)
    $color--gray--medium
    Gray Black
    HSL(0, 0%, 10%)
    $color--gray--black
    Black
    HSL(0, 0%, 0%)
    $color--black
    Red
    HSL(0, 100%, 50%)
    $color--red
    Disabled
    HSL(60, 15%, 91%)
    $color--disabled
    Light Black
    #191919
    $color--light--black
    Black Opacity
    RGBA(25,25,25,0.9)
    $color-black--opacity
    Blue
    HSL(240, 100%, 50%)
    $color--blue
Icons
    • icon--MAC-logo
    • icon--add-dark
      icon--add-dark
    • icon--add-light
      icon--add-light
    • icon--afterpay
      icon--afterpay
    • icon--arrow-left
      icon--arrow-left
    • icon--arrow-left-lrg--black
      icon--arrow-left-lrg--black
    • icon--arrow-left-lrg--white
      icon--arrow-left-lrg--white
    • icon--arrow-left-white
      icon--arrow-left-white
    • icon--arrow-right
      icon--arrow-right
    • icon--arrow-right-lrg--black
      icon--arrow-right-lrg--black
    • icon--arrow-right-lrg--white
      icon--arrow-right-lrg--white
    • icon--arrow-right-white
      icon--arrow-right-white
    • icon--bag
      icon--bag
    • icon--bag-white
      icon--bag-white
    • icon--bars
      icon--bars
    • icon--chat
      icon--chat
    • icon--check
      icon--check
    • icon--chevron-down
      icon--chevron-down
    • icon--chevron-up
      icon--chevron-up
    • icon--close
      icon--close
    • icon--close-thick
      icon--close-thick
    • icon--deliver
      icon--deliver
    • icon--filter
      icon--filter
    • icon--gift
      icon--gift
    • icon--heart
      icon--heart
    • icon--home
      icon--home
    • icon--house
      icon--house
    • icon--info
      icon--info
    • icon--lipstick
      icon--lipstick
    • icon--marker
      icon--marker
    • icon--minus
      icon--minus
    • icon--pause
      icon--pause
    • icon--play
      icon--play
    • icon--play--outline
      icon--play--outline
    • icon--play-light
      icon--play-light
    • icon--plus
      icon--plus
    • icon--products
      icon--products
    • icon--search
      icon--search
    • icon--search-white
      icon--search-white
    • icon--social-facebook
    • icon--social-instagram
    • icon--social-pinterest
    • icon--social-ticktok
    • icon--social-twitter
    • icon--social-youtube
    • icon--star
      icon--star
    • icon--user
      icon--user
    • icon--user-white
      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>
    
Form Elements (standard)
  • Input
    input
  • Input - Error
    .error
  • Input - Success
    .success
  • Textarea
    textarea
  • Textarea - Error
    .error
  • Textarea - Success
    .success
  • Dropdown - Native select
    select > option
  • Radio
    input type="radio"
  • Checkbox
    input type="checkbox"
Styleguide Tools