diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index b1a911a..65a0aa6 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -32,21 +32,6 @@
  */
 
 /**
- * Mark content as read.
- */
-const MARK_READ = 0;
-
-/**
- * Mark content as being new.
- */
-const MARK_NEW = 1;
-
-/**
- * Mark content as being updated.
- */
-const MARK_UPDATED = 2;
-
-/**
  * A responsive table class; hide table cell on narrow devices.
  *
  * Indicates that a column has medium priority and thus can be hidden on narrow
@@ -1705,7 +1690,7 @@ function drupal_common_theme() {
       'variables' => array('style' => NULL),
     ),
     'mark' => array(
-      'variables' => array('status' => MARK_NEW),
+      'variables' => array('status' => t('new'), 'type' => 'info'),
     ),
     'item_list' => array(
       'variables' => array('items' => array(), 'title' => '', 'list_type' => 'ul', 'attributes' => array(), 'empty' => NULL, 'context' => array()),
diff --git a/core/modules/comment/comment.module b/core/modules/comment/comment.module
index 0756a53..5140122 100644
--- a/core/modules/comment/comment.module
+++ b/core/modules/comment/comment.module
@@ -736,9 +736,20 @@ function template_preprocess_comment(&$variables) {
   if (isset($comment->in_preview)) {
     $variables['status'] = 'preview';
   }
-  else {
-    $variables['status'] = $comment->isPublished() ? 'published' : 'unpublished';
+  elseif (!$comment->isPublished()) {
+    $variables['status'] = 'unpublished';
+  }
+
+  // Create markers to display the status.
+  $markers = array();
+  if (isset($variables['status'])) {
+    $markers[] = array(
+      '#theme' => 'mark',
+      '#status' => $variables['status'],
+      '#type' => 'warning',
+    );
   }
+  $variables['markers'] = drupal_render($markers);
 
   // Add comment author user ID. Necessary for the comment-by-viewer library.
   $variables['attributes']['data-comment-user-id'] = $comment->getOwnerId();
diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 14c52eb..2b7bc47 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -74,6 +74,7 @@
     indicator here would break the render cache.
   #}
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
+  {{ markers }}
 
   <footer>
     {{ user_picture }}
diff --git a/core/modules/history/src/Plugin/views/field/HistoryUserTimestamp.php b/core/modules/history/src/Plugin/views/field/HistoryUserTimestamp.php
index e1d6122..bd07c69 100644
--- a/core/modules/history/src/Plugin/views/field/HistoryUserTimestamp.php
+++ b/core/modules/history/src/Plugin/views/field/HistoryUserTimestamp.php
@@ -81,7 +81,7 @@ public function render(ResultRow $values) {
     // Let's default to 'read' state.
     // This code shadows node_mark, but it reads from the db directly and
     // we already have that info.
-    $mark = MARK_READ;
+    $mark = t('read');
     if (\Drupal::currentUser()->isAuthenticated()) {
       $last_read = $this->getValue($values);
       $changed = $this->getValue($values, 'changed');
@@ -89,13 +89,13 @@ public function render(ResultRow $values) {
       $last_comment = \Drupal::moduleHandler()->moduleExists('comment') && !empty($this->options['comments']) ?  $this->getValue($values, 'last_comment') : 0;
 
       if (!$last_read && $changed > HISTORY_READ_LIMIT) {
-        $mark = MARK_NEW;
+        $mark = t('new');
       }
       elseif ($changed > $last_read && $changed > HISTORY_READ_LIMIT) {
-        $mark = MARK_UPDATED;
+        $mark = t('updated');
       }
       elseif ($last_comment > $last_read && $last_comment > HISTORY_READ_LIMIT) {
-        $mark = MARK_UPDATED;
+        $mark = t('updated');
       }
       $build = array(
         '#theme' => 'mark',
diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index 7c371d6..a827920 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -218,18 +218,18 @@ function node_mark($nid, $timestamp) {
   $cache = &drupal_static(__FUNCTION__, array());
 
   if (\Drupal::currentUser()->isAnonymous() || !\Drupal::moduleHandler()->moduleExists('history')) {
-    return MARK_READ;
+    return t('read');
   }
   if (!isset($cache[$nid])) {
     $cache[$nid] = history_read($nid);
   }
   if ($cache[$nid] == 0 && $timestamp > HISTORY_READ_LIMIT) {
-    return MARK_NEW;
+    return t('new');
   }
   elseif ($timestamp > $cache[$nid] && $timestamp > HISTORY_READ_LIMIT) {
-    return MARK_UPDATED;
+    return t('updated');
   }
-  return MARK_READ;
+  return t('read');
 }
 
 /**
@@ -613,6 +613,17 @@ function template_preprocess_node(&$variables) {
     }
   }
 
+  $markers = array();
+  // Add a marker if the node is unpublished.
+  if( !$variables['node']->isPublished() ) {
+    $markers[] = array(
+      '#theme' => 'mark',
+      '#status' => 'unpublished',
+      '#type' => 'warning'
+    );
+  }
+  $variables['markers'] = drupal_render($markers);
+
   // Add article ARIA role.
   $variables['attributes']['role'] = 'article';
 }
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 03bbfd1..636ca38 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -122,36 +122,6 @@
 [dir="rtl"] .comment .links li {
   padding: 0 0 0 0.5em;
 }
-.comment--unpublished {
-  margin-right: 5px; /* LTR */
-  padding: 5px 2px 5px 5px; /* LTR */
-  background: #fff4f4;
-}
-[dir="rtl"] .comment--unpublished {
-  margin-left: 5px;
-  margin-right: 0;
-  padding: 5px 5px 5px 2px;
-}
-
-/**
- * @todo: unpublished nodes have class .node--unpublished.
- * change this to .comment--unpublished.
- */
-.unpublished .comment-text .comment-arrow {
-  border-left: 1px solid #fff4f4;
-  border-right: 1px solid #fff4f4;
-}
-.unpublished {
-  padding: 20px 15px 0;
-}
 .comment-footer {
   display: table-row;
 }
-.comment--unpublished .comment__text:after,
-.node--unpublished .comment__text:after {
-  border-right-color: #fff4f4; /* LTR */
-}
-[dir="rtl"] .comment--unpublished .comment__content:after,
-[dir="rtl"] .node--unpublished .comment__content:after {
-  border-left-color: #fff4f4;
-}
diff --git a/core/themes/bartik/css/components/node.css b/core/themes/bartik/css/components/node.css
index e57a686..5bd4a70 100644
--- a/core/themes/bartik/css/components/node.css
+++ b/core/themes/bartik/css/components/node.css
@@ -58,11 +58,3 @@
   text-align: left;
 }
 
-/* Unpublished node styles. */
-.node--unpublished {
-  padding: 20px 15px 0;
-}
-.node--unpublished .comment-text .comment-arrow {
-  border-left: 1px solid #fff4f4;
-  border-right: 1px solid #fff4f4;
-}
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 8927db4..bd24067 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -71,7 +71,6 @@
   set classes = [
     'comment',
     'js-comment',
-    status != 'published' ? 'comment--' ~ status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
     'clearfix',
@@ -83,7 +82,8 @@
     server which comments are new for the user. Rendering the final "new"
     indicator here would break the render cache.
   #}
-  <span class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+  <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
+  {{ markers }}
 
   <footer class="comment__meta">
     {{ user_picture }}
diff --git a/core/themes/bartik/templates/node.html.twig b/core/themes/bartik/templates/node.html.twig
index 7231922..e77a77c 100644
--- a/core/themes/bartik/templates/node.html.twig
+++ b/core/themes/bartik/templates/node.html.twig
@@ -36,7 +36,6 @@
  *   - node--promoted: Appears on nodes promoted to the front page.
  *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
  *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
  *     admins.
  * - title_attributes: Same as attributes, except applied to the main title
  *   tag that appears in the template.
@@ -67,7 +66,6 @@
     'node--type-' ~ node.bundle|clean_class,
     node.isPromoted() ? 'node--promoted',
     node.isSticky() ? 'node--sticky',
-    not node.isPublished() ? 'node--unpublished',
     view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
     'clearfix',
   ]
@@ -89,6 +87,15 @@
           {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
         </span>
         {{ metadata }}
+        {% if not node.isPublished() %}
+          {{ attach_library('classy/marker') }}
+          <div class="node__status">
+            <span class="marker marker--warning">
+              <span class="visually-hidden">{% trans %}This node is {% endtrans %}</span>
+              {% trans %}Unpublished{% endtrans %}
+            </span>
+          </div>
+        {% endif %}
       </div>
     {% endif %}
   </header>
diff --git a/core/themes/classy/classy.libraries.yml b/core/themes/classy/classy.libraries.yml
index 67477a8..f56c317 100644
--- a/core/themes/classy/classy.libraries.yml
+++ b/core/themes/classy/classy.libraries.yml
@@ -24,6 +24,8 @@ base:
       css/components/tablesort.css: { weight: -10 }
       css/components/tabs.css: { weight: -10 }
       css/components/textarea.css: { weight: -10 }
+    theme:
+      css/layout.css: {}
 
 book-navigation:
   version: VERSION
@@ -60,3 +62,9 @@ search-results:
   css:
     component:
       css/components/search-results.css: {}
+
+marker:
+  version: VERSION
+  css:
+    theme:
+      css/components/marker.css: {}
diff --git a/core/themes/classy/css/components/marker.css b/core/themes/classy/css/components/marker.css
new file mode 100644
index 0000000..aa9c3a9
--- /dev/null
+++ b/core/themes/classy/css/components/marker.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Visual styles for status markers.
+ */
+
+.marker {
+  display: inline-block;
+  padding: 1px 3px;
+  background: #333;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 0.75em;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+.marker--info {
+  background-color: #0074bd;
+}
+.marker--success {
+  background: #77b259;
+}
+.marker--warning {
+  background: #e09600;
+}
+.marker--error {
+  background: #e62600;
+}
diff --git a/core/themes/classy/css/components/node.css b/core/themes/classy/css/components/node.css
index 6b7cd52..03b74f6 100644
--- a/core/themes/classy/css/components/node.css
+++ b/core/themes/classy/css/components/node.css
@@ -3,6 +3,6 @@
  * Visual styles for nodes.
  */
 
-.node--unpublished {
-  background-color: #fff4f4;
+.node__status {
+  float: right;
 }
diff --git a/core/themes/classy/templates/content/comment.html.twig b/core/themes/classy/templates/content/comment.html.twig
index a4f7229..9cd0b7f 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -71,7 +71,6 @@
   set classes = [
     'comment',
     'js-comment',
-    status != 'published' ? status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
   ]
@@ -83,6 +82,7 @@
     indicator here would break the render cache.
   #}
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
+  {{ markers }}
 
   <footer class="comment__meta">
     {{ user_picture }}
diff --git a/core/themes/classy/templates/content/mark.html.twig b/core/themes/classy/templates/content/mark.html.twig
index f85bd80..2833a33 100644
--- a/core/themes/classy/templates/content/mark.html.twig
+++ b/core/themes/classy/templates/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The status message to display.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'new'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<mark class="marker marker--{{ type }}">{{ status }}</mark>
diff --git a/core/themes/classy/templates/content/node.html.twig b/core/themes/classy/templates/content/node.html.twig
index 6afe7b5..a835db1 100644
--- a/core/themes/classy/templates/content/node.html.twig
+++ b/core/themes/classy/templates/content/node.html.twig
@@ -36,7 +36,6 @@
  *   - node--promoted: Appears on nodes promoted to the front page.
  *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
  *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
  *     admins.
  * - title_attributes: Same as attributes, except applied to the main title
  *   tag that appears in the template.
@@ -71,7 +70,6 @@
     'node--type-' ~ node.bundle|clean_class,
     node.isPromoted() ? 'node--promoted',
     node.isSticky() ? 'node--sticky',
-    not node.isPublished() ? 'node--unpublished',
     view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
   ]
 %}
@@ -92,6 +90,7 @@
       <div{{ author_attributes.addClass('node__submitted') }}>
         {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
         {{ metadata }}
+        {{ markers }}
       </div>
     </footer>
   {% endif %}