diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index ba2cfd0..47efaaf 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -110,6 +110,24 @@
   background-color: $very-light-gray;
 }
 
+/* ===============Table Variants================== */
+.cmp-adaptiveform-table--striped .cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:nth-child(even) > .cmp-adaptiveform-tablecell {
+  background: $Palette-gray-100;
+}
+
+.cmp-adaptiveform-table--striped .cmp-adaptiveform-tablehead{
+	background-color: $medium-gray; 
+}
+
+.cmp-adaptiveform-table--bordered .cmp-adaptiveform-table__widget {
+  border: 2px solid $Palette-gray-600;
+}
+
+.cmp-adaptiveform-table--bordered .cmp-adaptiveform-tablecell,
+.cmp-adaptiveform-table--bordered .cmp-adaptiveform-tablehead {
+  border: 1px solid $dark-gray;
+}
+
 /* ===============Table Row Controls (repeatable)================== */
 .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls {
   display: flex;
diff --git a/src/site/_variables.scss b/src/site/_variables.scss
index bc84755..9d798e3 100644
--- a/src/site/_variables.scss
+++ b/src/site/_variables.scss
@@ -19,6 +19,9 @@ $tnc-header-bg-color: #afb0b5;
 $dark-blue: #168be8;
 $vivid-blue: #147af3;
 $focus-ring-color: #275ec5;
+$Palette-gray-100: #f8f8f8;
+$Palette-gray-600: #6d6d6d;
+$medium-gray: #aeaeae;
 
 // ====== font size======
 $font-xlg: 1.5rem;