diff --git a/core/client/assets/sass/patterns/labels.scss b/core/client/assets/sass/patterns/labels.scss
new file mode 100644
index 0000000000..c302e44c66
--- /dev/null
+++ b/core/client/assets/sass/patterns/labels.scss
@@ -0,0 +1,81 @@
+//
+// Labels
+// --------------------------------------------------
+
+.label {
+    display: inline;
+    padding: .2em .6em .3em;
+    font-size: 75%;
+    font-weight: 300;
+    line-height: 1;
+    color: #FFF;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25em;
+
+    // [converter] extracted a& to a.label
+
+    // Empty labels collapse automatically (not available in IE8)
+    &:empty {
+        display: none;
+    }
+
+    // Quick fix for labels in buttons
+    .btn & {
+        position: relative;
+        top: -1px;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    .label {
+        display: inline-block;
+        padding: 0.2em 0.5em 0.25em;
+        top: -0.18em;
+        position: relative;
+        line-height: 70%;
+        font-size: 70%;
+    }
+}
+
+// Add hover effects, but only for links
+a.label {
+    &:hover,
+    &:focus {
+        color: #FFF;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+// Colors
+
+@mixin label-variant($text-color, $bg-color) {
+    background-color: $bg-color;
+    color: $text-color;
+
+    &[href] {
+        color: $text-color;
+        &:hover,
+        &:focus {
+            background-color: darken($bg-color, 10%);
+        }
+    }
+}
+
+.label-default {
+    @include label-variant(#fff, #A1ADB3);
+}
+.label-alt {
+    @include label-variant(#fff, #666);
+}
+.label-blue {
+    @include label-variant(#fff, $blue);
+}
+.label-green {
+    @include label-variant(#fff, $green);
+}
+.label-red {
+    @include label-variant(#fff, $red);
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss
index 262105af95..9c4a3b7bf2 100644
--- a/core/client/assets/sass/screen.scss
+++ b/core/client/assets/sass/screen.scss
@@ -26,6 +26,7 @@
 @import "patterns/_shame"; // TODO: Remove
 @import "patterns/forms";
 @import "patterns/buttons";
+@import "patterns/labels";
 @import "patterns/tables";
 
 
diff --git a/core/client/docs/labels.html b/core/client/docs/labels.html
new file mode 100644
index 0000000000..1cf0ede650
--- /dev/null
+++ b/core/client/docs/labels.html
@@ -0,0 +1,44 @@
+---
+layout: default
+title: Ghost UI · Making publishing beautiful.
+---
+
+<header class="page-header">
+    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <h2>Home</h2>
+</header>
+
+<section class="page-content">
+
+    <h3>Labels In Headers</h3>
+
+    <h1>Heading 1 <span class="label label-default">New</span></h1>
+    <h2>Heading 2 <span class="label label-default">New</span></h2>
+    <h3>Heading 3 <span class="label label-default">New</span></h3>
+    <h4>Heading 4 <span class="label label-default">New</span></h4>
+    <h5>Heading 5 <span class="label label-default">New</span></h5>
+    <h6>Heading 6 <span class="label label-default">New</span></h6>
+
+    <hr>
+    <h3>Span Labels</h3>
+
+    <span class="label label-default">Default</span>
+    <span class="label label-alt">Alt</span>
+    <span class="label label-blue">Blue</span>
+    <span class="label label-green">Green</span>
+    <span class="label label-red">Red</span>
+
+    <hr>
+    <h3>Links as Labels</h3>
+
+    <a href="#" class="label label-default">Default</a>
+    <a href="#" class="label label-alt">Alt</a>
+    <a href="#" class="label label-blue">Blue</a>
+    <a href="#" class="label label-green">Green</a>
+    <a href="#" class="label label-red">Red</a>
+
+    <hr>
+    <h3>Labels in a Paragraph</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur <span class="label label-red">Lorem</span> adipisicing elit. Voluptate provident ad perferendis fugiat saepe consequuntur, aspernatur quod eveniet accusantium excepturi, ut omnis. Fugiat excepturi, quae, nemo aut maxime commodi, ullam distinctio porro, culpa quisquam optio. Consectetur voluptatem culpa cupiditate numquam nihil aut, blanditiis dignissimos. Repellat iure odit dicta dignissimos, ex rerum, alias fugit, molestiae eaque quibusdam sint dolor quisquam nesciunt illum!</p>
+
+</section>
\ No newline at end of file