diff --git a/apps/docs-app/src/_teradata-branding.scss b/apps/docs-app/src/_teradata-branding.scss
index f45320d168..118616494f 100644
--- a/apps/docs-app/src/_teradata-branding.scss
+++ b/apps/docs-app/src/_teradata-branding.scss
@@ -5,16 +5,15 @@
 // Customer Teradata brand palette
 // Custom orange contrast
 $td-orange: (
-  50: #fce3db,
-  100: #fce3db,
-  200: #fac7b7,
-  300: #fac7b7,
-  400: #f7aa93,
-  500: #f7aa93,
-  600: #f58e6f,
-  700: #f58e6f,
-  800: #f3753f,
-  900: #f3753f,
+  100: #ffcfb3,
+  200: #ffaf81,
+  300: #ff8f4e,
+  400: #ff7728,
+  500: #ff5f02,
+  600: #f05800,
+  700: #e54900,
+  800: #d83b03,
+  900: #c23200,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
@@ -29,27 +28,49 @@ $td-orange: (
   ),
 );
 $td-slate: (
-  50: #d8dbdc,
-  100: #d8dbdc,
-  200: #b0b6b9,
-  300: #b0b6b9,
-  400: #899296,
-  500: #899296,
-  600: #616d73,
-  700: #616d73,
-  800: #394851,
+  50: #e3e7e8,
+  100: #c9cfd1,
+  200: #afb6b9,
+  300: #959ea2,
+  400: #7b858a,
+  500: #616d73,
+  600: #57646b,
+  700: #4d5b62,
+  800: #43515a,
   900: #394851,
+  1000: #2e3d42,
+  1100: #28353b,
+  1200: #222e33,
+  1300: #1f282e,
+  1400: #1a2126,
+  1500: #161c1f,
+  1600: #14171a,
+  1700: #101314,
+  1800: #0c0e0f,
+  1900: #060708,
+  2000: #020203,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
     200: $black-87-opacity,
     300: $black-87-opacity,
     400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: white,
-    700: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
     800: $white-87-opacity,
     900: $white-87-opacity,
+    1000: $white-87-opacity,
+    1100: $white-87-opacity,
+    1200: $white-87-opacity,
+    1300: $white-87-opacity,
+    1400: $white-87-opacity,
+    1500: $white-87-opacity,
+    1600: $white-87-opacity,
+    1700: $white-87-opacity,
+    1800: $white-87-opacity,
+    1900: $white-87-opacity,
+    2000: $white-87-opacity,
   ),
 );
 $td-yellow: (
@@ -87,6 +108,17 @@ $td-teal: (
   700: #009392,
   800: #008383,
   900: #007373,
+  1000: #016b6b,
+  1100: #036464,
+  1200: #045c5c,
+  1300: #055454,
+  1400: #074d4d,
+  1500: #084545,
+  1600: #0a3e3e,
+  1700: #0b3636,
+  1800: #0c2e2e,
+  1900: #0e2727,
+  2000: #0f1f1f,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
@@ -96,8 +128,19 @@ $td-teal: (
     500: $black-87-opacity,
     600: $black-87-opacity,
     700: $black-87-opacity,
-    800: white,
-    900: white,
+    800: $black-87-opacity,
+    900: $white-87-opacity,
+    1000: $white-87-opacity,
+    1100: $white-87-opacity,
+    1200: $white-87-opacity,
+    1300: $white-87-opacity,
+    1400: $white-87-opacity,
+    1500: $white-87-opacity,
+    1600: $white-87-opacity,
+    1700: $white-87-opacity,
+    1800: $white-87-opacity,
+    1900: $white-87-opacity,
+    2000: $white-87-opacity,
   ),
 );
 $td-blue: (
@@ -162,6 +205,142 @@ $td-emphasis2: (
   background-dark: mat-color($mat-blue-grey, 200),
 );
 
+// Background palette for light themes.
+$td-light-theme-background: (
+  status-bar: mat-color($mat-grey, 300),
+  app-bar: mat-color($mat-grey, 50),
+  background: mat-color($mat-grey, 100),
+  canvas: mat-color($mat-grey, 200),
+  card: white /*** card color = surface color ***/,
+  dialog: white,
+  hover: rgba(0, 0, 0, 0.04),
+  disabled-button: rgba(mat-color($mat-grey, 400), 0.1),
+  raised-button: white,
+  focused-button: rgba(0, 0, 0, 0.12),
+  selected-button: #e0e0e0,
+  selected-disabled-button: #bdbdbd,
+  disabled-button-toggle: #eeeeee,
+  unselected-chip: mat-color($mat-grey, 400),
+  disabled-list-option: #eeeeee,
+  tooltip: #616161,
+  overlay: rgba(#000000, 0.4),
+  accent: mat-color($td-teal, 200),
+  accent-highlight: rgba(mat-color($td-teal, 200), 0.1),
+  accent-highlight-hover: rgba(mat-color($td-teal, 200), 0.2),
+  emphasis: mat-color($mat-blue-grey, 200),
+  emphasis-highlight: rgba(mat-color($mat-blue-grey, 200), 0.1),
+  emphasis-highlight-hover: rgba(mat-color($mat-blue-grey, 200), 0.2),
+  caution: mat-color($mat-orange, 300),
+  caution-highlight: rgba(mat-color($mat-orange, 300), 0.1),
+  caution-highlight-hover: rgba(mat-color($mat-orange, 300), 0.2),
+  negative: mat-color($mat-red, 300),
+  negative-highlight: rgba(mat-color($mat-red, 300), 0.1),
+  negative-highlight-hover: rgba(mat-color($mat-red, 300), 0.2),
+  neutral: mat-color($mat-grey, 400),
+  neutral-highlight: rgba(mat-color($mat-grey, 400), 0.04),
+  neutral-highlight-hover: rgba(mat-color($mat-grey, 400), 0.08),
+  positive: mat-color($mat-green, 200),
+  positive-highlight: rgba(mat-color($mat-green, 200), 0.1),
+  positive-highlight-hover: rgba(mat-color($mat-green, 200), 0.2),
+  primary: mat-color($td-slate, 200),
+  primary-highlight: rgba(mat-color($td-slate, 500), 0.04),
+  primary-highlight-hover: rgba(mat-color($td-slate, 500), 0.08),
+);
+
+// Foreground palette for light themes.
+$td-light-theme-foreground: (
+  base: black,
+  divider: $dark-dividers,
+  dividers: $dark-dividers,
+  disabled: $dark-disabled-text,
+  disabled-button: rgba(black, 0.26),
+  disabled-text: $dark-disabled-text,
+  elevation: black,
+  hint-text: $dark-disabled-text,
+  secondary-text: $dark-secondary-text,
+  icon: rgba(black, 0.54),
+  icons: rgba(black, 0.54),
+  text: rgba(black, 0.87),
+  slider-min: rgba(black, 0.87),
+  slider-off: rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38),
+  accent: mat-color($td-teal, 900),
+  emphasis: mat-color($mat-blue-grey, 600),
+  caution: mat-color($mat-amber, 800),
+  negative: mat-color($mat-red, 900),
+  neutral: mat-color($mat-grey, 400),
+  positive: mat-color($mat-green, 700),
+  primary: mat-color($td-slate, 800),
+);
+
+// Background palette for dark themes.
+$td-dark-theme-background: (
+  status-bar: black,
+  app-bar: mat-color($td-slate, 1300),
+  background: mat-color($td-slate, 1500),
+  canvas: mat-color($td-slate, 1700),
+  card: mat-color($td-slate, 1100) /*** card color = surface color ***/,
+  dialog: mat-color($td-slate, 1100),
+  hover: rgba(255, 255, 255, 0.04),
+  disabled-button: rgba(mat-color($td-slate, 800), 0.4),
+  raised-button: mat-color($td-slate, 800),
+  focused-button: rgba(255, 255, 255, 0.12),
+  selected-button: #212121,
+  selected-disabled-button: mat-color($td-slate, 800),
+  disabled-button-toggle: black,
+  unselected-chip: mat-color($td-slate, 800),
+  disabled-list-option: black,
+  tooltip: #616161,
+  overlay: rgba(0, 0, 0, 0.4),
+  accent: mat-color($td-teal, 1200),
+  accent-highlight: rgba(mat-color($td-teal, 1200), 0.4),
+  accent-highlight-hover: rgba(mat-color($td-teal, 1200), 0.6),
+  emphasis: #4f5558,
+  emphasis-highlight: rgba(mat-color($td-slate, 200), 0.4),
+  emphasis-highlight-hover: rgba(mat-color($td-slate, 200), 0.6),
+  caution: #704c16,
+  caution-highlight: rgba(#704c16, 0.4),
+  caution-highlight-hover: rgba(#704c16, 0.6),
+  negative: #883e32,
+  negative-highlight: rgba(#883e32, 0.4),
+  negative-highlight-hover: rgba(#883e32, 0.6),
+  neutral: mat-color($td-slate, 800),
+  neutral-highlight: rgba(mat-color($td-slate, 800), 0.4),
+  neutral-highlight-hover: rgba(mat-color($td-slate, 800), 0.6),
+  positive: #336033,
+  positive-highlight: rgba(#336033, 0.4),
+  positive-highlight-hover: rgba(#336033, 0.6),
+  primary: mat-color($td-slate, 900),
+  primary-highlight: rgba(mat-color($td-slate, 900), 0.4),
+  primary-highlight-hover: rgba(mat-color($td-slate, 900), 0.6),
+);
+
+// Foreground palette for dark themes.
+$td-dark-theme-foreground: (
+  base: white,
+  divider: $light-dividers,
+  dividers: $light-dividers,
+  disabled: $light-disabled-text,
+  disabled-button: rgba(white, 0.3),
+  disabled-text: $light-disabled-text,
+  elevation: black,
+  hint-text: $light-disabled-text,
+  secondary-text: $light-secondary-text,
+  icon: white,
+  icons: white,
+  text: white,
+  slider-min: white,
+  slider-off: rgba(white, 0.3),
+  slider-off-active: rgba(white, 0.3),
+  accent: mat-color($td-teal, 300),
+  emphasis: mat-color($mat-blue-grey, 200),
+  caution: mat-color($mat-orange, 300),
+  negative: mat-color($mat-red, 400),
+  neutral: rgba(white, 0.87),
+  positive: mat-color($mat-green, 300),
+  primary: mat-color($td-slate, 200),
+);
+
 body {
   // Slate
   .bgc-td-slate,
diff --git a/apps/docs-app/src/app/components/home/home.component.html b/apps/docs-app/src/app/components/home/home.component.html
index 148921cf80..53e4bc345a 100644
--- a/apps/docs-app/src/app/components/home/home.component.html
+++ b/apps/docs-app/src/app/components/home/home.component.html
@@ -26,9 +26,7 @@
                     hide-gt-sm
                   ></mat-icon>
                   <div class="text-center">
-                    <h3
-                      class="pull-bottom-xs mat-title tc-td-teal mat-headline"
-                    >
+                    <h3 class="pull-bottom-xs mat-title mat-headline">
                       Covalent
                     </h3>
                     <h1
@@ -155,7 +153,9 @@ <h3 matListItemTitle>{{ item.title }}</h3>
                       {{ item.title }}
                     </div>
                   </div>
-                  <div class="mat-subtitle-1 text-wrap text-left tc-td-secondary">
+                  <div
+                    class="mat-subtitle-1 text-wrap text-left tc-td-secondary"
+                  >
                     {{ item.description }}
                   </div>
                 </a>
@@ -166,7 +166,7 @@ <h3 matListItemTitle>{{ item.title }}</h3>
         </div>
       </div>
     </section>
-    <section class="bgc-white tc-white">
+    <section>
       <div layout="row" layout-align="center center">
         <div class="max-width">
           <div layout="row" class="pad-top pad-bottom">
@@ -180,7 +180,9 @@ <h3 matListItemTitle>{{ item.title }}</h3>
                   <mat-icon>favorite</mat-icon>
                   on Angular
                 </h2>
-                <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
+                <h3
+                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
+                >
                   Teradata is acvtively commited to Angular. Our entire product
                   suite is built or revamped on Angular.
                 </h3>
@@ -212,7 +214,7 @@ <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
       </div>
     </section>
 
-    <section class="bgc-white tc-white">
+    <section>
       <div layout="row" layout-align="center center">
         <div class="max-width">
           <div layout="row" class="pad-top pad-bottom">
@@ -224,7 +226,9 @@ <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
                 >
                   Following the Material Design spec
                 </h2>
-                <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
+                <h3
+                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
+                >
                   Covalent follows the Material Design specification as closely
                   as possible through the construction of all components.
                 </h3>
diff --git a/apps/docs-app/src/app/content/docs/theme/theme.component.ts b/apps/docs-app/src/app/content/docs/theme/theme.component.ts
index 9f8b9a2123..1900b13af0 100644
--- a/apps/docs-app/src/app/content/docs/theme/theme.component.ts
+++ b/apps/docs-app/src/app/content/docs/theme/theme.component.ts
@@ -21,7 +21,7 @@ export class ThemeComponent {
   // Define a custom typography config that overrides the font-family
   // or any typography level.
   $typography: mat.define-typography-config(
-    $font-family: 'Roboto, monospace',
+    $font-family: 'Inter, monospace',
     $headline: mat.define-typography-level(32px, 48px, 700)
   );
   
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html
index 4a9514f3ce..b526db7644 100644
--- a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html
+++ b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html
@@ -23,7 +23,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
 
   <a
     mat-raised-button
-    color="none"
+    color="primary"
     href="https://angular.io/guide/animations"
     target="_blank"
     class="text-upper push-top-sm"
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html
index dc1f578be4..7d13f241c5 100644
--- a/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html
+++ b/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html
@@ -13,7 +13,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
   </td-highlight>
   <a
     mat-raised-button
-    color="none"
+    color="primary"
     href="https://angular.io/docs/ts/latest/guide/attribute-directives.html"
     target="_blank"
     class="text-upper push-top-sm"
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.html
index 6fc7b26dd8..26f603c976 100644
--- a/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.html
+++ b/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.html
@@ -38,7 +38,7 @@ <h3 class="mat-title">copyToClipboard</h3>
         </form>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doCopyToClipboard()"
           class="text-upper push-sm"
         >
@@ -81,7 +81,7 @@ <h4>Input CSV:</h4>
         <td-highlight [content]="csv"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doConvertCSVToJSON()"
           class="text-upper push-top-sm"
         >
@@ -98,7 +98,7 @@ <h4>Input Objects:</h4>
         <td-highlight [content]="objectsString"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doConvertObjectsToCSV()"
           class="text-upper push-top-sm"
         >
@@ -141,7 +141,7 @@ <h4>CSV:</h4>
         <td-highlight [content]="csv"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doDownloadCSV()"
           class="text-upper push-top-sm"
         >
@@ -156,7 +156,7 @@ <h4>JSON:</h4>
         <td-highlight [content]="json"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doDownloadJSON()"
           class="text-upper push-top-sm"
         >
@@ -172,7 +172,7 @@ <h4>Objects:</h4>
         <td-highlight [content]="objectsString"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doDownloadObjectsToCSV()"
           class="text-upper push-top-sm"
         >
@@ -187,7 +187,7 @@ <h4>Objects:</h4>
         <td-highlight [content]="objectsString"></td-highlight>
         <button
           mat-raised-button
-          color="none"
+          color="primary"
           (click)="doDownloadObjectsToJSON()"
           class="text-upper push-top-sm"
         >
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.ts b/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.ts
index e53798897f..db0948a09c 100644
--- a/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.ts
+++ b/apps/docs-app/src/app/content/utilities/utilities-demos/functions/functions.component.ts
@@ -45,7 +45,7 @@ export class FunctionsDemoComponent {
       </mat-form-field>
     </div>
   </form>
-  <button mat-raised-button color="none" (click)="doCopyToClipboard()" class="text-upper">
+  <button mat-raised-button color="primary" (click)="doCopyToClipboard()" class="text-upper">
     Copy To Clipboard
   </button>
   `;
@@ -66,14 +66,14 @@ export class FunctionsDemoComponent {
   convertCodeHtml = `
   <h4>Input CSV:</h4> 
   <td-highlight [content]="csv"></td-highlight>
-  <button mat-raised-button color="none" (click)="doConvertCSVToJSON()" class="text-upper push-top-sm">
+  <button mat-raised-button color="primary" (click)="doConvertCSVToJSON()" class="text-upper push-top-sm">
     Convert CSV
   </button>
   <h4>Output JSON:</h4>
   <td-highlight [content]="jsonOutput"></td-highlight> 
   <h4>Input Objects:</h4> 
   <td-highlight [content]="objectsString"></td-highlight>
-  <button mat-raised-button color="none" (click)="doConvertObjectsToCSV()" class="text-upper push-top-sm">
+  <button mat-raised-button color="primary" (click)="doConvertObjectsToCSV()" class="text-upper push-top-sm">
     Convert Objects
   </button>
   <h4>Output CSV:</h4>
@@ -118,22 +118,22 @@ export class FunctionsDemoComponent {
   downloadCodeHtml = `
   <h4>CSV:</h4> 
   <td-highlight [content]="csv"></td-highlight> 
-  <button mat-raised-button color="none" (click)="doDownloadCSV()" class="text-upper push-top-sm">
+  <button mat-raised-button color="primary" (click)="doDownloadCSV()" class="text-upper push-top-sm">
     Download CSV
   </button> 
   <h4>JSON:</h4>
   <td-highlight [content]="json"></td-highlight> 
-  <button mat-raised-button color="none" (click)="doDownloadJSON()" class="text-upper push-top-sm">
+  <button mat-raised-button color="primary" (click)="doDownloadJSON()" class="text-upper push-top-sm">
     Download JSON
   </button> 
   <h4>Objects:</h4> 
   <td-highlight [content]="objectsString"></td-highlight> 
-  <button mat-raied-button color="none" (click)="doDownloadObjectsToCSV()" class="text-upper push-top-sm">
+  <button mat-raied-button color="primary" (click)="doDownloadObjectsToCSV()" class="text-upper push-top-sm">
     Download To CSV
   </button> 
   <h4>Objects:</h4>
   <td-highlight [content]="objectsString"></td-highlight> 
-  <button mat-raised-button color="none" (click)="doDownloadObjectsToJSON()" class="text-upper push-top-sm"> 
+  <button mat-raised-button color="primary" (click)="doDownloadObjectsToJSON()" class="text-upper push-top-sm"> 
     Download To JSON
   </button> 
   <form> 
@@ -149,7 +149,7 @@ export class FunctionsDemoComponent {
       </mat-form-field>
     </div> 
   </form>
-  <button mat-raised-button color="none" (click)="doDownloadFile()" class="text-upper"> 
+  <button mat-raised-button color="primary" (click)="doDownloadFile()" class="text-upper"> 
     Download
   </button>
   `;
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html
index 1af3d88913..5a92a951e2 100644
--- a/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html
+++ b/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html
@@ -16,7 +16,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
 
   <a
     mat-raised-button
-    color="none"
+    color="primary"
     href="https://angular.io/docs/ts/latest/guide/pipes.html"
     target="_blank"
     class="text-upper push-top-sm"
diff --git a/apps/docs-app/src/assets/icons/covalent.svg b/apps/docs-app/src/assets/icons/covalent.svg
index 361808bc23..be3f402be7 100644
--- a/apps/docs-app/src/assets/icons/covalent.svg
+++ b/apps/docs-app/src/assets/icons/covalent.svg
@@ -7,7 +7,7 @@
         <g id="covalent-inner">
             <g id="Group-2" transform="translate(36.000000, 2.000000)">
                 <polygon id="Polygon-1" fill="#F78E6A" points="220.217795 0 440.43559 127.142803 425.397194 381.42841 220.217795 508.571213 13.6712692 381.42841 -3.60176777e-16 127.142803"></polygon>
-                <path d="M220.267949,0.0289565105 L440.43559,127.142803 L425.397194,381.42841 L220.267949,508.540134 L220.267949,0.0289565105 Z" id="Combined-Shape" fill="#F67435"></path>
+                <path d="M220.267949,0.0289565105 L440.43559,127.142803 L425.397194,381.42841 L220.267949,508.540134 L220.267949,0.0289565105 Z" id="Combined-Shape" fill="#FF5F02"></path>
             </g>
             <g id="Group-3" transform="translate(72.800003, 44.000000)">
                 <path d="M183.5,0 L367,106 L354.469016,318 L183.5,424 L11.3918037,318 L4.47018738e-14,106 L183.5,0 Z M183.5,21.1640078 L18.3188464,116.582004 L29.7106501,307.417996 L183.5,402.835992 L337.28935,307.417996 L348.681154,116.582004 L183.5,21.1640078 Z" id="Combined-Shape" fill="#FFFFFF"></path>
diff --git a/apps/docs-app/src/assets/icons/teradata.svg b/apps/docs-app/src/assets/icons/teradata.svg
index b6e8c4a0ea..5348bad4dc 100644
--- a/apps/docs-app/src/assets/icons/teradata.svg
+++ b/apps/docs-app/src/assets/icons/teradata.svg
@@ -1,19 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="696px" height="133px" viewBox="0 0 696 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Teradata</title>
-    <desc>Copyright Teradata</desc>
-    <defs></defs>
-    <g id="teradata" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="text" fill="#FFFFFE">
-            <path d="M78.882,72.796 L123.941,72.796 C120.763,60.83 111.788,55.595 101.878,55.595 C92.53,55.595 81.873,61.204 78.882,72.796 Z M149.182,90.184 L78.134,90.184 C80.564,103.646 90.099,111.873 101.504,111.873 C108.796,111.873 117.957,110.937 124.689,99.533 L146.751,104.206 C138.524,123.652 121.884,133 101.504,133 C75.142,133 53.64,112.994 53.64,83.64 C53.64,54.286 75.142,34.093 101.878,34.093 C126.745,34.093 148.246,53.351 149.182,81.771 L149.182,90.184 Z" id="Fill-1"></path>
-            <path d="M387.843,83.64 C387.843,66.439 374.568,55.595 361.294,55.595 C346.336,55.595 335.118,66.439 335.118,83.64 C335.118,100.841 346.336,111.498 361.294,111.498 C374.568,111.498 387.843,100.841 387.843,83.64 Z M412.523,130.195 L387.843,130.195 L387.843,122.156 C380.364,129.074 370.081,133 356.993,133 C333.248,133 311.186,112.994 311.186,83.64 C311.186,54.286 333.248,34.093 356.993,34.093 C370.081,34.093 380.364,38.019 387.843,44.937 L387.843,0.937 L412.523,0.937 L412.523,130.195 Z" id="Fill-3"></path>
-            <path d="M630.3,92.427 C630.3,104.393 618.894,113.368 605.807,113.368 C596.271,113.368 589.915,108.88 589.915,101.962 C589.915,95.606 595.149,91.306 603.003,91.306 L630.3,91.306 L630.3,92.427 Z M614.407,37.117 L614.407,37.093 L580.299,37.093 L580.299,57.658 L614.407,57.658 C623.943,57.658 630.3,61.765 630.3,71.113 L630.3,72.61 L603.377,72.61 C579.818,72.61 566.356,84.576 566.356,102.524 C566.356,120.846 580.566,133 601.881,133 C614.595,133 623.943,128.7 630.3,122.53 L630.3,130.195 L653.858,130.195 L653.858,69.244 C653.858,47.082 638.243,37.617 614.407,37.117 Z" id="Fill-4"></path>
-            <path d="M484.378,92.427 C484.378,104.393 472.973,113.368 459.885,113.368 C450.349,113.368 443.992,108.88 443.992,101.962 C443.992,95.606 449.227,91.306 457.08,91.306 L484.378,91.306 L484.378,92.427 Z M468.485,37.117 L468.485,37.093 L434.377,37.093 L434.377,57.658 L468.485,57.658 C478.02,57.658 484.378,61.765 484.378,71.113 L484.378,72.61 L457.454,72.61 C433.895,72.61 420.434,84.576 420.434,102.524 C420.434,120.846 434.644,133 455.958,133 C468.672,133 478.02,128.7 484.378,122.53 L484.378,130.195 L507.935,130.195 L507.935,69.244 C507.935,47.082 492.321,37.617 468.485,37.117 Z" id="Fill-5"></path>
-            <path d="M279.3,92.427 C279.3,104.393 267.894,113.368 254.807,113.368 C245.271,113.368 238.914,108.88 238.914,101.962 C238.914,95.606 244.15,91.306 252.003,91.306 L279.3,91.306 L279.3,92.427 Z M263.408,37.117 L263.408,37.093 L229.299,37.093 L229.299,57.658 L263.408,57.658 C272.943,57.658 279.3,61.765 279.3,71.113 L279.3,72.61 L252.376,72.61 C228.818,72.61 215.356,84.576 215.356,102.524 C215.356,120.846 229.566,133 250.881,133 C263.595,133 272.943,128.7 279.3,122.53 L279.3,130.195 L302.858,130.195 L302.858,69.244 C302.858,47.082 287.244,37.617 263.408,37.117 Z" id="Fill-6"></path>
-            <path d="M216.11,37.026 C200.966,37.026 190.121,43.069 182.643,53.913 L182.643,36.899 L157.963,36.899 L157.963,130.197 L182.643,130.197 L182.643,100.095 C182.643,74.106 193.113,57.776 215.923,57.776 L217.044,57.776 L217.044,37.029 C216.741,37.027 216.431,37.026 216.11,37.026" id="Fill-7"></path>
-            <path d="M48.982,107.707 C45.229,109.115 41.291,110.002 38.328,110.002 C30.102,110.002 24.68,105.142 24.68,93.923 L24.68,57.09 L49.982,57.09 L49.982,36.898 L24.68,36.898 L24.68,14.007 L0,14.007 L0,95.793 C0,121.408 14.584,133 36.646,133 C44.438,133 51.879,131.338 61.481,126.199 C56.364,121.123 51.667,114.8 48.982,107.707" id="Fill-8"></path>
-            <path d="M558.509,109.788 C557.521,109.926 556.586,110.002 555.733,110.002 C547.507,110.002 542.085,105.142 542.085,93.923 L542.085,57.09 L568.068,57.09 L568.068,36.898 L542.085,36.898 L542.085,14.007 L517.404,14.007 L517.404,95.793 C517.404,121.408 531.988,133 554.051,133 C559.44,133 564.302,132.206 569.964,130.017 C562.645,124.774 559.799,116.281 558.509,109.788" id="Fill-9"></path>
-        </g>
-        <path d="M695.029,116.028 C695.029,124.853 688.257,131.624 678.817,131.624 C669.377,131.624 662.605,124.853 662.605,116.028 C662.605,107.615 669.377,100.227 678.817,100.227 C688.257,100.227 695.029,107.615 695.029,116.028" id="Fill-11" fill="#E46C42"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="103" height="20" viewBox="0 0 103 20" fill="none">
+    <g id="teradata">
+    <path d="M0 2.30158H3.53561V5.66126H7.47898V8.88021H3.53561V14.507C3.53561 15.9629 4.26909 16.4388 5.30341 16.4388H7.47898V19.6578H5.30341C1.68575 19.6578 0 18.0355 0 14.507V2.30158Z" fill="#FF5F02"/>
+    <path d="M15.9376 19.9904C11.5865 19.9904 8.67492 17.0504 8.67492 12.6851C8.67492 8.31983 11.5318 5.3235 15.7461 5.3235C19.9605 5.3235 22.708 8.1791 22.708 12.5444C22.708 12.964 22.6806 13.4118 22.5986 13.944H12.3746C12.7003 15.9041 13.8714 16.8278 15.9923 16.8278C17.325 16.8278 18.3046 16.2393 18.685 15.4563H22.33C21.5145 18.1711 19.2295 19.9904 15.9376 19.9904ZM12.4293 10.9784H19.0107C18.6577 9.21541 17.6233 8.37613 15.7461 8.37613C13.9783 8.37613 12.8371 9.2717 12.4293 10.9784Z" fill="#FF5F02"/>
+    <path d="M24.6672 5.6587H28.0661V7.33726C29.3167 6.05019 30.8135 5.40538 32.2282 5.6587V9.01838C30.4604 8.79577 29.3192 9.63505 28.2028 11.1166V19.6527H24.6672V5.6587Z" fill="#FF5F02"/>
+    <path d="M36.6316 19.8216C34.1303 19.8216 32.1437 18.3093 32.1437 15.1748C32.1437 12.6007 33.7201 10.8377 37.2557 10.8377H40.3288V10.418C40.3288 9.13097 39.5406 8.59874 37.5814 8.59874C36.276 8.59874 35.2417 8.73947 33.827 9.15911V5.88387C34.916 5.57682 36.276 5.37979 37.8797 5.37979C41.9599 5.37979 43.8619 6.97391 43.8619 10.418V19.6552H40.4084V18.8441L39.6202 19.1793C38.6132 19.5989 37.5814 19.8241 36.6291 19.8241L36.6316 19.8216ZM38.5635 16.5463L40.3313 15.7633V13.6933H37.6386C36.4153 13.6933 35.6793 14.2818 35.6793 15.2055C35.6793 16.2981 36.4128 16.8278 37.3377 16.8278C37.7181 16.8278 38.1532 16.7152 38.561 16.5489L38.5635 16.5463Z" fill="#FF5F02"/>
+    <path d="M56.3758 19.6552V18.7315L56.1868 18.816C54.9362 19.4326 53.6035 19.7397 52.3255 19.7397C48.9267 19.7397 45.9331 17.4726 45.9331 12.6595C45.9331 7.84646 48.9242 5.55123 52.3529 5.55123C53.6035 5.55123 54.9362 5.85829 56.1868 6.47495L56.2962 6.53125V0.341553H59.8318V19.6552H56.3758ZM52.9769 16.38C53.7378 16.38 54.5806 16.183 55.4509 15.7633L56.2938 15.3437V9.97025L55.4509 9.55061C54.5806 9.13097 53.7378 8.93394 52.9769 8.93394C51.0177 8.93394 49.5507 10.1929 49.5507 12.657C49.5507 15.1211 51.0202 16.38 52.9769 16.38Z" fill="#FF5F02"/>
+    <path d="M66.2218 19.8216C63.7205 19.8216 61.7339 18.3093 61.7339 15.1748C61.7339 12.6007 63.3103 10.8377 66.8459 10.8377H69.919V10.418C69.919 9.13097 69.1308 8.59874 67.1716 8.59874C65.8662 8.59874 64.8319 8.73947 63.4172 9.15911V5.88387C64.5062 5.57682 65.8662 5.37979 67.4699 5.37979C71.5501 5.37979 73.4521 6.97391 73.4521 10.418V19.6552H69.9986V18.8441L69.2104 19.1793C68.2034 19.5989 67.1716 19.8241 66.2193 19.8241L66.2218 19.8216ZM68.1537 16.5463L69.9215 15.7633V13.6933H67.2288C66.0055 13.6933 65.2695 14.2818 65.2695 15.2055C65.2695 16.2981 66.003 16.8278 66.9279 16.8278C67.3083 16.8278 67.7435 16.7152 68.1512 16.5489L68.1537 16.5463Z" fill="#FF5F02"/>
+    <path d="M76.0653 2.30158H79.6009V5.66126H83.5443V8.88021H79.6009V14.507C79.6009 15.9629 80.3344 16.4388 81.3687 16.4388H83.5443V19.6578H81.3687C77.7511 19.6578 76.0653 18.0355 76.0653 14.507V2.30158Z" fill="#FF5F02"/>
+    <path d="M89.2555 19.8216C86.7542 19.8216 84.7676 18.3093 84.7676 15.1748C84.7676 12.6007 86.3439 10.8377 89.8795 10.8377H92.9527V10.418C92.9527 9.13097 92.1645 8.59874 90.2053 8.59874C88.8999 8.59874 87.8656 8.73947 86.4509 9.15911V5.88387C87.5399 5.57682 88.8999 5.37979 90.5036 5.37979C94.5837 5.37979 96.4858 6.97391 96.4858 10.418V19.6552H93.0323V18.8441L92.2441 19.1793C91.2371 19.5989 90.2053 19.8241 89.253 19.8241L89.2555 19.8216ZM91.1874 16.5463L92.9552 15.7633V13.6933H90.2624C89.0392 13.6933 88.3032 14.2818 88.3032 15.2055C88.3032 16.2981 89.0367 16.8278 89.9616 16.8278C90.342 16.8278 90.7771 16.7152 91.1849 16.5489L91.1874 16.5463Z" fill="#FF5F02"/>
+    <path d="M98.5296 18.0586C98.5296 16.9941 99.3451 16.1548 100.407 16.1548C101.468 16.1548 102.284 16.9941 102.284 18.0586C102.284 19.123 101.441 19.9904 100.407 19.9904C99.3725 19.9904 98.5296 19.123 98.5296 18.0586Z" fill="#FF5F02"/>
     </g>
 </svg>
\ No newline at end of file
diff --git a/apps/docs-app/src/styles.scss b/apps/docs-app/src/styles.scss
index 97ac91f92f..108257e6bc 100644
--- a/apps/docs-app/src/styles.scss
+++ b/apps/docs-app/src/styles.scss
@@ -7,8 +7,12 @@
 @import '../../../libs/angular-guided-tour/guided-tour-theme';
 @import '../../../libs/angular-guided-tour/styles/guided-tour.scss';
 
-// Import Roboto styles from google apis CDN
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+// Teradata brand
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+@import './teradata-branding';
+
+// Import Inter styles from google apis CDN
+@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500');
 
 // Plus imports for other components in your app.
 
@@ -31,10 +35,6 @@ $my-typography: mat.define-typography-config();
 // Setting the toolbar to the proper spec weight
 @include mat-toolbar-typography($custom-toolbar-typography);
 
-// Teradata brand
-/* stylelint-disable-next-line no-invalid-position-at-import-rule */
-@import './teradata-branding';
-
 // Include the core styles for Covalent
 @include covalent-core();
 
@@ -72,13 +72,21 @@ $theme: mat.define-light-theme(
     typography: $my-typography,
   )
 );
+$theme: map_merge(
+  $theme,
+  (
+    background: $td-light-theme-background,
+    foreground: $td-light-theme-foreground,
+  )
+);
+
 $foreground: map-get($theme, foreground);
 $background: map-get($theme, background);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-//@include mat.all-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include covalent-theme($theme);
 @include covalent-markdown-theme($theme);
 @include covalent-highlight-theme($theme);
@@ -100,9 +108,16 @@ body .mat-card {
 // Dark theme
 @media (prefers-color-scheme: dark) {
   $primary-dark: mat-palette($td-slate, 800, 200, 900);
-  $accent-dark: mat-palette($td-orange, 800, 200, 900);
+  $accent-dark: mat-palette($td-orange, 500);
   $warn-dark: mat-palette($mat-red, 600, 200, 900);
   $theme-dark: mat-dark-theme($primary-dark, $accent-dark, $warn-dark);
+  $theme-dark: map_merge(
+    $theme-dark,
+    (
+      background: $td-dark-theme-background,
+      foreground: $td-dark-theme-foreground,
+    )
+  );
   $background: map-get($theme-dark, background);
 
   @include mat.all-component-themes($theme-dark);
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
index 780e9288f9..779656a5c8 100644
--- a/docs/GETTING_STARTED.md
+++ b/docs/GETTING_STARTED.md
@@ -81,7 +81,7 @@ A theme file is a simple Sass file that defines your palettes and passes them to
 // Define a custom typography config that overrides the font-family
 // or any typography level.
 $typography: mat.define-typography-config(
-  $font-family: 'Roboto, monospace',
+  $font-family: 'Inter, monospace',
   $headline: mat.define-typography-level(32px, 48px, 700)
 );
 
@@ -121,10 +121,7 @@ The covalent utility CSS classes can be included via `platform.css` file either
 **src/index.html**
 
 ```html
-<link
-  href="../node_modules/@covalent/core/common/platform.css"
-  rel="stylesheet"
-/>
+<link href="../node_modules/@covalent/core/common/platform.css" rel="stylesheet" />
 ```
 
 or
diff --git a/libs/angular/common/styles/_variables.scss b/libs/angular/common/styles/_variables.scss
index 872ffb97f1..f3bd883c08 100644
--- a/libs/angular/common/styles/_variables.scss
+++ b/libs/angular/common/styles/_variables.scss
@@ -9,7 +9,7 @@ $step-circle: 24px;
 
 // Typography
 // ------------------------------
-$font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue', sans-serif !default;
+$font-family: 'Inter', sans-serif !default;
 $font-size: 10px;
 
 $display-4-font-size-base: rem(11.2) !default;
diff --git a/libs/angular/typography/_all-typography.scss b/libs/angular/typography/_all-typography.scss
index 8c2b9b74ac..ca2451ae7a 100644
--- a/libs/angular/typography/_all-typography.scss
+++ b/libs/angular/typography/_all-typography.scss
@@ -3,7 +3,7 @@
 @import '../message/message-theme';
 
 @function td-typography-config(
-  $font-family: '"Roboto", "Helvetica Neue", sans-serif',
+  $font-family: '"Inter", sans-serif',
   $headline: td-typography-level(24px, 32px, 400),
   $title: td-typography-level(20px, 32px, 500),
   $subheading-2: td-typography-level(16px, 28px, 400),
diff --git a/libs/components/stories/demos/material-web.content.html b/libs/components/stories/demos/material-web.content.html
index 285c693a3e..044ef0144c 100644
--- a/libs/components/stories/demos/material-web.content.html
+++ b/libs/components/stories/demos/material-web.content.html
@@ -160,7 +160,7 @@
   .section-header {
     display: flex;
     height: 36px;
-    font-family: Roboto, sans-serif;
+    font-family: Inter, sans-serif;
   }
   .section-header a {
     display: flex;