diff --git a/modules/primer-marketing-buttons/README.md b/modules/primer-marketing-buttons/README.md
index 1eca5cb0..e2a7fd5d 100644
--- a/modules/primer-marketing-buttons/README.md
+++ b/modules/primer-marketing-buttons/README.md
@@ -15,38 +15,31 @@ path: components/marketing-buttons
 status: New Release
 -->
 
-Marketing buttons extend primer-core buttons with more color and fill styles.
+Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
 
+## Colors and outlined
 
-## Colors
+Marketing buttons can be solid blue, outlined blue, or solid green.
 
-Marketing buttons are available in orange.
+The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
 
 ```html
-<button class="btn btn-orange" type="button">Button button</button>
+<button class="btn-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
 ```
 
-## Outline button colors
+## Sizes
 
-The `btn-outline` has also been extended with orange, purple, and green.
+Available in two sizes, marketing buttons have a default size and a large size.
 
 ```html
-<button class="btn btn-outline-orange" type="button">Button button</button>
-<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
-<button class="btn btn-outline-green" type="button">Button button</button>
-```
-
-## Transparent button
-
-A button can also be transparent and displayed with a white border with `btn-transparent`.
-
-```html
-<div class="bg-gray-dark p-4 mt-4">
-  <button class="btn btn-transparent" type="button">
-    Button button
-    <span class="Counter">12</span>
-  </button>
-</div>
+<button class="btn-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
 ```
 
 <!-- %enddocs -->
diff --git a/modules/primer-marketing-buttons/index.scss b/modules/primer-marketing-buttons/index.scss
index 9ba7d965..ff345ef9 100644
--- a/modules/primer-marketing-buttons/index.scss
+++ b/modules/primer-marketing-buttons/index.scss
@@ -1,3 +1,4 @@
 // support files
 @import "primer-support/index.scss";
+@import "primer-marketing-support/index.scss";
 @import "./lib/button.scss";
diff --git a/modules/primer-marketing-buttons/lib/button.scss b/modules/primer-marketing-buttons/lib/button.scss
index 930de9e9..7d3f4219 100644
--- a/modules/primer-marketing-buttons/lib/button.scss
+++ b/modules/primer-marketing-buttons/lib/button.scss
@@ -1,24 +1,66 @@
-.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
-
-.btn-outline-purple { @include btn-outline($purple); }
-.btn-outline-orange { @include btn-outline($orange); }
-.btn-outline-green { @include btn-outline($green); }
-
-@mixin btn-transparent-active {
-  color: $gray-800;
-  background-color: $white;
-  background-image: none;
-  border-color: $white;
-}
-
-.btn-transparent {
+.btn-mktg {
+  display: inline-block;
+  padding: $spacer-3 $spacer-4;
+  font-size: $h5-size;
+  font-weight: $font-weight-semibold;
   color: $white;
-  background-color: transparent;
-  background-image: none;
-  border: $border-width $border-style $white-fade-50;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: $blue-450;
+  border: 1px solid $blue-450;
+  border-radius: $border-radius;
+  transition: $transition-time / 2;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
 
-  &:hover,
-  &:active {
-    @include btn-transparent-active;
+  &:hover {
+    text-decoration: none;
+    background-color: $blue-500;
+    border-color: $blue-500;
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none; // Disable hover styles
+    cursor: default;
+    opacity: 0.65;
+  }
+}
+
+.btn-primary-mktg {
+  background-color: $green-450;
+  border-color: $green-450;
+
+  &:hover {
+    background-color: $green-500;
+    border-color: $green-500;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
+  }
+}
+
+.btn-large-mktg {
+  padding: 20px $spacer-5;
+  font-size: $h4-size;
+}
+
+.btn-outline-mktg {
+  color: $blue-450;
+  background-color: $white;
+  border-color: rgba($blue-450, 0.5);
+
+  &:hover {
+    color: $blue-500;
+    text-decoration: none;
+    background-color: $white;
+    border-color: rgba($blue-450, 1);
   }
 }
diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json
index e201b61b..fd8b007c 100644
--- a/modules/primer-marketing-buttons/package.json
+++ b/modules/primer-marketing-buttons/package.json
@@ -31,6 +31,7 @@
     "postpublish": "../../script/notify success"
   },
   "dependencies": {
+    "primer-marketing-support": "1.5.6",
     "primer-support": "4.7.2"
   },
   "keywords": [
diff --git a/modules/primer-marketing-buttons/stories.js b/modules/primer-marketing-buttons/stories.js
index f84d0241..8e04dd40 100644
--- a/modules/primer-marketing-buttons/stories.js
+++ b/modules/primer-marketing-buttons/stories.js
@@ -1,21 +1,9 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
 
-storiesOf('Marketing buttons', module)
-  .add('Button colors', () => (
-    <div className='p-4'>
-      <button className="btn btn-orange mr-6" type="button">Button button</button>
-    </div>
-  ))
-  .add('Outline colors', () => (
-    <div className='p-4'>
-      <button className="btn btn-outline-orange mr-6" type="button">Button button</button>
-      <a className="btn btn-outline-purple mr-6" href="#url" role="button">Link button</a>
-      <button className="btn btn-outline-green mr-6" type="button">Button button</button>
-    </div>
-  ))
-  .add('Transparent button', () => (
-    <div className="bg-gray-dark p-4 mt-4 mr-6">
-      <button className="btn btn-transparent mr-6" type="button">Button button</button>
-    </div>
-  ))
+const stories = storiesOf('Marketing buttons', module)
+
+for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) {
+  stories.add(title, story)
+}
diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss
index ce5046d7..f21d8d88 100644
--- a/modules/primer-marketing-support/lib/variables.scss
+++ b/modules/primer-marketing-support/lib/variables.scss
@@ -21,6 +21,13 @@ $font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, A
 $h000-size: 64px !default;
 $h000-size-mobile: 48px !default;
 
+// Colors
+$blue-450: mix($blue-500, $blue-400, 50%);
+$green-450: mix($green-500, $green-400, 50%);
+
+// Animations
+$transition-time: 0.4s;
+
 // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
 // i.e. After 40px, we have 48, 64, 80, 96, etc.
 $spacer-7:  $spacer * 6;  // 48px
diff --git a/modules/primer-marketing-support/package.json b/modules/primer-marketing-support/package.json
index b983218b..71dcb9ae 100644
--- a/modules/primer-marketing-support/package.json
+++ b/modules/primer-marketing-support/package.json
@@ -36,5 +36,8 @@
     "functions",
     "variables",
     "scss"
-  ]
+  ],
+  "dependencies": {
+    "primer-support": "4.7.2"
+  }
 }