diff --git a/docs/content/components/dropdown.md b/docs/content/components/dropdown.md
index f6235df6..c0c8a611 100644
--- a/docs/content/components/dropdown.md
+++ b/docs/content/components/dropdown.md
@@ -1,34 +1,9 @@
 ---
 title: Dropdown
-path: components/dropdown
-status: Stable
-source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/dropdown.scss'
-symbols:
-  [
-    active,
-    anim-scale-in,
-    btn-link,
-    dropdown,
-    dropdown-caret,
-    dropdown-divider,
-    dropdown-header,
-    dropdown-item,
-    dropdown-menu,
-    dropdown-menu-content,
-    dropdown-menu-e,
-    dropdown-menu-ne,
-    dropdown-menu-no-overflow,
-    dropdown-menu-s,
-    dropdown-menu-se,
-    dropdown-menu-sw,
-    dropdown-menu-w,
-    dropdown-signout,
-    octicon,
-    zeroclipboard-is-hover,
-  ]
+status: New
 ---
 
-Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 
 ## Basic examples
 
@@ -37,35 +12,39 @@ Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a di
 Using a GitHub button:
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 Using a button customized with additional utilities:
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="text-gray p-2 d-inline" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="text-gray p-2 d-inline" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ## Options
@@ -75,133 +54,175 @@ Using a button customized with additional utilities:
 Align the direction of dropdown menus and their arrows with modifier classes.
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-ne
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-top: 100px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-ne
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-ne">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-ne">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-e
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-e
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-e">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-e">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-se
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-se
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-s
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px" class="d-flex flex-justify-center">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-s
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-s">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-s">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-sw
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-sw
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-sw">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-sw">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-w
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-w
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-w">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-w">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ### Dividers
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 170px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li class="dropdown-divider" role="separator"></li>
-    <li><a class="dropdown-item" href="#url">Another item</a></li>
-    <li><a class="dropdown-item" href="#url">One more</a></li>
-  </ul>
-</details>
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li class="dropdown-divider" role="separator"></li>
+      <li><a class="dropdown-item" href="#url">Another item</a></li>
+      <li><a class="dropdown-item" href="#url">One more</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ### Headers
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
+<div style="margin-bottom: 126px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
 
-  <div class="dropdown-menu dropdown-menu-se">
-    <div class="dropdown-header">
-      Dropdown header
+    <div class="dropdown-menu dropdown-menu-se">
+      <div class="dropdown-header">
+        Dropdown header
+      </div>
+      <ul>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      </ul>
     </div>
-    <ul>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    </ul>
-  </div>
-</details>
+  </details>
+</div>
+```
+
+### Dark
+
+```html live
+<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3 mb-n3" style="min-height: 240px;">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
+      <div class="dropdown-header">
+        Dropdown header
+      </div>
+      <ul>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li class="dropdown-divider" role="none"></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      </ul>
+    </div>
+  </details>
+</div>
 ```
diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
index e919c457..488a5653 100644
--- a/docs/content/components/forms.md
+++ b/docs/content/components/forms.md
@@ -111,6 +111,15 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 ```
 
+##### Dark
+
+```html live
+<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3">
+  <input class="form-control input-dark" type="text" placeholder="Dark input" aria-label="Dark input">
+  <input class="form-control input-dark input-sm" type="text" placeholder="Dark input small" aria-label="Dark input">
+</div>
+```
+
 ##### Hide webkit's contact info autofill icon
 
 Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
diff --git a/script/bundle-size-report b/script/bundle-size-report
index e18b74a7..e7fc127f 100755
--- a/script/bundle-size-report
+++ b/script/bundle-size-report
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 const fetch = require('node-fetch')
 const filesize = require('filesize')
+const cssstats = require('cssstats')
 const minimist = require('minimist')
 const {green, gray, yellow, red} = require('colorette')
 const {table, getBorderCharacters} = require('table')
@@ -44,10 +45,15 @@ Promise.all(
     const entry = {
       name: bundle.name,
       path: bundle.css,
-      local: require(`../${bundle.stats}`)
+      local: require(`../${bundle.stats}`),
+      remote: {}
     }
     return fetch(unpkgBaseURL + bundle.stats)
       .then(res => res.json())
+      .catch(error => {
+        console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
+        return cssstats('')
+      })
       .then(stats => (entry.remote = stats))
       .then(() => entry)
   })
diff --git a/src/dropdown/README.md b/src/dropdown/README.md
new file mode 100644
index 00000000..48e9c4bf
--- /dev/null
+++ b/src/dropdown/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "dropdown"
+generated: true
+---
+
+# Primer CSS: `dropdown` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/dropdown/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/dropdown.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
new file mode 100644
index 00000000..ac760066
--- /dev/null
+++ b/src/dropdown/dropdown.scss
@@ -0,0 +1,327 @@
+.dropdown {
+  position: relative;
+
+  &.active {
+    .dropdown-menu-content {
+      display: block;
+      pointer-events: all;
+    }
+  }
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: "";
+  border-style: solid;
+  border-width: $spacer-1 $spacer-1 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+// way the menu should render from the element triggering it.
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: $spacer-1;
+  padding-bottom: $spacer-1;
+  margin-top: 2px;
+  list-style: none;
+  background-color: $bg-white;
+  background-clip: padding-box;
+  border: $border-width $border-style $black-fade-15;
+  border-radius: $spacer-1;
+  box-shadow: $box-shadow-large;
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: "";
+  }
+
+  &::before {
+    border: $spacer-2 solid transparent;
+    border-bottom-color: $black-fade-15;
+  }
+
+  &::after {
+    border: 7px solid transparent;
+    border-bottom-color: $white;
+  }
+
+  // stylelint-disable-next-line selector-max-type
+  > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  .dropdown-item {
+    padding: $spacer-1 $spacer-3;
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+// Dropdown items (can be links or buttons)
+.dropdown-item {
+  display: block;
+  padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
+  overflow: hidden;
+  color: $text-gray-dark;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover {
+    color: $text-white;
+    text-decoration: none;
+    background-color: $bg-blue;
+    outline: none;
+
+    > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: $spacer-2 0;
+  border-top: $border;
+}
+
+.dropdown-header {
+  padding: $spacer-1 $spacer-3;
+  font-size: $h6-size;
+  color: $text-gray;
+}
+
+.dropdown-menu-content {
+  display: none;
+
+  // stylelint-disable-next-line primer/no-override
+  &.anim-scale-in {
+    position: relative;
+    z-index: 100;
+    pointer-events: none;
+  }
+}
+
+.dropdown-item[aria-checked="false"] .octicon-check {
+  display: none;
+}
+
+// Directional classes
+//
+// Move the menu and the caret attached to it. Requires at least one of these on
+// the `.dropdown-menu` element.
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: $spacer-2;
+
+  &::before {
+    top: 10px;
+    right: -$spacer-3;
+    left: auto;
+    border-color: transparent;
+    border-left-color: $black-fade-15;
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: $white;
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: $spacer-2;
+
+  &::before {
+    top: $spacer-2;
+    left: -$spacer-3;
+    border-color: transparent;
+    border-right-color: $black-fade-15;
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: $white;
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -$spacer-2;
+    left: 9px;
+    border-top: $spacer-2 solid $black-fade-15;
+    border-right: $spacer-2 solid transparent;
+    border-bottom: 0;
+    border-left: $spacer-2 solid transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    border-top: 7px solid $white;
+    border-right: 7px solid transparent;
+    border-bottom: 0;
+    border-left: 7px solid transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -$spacer-3;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -$spacer-3;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -$spacer-3;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}
+
+// Dark dropdowns
+.dropdown-menu-dark {
+  color: $white;
+  background: $gray-800;
+  border-color: $gray-700;
+  box-shadow: $box-shadow-large;
+
+  &::before {
+    border-bottom-color: $gray-700;
+  }
+
+  &::after {
+    border-bottom-color: $gray-800;
+  }
+
+  .dropdown-header {
+    color: $gray-300;
+  }
+
+  .dropdown-divider {
+    border-top-color: $border-gray-darker;
+  }
+
+  .dropdown-item {
+    color: inherit;
+  }
+
+  // Directional classes
+
+  &.dropdown-menu-w {
+    &::before {
+      border-color: transparent transparent transparent $gray-700;
+    }
+
+    &::after {
+      border-color: transparent transparent transparent $gray-800;
+    }
+  }
+
+  &.dropdown-menu-e {
+    &::before {
+      border-color: transparent $gray-700 transparent transparent;
+    }
+
+    &::after {
+      border-color: transparent $gray-800 transparent transparent;
+    }
+  }
+
+  &.dropdown-menu-ne {
+    &::before {
+      border-color: $gray-700 transparent transparent transparent;
+    }
+
+    &::after {
+      border-color: $gray-800 transparent transparent transparent;
+    }
+  }
+}
diff --git a/src/dropdown/index.scss b/src/dropdown/index.scss
new file mode 100644
index 00000000..03e02499
--- /dev/null
+++ b/src/dropdown/index.scss
@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./dropdown.scss";
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 3e9bc97b..af83feff 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -51,6 +51,24 @@ label {
   &:focus { background-color: $bg-white; }
 }
 
+// Inputs to be used against dark backgrounds.
+.input-dark {
+  color: $text-white;
+  background-color: $white-fade-15;
+  border-color: transparent;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.6; // inceases contrast ratio to 4.52
+  }
+
+  &.focus,
+  &:focus {
+    border-color: $black-fade-30;
+    box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
+  }
+}
+
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
   color: $text-gray-light;
diff --git a/src/product/index.scss b/src/product/index.scss
index 88e61d16..c3a721a6 100644
--- a/src/product/index.scss
+++ b/src/product/index.scss
@@ -18,6 +18,7 @@
 @import "../avatars/index.scss";
 @import "../blankslate/index.scss";
 @import "../branch-name/index.scss";
+@import "../dropdown/index.scss";
 @import "../header/index.scss";
 @import "../labels/index.scss";
 @import "../markdown/index.scss";