diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js
index 1a1c461faba5..5df54df9bdb5 100644
--- a/extensions/amp-story/1.0/amp-story-system-layer.js
+++ b/extensions/amp-story/1.0/amp-story-system-layer.js
@@ -92,105 +92,115 @@ const HIDE_MESSAGE_TIMEOUT_MS = 1500;
 /**
  * @param {!Element} element
  * @param {?Element=} children
+ * @param {boolean} isVisible
  * @return {!Element}
  */
-const renderSystemLayerElement = (element, children) => (
-  <aside class="i-amphtml-story-system-layer i-amphtml-story-system-reset">
-    {children}
-    <a class={String(ATTRIBUTION_CLASS)} target="_blank">
-      <div class="i-amphtml-story-attribution-logo-container">
-        <img alt="" class="i-amphtml-story-attribution-logo" />
+const renderSystemLayerElement = (element, children, isVisible) => {
+  const systemLayerElement = (
+    <aside class="i-amphtml-story-system-layer i-amphtml-story-system-reset">
+      {children}
+      <a class={String(ATTRIBUTION_CLASS)} target="_blank">
+        <div class="i-amphtml-story-attribution-logo-container">
+          <img alt="" class="i-amphtml-story-attribution-logo" />
+        </div>
+        <div class="i-amphtml-story-attribution-text" />
+      </a>
+      <div class="i-amphtml-story-has-new-page-notification-container">
+        <div class="i-amphtml-story-has-new-page-text-wrapper">
+          <span class="i-amphtml-story-has-new-page-circle-icon" />
+          <div
+            class="i-amphtml-story-has-new-page-text"
+            i-amphtml-i18n-text-content={
+              LocalizedStringId_Enum.AMP_STORY_HAS_NEW_PAGE_TEXT
+            }
+          ></div>
+        </div>
       </div>
-      <div class="i-amphtml-story-attribution-text" />
-    </a>
-    <div class="i-amphtml-story-has-new-page-notification-container">
-      <div class="i-amphtml-story-has-new-page-text-wrapper">
-        <span class="i-amphtml-story-has-new-page-circle-icon" />
+      <div class="i-amphtml-story-system-layer-buttons">
         <div
-          class="i-amphtml-story-has-new-page-text"
-          i-amphtml-i18n-text-content={
-            LocalizedStringId_Enum.AMP_STORY_HAS_NEW_PAGE_TEXT
-          }
-        ></div>
-      </div>
-    </div>
-    <div class="i-amphtml-story-system-layer-buttons">
-      <div
-        role="button"
-        class={INFO_CLASS + ' i-amphtml-story-button'}
-        i-amphtml-i18n-aria-label={
-          LocalizedStringId_Enum.AMP_STORY_INFO_BUTTON_LABEL
-        }
-      />
-      <div class="i-amphtml-story-captions-display">
-        <button
-          class={CAPTIONS_CLASS + ' i-amphtml-story-button'}
+          role="button"
+          class={INFO_CLASS + ' i-amphtml-story-button'}
           i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_CAPTIONS_ON_LABEL
+            LocalizedStringId_Enum.AMP_STORY_INFO_BUTTON_LABEL
           }
         />
+        <div class="i-amphtml-story-captions-display">
+          <button
+            class={CAPTIONS_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_CAPTIONS_ON_LABEL
+            }
+          />
+          <button
+            class={NOCAPTIONS_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_CAPTIONS_OFF_LABEL
+            }
+          />
+        </div>
+        <div class="i-amphtml-story-sound-display">
+          <button
+            class={UNMUTE_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL
+            }
+          />
+          <button
+            class={MUTE_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_AUDIO_MUTE_BUTTON_LABEL
+            }
+          />
+        </div>
+        <div class="i-amphtml-paused-display">
+          <button
+            class={PAUSE_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_PAUSE_BUTTON_LABEL
+            }
+          />
+          <button
+            class={PLAY_CLASS + ' i-amphtml-story-button'}
+            i-amphtml-i18n-aria-label={
+              LocalizedStringId_Enum.AMP_STORY_PLAY_BUTTON_LABEL
+            }
+          />
+        </div>
         <button
-          class={NOCAPTIONS_CLASS + ' i-amphtml-story-button'}
-          i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_CAPTIONS_OFF_LABEL
+          class={
+            SKIP_TO_NEXT_CLASS +
+            ' i-amphtml-story-ui-hide-button i-amphtml-story-button'
           }
-        />
-      </div>
-      <div class="i-amphtml-story-sound-display">
-        <button
-          class={UNMUTE_CLASS + ' i-amphtml-story-button'}
           i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL
+            LocalizedStringId_Enum.AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL
           }
         />
         <button
-          class={MUTE_CLASS + ' i-amphtml-story-button'}
+          class={SHARE_CLASS + ' i-amphtml-story-button'}
           i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_AUDIO_MUTE_BUTTON_LABEL
+            LocalizedStringId_Enum.AMP_STORY_SHARE_BUTTON_LABEL
           }
         />
-      </div>
-      <div class="i-amphtml-paused-display">
         <button
-          class={PAUSE_CLASS + ' i-amphtml-story-button'}
-          i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_PAUSE_BUTTON_LABEL
+          class={
+            CLOSE_CLASS +
+            ' i-amphtml-story-ui-hide-button i-amphtml-story-button'
           }
-        />
-        <button
-          class={PLAY_CLASS + ' i-amphtml-story-button'}
           i-amphtml-i18n-aria-label={
-            LocalizedStringId_Enum.AMP_STORY_PLAY_BUTTON_LABEL
+            LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
           }
         />
       </div>
-      <button
-        class={
-          SKIP_TO_NEXT_CLASS +
-          ' i-amphtml-story-ui-hide-button i-amphtml-story-button'
-        }
-        i-amphtml-i18n-aria-label={
-          LocalizedStringId_Enum.AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL
-        }
-      />
-      <button
-        class={SHARE_CLASS + ' i-amphtml-story-button'}
-        i-amphtml-i18n-aria-label={
-          LocalizedStringId_Enum.AMP_STORY_SHARE_BUTTON_LABEL
-        }
-      />
-      <button
-        class={
-          CLOSE_CLASS + ' i-amphtml-story-ui-hide-button i-amphtml-story-button'
-        }
-        i-amphtml-i18n-aria-label={
-          LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
-        }
-      />
-    </div>
-    <div class="i-amphtml-story-system-layer-buttons-start-position" />
-  </aside>
-);
+      <div class="i-amphtml-story-system-layer-buttons-start-position" />
+    </aside>
+  );
+
+  if (!isVisible) {
+    systemLayerElement.classList.add('i-amphtml-story-hidden');
+  }
+
+  return systemLayerElement;
+};
 
 /**
  * Contains the event name belonging to the viewer control.
@@ -282,17 +292,19 @@ export class SystemLayer {
   }
 
   /**
-   * @return {!Element}
    * @param {string} initialPageId
+   * @param {boolean=} isVisible
+   * @return {!Element}
    */
-  build(initialPageId) {
+  build(initialPageId, isVisible = true) {
     if (this.root_) {
       return this.root_;
     }
 
     this.systemLayerEl_ = renderSystemLayerElement(
       this.parentEl_,
-      this.progressBar_.build(initialPageId)
+      this.progressBar_.build(initialPageId),
+      isVisible
     );
     localizeTemplate(this.systemLayerEl_, this.parentEl_);
 
diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
index 9af8731a6b7e..b3a845917e8e 100644
--- a/extensions/amp-story/1.0/amp-story.js
+++ b/extensions/amp-story/1.0/amp-story.js
@@ -583,12 +583,13 @@ export class AmpStory extends AMP.BaseElement {
   /**
    * Builds the system layer DOM.
    * @param {string} initialPageId
+   * @param {boolean} isVisible
    * @private
    */
-  buildSystemLayer_(initialPageId) {
+  buildSystemLayer_(initialPageId, isVisible) {
     this.updateAudioIcon_();
     this.updatePausedIcon_();
-    this.element.appendChild(this.systemLayer_.build(initialPageId));
+    this.element.appendChild(this.systemLayer_.build(initialPageId, isVisible));
   }
 
   /** @private */
@@ -949,7 +950,16 @@ export class AmpStory extends AMP.BaseElement {
   layoutStory_() {
     const initialPageId = this.getInitialPageId_();
 
-    this.buildSystemLayer_(initialPageId);
+    const shouldShowSystemLayer = !this.getAmpDoc().isPreview();
+    if (!shouldShowSystemLayer) {
+      // The default value of `SYSTEM_UI_IS_VISIBLE_STATE` is `true`. We set it
+      // to `false` here solely to ensure that a subsequent firing of the
+      // `TOGGLE_SYSTEM_UI_IS_VISIBLE` action with a `true` value registers as
+      // a change in state instead of being a no-op.
+      this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
+    }
+    this.buildSystemLayer_(initialPageId, shouldShowSystemLayer);
+
     this.setThemeColor_();
 
     const storyLayoutPromise = Promise.all([
@@ -1699,6 +1709,14 @@ export class AmpStory extends AMP.BaseElement {
     const vState = this.getAmpDoc().getVisibilityState();
     const isPreview = vState === VisibilityState_Enum.PREVIEW;
     const isVisible = vState === VisibilityState_Enum.VISIBLE;
+
+    if (isPreview) {
+      this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
+    }
+    if (isVisible) {
+      this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
+    }
+
     isPreview || isVisible ? this.resume_() : this.pause_();
   }
 
diff --git a/src/service/ampdoc-impl.js b/src/service/ampdoc-impl.js
index 459bb2c1795e..ca176a0b4d29 100644
--- a/src/service/ampdoc-impl.js
+++ b/src/service/ampdoc-impl.js
@@ -727,6 +727,14 @@ export class AmpDoc {
     return devAssert(this.visibilityState_);
   }
 
+  /**
+   * Whether the AMP document currently being previewed.
+   * @return {boolean}
+   */
+  isPreview() {
+    return this.visibilityState_ == VisibilityState_Enum.PREVIEW;
+  }
+
   /**
    * Whether the AMP document currently visible. The reasons why it might not
    * be visible include user switching to another tab, browser running the