diff --git a/designTokens/button.js b/designTokens/button.js
index 224ea08f..5e953d82 100644
--- a/designTokens/button.js
+++ b/designTokens/button.js
@@ -1,5 +1,5 @@
 module.exports = {
-  primary: {
+  'primary': {
     color: {
       active: {
         background: {
@@ -20,7 +20,7 @@ module.exports = {
           value: '{core.color.red.regular.value}'
         },
         text: {
-          value: '{core.color.white.value}'
+          value: '{core.color.white.regular.value}'
         }
       },
       disabled: {
@@ -45,10 +45,341 @@ module.exports = {
           value: '{core.color.black.15.value}'
         }
       }
-    },
-    size: {
-      padding: {
-        value: '{core.size.spacing.small.value}'
+    }
+  },
+  'primary-negative': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.black.14.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.red.150.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.white.regular.value}'
+        },
+        border: {
+          value: '{core.color.white.regular.value}'
+        },
+        text: {
+          value: '{core.color.red.regular.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        text: {
+          value: '{core.color.white.alpha.60.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.black.15.value}'
+        },
+        border: {
+          value: '{core.color.black.15.value}'
+        },
+        text: {
+          value: '{core.color.red.125.value}'
+        }
+      }
+    }
+  },
+  'secondary': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.black.14.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.black.4.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.white.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.black.2.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.15.value}'
+        },
+        border: {
+          value: '{core.color.black.15.value}'
+        },
+        text: {
+          value: '{core.color.black.11.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.black.15.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.black.3.value}'
+        }
+      }
+    }
+  },
+  'secondary-negative': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.black.14.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.white.regular.value}'
+        },
+        text: {
+          value: '{core.color.white.regular.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        text: {
+          value: '{core.color.white.alpha.60.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.15.value}'
+        },
+        text: {
+          value: '{core.color.black.15.value}'
+        }
+      }
+    }
+  },
+  'tertiary': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.white.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.2.value}'
+        },
+        text: {
+          value: '{core.color.black.2.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.white.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.5.value}'
+        },
+        text: {
+          value: '{core.color.black.5.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        text: {
+          value: '{core.color.white.regular.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.white.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.regular.value}'
+        },
+        text: {
+          value: '{core.color.black.regular.value}'
+        }
+      }
+    }
+  },
+  'tertiary-negative': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.14.value}'
+        },
+        text: {
+          value: '{core.color.black.14.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.white.regular.value}'
+        },
+        text: {
+          value: '{core.color.white.regular.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.10.value}'
+        },
+        text: {
+          value: '{core.color.white.alpha.60.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.red.regular.value}'
+        },
+        border: {
+          value: '{core.color.black.15.value}'
+        },
+        text: {
+          value: '{core.color.black.15.value}'
+        }
+      }
+    }
+  },
+  'transparent': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.black.alpha.70.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.70.value}'
+        },
+        text: {
+          value: '{core.color.black.14.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.black.alpha.50.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.50.value}'
+        },
+        text: {
+          value: '{core.color.white.regular.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.black.alpha.20.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.20.value}'
+        },
+        text: {
+          value: '{core.color.black.15.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.black.alpha.60.value}'
+        },
+        border: {
+          value: '{core.color.black.alpha.60.value}'
+        },
+        text: {
+          value: '{core.color.black.15.value}'
+        }
+      }
+    }
+  },
+  'transparent-negative': {
+    color: {
+      active: {
+        background: {
+          value: '{core.color.white.alpha.70.value}'
+        },
+        border: {
+          value: '{core.color.white.alpha.70.value}'
+        },
+        text: {
+          value: '{core.color.black.4.value}'
+        }
+      },
+      default: {
+        background: {
+          value: '{core.color.white.alpha.50.value}'
+        },
+        border: {
+          value: '{core.color.white.alpha.50.value}'
+        },
+        text: {
+          value: '{core.color.black.2.value}'
+        }
+      },
+      disabled: {
+        background: {
+          value: '{core.color.white.alpha.20.value}'
+        },
+        border: {
+          value: '{core.color.white.alpha.20.value}'
+        },
+        text: {
+          value: '{core.color.black.11.value}'
+        }
+      },
+      hover: {
+        background: {
+          value: '{core.color.white.alpha.60.value}'
+        },
+        border: {
+          value: '{core.color.white.alpha.60.value}'
+        },
+        text: {
+          value: '{core.color.black.3.value}'
+        }
       }
     }
   }