ws-voice-infinity-global-module 1.0.10 → 1.0.13

package/lib/fonts.scss

@@ -1,1444 +1,1444 @@
-@import 'fontFaces.scss';
-@import 'variables.scss';
-@import 'mixins.scss';
-
-%san-francisco-text-bold {
-  font-family: 'sanFranciscoTextBold', sans-serif !important;
-}
-
-%page-title-1 {
-  color: $primary;
-  font-family: 'sanFranciscoTextBold', sans-serif;
-  font-size: 48px;
-  line-height: 48px;
-
-  @include break768 {
-    font-size: 38px;
-    line-height: 38px;
-  }
-
-  @include break480 {
-    font-size: 30px;
-    line-height: 30px;
-  }
-
-  @include break375 {
-    font-size: 28px;
-    line-height: 28px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-}
-
-.page-title-1-primary {
-  @extend %page-title-1;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.page-title-1-secondary {
-  @extend %page-title-1;
-
-  color: $secondary;
-
-  @include styleFor($adTemplate) {
-    color: $ad-secondary;
-  }
-}
-
-.page-title-1-white {
-  @extend %page-title-1;
-
-  color: $white;
-}
-
-%page-title-2 {
-  color: $primary;
-  font-family: 'sanFranciscoTextBold', sans-serif;
-  font-size: 52px;
-
-  @include break768 {
-    font-size: 43px;
-  }
-
-  @include break480 {
-    font-size: 38px;
-  }
-
-  @include break375 {
-    font-size: 36px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-    font-size: 56px;
-
-    @include break768 {
-      font-size: 40px;
-    }
-
-    @include break480 {
-      font-size: 36px;
-    }
-
-    @include break375 {
-      font-size: 32px;
-    }
-  }
-}
-
-.page-title-2-primary {
-  @extend %page-title-2;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.page-title-2-secondary {
-  @extend %page-title-2;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $zab-secondary;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-secondary;
-  }
-}
-
-.page-title-2-white {
-  @extend %page-title-2;
-
-  color: $white;
-}
-
-%page-header {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 40px;
-
-  @include break768 {
-    font-size: 31px;
-  }
-
-  @include break480 {
-    font-size: 26px;
-  }
-
-  @include break375 {
-    font-size: 24px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-}
-
-.page-header-primary {
-  @extend %page-header;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.page-header-secondary {
-  @extend %page-header;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $zab-secondary;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-secondary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.page-header-white {
-  @extend %page-header;
-
-  color: $white;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%subheader-1 {
-  color: $primary;
-  font-family: 'robotoSlabBold', serif;
-  font-size: 16px;
-
-  @include break768 {
-    font-size: 15px;
-  }
-
-  @include break480 {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-    font-size: 18px;
-
-    @include break768 {
-      font-size: 17px;
-    }
-
-    @include break480 {
-      font-size: 16px;
-    }
-  }
-}
-
-.subheader-1-primary {
-  @extend %subheader-1;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.subheader-1-secondary {
-  @extend %subheader-1;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $zab-secondary;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-secondary;
-  }
-}
-
-.subheader-1-white {
-  @extend %subheader-1;
-
-  color: $white;
-}
-
-.subheader-1-gray {
-  @extend %subheader-1;
-
-  color: $gray-color;
-}
-
-.subheader-1-link {
-  @extend %subheader-1;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-}
-
-.subheader-1-satisfaction-80 {
-  @extend %subheader-1;
-
-  color: $satisfaction-80;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-80;
-  }
-}
-
-%subheader-2 {
-  color: $primary;
-  font-family: 'robotoSlabBold', serif;
-  font-size: 22px;
-
-  @include break768 {
-    font-size: 20px;
-  }
-
-  @include break480 {
-    font-size: 18px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-}
-
-.subheader-2-primary {
-  @extend %subheader-2;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.subheader-2-secondary {
-  @extend %subheader-2;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-}
-
-.subheader-2-white {
-  @extend %subheader-2;
-
-  color: $white;
-}
-
-.subheader-2-satisfaction-40 {
-  @extend %subheader-2;
-
-  color: $satisfaction-40;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-40;
-  }
-}
-
-%subheader-3 {
-  color: $primary;
-  font-family: 'robotoSlabBold', serif;
-  font-size: 28px;
-
-  @include break768 {
-    font-size: 24px;
-  }
-
-  @include break480 {
-    font-size: 21px;
-  }
-
-  @include break375 {
-    font-size: 20px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-}
-
-.subheader-3-primary {
-  @extend %subheader-3;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.subheader-3-white {
-  @extend %subheader-3;
-
-  color: $white;
-}
-
-%subheader-4 {
-  color: $primary;
-  font-family: 'robotoSlabBold', serif;
-  font-size: 36px;
-
-  @include break768 {
-    font-size: 30px;
-  }
-
-  @include break480 {
-    font-size: 26px;
-  }
-
-  @include break375 {
-    font-size: 24px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-}
-
-.subheader-4-primary {
-  @extend %subheader-4;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-primary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.subheader-4-white {
-  @extend %subheader-4;
-
-  color: $white;
-}
-
-%body-1 {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 15px;
-
-  @include break768 {
-    font-size: 14px;
-  }
-
-  @include break480 {
-    font-size: 13px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.body-1-primary {
-  @extend %body-1;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-peach {
-  @extend %body-1;
-
-  color: $peach;
-
-  &--bold {
-    color: $peach;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-secondary {
-  @extend %body-1;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  &--bold {
-    color: $secondary;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-warning {
-  @extend %body-1;
-
-  color: $warning-color;
-
-  &--bold {
-    color: $warning-color;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-satisfaction-0 {
-  @extend %body-1;
-
-  color: $satisfaction-0;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-0;
-  }
-
-  &--bold {
-    color: $satisfaction-0;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-satisfaction-80 {
-  @extend %body-1;
-
-  color: $satisfaction-80;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-80;
-  }
-
-  &--bold {
-    color: $satisfaction-80;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-white {
-  @extend %body-1;
-
-  color: $white;
-
-  &--bold {
-    color: $white;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-success {
-  @extend %body-1;
-
-  color: $success-color;
-
-  &--bold {
-    color: $success-color;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-light-swamp-green {
-  @extend %body-1;
-
-  color: $light-swamp-green;
-
-  &--bold {
-    color: $light-swamp-green;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%body-1-link {
-  @extend %body-1;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-}
-
-.body-1-link {
-  @extend %body-1-link;
-
-  &--bold {
-    color: $regular-blue;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-progress {
-  @extend %body-1;
-
-  color: $yellow-color;
-
-  &--bold {
-    color: $yellow-color;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-gray {
-  @extend %body-1;
-
-  color: $gray-color;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-gray;
-  }
-
-  &--bold {
-    color: $gray-color;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-1-action-secondary {
-  @extend %body-1;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  &--bold {
-    color: $action-secondary;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%body-2 {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 16px;
-
-  @include break768 {
-    font-size: 15px;
-  }
-
-  @include break480 {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.body-2-primary {
-  @extend %body-2;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-secondary {
-  @extend %body-2;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  &--bold {
-    color: $secondary;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-white {
-  @extend %body-2;
-
-  color: $white;
-
-  &--bold {
-    color: $white;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-link {
-  @extend %body-2;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  &--bold {
-    color: $regular-blue;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-gray {
-  @extend %body-2;
-
-  color: $gray;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-gray;
-  }
-
-  &--bold {
-    color: $gray;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-success {
-  @extend %body-2;
-
-  color: $satisfaction-60;
-
-  &--bold {
-    color: $satisfaction-60;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-satisfaction-80 {
-  @extend %body-2;
-
-  color: $satisfaction-80;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-80;
-  }
-
-  &--bold {
-    color: $satisfaction-80;
-
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-warning {
-  @extend %body-2;
-
-  color: $satisfaction-0;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-2-satisfaction-40 {
-  @extend %body-2;
-
-  color: $satisfaction-40;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-40;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%body-3 {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 18px;
-
-  @include break768 {
-    font-size: 16px;
-  }
-
-  @include break480 {
-    font-size: 15px;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.body-3-primary {
-  @extend %body-3;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-3-secondary {
-  @extend %body-3;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-3-white {
-  @extend %body-3;
-
-  color: $white;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-3-link {
-  @extend %body-3;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-3-action-secondary {
-  @extend %body-3;
-
-  color: $action-secondary;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%body-4 {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 24px;
-
-  @include break768 {
-    font-size: 22px;
-  }
-
-  @include break480 {
-    font-size: 20px;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 22px;
-
-    @include break768 {
-      font-size: 20px;
-    }
-
-    @include break480 {
-      font-size: 18px;
-    }
-  }
-}
-
-.body-4-primary {
-  @extend %body-4;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-secondary {
-  @extend %body-4;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-white {
-  @extend %body-4;
-
-  color: $white;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-green {
-  @extend %body-4;
-
-  color: $green;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-link {
-  @extend %body-4;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-peach {
-  @extend %body-4;
-
-  color: $peach;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-blue-gray {
-  @extend %body-4;
-
-  color: $blue-gray;
-
-  @include styleFor($kamTemplate) {
-    @extend %san-francisco-text-bold;
-
-    color: $kam-medium-blue;
-    font-size: 16px;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.body-4-action-secondary {
-  @extend %body-4;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%label {
-  background-color: inherit;
-  color: $primary;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 14px;
-
-  @include break768 {
-    font-size: 13px;
-  }
-
-  @include break480 {
-    font-size: 12px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-}
-
-.label-primary {
-  @extend %label;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.label-secondary {
-  @extend %label;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-}
-
-.label-white {
-  @extend %label;
-
-  color: $white;
-}
-
-%caption {
-  color: $primary;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 13px;
-
-  @include break768 {
-    font-size: 12px;
-  }
-
-  @include break480 {
-    font-size: 11px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.caption-primary {
-  @extend %caption;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-white {
-  @extend %caption;
-
-  color: $white;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-peach {
-  @extend %caption;
-
-  color: $peach;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-gray-title {
-  @extend %caption;
-
-  color: $gray-title;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-secondary {
-  @extend %caption;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-warning {
-  @extend %caption;
-
-  color: $satisfaction-0;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-error {
-  @extend %caption;
-
-  color: $error-color;
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-.caption-link {
-  @extend %caption;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  &--bold {
-    @extend %san-francisco-text-bold;
-  }
-}
-
-%action-1 {
-  color: $primary;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 16px;
-
-  @include break768 {
-    font-size: 15px;
-  }
-
-  @include break480 {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-}
-
-.action-1-primary {
-  @extend %action-1;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-.action-1-secondary {
-  @extend %action-1;
-
-  color: $secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-secondary;
-  }
-}
-
-.action-1-action-secondary {
-  @extend %action-1;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-}
-
-.action-1-white {
-  @extend %action-1;
-
-  color: $white;
-}
-
-.action-1-link {
-  @extend %action-1;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-}
-
-.action-1-medium-blue {
-  @extend %action-1;
-
-  color: $medium-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-medium-blue;
-  }
-}
-
-.action-1-satisfaction-60 {
-  @extend %action-1;
-
-  color: $satisfaction-60;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-satisfaction-60;
-  }
-}
-
-.link-text {
-  @extend .action-1-link;
-
-  transition: all $transition;
-
-  &:hover {
-    color: $hover-blu-color;
-  }
-
-  &--clickable {
-    cursor: pointer;
-  }
-}
-
-.status-white {
-  @extend %action-1;
-
-  color: $white;
-}
-
-.action-1-peach {
-  @extend %action-1;
-
-  color: $peach;
-}
-
-%action-2 {
-  color: $primary;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 18px;
-
-  @include break768 {
-    font-size: 16px;
-  }
-
-  @include break480 {
-    font-size: 15px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-}
-
-.action-2-primary {
-  @extend %action-2;
-
-  @include styleFor($zabTemplate) {
-    color: $black;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ad-primary;
-  }
-}
-
-%action-2-link {
-  @extend %action-2;
-
-  color: $regular-blue;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-}
-
-.action-2-link {
-  @extend %action-2-link;
-}
-
-.action-2-action-secondary {
-  @extend %action-2;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-}
-
-%footer-link {
-  color: $white;
-  font-family: 'sanFranciscoTextBold', sans-serif;
-  font-size: 14px;
-
-  @include break768 {
-    font-size: 13px;
-  }
-
-  @include break480 {
-    font-size: 12px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-}
-
-.footer-link {
-  @extend %footer-link;
-}
+@import 'fontFaces.scss';
+@import 'variables.scss';
+@import 'mixins.scss';
+
+%san-francisco-text-bold {
+  font-family: 'sanFranciscoTextBold', sans-serif !important;
+}
+
+%page-title-1 {
+  color: $primary;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 48px;
+  line-height: 48px;
+
+  @include break768 {
+    font-size: 38px;
+    line-height: 38px;
+  }
+
+  @include break480 {
+    font-size: 30px;
+    line-height: 30px;
+  }
+
+  @include break375 {
+    font-size: 28px;
+    line-height: 28px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+}
+
+.page-title-1-primary {
+  @extend %page-title-1;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.page-title-1-secondary {
+  @extend %page-title-1;
+
+  color: $secondary;
+
+  @include styleFor($adTemplate) {
+    color: $ad-secondary;
+  }
+}
+
+.page-title-1-white {
+  @extend %page-title-1;
+
+  color: $white;
+}
+
+%page-title-2 {
+  color: $primary;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 52px;
+
+  @include break768 {
+    font-size: 43px;
+  }
+
+  @include break480 {
+    font-size: 38px;
+  }
+
+  @include break375 {
+    font-size: 36px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 56px;
+
+    @include break768 {
+      font-size: 40px;
+    }
+
+    @include break480 {
+      font-size: 36px;
+    }
+
+    @include break375 {
+      font-size: 32px;
+    }
+  }
+}
+
+.page-title-2-primary {
+  @extend %page-title-2;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.page-title-2-secondary {
+  @extend %page-title-2;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $zab-secondary;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-secondary;
+  }
+}
+
+.page-title-2-white {
+  @extend %page-title-2;
+
+  color: $white;
+}
+
+%page-header {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 40px;
+
+  @include break768 {
+    font-size: 31px;
+  }
+
+  @include break480 {
+    font-size: 26px;
+  }
+
+  @include break375 {
+    font-size: 24px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+}
+
+.page-header-primary {
+  @extend %page-header;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.page-header-secondary {
+  @extend %page-header;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $zab-secondary;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-secondary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.page-header-white {
+  @extend %page-header;
+
+  color: $white;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%subheader-1 {
+  color: $primary;
+  font-family: 'robotoSlabBold', serif;
+  font-size: 16px;
+
+  @include break768 {
+    font-size: 15px;
+  }
+
+  @include break480 {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 18px;
+
+    @include break768 {
+      font-size: 17px;
+    }
+
+    @include break480 {
+      font-size: 16px;
+    }
+  }
+}
+
+.subheader-1-primary {
+  @extend %subheader-1;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.subheader-1-secondary {
+  @extend %subheader-1;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $zab-secondary;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-secondary;
+  }
+}
+
+.subheader-1-white {
+  @extend %subheader-1;
+
+  color: $white;
+}
+
+.subheader-1-gray {
+  @extend %subheader-1;
+
+  color: $gray-color;
+}
+
+.subheader-1-link {
+  @extend %subheader-1;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+}
+
+.subheader-1-satisfaction-80 {
+  @extend %subheader-1;
+
+  color: $satisfaction-80;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-80;
+  }
+}
+
+%subheader-2 {
+  color: $primary;
+  font-family: 'robotoSlabBold', serif;
+  font-size: 22px;
+
+  @include break768 {
+    font-size: 20px;
+  }
+
+  @include break480 {
+    font-size: 18px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+}
+
+.subheader-2-primary {
+  @extend %subheader-2;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.subheader-2-secondary {
+  @extend %subheader-2;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+}
+
+.subheader-2-white {
+  @extend %subheader-2;
+
+  color: $white;
+}
+
+.subheader-2-satisfaction-40 {
+  @extend %subheader-2;
+
+  color: $satisfaction-40;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-40;
+  }
+}
+
+%subheader-3 {
+  color: $primary;
+  font-family: 'robotoSlabBold', serif;
+  font-size: 28px;
+
+  @include break768 {
+    font-size: 24px;
+  }
+
+  @include break480 {
+    font-size: 21px;
+  }
+
+  @include break375 {
+    font-size: 20px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+}
+
+.subheader-3-primary {
+  @extend %subheader-3;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.subheader-3-white {
+  @extend %subheader-3;
+
+  color: $white;
+}
+
+%subheader-4 {
+  color: $primary;
+  font-family: 'robotoSlabBold', serif;
+  font-size: 36px;
+
+  @include break768 {
+    font-size: 30px;
+  }
+
+  @include break480 {
+    font-size: 26px;
+  }
+
+  @include break375 {
+    font-size: 24px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+}
+
+.subheader-4-primary {
+  @extend %subheader-4;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-primary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.subheader-4-white {
+  @extend %subheader-4;
+
+  color: $white;
+}
+
+%body-1 {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 15px;
+
+  @include break768 {
+    font-size: 14px;
+  }
+
+  @include break480 {
+    font-size: 13px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.body-1-primary {
+  @extend %body-1;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-peach {
+  @extend %body-1;
+
+  color: $peach;
+
+  &--bold {
+    color: $peach;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-secondary {
+  @extend %body-1;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  &--bold {
+    color: $secondary;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-warning {
+  @extend %body-1;
+
+  color: $warning-color;
+
+  &--bold {
+    color: $warning-color;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-satisfaction-0 {
+  @extend %body-1;
+
+  color: $satisfaction-0;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-0;
+  }
+
+  &--bold {
+    color: $satisfaction-0;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-satisfaction-80 {
+  @extend %body-1;
+
+  color: $satisfaction-80;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-80;
+  }
+
+  &--bold {
+    color: $satisfaction-80;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-white {
+  @extend %body-1;
+
+  color: $white;
+
+  &--bold {
+    color: $white;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-success {
+  @extend %body-1;
+
+  color: $success-color;
+
+  &--bold {
+    color: $success-color;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-light-swamp-green {
+  @extend %body-1;
+
+  color: $light-swamp-green;
+
+  &--bold {
+    color: $light-swamp-green;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%body-1-link {
+  @extend %body-1;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+}
+
+.body-1-link {
+  @extend %body-1-link;
+
+  &--bold {
+    color: $regular-blue;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-progress {
+  @extend %body-1;
+
+  color: $yellow-color;
+
+  &--bold {
+    color: $yellow-color;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-gray {
+  @extend %body-1;
+
+  color: $gray-color;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+
+  &--bold {
+    color: $gray-color;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-1-action-secondary {
+  @extend %body-1;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  &--bold {
+    color: $action-secondary;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%body-2 {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 16px;
+
+  @include break768 {
+    font-size: 15px;
+  }
+
+  @include break480 {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.body-2-primary {
+  @extend %body-2;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-secondary {
+  @extend %body-2;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  &--bold {
+    color: $secondary;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-white {
+  @extend %body-2;
+
+  color: $white;
+
+  &--bold {
+    color: $white;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-link {
+  @extend %body-2;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  &--bold {
+    color: $regular-blue;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-gray {
+  @extend %body-2;
+
+  color: $gray;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+
+  &--bold {
+    color: $gray;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-success {
+  @extend %body-2;
+
+  color: $satisfaction-60;
+
+  &--bold {
+    color: $satisfaction-60;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-satisfaction-80 {
+  @extend %body-2;
+
+  color: $satisfaction-80;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-80;
+  }
+
+  &--bold {
+    color: $satisfaction-80;
+
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-warning {
+  @extend %body-2;
+
+  color: $satisfaction-0;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-2-satisfaction-40 {
+  @extend %body-2;
+
+  color: $satisfaction-40;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-40;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%body-3 {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 18px;
+
+  @include break768 {
+    font-size: 16px;
+  }
+
+  @include break480 {
+    font-size: 15px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.body-3-primary {
+  @extend %body-3;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-3-secondary {
+  @extend %body-3;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-3-white {
+  @extend %body-3;
+
+  color: $white;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-3-link {
+  @extend %body-3;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-3-action-secondary {
+  @extend %body-3;
+
+  color: $action-secondary;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%body-4 {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 24px;
+
+  @include break768 {
+    font-size: 22px;
+  }
+
+  @include break480 {
+    font-size: 20px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 22px;
+
+    @include break768 {
+      font-size: 20px;
+    }
+
+    @include break480 {
+      font-size: 18px;
+    }
+  }
+}
+
+.body-4-primary {
+  @extend %body-4;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-secondary {
+  @extend %body-4;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-white {
+  @extend %body-4;
+
+  color: $white;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-green {
+  @extend %body-4;
+
+  color: $green;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-link {
+  @extend %body-4;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-peach {
+  @extend %body-4;
+
+  color: $peach;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-blue-gray {
+  @extend %body-4;
+
+  color: $blue-gray;
+
+  @include styleFor($kamTemplate) {
+    @extend %san-francisco-text-bold;
+
+    color: $kam-medium-blue;
+    font-size: 16px;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.body-4-action-secondary {
+  @extend %body-4;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%label {
+  background-color: inherit;
+  color: $primary;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 14px;
+
+  @include break768 {
+    font-size: 13px;
+  }
+
+  @include break480 {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+}
+
+.label-primary {
+  @extend %label;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.label-secondary {
+  @extend %label;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+}
+
+.label-white {
+  @extend %label;
+
+  color: $white;
+}
+
+%caption {
+  color: $primary;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 13px;
+
+  @include break768 {
+    font-size: 12px;
+  }
+
+  @include break480 {
+    font-size: 11px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.caption-primary {
+  @extend %caption;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-white {
+  @extend %caption;
+
+  color: $white;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-peach {
+  @extend %caption;
+
+  color: $peach;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-gray-title {
+  @extend %caption;
+
+  color: $gray-title;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-secondary {
+  @extend %caption;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-warning {
+  @extend %caption;
+
+  color: $satisfaction-0;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-error {
+  @extend %caption;
+
+  color: $error-color;
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+.caption-link {
+  @extend %caption;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  &--bold {
+    @extend %san-francisco-text-bold;
+  }
+}
+
+%action-1 {
+  color: $primary;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 16px;
+
+  @include break768 {
+    font-size: 15px;
+  }
+
+  @include break480 {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+}
+
+.action-1-primary {
+  @extend %action-1;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+.action-1-secondary {
+  @extend %action-1;
+
+  color: $secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-secondary;
+  }
+}
+
+.action-1-action-secondary {
+  @extend %action-1;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}
+
+.action-1-white {
+  @extend %action-1;
+
+  color: $white;
+}
+
+.action-1-link {
+  @extend %action-1;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+}
+
+.action-1-medium-blue {
+  @extend %action-1;
+
+  color: $medium-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-medium-blue;
+  }
+}
+
+.action-1-satisfaction-60 {
+  @extend %action-1;
+
+  color: $satisfaction-60;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-satisfaction-60;
+  }
+}
+
+.link-text {
+  @extend .action-1-link;
+
+  transition: all $transition;
+
+  &:hover {
+    color: $hover-blu-color;
+  }
+
+  &--clickable {
+    cursor: pointer;
+  }
+}
+
+.status-white {
+  @extend %action-1;
+
+  color: $white;
+}
+
+.action-1-peach {
+  @extend %action-1;
+
+  color: $peach;
+}
+
+%action-2 {
+  color: $primary;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 18px;
+
+  @include break768 {
+    font-size: 16px;
+  }
+
+  @include break480 {
+    font-size: 15px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+}
+
+.action-2-primary {
+  @extend %action-2;
+
+  @include styleFor($zabTemplate) {
+    color: $black;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ad-primary;
+  }
+}
+
+%action-2-link {
+  @extend %action-2;
+
+  color: $regular-blue;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+}
+
+.action-2-link {
+  @extend %action-2-link;
+}
+
+.action-2-action-secondary {
+  @extend %action-2;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}
+
+%footer-link {
+  color: $white;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 14px;
+
+  @include break768 {
+    font-size: 13px;
+  }
+
+  @include break480 {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+}
+
+.footer-link {
+  @extend %footer-link;
+}