diff --git a/.eslintrc b/.eslintrc
index 04a96a6..c06d5c7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,7 +10,6 @@
       "modules": true
     }
   },
-  "extends": ["eslint:recommended"],
   "ignorePatterns": ["!.*", "**/node_modules/**/*"],
   "plugins": ["unused-imports"],
   "rules": {
diff --git a/readme.md b/readme.md
index 9fa60a2..ce180ad 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,7 @@
 # KNI SCSS
 
+Note: 2.0 is a very breaking change and should NOT be upgraded. Only use it for a fresh build.
+
 Our css starter pack and folder structure. The purpose of this repo is to have a single source of truth for all css used across, react, wordpress, static, or any future sites. When spinning up a new repo, please make sure it's using the latest version of this `scss` folder..
 
 ### Install
@@ -40,7 +42,7 @@ body {
   padding: 0 5%;
 
   @media (min-width: #{$tp}px) {
-    padding: 0 15vw;
+    padding: 0 15pxv;
   }
 }
 ```
@@ -54,83 +56,8 @@ Designs will have both portrait (mobile) designs and (desktop) designs delivered
 
 ### Scale Everything
 
-We're introducing a new `vw()` function which takes these sizes into account.
-
-Input:
-
-```scss
-div {
-  width: vw(320px);
-}
-```
-
-Output:
-
-```scss
-div {
-  width: 2.34375vw;
-}
-```
-
-The output becomes a flexible vw unit that changes as browser resizes. At `$siteBasis--mobile`(375px) and `siteBasis--desktop`(1280px) it should match up exactly to the comp.
-
-Use the pixel sizes you see in Figma and wrap them in this function everywhere. The exception is if you want to use actual pixels, then use `px` or `rem(px)` and it will output fixed pixel sizes.
-
-Many times you'll only need `vw()` for desktop applications (then mobile gets something like 100%), but because mobile and desktop use different `siteBasis` vars, mobile usages will need the optional mobile argument:
-
-Input:
-
-```scss
-div {
-  width: vw(30px, mobile);
-
-  @media (min-width: #{$tl}px) {
-    width:vw(30px);
-  }
-```
-
-Output:
-
-```scss
-div {
-  width: 2.34375vw;
-
-  @media (min-width: #{$tl}px) {
-    width: 2.34375vw;
-  }
-```
+pxv writeup here
 
 ### Fluid Typography
 
-We have 2 mixins to help with Fluid Typography.
-
-#### fluidType()
-
-Base mixin:
-
-```scss
-.item {
-  @include fluidType($minFontSize, $maxFontSize, $minWidth, $maxWidth);
-}
-```
-
-#### setType()
-
-This is superset of fluidType that should be used in most cases, and is great for Figma matching. Use this for fully responsive type automation. In most cases you only need to provide 2 arguments: The mobile size and the desktop size. **Note** these values are not the same as `fluidType`.
-
-```scss
-h1 {
-  @include setType(32, 48);
-}
-```
-
-Sometimes for smaller fonts you want to override the smallest size that it can go. In this case pass in the `$minClamp` argument which is the percentage the minimum font size should be compared to default size. Set it to `100%` to have it not scale any smaller than default size.
-
-```scss
-p {
-  @include setType(14, 16, $minClamp: 94%);
-}
-.eyebrow {
-  @include setType(11, 13, 100%);
-}
-```
+new responsive type writeup here
diff --git a/scss/01-config/01-variables/_01-breakpoints.scss b/scss/01-config/01-variables/_01-breakpoints.scss
index 87be55a..8ea110d 100644
--- a/scss/01-config/01-variables/_01-breakpoints.scss
+++ b/scss/01-config/01-variables/_01-breakpoints.scss
@@ -19,9 +19,36 @@ $minContentWidth: $ms !default;
 $maxContentWidth: $ds !default;
 $maxFormWidth: $tm !default;
 $maxReaderWidth: $tm !default;
-$siteMin: $ms !default;
-$siteMin--desktop: $tl !default;
-$siteBasis--mobile: $mm !default;
-$siteBasis--desktop: $dm !default;
-$siteMax--mobile: $tm !default;
-$siteMax--desktop: $dl !default;
+
+// Default breakpoint. Can add more per project!
+* {
+  --emBase: 16;
+  --mobileMin: #{$ms};
+  --mobile: #{$mm};
+  --mobileMax: #{$ts};
+  --desktopMin: #{$tl};
+  --desktop: #{$dm};
+  --desktopMax: #{$dxl};
+  --siteMin: var(--mobileMin);
+  --siteBasis: var(--mobile);
+  --siteMax: var(--mobileMax);
+
+  @media (min-width: #{$tl}px) {
+    --siteMin: var(--desktopMin);
+    --siteBasis: var(--desktop);
+    --siteMax: var(--desktopMax);
+  }
+}
+
+// MQ shortcuts
+@mixin desktop {
+  @media (min-width: #{$tl}px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$ml + 1}px) and (max-width: #{$tl}px) {
+    @content;
+  }
+}
diff --git a/scss/01-config/02-functions/_index.scss b/scss/01-config/02-functions/_index.scss
index 0f72740..0de99cf 100644
--- a/scss/01-config/02-functions/_index.scss
+++ b/scss/01-config/02-functions/_index.scss
@@ -24,33 +24,4 @@
   @return #{$em * $emBase}px;
 }
 
-@function vw($px, $range: desktop) {
-  $basis: 0;
-  $max: 0;
-
-  @if $range == desktop {
-    $basis: $siteBasis--desktop;
-    $max: $siteMax--desktop;
-  } @else if $range == mobile {
-    $basis: $siteBasis--mobile;
-    $max: $siteMax--mobile;
-  }
-
-  @if $basis != 0 and $max != 0 and $px > 0 {
-    @return clamp(
-      1px,
-      #{removeUnit($px) * math.div(100, $basis)}vw,
-      #{math.div((removeUnit($px) * $max), $basis)}px
-    );
-
-    // reverse clamp for negative numbers
-  } @else if $basis != 0 and $max != 0 and $px < 0 {
-    @return clamp(
-      #{math.div((removeUnit($px) * $max), $basis)}px,
-      #{removeUnit($px) * math.div(100, $basis)}vw,
-      -1px
-    );
-  } @else {
-    @error 'Error in vw: $basis and $max must not be equal to zero. $basis: #{$basis}, $max: #{$max}';
-  }
-}
+// rip vw()
diff --git a/scss/01-config/03-mixins/_01-type.scss b/scss/01-config/03-mixins/_01-type.scss
index f85acaf..9ca9bb0 100644
--- a/scss/01-config/03-mixins/_01-type.scss
+++ b/scss/01-config/03-mixins/_01-type.scss
@@ -1,189 +1,2 @@
-@use 'sass:math';
-
-@mixin fluidType(
-  $minFontSize: $baseMinFontSize,
-  $maxFontSize: $baseMaxFontSize,
-  $minWidth: $minContentWidth,
-  $maxWidth: $maxContentWidth,
-  $minBreakpoint: true,
-  $midBreakpoint: true,
-  $maxBreakpoint: true
-) {
-  @if $midBreakpoint {
-    font-size: calc(
-      #{rem($minFontSize)} +
-        (#{$maxFontSize} - #{$minFontSize}) *
-        ((100vw - #{$minWidth}px) / (#{$maxWidth} - #{$minWidth}))
-    );
-  }
-
-  @if $minBreakpoint {
-    @media (max-width: #{$minWidth}px) {
-      font-size: rem($minFontSize);
-    }
-  }
-
-  @if $maxBreakpoint {
-    @media (min-width: #{$maxWidth}px) {
-      font-size: rem($maxFontSize);
-    }
-  }
-}
-
-@mixin setType($fontSize--mobile, $fontSize--desktop, $minClamp: false) {
-  $fontSize--mobile-small: math.div(
-    ($fontSize--mobile * $siteMin),
-    $siteBasis--mobile
-  );
-  $fontSize--mobile-large: math.div(
-    ($fontSize--mobile * $siteMax--mobile),
-    $siteBasis--mobile
-  );
-  $fontSize--desktop-small: math.div(
-    ($fontSize--desktop * $siteMin--desktop),
-    $siteBasis--desktop
-  );
-  $fontSize--desktop-large: math.div(
-    ($fontSize--desktop * $siteMax--desktop),
-    $siteBasis--desktop
-  );
-  $minMobileClamp: $fontSize--mobile-small;
-  $minDesktopClamp: $fontSize--desktop-small;
-
-  @if $minClamp {
-    $minMobileClamp: $fontSize--mobile * math.div($minClamp, 100%);
-    $minDesktopClamp: $fontSize--desktop * math.div($minClamp, 100%);
-  }
-
-  // $siteMin to $siteMax--mobile
-  @include fluidType(
-    $minFontSize: $fontSize--mobile-small,
-    $maxFontSize: $fontSize--mobile-large,
-    $minWidth: $siteMin,
-    $maxWidth: $siteMax--mobile,
-    $maxBreakpoint: false
-  );
-
-  // below $siteMin
-  @media (min-width: 1px) and (max-width: #{($siteMin)}px) {
-    font-size: rem($minMobileClamp);
-  }
-
-  // minClamp rules
-  @if $minClamp {
-    font-size: rem($minMobileClamp);
-
-    @media (min-width: #{$siteBasis--mobile + 1}px) and (max-width: #{($siteMax--mobile - 1)}px) {
-      @include fluidType(
-        $minFontSize: $minMobileClamp,
-        $maxFontSize: $fontSize--mobile-large,
-        $minWidth: $siteBasis--mobile,
-        $maxWidth: $siteMax--mobile,
-        $maxBreakpoint: false
-      );
-    }
-  }
-
-  // lock size at $siteMax--mobile (tablet) until $siteMin--desktop
-  @media (min-width: #{$siteMax--mobile}px) {
-    font-size: rem($minDesktopClamp);
-  }
-
-  // $siteMin--desktop to $siteMax--desktop
-  @media (min-width: #{$siteMin--desktop}px) {
-    @include fluidType(
-      $minFontSize: $fontSize--desktop-small,
-      $maxFontSize: $fontSize--desktop-large,
-      $minWidth: $siteMin--desktop,
-      $maxWidth: $siteMax--desktop,
-      $minBreakpoint: false,
-      $maxBreakpoint: false
-    );
-  }
-
-  // Desktop minClamp rules
-  @if $minClamp {
-    // $siteMin--desktop to $siteBasis--desktop
-    @media (min-width: #{$siteMin--desktop}px) and (max-width: #{$siteBasis--desktop - 1}px) {
-      @include fluidType(
-        $minFontSize: $minDesktopClamp,
-        $maxFontSize: $fontSize--desktop,
-        $minWidth: $siteMin--desktop,
-        $maxWidth: $siteBasis--desktop,
-        $minBreakpoint: false,
-        $maxBreakpoint: false
-      );
-    }
-  }
-
-  // $siteMax--desktop and above
-  @include fluidType(
-    $minFontSize: $minDesktopClamp,
-    $maxFontSize: $fontSize--desktop-large,
-    $minWidth: $siteMin--desktop,
-    $maxWidth: $siteMax--desktop,
-    $minBreakpoint: false,
-    $midBreakpoint: false
-  );
-}
-
-@mixin h {
-  font-family: $headingFontStack;
-  font-weight: $headingFont-bold;
-  color: $black;
-  line-height: 1.1em;
-}
-
-@mixin h1 {
-  @include setType(32, 48);
-}
-
-@mixin h2 {
-  @include setType(26, 40);
-}
-
-@mixin h3 {
-  @include setType(22, 33);
-}
-
-@mixin h4 {
-  @include setType(20, 27);
-}
-
-@mixin h5 {
-  @include setType(18, 23);
-}
-
-@mixin h6 {
-  @include setType(16, 20);
-}
-
-@mixin p--xxs {
-  @include setType(10, 10, 100%);
-}
-
-@mixin p--xs {
-  @include setType(10, 12, 100%);
-}
-
-@mixin p--sm {
-  @include setType(12, 14, 100%);
-}
-
-@mixin p {
-  color: $gray-200;
-  line-height: 1.4;
-  @include setType(14, 16, 95%);
-}
-
-@mixin p--lg {
-  @include setType(16, 18, 100%);
-}
-
-@mixin p--xl {
-  @include setType(18, 20, 100%);
-}
-
-@mixin p--xxl {
-  @include setType(20, 22, 100%);
-}
+// nothing to see here.
+// Fluid Type and setType are now deprecated. See 02-base/type
diff --git a/scss/02-base/04-type/_index.scss b/scss/02-base/04-type/_index.scss
index 880c59c..192afa1 100644
--- a/scss/02-base/04-type/_index.scss
+++ b/scss/02-base/04-type/_index.scss
@@ -1,75 +1,64 @@
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  @include h;
-}
+// enable Fluid Type for all type-based html elements
 
+tt,
+i,
+b,
+big,
+small,
+em,
+strong,
+dfn,
+code,
+samp,
+kbd,
+var,
+cite,
+abbr,
+acronym,
+sub,
+sup,
+span,
+bdo,
+address,
+div,
+a,
+object,
+p,
 h1,
-.h1 {
-  @include h1;
-}
-
 h2,
-.h2 {
-  @include h2;
-}
-
 h3,
-.h3 {
-  @include h3;
-}
-
 h4,
-.h4 {
-  @include h4;
-}
-
 h5,
-.h5 {
-  @include h5;
-}
-
 h6,
-.h6 {
-  @include h6;
-}
-
-p,
-.p {
-  @include p;
-}
-
-.p {
-  &--xxs {
-    @include p--xxs;
-  }
-
-  &--xs {
-    @include p--xs;
-  }
-
-  &--sm {
-    @include p--sm;
-  }
-
-  &--lg {
-    @include p--lg;
-  }
-
-  &--xl {
-    @include p--xl;
-  }
+pre,
+q,
+ins,
+del,
+dt,
+dd,
+li,
+label,
+option,
+textarea,
+fieldset,
+legend,
+button,
+caption,
+td,
+th,
+title,
+blockquote {
+  --fontSizeMin: calc(var(--fontSize) * var(--siteMin) / var(--siteBasis));
+  --fontSizeMax: calc(var(--fontSize) * var(--siteMax) / var(--siteBasis));
+  --fontSizeMinClamp: var(--fontSizeMin);
 
-  &--xxl {
-    @include p--xxl;
-  }
+  font-size: clamp(
+    calc(var(--fontSizeMinClamp) * 1px),
+    calc(
+      (var(--fontSizeMin) / var(--emBase)) * 1rem +
+        (var(--fontSizeMax) - var(--fontSizeMin)) *
+        (100vw - var(--siteMin) * 1px) / (var(--siteMax) - var(--siteMin))
+    ),
+    calc(var(--fontSizeMax) * 1px)
+  );
 }
diff --git a/test/test.scss b/test/test.scss
index b8ec11d..764f9e3 100644
--- a/test/test.scss
+++ b/test/test.scss
@@ -48,8 +48,6 @@ code {
   font-weight: 500;
   line-height: 1.3;
   width: 100%;
-
-  @include setType(14, 14, 100%);
 }
 
 #width {
@@ -65,7 +63,7 @@ code {
     font-size: rem(24);
   }
 
-  @media (min-width: 1px) and (max-width: #{($siteBasis--mobile - 1)}px) {
+  @media (min-width: 1px) and (max-width: #{($mm - 1)}px) {
     background: lightseagreen;
 
     &::before {
@@ -191,8 +189,6 @@ code {
     margin: vw(2px) vw(3px);
 
     &::before {
-      @include h6;
-
       content: 'asdfsf';
     }
   }
@@ -200,8 +196,6 @@ code {
 
 .test .btn {
   display: inline-block;
-  @include p;
-
   border-radius: 9999px;
   text-decoration: none;
   font-weight: 600;
@@ -247,3 +241,89 @@ code {
   margin-left: vw(-30px);
   padding: vw(10px);
 }
+
+%h-xxl {
+  --fontSize: 38;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 50;
+  }
+}
+
+%h-xl {
+  --fontSize: 33;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 43;
+  }
+}
+
+%h-l {
+  --fontSize: 28;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 35;
+  }
+}
+
+%h-m {
+  --fontSize: 24;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 29;
+  }
+}
+
+%h-s {
+  --fontSize: 21;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 24;
+  }
+}
+
+%h-xs {
+  --fontSize: 18;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 20;
+  }
+}
+
+%body-l {
+  --fontSize: 16;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 18;
+  }
+}
+
+%body-m {
+  --fontSize: 14;
+  --fontSizeMinClamp: 12;
+  @media (min-width: #{$tl}px) {
+    --fontSize: 16;
+    --fontSizeMinClamp: 14;
+  }
+}
+
+h1 {
+  @extend %h-xxl;
+}
+
+h2 {
+  @extend %h-xl;
+}
+
+h3 {
+  @extend %h-l;
+}
+
+h4 {
+  @extend %h-m;
+}
+
+h5 {
+  @extend %h-s;
+}
+
+h6 {
+  @extend %h-xs;
+}
+
+p {
+  @extend %body-m;
+}