diff --git a/spec/pivotal-ui-react/ribbons/ribbon_spec.js b/spec/pivotal-ui-react/ribbons/ribbon_spec.js
deleted file mode 100644
index c72cde551..000000000
--- a/spec/pivotal-ui-react/ribbons/ribbon_spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import '../spec_helper';
-import {Ribbon, PrimaryRibbon, Banner} from '../../../src/react/ribbons';
-import {findByClass} from '../spec_helper';
-
-let subject;
-
-describe('Ribbon', () => {
-  const renderComponent = props => ReactDOM.render(<Ribbon {...props}>British</Ribbon>, root);
-
-  describe('basic Ribbon', () => {
-    it('renders a ribbon', () => {
-      subject = renderComponent();
-      const ribbon = findByClass(subject, 'ribbon');
-      expect(ribbon).toHaveText('British');
-      expect(ribbon).not.toHaveClass('ribbon-primary');
-    });
-  });
-
-  describe('Ribbon with custom attributes', () => {
-    it('renders a ribbon with custom attributes', () => {
-      subject = renderComponent({className: '1234', id: 'test', style: {color: 'rgb(255, 0, 0)'}});
-      const ribbon = findByClass(subject, 'ribbon');
-
-      expect(ribbon).toHaveClass('1234');
-      expect(ribbon).toHaveAttr('id', 'test');
-      expect(ribbon).toHaveCss({color: 'rgb(255, 0, 0)'});
-    });
-  });
-});
-
-describe('PrimaryRibbon', () => {
-  const renderComponent = props => ReactDOM.render(<PrimaryRibbon {...props}>British</PrimaryRibbon>, root);
-
-  describe('basic PrimaryRibbon', () => {
-    it('adds the ribbon-primary class', () => {
-      subject = renderComponent();
-      const ribbon = findByClass(subject, 'ribbon');
-      expect(ribbon).toHaveText('British');
-      expect(ribbon).toHaveClass('ribbon-primary');
-    });
-  });
-
-  describe('PrimaryRibbon with custom attributes', () => {
-    it('renders a ribbon with custom attributes', () => {
-      subject = renderComponent({className: '1234', id: 'test', style: {color: 'rgb(255, 0, 0)'}});
-      const ribbon = findByClass(subject, 'ribbon');
-
-      expect(ribbon).toHaveClass('1234');
-      expect(ribbon).toHaveAttr('id', 'test');
-      expect(ribbon).toHaveCss({color: 'rgb(255, 0, 0)'});
-    });
-  });
-});
-
-describe('Banner', () => {
-  const renderComponent = props => ReactDOM.render(<Banner {...props}>British</Banner>, root);
-
-  describe('basic banner', () => {
-    it('has the ribbon-banner class', () => {
-      subject = renderComponent();
-      const ribbon = findByClass(subject, 'ribbon-banner');
-      expect(ribbon).toHaveText('British');
-      expect(ribbon).not.toHaveClass('ribbon');
-    });
-  });
-
-  describe('Banner with custom attributes', () => {
-    it('renders a banner with custom attributes', () => {
-      subject = renderComponent({className: '1234', id: 'test', style: {color: 'rgb(255, 0, 0)'}});
-      const ribbon = findByClass(subject, 'ribbon-banner');
-
-      expect(ribbon).toHaveClass('1234');
-      expect(ribbon).toHaveAttr('id', 'test');
-      expect(ribbon).toHaveCss({color: 'rgb(255, 0, 0)'});
-    });
-  });
-});
diff --git a/src/css/pui-variables.scss b/src/css/pui-variables.scss
index 81502fd3a..e47a38baa 100644
--- a/src/css/pui-variables.scss
+++ b/src/css/pui-variables.scss
@@ -1118,14 +1118,6 @@ $pre-color: $gray-dark !default;
 $pre-border-color: #ccc !default;
 $pre-scrollable-max-height: 340px !default;
 
-// Ribbons
-// -------------------------
-
-$ribbon-bg-primary: $brand-8;
-$ribbon-bg-default: $neutral-5;
-$ribbon-bg-banner: $error-2;
-$ribbon-color: $neutral-11;
-
 // Container sizes
 // --------------------------------------------------
 
diff --git a/src/css/ribbons/index.js b/src/css/ribbons/index.js
deleted file mode 100644
index b04382f4e..000000000
--- a/src/css/ribbons/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-try {
-  require('./ribbons.css');
-} catch (e) {
-  require('./ribbons.scss');
-}
\ No newline at end of file
diff --git a/src/css/ribbons/ribbons.scss b/src/css/ribbons/ribbons.scss
deleted file mode 100644
index 53fd1ff33..000000000
--- a/src/css/ribbons/ribbons.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../pui-variables";
-
-.ribbon {
-  position: relative;
-  display: inline-block;
-  padding: 2px 10px;
-  margin-left: 22px;
-  margin-right: 22px;
-  color: $ribbon-color;
-  font-size: 12px;
-  font-weight: bold;
-  text-align: center;
-  text-transform: uppercase;
-  background-color: $ribbon-bg-default;
-
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    display: block;
-    top: 0;
-    border-color: $ribbon-bg-default;
-    border-width: 11px;
-    border-style: solid;
-  }
-
-  &:before {
-    border-left-color: transparent;
-    left: -22px;
-  }
-
-  &:after {
-    border-right-color: transparent;
-    right: -22px;
-  }
-}
-
-.ribbon-primary {
-  background-color: $ribbon-bg-primary;
-
-  &:before {
-    border-color: $ribbon-bg-primary;
-    border-left-color: transparent;
-  }
-
-  &:after {
-    border-color: $ribbon-bg-primary;
-    border-right-color: transparent;
-  }
-}
-
-.ribbon-banner {
-  position: fixed;
-  top: 20px;
-  left: 0;
-  padding: 4px 18px 4px 24px;
-  margin-left: 0;
-  margin-right: 32px;
-  color: $ribbon-color;
-  font-size: 16px;
-  font-weight: bold;
-  text-align: center;
-  text-transform: uppercase;
-  background-color: $ribbon-bg-banner;
-
-  &:after {
-    content: "";
-    position: absolute;
-    display: block;
-    top: 0;
-    right: -32px;
-    border-style: solid;
-    border-width: 16px;
-    border-color: $ribbon-bg-banner;
-    border-right-color: transparent;
-  }
-}
diff --git a/src/react/ribbons/index.js b/src/react/ribbons/index.js
deleted file mode 100644
index 5c060c44d..000000000
--- a/src/react/ribbons/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {Banner, PrimaryRibbon, Ribbon} from './ribbons';
\ No newline at end of file
diff --git a/src/react/ribbons/ribbons.js b/src/react/ribbons/ribbons.js
deleted file mode 100644
index 7a35c0b04..000000000
--- a/src/react/ribbons/ribbons.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import {mergeProps} from '../helpers';
-
-export class Ribbon extends React.PureComponent {
-  componentDidMount() {
-    require('../../css/ribbons');
-  }
-
-  render() {
-    const {children, ...others} = this.props;
-    const props = mergeProps(others, {className: 'ribbon'});
-    return <div {...props}>{children}</div>;
-  }
-}
-
-export class PrimaryRibbon extends React.PureComponent {
-  componentDidMount() {
-    require('../../css/ribbons');
-  }
-
-  render() {
-    const {children, ...others} = this.props;
-    const props = mergeProps(others, {className: ['ribbon', 'ribbon-primary']});
-    return <div {...props}>{children}</div>;
-  }
-}
-
-export class Banner extends React.PureComponent {
-  componentDidMount() {
-    require('../../css/ribbons');
-  }
-
-  render() {
-    const {children, ...others} = this.props;
-    const props = mergeProps(others, {className: 'ribbon-banner'});
-    return <div {...props}>{children}</div>;
-  }
-}