diff --git a/assets/README.md b/assets/README.md
index 2f92b885fc..80fa5981b3 100644
--- a/assets/README.md
+++ b/assets/README.md
@@ -1,5 +1,5 @@
 # Mayflower Assets
-The styles provided by this package require compiling with a tool that supports the [npm sass package](https://www.npmjs.com/package/sass). [Bourbon](https://www.npmjs.com/package/bourbon) 4.x is required to use the .scss files in this package and must be installed by the user of it.
+The styles provided by this package require compiling with a tool that supports the [npm sass package](https://www.npmjs.com/package/sass). 
 
 ## License
 Please note that the fonts and the svg-icons are licensed only for the usage on websites that are **owned by the Commonwealth of Massachusetts**. Mayflower is currently using a licensed web font Texta and purchased [Smashing Icons](https://smashicons.com/) for some icons.
@@ -36,7 +36,7 @@ These include paths allow you to include files with paths like `00-base/name-of-
 You can also set up your include paths by using an `.env` file at the root of your project. Sass can use the node environment variable `SASS_PATH` for setting your include paths:
 ```
 // .env file
-SASS_PATH=./node_modules/@massds/mayflower-assets/scss:./node_modules/@massds/mayflower-assets/scss/00-base:./node_modules/@massds/mayflower-assets/scss/00-base/mixins:./node_modules/@massds/mayflower-assets/scss/01-atoms:./node_modules/@massds/mayflower-assets/scss/02-molecules:./node_modules/@massds/mayflower-assets/scss/03-organisms:./node_modules/@massds/mayflower-assets/scss/04-templates/./node_modules/@massds/mayflower-assets/scss/05-dataviz:./node_modules/@massds/mayflower-assets/scss/08-print:./node_modules/bourbon/app/assets/stylesheets
+SASS_PATH=./node_modules/@massds/mayflower-assets/scss:./node_modules/@massds/mayflower-assets/scss/00-base:./node_modules/@massds/mayflower-assets/scss/00-base/mixins:./node_modules/@massds/mayflower-assets/scss/01-atoms:./node_modules/@massds/mayflower-assets/scss/02-molecules:./node_modules/@massds/mayflower-assets/scss/03-organisms:./node_modules/@massds/mayflower-assets/scss/04-templates/./node_modules/@massds/mayflower-assets/scss/05-dataviz:./node_modules/@massds/mayflower-assets/scss/08-print
 ```
 
 Many of the components require the file `00-base/_layout.scss` to be included at least once before their use. It's recommended for your project to create a single .scss file that includes all the shared files for your needs. This file should use `@forward` to forward sass modules that your other files need:
@@ -145,7 +145,7 @@ const compileSass = () => {
         path.join(__dirname, 'src/scss/05-dataviz'),
         path.join(__dirname, 'src/scss/08-print'),
         'node_modules',
-      ].concat(bourbon.includePaths),
+      ],
     }).on('error', sass.logError))
     .on('error', (err) => console.log(err))
   }))
diff --git a/assets/package.json b/assets/package.json
index 91cee0639f..1a8e97a489 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@massds/mayflower-assets",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Mayflower Assets",
   "main": "index.js",
   "files": [
@@ -26,8 +26,7 @@
   "author": "Massachusetts Digital Services (MDS)",
   "license": "MIT",
   "peerDependencies": {
-    "sass": "^1.26.3",
-    "bourbon": "^4.3.4"
+    "sass": "^1.26.3"
   },
   "devDependencies": {
     "stylelint": "^13.3.3",
diff --git a/assets/scss/00-base/_global.scss b/assets/scss/00-base/_global.scss
index 33bb4082a5..78c3d0cbb0 100644
--- a/assets/scss/00-base/_global.scss
+++ b/assets/scss/00-base/_global.scss
@@ -15,6 +15,4 @@
 
 @forward "color-tokens";
 
-@forward "bourbon" show tint, clearfix;
-
 
diff --git a/assets/scss/00-base/_mixins.scss b/assets/scss/00-base/_mixins.scss
index 3b70c6bc0f..b423034fd2 100644
--- a/assets/scss/00-base/_mixins.scss
+++ b/assets/scss/00-base/_mixins.scss
@@ -1,23 +1,25 @@
+@forward "mixins/bourbon/clearfix";
+
 @forward "mixins/bourbon-neat/private";
 
 @forward "mixins/bourbon-neat/span-columns";
 
 @forward "mixins/bourbon-neat/shift";
 
-@forward "mixins/bourbon-neat/omega";
-
 @forward "mixins/bourbon-neat/neat-warn";
 
+@forward "mixins/bourbon-neat/omega";
+
 @forward "mixins/ma-aspect-ratio";
 
 @forward "mixins/ma-auto-size";
 
 @forward "mixins/ma-border-decorative";
 
-@forward "mixins/ma-button";
-
 @forward "mixins/ma-button-base";
 
+@forward "mixins/ma-button";
+
 @forward "mixins/ma-button-reset";
 
 @forward "mixins/ma-chevron";
@@ -36,12 +38,12 @@
 
 @forward "mixins/ma-link-arrow";
 
+@forward "mixins/ma-link-underline";
+
 @forward "mixins/ma-link-decorative";
 
 @forward "mixins/ma-link-transition";
 
-@forward "mixins/ma-link-underline";
-
 @forward "mixins/ma-reset-list";
 
 @forward "mixins/ma-reset-rich-text";
diff --git a/assets/scss/00-base/_pikaday.scss b/assets/scss/00-base/_pikaday.scss
index 05b33e97ed..9bc3ee2e91 100644
--- a/assets/scss/00-base/_pikaday.scss
+++ b/assets/scss/00-base/_pikaday.scss
@@ -4,9 +4,7 @@
 
 @use "colors" as *;
 
-// From Bourbon
-
-@use "functions/tint" as *;
+@use "sass:color" as *;
 
 .pika-single {
   font-family: $fonts;
@@ -51,7 +49,7 @@
   }
 
   &:hover {
-    background-color: tint($c-primary, 50%);
+    background-color: mix(#fff, $c-primary, 50%);
     border-radius: 0;
   }
 
diff --git a/assets/scss/00-base/_variables.scss b/assets/scss/00-base/_variables.scss
index a7261d15aa..3b0cc5a7cf 100644
--- a/assets/scss/00-base/_variables.scss
+++ b/assets/scss/00-base/_variables.scss
@@ -1,51 +1,50 @@
-// Change the Neat grid settings.
-$column:                        85px !default;
-$gutter:                        20px !default;
-$column-with-gutter:            $column + $gutter !default;
+$column: 85px;
+$gutter: 20px;
+/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin.
+$grid-columns: 12;
+$max-width: 1320px;
+$column-with-gutter:            $column + $gutter;
 // Use @include outer-container() which sets this and centers.
-$layout-sidebar-width:          ($column * 3) + ($gutter * 2) !default;
-$layout-sidebar-width-reversed: 370px !default;
+$layout-sidebar-width:          ($column * 3) + ($gutter * 2);
+$layout-sidebar-width-reversed: 370px;
 
-$l-max-content-width:           820px !default;
-$l-max-content-wrapper:         1240px !default;
-$max-width:                     1320px !default;
+$l-max-content-width:           820px;
+$l-max-content-wrapper:         1240px;
 
-$header-mobile-controls-height: 40px !default;
+$header-mobile-controls-height: 40px;
 
 // These variables control the vertical spacing in MF.
 // No vertical spacing should exceed 70px.
-$standard-spacing--large:    70px !default;
-$standard-spacing--medium:   55px !default;
-$standard-spacing--small:    45px !default;
-$standard-spacing--xsmall:   24px !default;
-$standard-spacing--xxsmall:  12px !default;
-$standard-spacing--xxxsmall: 6px !default;
+$standard-spacing--large:    70px;
+$standard-spacing--medium:   55px;
+$standard-spacing--small:    45px;
+$standard-spacing--xsmall:   24px;
+$standard-spacing--xxsmall:  12px;
+$standard-spacing--xxxsmall: 6px;
 
 //letter-spacing for Texta
-$letter-spacing-large:   .1em !default;
-$letter-spacing-medium:  .05em !default;
-$letter-spacing-small:   .02em !default;
-$letter-spacing-default: 0 !default;
+$letter-spacing-large:   .1em;
+$letter-spacing-medium:  .05em;
+$letter-spacing-small:   .02em;
+$letter-spacing-default: 0;
 
 // Close icon
 // The close icon is not an actual icon. It is the multiplication
 // symbol displayed in a pseudo element. To display properly,
 // the following string should be used in the CSS `content` setting.
-$close-icon: '\00d7' !default;
+$close-icon: '\00d7';
 
 
 // font families
-$fonts:      "Texta", "Helvetica", "Arial", sans-serif !default;
-$fonts-mono: "Source Code Pro", "Monaco", monospace !default;
-$fonts-khmer: "Hanuman" !default;
+$fonts:      "Texta", "Helvetica", "Arial", sans-serif;
+$fonts-mono: "Source Code Pro", "Monaco", monospace;
+$fonts-khmer: "Hanuman";
 
 // Legacy Bourbon Neat Variables
 ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`.
 $default-layout-direction: LTR !default;
 $layout-direction: LTR !default;
 $container-display-table: false !default;
-/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin.
-$grid-columns: 12 !default;
 /// When set to true, it sets the box-sizing property of all elements to `border-box`.
 /// @example css - CSS Output
 ///   html {
diff --git a/assets/scss/00-base/mixins/_ma-aspect-ratio.scss b/assets/scss/00-base/mixins/_ma-aspect-ratio.scss
index a8139b2af6..4c10f74b51 100644
--- a/assets/scss/00-base/mixins/_ma-aspect-ratio.scss
+++ b/assets/scss/00-base/mixins/_ma-aspect-ratio.scss
@@ -12,8 +12,6 @@
 
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @mixin ma-aspect-ratio($width, $height) {
   position: relative;
 
diff --git a/assets/scss/00-base/mixins/_ma-auto-size.scss b/assets/scss/00-base/mixins/_ma-auto-size.scss
index c955058974..2f7dbb72e4 100644
--- a/assets/scss/00-base/mixins/_ma-auto-size.scss
+++ b/assets/scss/00-base/mixins/_ma-auto-size.scss
@@ -1,7 +1,5 @@
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @mixin ma-auto-size($min, $max) {
 
   @for $i from $min through $max {
diff --git a/assets/scss/00-base/mixins/_ma-emergency-alert.scss b/assets/scss/00-base/mixins/_ma-emergency-alert.scss
index 58682615ed..31c5a5e47a 100644
--- a/assets/scss/00-base/mixins/_ma-emergency-alert.scss
+++ b/assets/scss/00-base/mixins/_ma-emergency-alert.scss
@@ -2,14 +2,14 @@
 
 @use "00-base/colors" as *;
 
-@use "functions/tint" as *;
+@use "sass:color" as *;
 
 @mixin ma-emergency-alert ($color) {
   color: $c-font-base;
-  background-color: tint($color, 90%);
+  background-color: mix(#fff, $color, 90%);
 
     & + & {
-    border-top-color: tint($color, 50%);
+    border-top-color: mix(#fff, $color, 50%);
   }
 
   .ma__emergency-alert__link {
@@ -31,7 +31,7 @@
       }
 
       svg {
-        fill: tint($c-font-base, 50%);
+        fill: mix(#fff, $c-font-base, 50%);
       }
 
       &:hover {
diff --git a/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss b/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss
index b25dbf61ec..01ceaa3f2a 100644
--- a/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss
+++ b/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss
@@ -52,13 +52,10 @@
 
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @use "private" as *;
 
-@use "shift" as *;
-
 @mixin span-columns($span: $columns of $container-columns, $display: block) {
+
   $columns: nth($span, 1);
   $container-columns: container-span($span);
 
diff --git a/assets/scss/00-base/mixins/bourbon/_clearfix.scss b/assets/scss/00-base/mixins/bourbon/_clearfix.scss
new file mode 100644
index 0000000000..91fda59331
--- /dev/null
+++ b/assets/scss/00-base/mixins/bourbon/_clearfix.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides an easy way to include a clearfix for containing floats.
+///
+/// @link https://goo.gl/yP5hiZ
+///
+/// @example scss
+///   .element {
+///     @include clearfix;
+///   }
+///
+///   // CSS Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+
+@mixin clearfix {
+
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}
diff --git a/assets/scss/01-atoms/_button-tag.scss b/assets/scss/01-atoms/_button-tag.scss
index 32d74ff9e6..52074c2bb1 100644
--- a/assets/scss/01-atoms/_button-tag.scss
+++ b/assets/scss/01-atoms/_button-tag.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__button-tag {
 
   @include ma-button-reset;
@@ -9,7 +11,7 @@
   margin-right: .25em;
   padding: 8px 11px;
   white-space: nowrap;
-  background-color: tint($c-font-link,90%);
+  background-color: mix(#fff, $c-font-link,90%);
   color: $c-font-link;
   font-weight: 700;
 
diff --git a/assets/scss/02-molecules/_callout-link.scss b/assets/scss/02-molecules/_callout-link.scss
index 481a1a0dbc..cbad09f4b4 100644
--- a/assets/scss/02-molecules/_callout-link.scss
+++ b/assets/scss/02-molecules/_callout-link.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__callout-link {
   border: 3px solid;
   display:flex;
@@ -7,8 +9,8 @@
   flex-flow: column wrap;
   justify-content: center;
   padding: 15px 20px;
-  background-color: tint($c-font-link,90%);
-  border-color: tint($c-font-link,50%);
+  background-color: mix(#fff, $c-font-link,90%);
+  border-color: mix(#fff, $c-font-link,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   @media ($bp-small-min) {
@@ -101,7 +103,7 @@
 
   &--white {
     background-color: $c-white;
-    border-color: tint($c-font-detail,70%);
+    border-color: mix(#fff, $c-font-detail,70%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
diff --git a/assets/scss/02-molecules/_emergency-alert.scss b/assets/scss/02-molecules/_emergency-alert.scss
index b3b70d803e..b4d7886fec 100644
--- a/assets/scss/02-molecules/_emergency-alert.scss
+++ b/assets/scss/02-molecules/_emergency-alert.scss
@@ -1,14 +1,16 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__emergency-alert {
-  background-color: tint($c-warning,90%);
+  background-color: mix(#fff, $c-warning,90%);
   font-size: 1.25rem;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-bottom: 0;
 
   & + & {
-    border-top: 1px solid tint($c-warning, 50%);
+    border-top: 1px solid mix(#fff, $c-warning, 50%);
   }
 
   &__time-stamp {
diff --git a/assets/scss/02-molecules/_error-list.scss b/assets/scss/02-molecules/_error-list.scss
index abda31035d..fe12e9ea57 100644
--- a/assets/scss/02-molecules/_error-list.scss
+++ b/assets/scss/02-molecules/_error-list.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__error-list {
   
   form & {
@@ -68,7 +70,7 @@
 .ma__error-list {
 
   &__container {
-    background-color: tint($c-error, 95%);
+    background-color: mix(#fff, $c-error, 95%);
     border-color: $c-bd-error;
     color: $c-font-error;
   }
diff --git a/assets/scss/02-molecules/_event-teaser.scss b/assets/scss/02-molecules/_event-teaser.scss
index 5eb71c4562..afaf80217b 100644
--- a/assets/scss/02-molecules/_event-teaser.scss
+++ b/assets/scss/02-molecules/_event-teaser.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__event-teaser {
   display: flex;
   align-items: flex-start;
@@ -134,7 +136,7 @@
   }
 
   &__graphic {
-    background-color: tint($c-primary-alt, 80%);
+    background-color: mix(#fff, $c-primary-alt, 80%);
   }
 
   &__spacer {
diff --git a/assets/scss/02-molecules/_illustrated-link.scss b/assets/scss/02-molecules/_illustrated-link.scss
index 022b81e163..2b656703bd 100644
--- a/assets/scss/02-molecules/_illustrated-link.scss
+++ b/assets/scss/02-molecules/_illustrated-link.scss
@@ -2,6 +2,8 @@ $illustrated-link-image-width: 130px;
 
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__illustrated-link {
   border: 3px solid;
   display: flex;
@@ -77,14 +79,14 @@ $illustrated-link-image-width: 130px;
 //theme
 
 .ma__illustrated-link {
-  border-color: tint($c-primary,50%);
+  border-color: mix(#fff, $c-primary,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   &__content {
-    background-color: tint($c-primary,89%);
+    background-color: mix(#fff, $c-primary,89%);
 
     &:after {
-      background-color: tint($c-primary,89%);
+      background-color: mix(#fff, $c-primary,89%);
     }
   }
 
@@ -107,6 +109,6 @@ $illustrated-link-image-width: 130px;
   }
 
   &__image {
-    background-color: tint($c-primary,50%);
+    background-color: mix(#fff, $c-primary,50%);
   }
 }
diff --git a/assets/scss/02-molecules/_tooltip.scss b/assets/scss/02-molecules/_tooltip.scss
index 992f0d1c02..f7d4dd130d 100644
--- a/assets/scss/02-molecules/_tooltip.scss
+++ b/assets/scss/02-molecules/_tooltip.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__tooltip {
 
   &__inner {
@@ -115,7 +117,7 @@
     }
 
     & > svg {
-      fill: tint($c-font-link, 50%);  
+      fill: mix(#fff, $c-font-link, 50%);  
     }
   }
 
diff --git a/assets/scss/03-organisms/_action-finder.scss b/assets/scss/03-organisms/_action-finder.scss
index b11c0efeb5..3f4aafb7b3 100644
--- a/assets/scss/03-organisms/_action-finder.scss
+++ b/assets/scss/03-organisms/_action-finder.scss
@@ -2,6 +2,8 @@ $action-finder-bp: 900px;
 
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__action-finder {
   background-size: cover;
   background-position: top center;
@@ -205,8 +207,8 @@ $action-finder-bp: 900px;
 }
 
 //theme
-$action-finder-bg-color: tint($c-primary,89%);
-$action-finder-border-color: tint($c-primary,50%);
+$action-finder-bg-color: mix(#fff, $c-primary,89%);
+$action-finder-border-color: mix(#fff, $c-primary,50%);
 
 .ma__action-finder {
 
diff --git a/assets/scss/03-organisms/_callout-alert.scss b/assets/scss/03-organisms/_callout-alert.scss
index e64edda5b6..d8eef38cba 100644
--- a/assets/scss/03-organisms/_callout-alert.scss
+++ b/assets/scss/03-organisms/_callout-alert.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__callout-alert {
 
   .pre-content > &,
@@ -82,8 +84,8 @@
   //default
 
   &__content {
-    background-color: tint($c-warning, 90%);
-    border-color: tint($c-warning, 50%);
+    background-color: mix(#fff, $c-warning, 90%);
+    border-color: mix(#fff, $c-warning, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
@@ -107,8 +109,8 @@
   //c-primary
 
   &--c-primary &__content {
-    background-color: tint($c-primary, 90%);
-    border-color: tint($c-primary, 50%);
+    background-color: mix(#fff, $c-primary, 90%);
+    border-color: mix(#fff, $c-primary, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
@@ -119,8 +121,8 @@
   //c-primary-alt
 
   &--c-primary-alt &__content {
-    background-color: tint($c-primary-alt, 90%);
-    border-color: tint($c-primary-alt, 50%);
+    background-color: mix(#fff, $c-primary-alt, 90%);
+    border-color: mix(#fff, $c-primary-alt, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
@@ -131,8 +133,8 @@
   //c-gray-dark
 
   &--c-gray-dark &__content {
-    background-color: tint($c-gray-dark, 90%);
-    border-color: tint($c-gray-dark, 50%);
+    background-color: mix(#fff, $c-gray-dark, 90%);
+    border-color: mix(#fff, $c-gray-dark, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
@@ -143,8 +145,8 @@
   //c-error-red
 
   &--c-error-red &__content {
-    background-color: tint($c-error-red, 90%);
-    border-color: tint($c-error-red, 50%);
+    background-color: mix(#fff, $c-error-red, 90%);
+    border-color: mix(#fff, $c-error-red, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
@@ -155,8 +157,8 @@
   //c-white
 
   &--c-white &__content {
-    background-color: tint($c-white, 90%);
-    border-color: tint($c-gray-dark, 50%);
+    background-color: mix(#fff, $c-white, 90%);
+    border-color: mix(#fff, $c-gray-dark, 50%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
diff --git a/assets/scss/03-organisms/_callout-message.scss b/assets/scss/03-organisms/_callout-message.scss
index 4905c1afae..07406df568 100644
--- a/assets/scss/03-organisms/_callout-message.scss
+++ b/assets/scss/03-organisms/_callout-message.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__callout-message__container {
   position: relative;
   max-width: $max-width;
@@ -18,8 +20,8 @@
   display:block;
   width: 100%;
   padding: 15px 20px;
-  background-color: tint($c-font-link,90%);
-  border-color: tint($c-font-link,50%);
+  background-color: mix(#fff, $c-font-link,90%);
+  border-color: mix(#fff, $c-font-link,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   @media ($bp-small-min) {
@@ -38,7 +40,7 @@
 
   &--white {
     background-color: $c-white;
-    border-color: tint($c-font-detail,70%);
+    border-color: mix(#fff, $c-font-detail,70%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 
diff --git a/assets/scss/03-organisms/_emergency-alerts.scss b/assets/scss/03-organisms/_emergency-alerts.scss
index 14c10bf5e2..ed64d88bcb 100644
--- a/assets/scss/03-organisms/_emergency-alerts.scss
+++ b/assets/scss/03-organisms/_emergency-alerts.scss
@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 $emergency-alerts-half-max: $max-width / 2;
 
 /* parent class should be 0px tall
@@ -71,7 +73,7 @@ $colors: (
   }
 
   &__content {
-    background-color: tint($c-warning, 90%);
+    background-color: mix(#fff, $c-warning, 90%);
 
     .js & {
       display: none;
@@ -136,7 +138,7 @@ $colors: (
       transition: background-color .5s;
 
       .is-open & {
-        background-color: tint($c-warning, 90%);
+        background-color: mix(#fff, $c-warning, 90%);
       }
 
       .ma__button-alert, .ma__button-icon--alert {
@@ -184,7 +186,7 @@ $colors: (
       }
     }
     &__content--#{$class} {
-      background-color: tint($c, 90%);
+      background-color: mix(#fff, $c, 90%);
     }
     &__header--#{$class} {
       background-color: rgba($c, 1);
@@ -192,7 +194,7 @@ $colors: (
     &__interface--#{$class} {
 
       &.open {
-       background-color: tint($c, 90%);
+       background-color: mix(#fff, $c, 90%);
       }
 
       &.closed {
diff --git a/assets/scss/03-organisms/_header.scss b/assets/scss/03-organisms/_header.scss
index 009b462d21..4a32cfdcb0 100644
--- a/assets/scss/03-organisms/_header.scss
+++ b/assets/scss/03-organisms/_header.scss
@@ -4,6 +4,8 @@ $bp-header-logo-min: "min-width: 1000px";
 
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 body {
 
   @media ($bp-header-toggle-max) {
@@ -525,8 +527,8 @@ body {
 
     a {
       font-weight: 500;
-      background-color: tint($c-font-link, 90%);
-      border-color: tint($c-font-link, 50%);
+      background-color: mix(#fff, $c-font-link, 90%);
+      border-color: mix(#fff, $c-font-link, 50%);
       box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
       color: $c-font-link;
       font-size: 1.25rem;
diff --git a/assets/scss/03-organisms/_help-tip.scss b/assets/scss/03-organisms/_help-tip.scss
index 97f8f11a2c..1dccb77f8d 100644
--- a/assets/scss/03-organisms/_help-tip.scss
+++ b/assets/scss/03-organisms/_help-tip.scss
@@ -4,6 +4,8 @@ $border-width: 1px;
 
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma_help-tip__label-a11y {
   display: none;
 }
@@ -74,7 +76,7 @@ $border-width: 1px;
       color: $c-white;
 
       svg {
-        fill: tint($c-font-link, 70%);
+        fill: mix(#fff, $c-font-link, 70%);
       }
     }