diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 5d14f31..8d4dd14 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -328,14 +328,12 @@ function theme_get_setting($setting_name, $theme = NULL) {
       }
 
       // Generate the path to the logo image.
-      if ($cache[$theme]->get('features.logo')) {
-        $logo_path = $cache[$theme]->get('logo.path');
-        if ($cache[$theme]->get('logo.use_default')) {
-          $cache[$theme]->set('logo.url', file_create_url($theme_object->getPath() . '/logo.svg'));
-        }
-        elseif ($logo_path) {
-          $cache[$theme]->set('logo.url', file_create_url($logo_path));
-        }
+      $logo_path = $cache[$theme]->get('logo.path');
+      if ($cache[$theme]->get('logo.use_default')) {
+        $cache[$theme]->set('logo.url', file_create_url($theme_object->getPath() . '/logo.svg'));
+      }
+      elseif ($logo_path) {
+        $cache[$theme]->set('logo.url', file_create_url($logo_path));
       }
 
       // Generate the path to the favicon.
@@ -1368,9 +1366,6 @@ function template_preprocess_page(&$variables) {
   $variables['base_path']         = base_path();
   $variables['front_page']        = \Drupal::url('<front>');
   $variables['language']          = $language_interface;
-  $variables['logo']              = theme_get_setting('logo.url');
-  $variables['site_name']         = (theme_get_setting('features.name') ? String::checkPlain($site_config->get('name')) : '');
-  $variables['site_slogan']       = (theme_get_setting('features.slogan') ? Xss::filterAdmin($site_config->get('slogan')) : '');
 
   // An exception might be thrown.
   try {
diff --git a/core/lib/Drupal/Core/Extension/ThemeHandler.php b/core/lib/Drupal/Core/Extension/ThemeHandler.php
index 0513eb5..feea01f 100644
--- a/core/lib/Drupal/Core/Extension/ThemeHandler.php
+++ b/core/lib/Drupal/Core/Extension/ThemeHandler.php
@@ -29,10 +29,7 @@ class ThemeHandler implements ThemeHandlerInterface {
    * @var array
    */
   protected $defaultFeatures = array(
-    'logo',
     'favicon',
-    'name',
-    'slogan',
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
@@ -460,7 +457,8 @@ public function rebuildThemeData() {
         'sidebar_first' => 'Left sidebar',
         'sidebar_second' => 'Right sidebar',
         'content' => 'Content',
-        'header' => 'Header',
+        'header_first' => 'Header first',
+        'header_second' => 'Header second',
         'primary_menu' => 'Primary menu',
         'secondary_menu' => 'Secondary menu',
         'footer' => 'Footer',
diff --git a/core/modules/block/src/Tests/BlockRenderOrderTest.php b/core/modules/block/src/Tests/BlockRenderOrderTest.php
index 45bcf54..b443c23 100644
--- a/core/modules/block/src/Tests/BlockRenderOrderTest.php
+++ b/core/modules/block/src/Tests/BlockRenderOrderTest.php
@@ -38,7 +38,7 @@ protected function setUp() {
    */
   function testBlockRenderOrder() {
     // Enable test blocks and place them in the same region.
-    $region = 'header';
+    $region = 'header_second';
     $test_blocks = array(
       'stark_powered' => array(
         'weight' => '-3',
diff --git a/core/modules/block/src/Tests/BlockSystemBrandingTest.php b/core/modules/block/src/Tests/BlockSystemBrandingTest.php
index 57ebc85..4854bc3 100644
--- a/core/modules/block/src/Tests/BlockSystemBrandingTest.php
+++ b/core/modules/block/src/Tests/BlockSystemBrandingTest.php
@@ -31,7 +31,7 @@ protected function setUp() {
       ->set('slogan', 'Community plumbing')
       ->save();
     // Add the system branding block to the page.
-    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header', 'id' => 'site-branding'));
+    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_second', 'id' => 'site-branding'));
   }
 
   /**
diff --git a/core/modules/block/src/Tests/BlockTest.php b/core/modules/block/src/Tests/BlockTest.php
index e6709da..fb49ff6 100644
--- a/core/modules/block/src/Tests/BlockTest.php
+++ b/core/modules/block/src/Tests/BlockTest.php
@@ -136,7 +136,7 @@ function testBlock() {
     $block['id'] = 'system_powered_by_block';
     $block['settings[label]'] = $this->randomMachineName(8);
     $block['theme'] = $this->config('system.theme')->get('default');
-    $block['region'] = 'header';
+    $block['region'] = 'header_second';
 
     // Set block title to confirm that interface works and override any custom titles.
     $this->drupalPostForm('admin/structure/block/add/' . $block['id'] . '/' . $block['theme'], array('settings[label]' => $block['settings[label]'], 'id' => $block['id'], 'region' => $block['region']), t('Save block'));
@@ -272,7 +272,7 @@ function testHideBlockTitle() {
    *   - delta: The block's delta key.
    * @param string $region
    *   The machine name of the theme region to move the block to, for example
-   *   'header' or 'sidebar_first'.
+   *   'header_second' or 'sidebar_first'.
    */
   function moveBlockToRegion(array $block, $region) {
     // Set the created block to a specific region.
diff --git a/core/modules/block/src/Tests/BlockTestBase.php b/core/modules/block/src/Tests/BlockTestBase.php
index 1f3cb74..44d4cb4 100644
--- a/core/modules/block/src/Tests/BlockTestBase.php
+++ b/core/modules/block/src/Tests/BlockTestBase.php
@@ -59,7 +59,8 @@ protected function setUp() {
 
     // Define the existing regions.
     $this->regions = array(
-      'header',
+      'header_first',
+      'header_second',
       'sidebar_first',
       'content',
       'sidebar_second',
diff --git a/core/modules/block/src/Tests/BlockUiTest.php b/core/modules/block/src/Tests/BlockUiTest.php
index aba4ba1..7df170f 100644
--- a/core/modules/block/src/Tests/BlockUiTest.php
+++ b/core/modules/block/src/Tests/BlockUiTest.php
@@ -65,7 +65,7 @@ protected function setUp() {
       ),
       array(
         'label' => 'Powered by Drupal',
-        'tr' => '16',
+        'tr' => '18',
         'plugin_id' => 'system_powered_by_block',
         'settings' => array('region' => 'footer', 'id' => 'powered'),
         'test_weight' => '0',
@@ -105,8 +105,8 @@ function testBlockAdminUiPage() {
       $this->assertTrue((string) $element[0] == $label, 'The "' . $label . '" block title is set inside the ' . $values['settings']['region'] . ' region.');
       // Look for a test block region select form element.
       $this->assertField('blocks[' . $values['settings']['id'] . '][region]', 'The block "' . $values['label'] . '" has a region assignment field.');
-      // Move the test block to the header region.
-      $edit['blocks[' . $values['settings']['id'] . '][region]'] = 'header';
+      // Move the test block to the header_second region.
+      $edit['blocks[' . $values['settings']['id'] . '][region]'] = 'header_second';
       // Look for a test block weight select form element.
       $this->assertField('blocks[' . $values['settings']['id'] . '][weight]', 'The block "' . $values['label'] . '" has a weight assignment field.');
       // Change the test block's weight.
@@ -117,8 +117,8 @@ function testBlockAdminUiPage() {
       // Check if the region and weight settings changes have persisted.
       $this->assertOptionSelected(
         'edit-blocks-' . $values['settings']['id']  . '-region',
-        'header',
-        'The block "' . $label . '" has the correct region assignment (header).'
+        'header_second',
+        'The block "' . $label . '" has the correct region assignment (header_second).'
       );
       $this->assertOptionSelected(
         'edit-blocks-' . $values['settings']['id']  . '-weight',
diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 98678f7..019ab29 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -112,7 +112,8 @@ function color_library_info_alter(&$libraries, $extension) {
  */
 function color_preprocess_page(&$variables) {
   $theme_key = \Drupal::theme()->getActiveTheme()->getName();
-
+  $site_config = \Drupal::config('system.site');
+  $variables['logo'] = $site_config->get('logo');
   // Override logo.
   $logo = \Drupal::config('color.theme.' . $theme_key)->get('logo');
   if ($logo && $variables['logo'] && preg_match('!' . $theme_key . '/logo.svg$!', $variables['logo'])) {
diff --git a/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php b/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
index ae0d250..dc93e24 100644
--- a/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
+++ b/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
@@ -28,7 +28,7 @@ class ConfigTranslationUiTest extends WebTestBase {
    *
    * @var array
    */
-  public static $modules = array('node', 'contact', 'contact_test', 'config_translation', 'config_translation_test', 'views', 'views_ui', 'contextual', 'filter', 'filter_test');
+  public static $modules = array('node', 'contact', 'contact_test', 'config_translation', 'config_translation_test', 'views', 'views_ui', 'contextual', 'filter', 'filter_test', 'block');
 
   /**
    * Languages to enable.
@@ -157,6 +157,9 @@ public function testSiteInformationTranslationUi() {
     $this->assertFieldByName('translation[config_names][system.site][name]', $fr_site_name);
     $this->assertFieldByName('translation[config_names][system.site][slogan]', $fr_site_slogan);
 
+    // Place branding block with site name and slogan into header_first region.
+    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_first'));
+
     // Check French translation of site name and slogan are in place.
     $this->drupalGet('fr');
     $this->assertRaw($fr_site_name);
diff --git a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
index e584fb7..c7675c0 100644
--- a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
+++ b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
@@ -401,6 +401,9 @@ function testUrlLanguageFallback() {
     // it is set by JavaScript.
     $this->drupalLogout();
 
+    // Place a site branding block in the header_first region.
+    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_first'));
+
     // Access the front page without specifying any valid URL language prefix
     // and having as browser language preference a non-default language.
     $http_header = array("Accept-Language: $langcode_browser_fallback;q=1");
@@ -414,7 +417,7 @@ function testUrlLanguageFallback() {
     $this->assertTrue($fields[0] == $languages[$langcode_browser_fallback]->getName(), 'The browser language is the URL active language');
 
     // Check that URLs are rewritten using the given browser language.
-    $fields = $this->xpath('//strong[@class="site-name"]/a[@rel="home" and @href=:url]', $args);
+    $fields = $this->xpath('//div[@class="site-name"]/a[@rel="home" and @href=:url]', $args);
     $this->assertTrue($fields[0] == 'Drupal', 'URLs are rewritten using the browser language.');
   }
 
diff --git a/core/modules/system/config/install/system.theme.global.yml b/core/modules/system/config/install/system.theme.global.yml
index 5ee6cc7..b8da423 100644
--- a/core/modules/system/config/install/system.theme.global.yml
+++ b/core/modules/system/config/install/system.theme.global.yml
@@ -7,10 +7,7 @@ features:
   comment_user_picture: true
   comment_user_verification: true
   favicon: true
-  logo: true
-  name: true
   node_user_picture: true
-  slogan: true
 logo:
   path: ''
   url: ''
diff --git a/core/modules/system/src/Form/ThemeSettingsForm.php b/core/modules/system/src/Form/ThemeSettingsForm.php
index fd8b777..978ca80 100644
--- a/core/modules/system/src/Form/ThemeSettingsForm.php
+++ b/core/modules/system/src/Form/ThemeSettingsForm.php
@@ -141,9 +141,6 @@ public function buildForm(array $form, FormStateInterface $form_state, $theme =
 
     // Toggle settings
     $toggles = array(
-      'logo' => t('Logo'),
-      'name' => t('Site name'),
-      'slogan' => t('Site slogan'),
       'node_user_picture' => t('User pictures in posts'),
       'comment_user_picture' => t('User pictures in comments'),
       'comment_user_verification' => t('User verification status in comments'),
diff --git a/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php b/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
index 44650dd..b850bf2 100644
--- a/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
+++ b/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
@@ -12,6 +12,7 @@
 use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Component\Utility\String;
 use Drupal\Component\Utility\Xss;
 use Drupal\Core\Url;
 use Symfony\Component\DependencyInjection\ContainerInterface;
@@ -165,16 +166,16 @@ public function build() {
     $build = array();
     $site_config = $this->configFactory->get('system.site');
 
-    $logo = theme_get_setting('logo');
+    $logo_url = theme_get_setting('logo.url');
     $build['site_logo'] = array(
       '#theme' => 'image',
-      '#uri' => $logo['url'],
+      '#uri' => $logo_url,
       '#alt' => $this->t('Home'),
       '#access' => $this->configuration['use_site_logo'],
     );
 
     $build['site_name'] = array(
-      '#markup' => $site_config->get('name'),
+      '#markup' => String::checkPlain($site_config->get('name')),
       '#access' => $this->configuration['use_site_name'],
     );
 
diff --git a/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
index f4d30ec..6d5f9f2 100644
--- a/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
+++ b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
@@ -92,6 +92,7 @@ function testPageCacheTags() {
       'config:block.block.bartik_main_menu',
       'config:block.block.bartik_account_menu',
       'config:block.block.bartik_messages',
+      'config:block.block.bartik_branding',
       'node_view',
       'node:' . $node_1->id(),
       'user:' . $author_1->id(),
@@ -118,6 +119,7 @@ function testPageCacheTags() {
       'config:block.block.bartik_main_menu',
       'config:block.block.bartik_account_menu',
       'config:block.block.bartik_messages',
+      'config:block.block.bartik_branding',
       'node_view',
       'node:' . $node_2->id(),
       'user:' . $author_2->id(),
diff --git a/core/modules/system/src/Tests/System/PageTitleTest.php b/core/modules/system/src/Tests/System/PageTitleTest.php
index 204d265..d9e3ca8 100644
--- a/core/modules/system/src/Tests/System/PageTitleTest.php
+++ b/core/modules/system/src/Tests/System/PageTitleTest.php
@@ -23,7 +23,7 @@ class PageTitleTest extends WebTestBase {
    *
    * @var array
    */
-  public static $modules = array('node', 'test_page_test', 'form_test');
+  public static $modules = array('node', 'test_page_test', 'form_test', 'block');
 
   protected $content_user;
   protected $saved_title;
@@ -70,13 +70,6 @@ function testTitleXSS() {
     $slogan = '<script type="text/javascript">alert("Slogan XSS!");</script>';
     $slogan_filtered = Xss::filterAdmin($slogan);
 
-    // Activate needed appearance settings.
-    $edit = array(
-      'toggle_name'           => TRUE,
-      'toggle_slogan'         => TRUE,
-    );
-    $this->drupalPostForm('admin/appearance/settings', $edit, t('Save configuration'));
-
     // Set title and slogan.
     $edit = array(
       'site_name'    => $title,
@@ -84,6 +77,9 @@ function testTitleXSS() {
     );
     $this->drupalPostForm('admin/config/system/site-information', $edit, t('Save configuration'));
 
+    // Place branding block with site name and slogan into header_first region.
+    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_first'));
+
     // Load frontpage.
     $this->drupalGet('');
 
diff --git a/core/modules/system/src/Tests/System/ThemeTest.php b/core/modules/system/src/Tests/System/ThemeTest.php
index ccfc727..a7ed207 100644
--- a/core/modules/system/src/Tests/System/ThemeTest.php
+++ b/core/modules/system/src/Tests/System/ThemeTest.php
@@ -115,9 +115,10 @@ function testThemeSettings() {
       $this->assertEqual((string) $elements[1], $explicit_file);
       $this->assertEqual((string) $elements[2], $local_file);
 
-      // Verify the actual 'src' attribute of the logo being output.
+      // Verify the actual 'src' attribute of the logo being output in a site branding block.
+      $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_first'));
       $this->drupalGet('');
-      $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+      $elements = $this->xpath('//header//a[@rel=:rel]/img', array(
           ':rel' => 'home',
         )
       );
@@ -167,8 +168,9 @@ function testThemeSettings() {
     $fields = $this->xpath($this->constructFieldXpath('name', 'logo_path'));
     $uploaded_filename = 'public://' . $fields[0]['value'];
 
+    $this->drupalPlaceBlock('system_branding_block', array('region' => 'header_first'));
     $this->drupalGet('');
-    $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+    $elements = $this->xpath('//header//a[@rel=:rel]/img', array(
         ':rel' => 'home',
       )
     );
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index f784b3f..82f5834 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1024,10 +1024,7 @@ function system_rebuild_theme_data() {
  */
 function _system_default_theme_features() {
   return array(
-    'logo',
     'favicon',
-    'name',
-    'slogan',
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index eb5c7bf..326ccba 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -63,33 +63,9 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-
-        {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# ./name-and-slogan #}
-    {% endif %}
+    {{ page.header_first }}
 
-    {{ page.header }}
+    {{ page.header_second }}
   </header>
 
   {{ page.primary_menu }}
diff --git a/core/profiles/minimal/config/install/block.block.stark_branding.yml b/core/profiles/minimal/config/install/block.block.stark_branding.yml
new file mode 100644
index 0000000..789c2e3
--- /dev/null
+++ b/core/profiles/minimal/config/install/block.block.stark_branding.yml
@@ -0,0 +1,18 @@
+id: stark_branding
+theme: stark
+weight: 0
+status: true
+langcode: en
+region: header_first
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Page Site Branding'
+  provider: system
+  label_display: '0'
+dependencies:
+  module:
+    - system
+  theme:
+    - stark
+visibility: {  }
diff --git a/core/profiles/standard/config/install/block.block.bartik_branding.yml b/core/profiles/standard/config/install/block.block.bartik_branding.yml
new file mode 100644
index 0000000..aff7800
--- /dev/null
+++ b/core/profiles/standard/config/install/block.block.bartik_branding.yml
@@ -0,0 +1,18 @@
+id: bartik_branding
+theme: bartik
+weight: 0
+status: true
+langcode: en
+region: header_first
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Page Site Branding'
+  provider: system
+  label_display: '0'
+dependencies:
+  module:
+    - system
+  theme:
+    - bartik
+visibility: {  }
diff --git a/core/themes/bartik/bartik.info.yml b/core/themes/bartik/bartik.info.yml
index c96aae7..c8b1f7e 100644
--- a/core/themes/bartik/bartik.info.yml
+++ b/core/themes/bartik/bartik.info.yml
@@ -13,7 +13,8 @@ ckeditor_stylesheets:
   - css/components/content.css
   - css/components/table.css
 regions:
-  header: Header
+  header_first: 'Header first'
+  header_second: 'Header second'
   primary_menu: 'Primary menu'
   secondary_menu: 'Secondary menu'
   help: Help
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 7148e84..0df7389 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -41,9 +41,6 @@ function bartik_preprocess_html(&$variables) {
  * Implements hook_preprocess_HOOK() for page templates.
  */
 function bartik_preprocess_page(&$variables) {
-  // Set the options that apply to both page and maintenance page.
-  _bartik_process_page($variables);
-
   // Since the title and the shortcut link are both block level elements,
   // positioning them next to each other is much simpler with a wrapper div.
   if (!empty($variables['title_suffix']['add_or_remove_shortcut']) && $variables['title']) {
@@ -76,9 +73,6 @@ function bartik_preprocess_maintenance_page(&$variables) {
 
   // Bartik has custom styling for the maintenance page.
   $variables['#attached']['library'][] = 'bartik/maintenance_page';
-
-  // Set the options that apply to both page and maintenance page.
-  _bartik_process_page($variables);
 }
 
 /**
@@ -108,23 +102,3 @@ function bartik_preprocess_block(&$variables) {
 function bartik_preprocess_menu(&$variables) {
   $variables['attributes']['class'][] = 'clearfix';
 }
-
-/**
- * Helper function for handling the site name and slogan.
- */
-function _bartik_process_page(&$variables) {
-  $site_config = \Drupal::config('system.site');
-  // Always print the site name and slogan, but if they are toggled off, we'll
-  // just hide them visually.
-  $variables['hide_site_name']   = theme_get_setting('features.name') ? FALSE : TRUE;
-  $variables['hide_site_slogan'] = theme_get_setting('features.slogan') ? FALSE : TRUE;
-  if ($variables['hide_site_name']) {
-    // If toggle_name is FALSE, the site_name will be empty, so we rebuild it.
-    $variables['site_name'] = String::checkPlain($site_config->get('name'));
-  }
-  if ($variables['hide_site_slogan']) {
-    // If toggle_site_slogan is FALSE, the site_slogan will be empty, so we
-    // rebuild it.
-    $variables['site_slogan'] = Xss::filterAdmin($site_config->get('slogan'));
-  }
-}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 97ca1f5..1f8ea5e 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -43,12 +43,12 @@ a:active,
 #site-footer__wrapper {
   background: #292929;
 }
-.region-header,
-.region-header a,
-.region-header li a.active,
-#name-and-slogan,
+[class*="region-header-"],
+[class*="region-header-"] a,
+[class*="region-header-"] li a.active,
+.site-branding-text,
 .site-branding-block,
-#name-and-slogan a,
+.site-branding-text a,
 .site-branding-block a,
 .region-secondary-menu .menu-item a {
   color: #fffeff;
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index 0d4cb58..ece57fb 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -2,83 +2,68 @@
 #header {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-#logo,
 .site-logo {
   float: left; /* LTR */
   padding: 4px 4px 4px 9px; /* LTR */
 }
-[dir="rtl"] #logo,
 [dir="rtl"] .site-logo {
   padding: 4px 9px 4px 4px;
 }
 @media all and (min-width: 461px) and (max-width: 900px) {
-  #logo,
   .site-logo {
     padding: 5px 0 0 5px; /* LTR */
   }
-  [dir="rtl"] #logo,
   [dir="rtl"] .site-logo {
     padding: 5px 5px 0 0;
   }
 }
 @media all and (min-width: 901px) {
-  #logo,
   .site-logo {
     padding: 9px 4px 4px 9px; /* LTR */
   }
-  [dir="rtl"] #logo,
   [dir="rtl"] .site-logo {
     padding: 9px 9px 4px 4px;
   }
 }
-#name-and-slogan,
 .site-branding-text {
   float: left; /* LTR */
   margin: 0;
   padding: 5px 10px 8px;
 }
-[dir="rtl"] #name-and-slogan,
 [dir="rtl"] .site-branding-text {
   margin: 0 15px 30px 0;
 }
 @media all and (min-width: 461px) and (max-width: 900px) {
-  #name-and-slogan,
   .site-branding-text {
     padding: 10px 10px 8px;
   }
 }
 @media all and (min-width: 901px) {
-  #name-and-slogan,
   .site-branding-text {
     padding: 26px 0 0;
     margin: 0 0 30px 15px; /* LTR */
   }
-  [dir="rtl"] #name-and-slogan,
   [dir="rtl"] .site-branding-text {
     margin: 0 15px 30px 0;
   }
 }
-#site-name,
 .site-name {
   font-size: 1.6em;
   color: #686868;
   line-height: 1;
 }
 @media all and (min-width: 901px) {
-  #site-name,
   .site-name {
     font-size: 1.821em;
+    display: block;
   }
 }
-h1#site-name,
 h1.site-name {
   margin: 0;
 }
-#site-name a,
 .site-name a {
   font-weight: normal;
 }
-#site-slogan,
 .site-slogan {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.929em;
@@ -87,33 +72,37 @@ h1.site-name {
   font-style: italic;
 }
 /* Region header blocks. */
-.region-header .block {
+[class*="region-header-"] .block {
   font-size: 0.857em;
   float: left; /* LTR */
-  margin: 0 10px;
+  margin: 0;
   padding: 0;
 }
-.region-header .block > h2 {
+.region-header-second .block {
+  font-size: 0.857em;
+  margin: 0 10px;
+}
+[class*="region-header-"] .block > h2 {
   /* @extend .visually-hidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
   height: 1px;
 }
-.region-header .block .content {
+[class*="region-header-"] .block .content {
   margin: 0;
   padding: 0;
 }
-.region-header .block ul {
+[class*="region-header-"] .block ul {
   margin: 0;
   padding: 0;
 }
-.region-header .block li {
+[class*="region-header-"] .block li {
   list-style: none;
   list-style-image: none;
   padding: 0;
 }
-.region-header .form-text {
+[class*="region-header-"] .form-text {
   background: #fefefe;
   background: rgba(255, 255, 255, 0.7);
   border-color: #ccc;
@@ -121,88 +110,88 @@ h1.site-name {
   margin-right: 2px; /* LTR */
   width: 120px;
 }
-[dir="rtl"] .region-header .form-text {
+[dir="rtl"] [class*="region-header-"] .form-text {
   margin-left: 2px;
   margin-right: 0;
 }
-.region-header .form-text:hover,
-.region-header .form-text:active,
-.region-header .form-text:focus {
+[class*="region-header-"] .form-text:hover,
+[class*="region-header-"] .form-text:focus,
+[class*="region-header-"] .form-text:active {
   background: #fff;
   background: rgba(255, 255, 255, 0.8);
 }
-.region-header .form-required:after {
+[class*="region-header-"] .form-required {
   background-image: url(../../images/required.svg);
 }
-/* Region header block menus. */
-.region-header .block-menu {
+/* Block menus in header regions. */
+[class*="region-header-"] .block-menu {
   border: 1px solid;
   border-color: #eee;
   border-color: rgba(255, 255, 255, 0.2);
   padding: 0;
   width: 208px;
 }
-.region-header .block-menu li a {
+[class*="region-header-"] .block-menu li a {
   display: block;
   border-bottom: 1px solid;
   border-bottom-color: #eee;
   border-bottom-color: rgba(255, 255, 255, 0.2);
   padding: 3px 7px;
 }
-.region-header .block-menu li a:hover,
-.region-header .block-menu li a:active,
-.region-header .block-menu li a:focus {
+[class*="region-header-"] .block-menu li a:hover,
+[class*="region-header-"] .block-menu li a:focus,
+[class*="region-header-"] .block-menu li a:active {
   text-decoration: none;
   background: rgba(255, 255, 255, 0.15);
 }
-.region-header .block-menu li:last-child a {
+[class*="region-header-"] .block-menu li:last-child a {
   border-bottom: 0;
 }
-/* User Login block in the header region */
-.region-header #block-user-login {
+/* User Login block in header regions. */
+[class*="region-header-"] #block-user-login {
   width: auto;
 }
-.region-header #block-user-login .content {
+[class*="region-header-"] #block-user-login .content {
   margin-top: 2px;
 }
-.region-header #block-user-login .form-item {
+[class*="region-header-"] #block-user-login .form-item {
   float: left; /* LTR */
   margin: 0;
   padding: 0;
 }
-.region-header #block-user-login div.item-list,
-.region-header #block-user-login div.description {
+[class*="region-header-"] #block-user-login div.item-list,
+[class*="region-header-"] #block-user-login div.description {
   font-size: 0.916em;
   margin: 0;
 }
-.region-header #block-user-login div.item-list {
+[class*="region-header-"] #block-user-login div.item-list {
   clear: both;
 }
-.region-header #block-user-login div.description {
+[class*="region-header-"] #block-user-login div.description {
   display: inline;
 }
-.region-header #block-user-login .item-list ul {
+[class*="region-header-"] #block-user-login .item-list ul {
   padding: 0;
   line-height: 1;
 }
-.region-header #block-user-login .item-list li {
+[class*="region-header-"] #block-user-login .item-list li {
   list-style: none;
   float: left; /* LTR */
   padding: 3px 0 1px;
 }
-.region-header #block-user-login .item-list li:last-child {
+[class*="region-header-"] #block-user-login .item-list li:last-child {
   padding-left: 0.5em; /* LTR */
 }
-[dir="rtl"] .region-header #block-user-login .item-list li:last-child {
+[dir="rtl"] [class*="region-header-"] #block-user-login .item-list li:last-child {
   padding-left: 0;
   padding-right: 0.5em;
 }
-.region-header #block-user-login .form-actions {
+[class*="region-header-"] #block-user-login .form-actions {
   margin: 4px 0 0;
   padding: 0;
   clear: both;
 }
-.region-header #block-user-login input.form-submit {
+[class*="region-header-"] #block-user-login input.form-submit {
   border: 1px solid;
   border-color: #ccc;
   border-color: rgba(255, 255, 255, 0.5);
@@ -211,30 +200,28 @@ h1.site-name {
   margin: 4px 0;
   padding: 3px 8px;
 }
-.region-header #block-user-login input.form-submit:hover,
-.region-header #block-user-login input.form-submit:focus {
+[class*="region-header-"] #block-user-login input.form-submit:hover,
+[class*="region-header-"] #block-user-login input.form-submit:focus {
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
 }
-/* Search block in region header. */
-.region-header #block-search-form {
+/* Search block in region headers. */
+[class*="region-header-"] #block-search-form {
   width: 208px;
 }
-.region-header #block-search-form .form-text {
+[class*="region-header-"] #block-search-form .form-text {
   width: 154px;
 }
-/* Language switcher block in region header. */
-.region-header .block-locale ul li {
+/* Language switcher block in region headers. */
+[class*="region-header-"] .block-locale ul li {
   display: inline;
   padding: 0 0.5em;
 }
 
-[dir="rtl"] #logo,
 [dir="rtl"] .site-logo,
-[dir="rtl"] #name-and-slogan,
 [dir="rtl"] .site-branding-text,
-[dir="rtl"] .region-header .block,
-[dir="rtl"] .region-header #block-user-login .form-item,
-[dir="rtl"] .region-header #block-user-login .item-list li {
+[dir="rtl"] [class*="region-header-"] .block,
+[dir="rtl"] [class*="region-header-"] #block-user-login .form-item,
+[dir="rtl"] [class*="region-header-"] #block-user-login .item-list li {
   float: right;
 }
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index bd1b230..33e409a 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -24,11 +24,19 @@ body,
 #header div.section {
   position: relative;
 }
-.region-header {
-  float: right; /* LTR */
+.region-header-second {
   margin: .5em 5px .75em;
 }
-[dir="rtl"] .region-header {
+.region-header-first {
+  float: left; /* LTR */
+}
+.region-header-second {
+  float: right; /* LTR */
+}
+[dir="rtl"] .region-header-first {
+  float: right;
+}
+[dir="rtl"] .region-header-second {
   float: left;
 }
 @media all and (min-width: 461px) and (max-width: 900px) {
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index 9a08d04..839fb08 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -35,19 +35,18 @@ body.maintenance-page {
   background-color: #fff;
   background-image: none;
 }
-.maintenance-page #name-and-slogan {
+.maintenance-page .site-branding-text {
   margin-bottom: 50px;
   margin-left: 0; /* LTR */
   padding-top: 20px;
   font-size: 90%;
 }
-[dir="rtl"] .maintenance-page #name-and-slogan {
+[dir="rtl"] .maintenance-page .site-branding-text {
   margin-right: 0;
 }
-.maintenance-page #name-and-slogan,
-.maintenance-page #name-and-slogan a,
-.maintenance-page #name-and-slogan a:hover,
-.maintenance-page #name-and-slogan a:focus {
+.maintenance-page .site-branding-text,
+.maintenance-page .site-branding-text a,
+.maintenance-page .site-branding-text a:hover {
   color: #777;
 }
 .maintenance-page  h1#page-title {
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index c4eae01..dfa7b5d 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -12,22 +12,7 @@
   <div id="page">
     <header id="header" role="banner">
       <div class="section clearfix">
-        {% if site_name or site_slogan %}
-          <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="visually-hidden"' }}>
-            {% if site_name %}
-              <div id="site-name"{{ hide_site_name ? ' class="visually-hidden"' }}>
-                <strong>
-                  <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-                </strong>
-              </div>
-            {% endif %}
-            {% if site_slogan %}
-              <div id="site-slogan"{{ hide_site_slogan ? ' class="visually-hidden"' }}>
-                {{ site_slogan }}
-              </div>
-            {% endif %}
-          </div>
-        {% endif %}
+        {{ page.header_first }}
       </div>
     </header>
     <div id="main-wrapper">
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 04ffe94..be03746 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -20,17 +20,6 @@
  * Site identity:
  * - front_page: The URL of the front page. Use this instead of base_path when
  *   linking to the front page. This includes the language domain or prefix.
- * - logo: The url of the logo image, as defined in theme settings.
- * - site_name: The name of the site. This is empty when displaying the site
- *   name has been disabled in the theme settings.
- * - site_slogan: The slogan of the site. This is empty when displaying the site
- *   slogan has been disabled in theme settings.
- * - hide_site_name: A flag indicating if the site name has been toggled off on
- *   the theme settings page. If hidden, the "visually-hidden" class is added
- *   to make the site name visually hidden, but still accessible.
- * - hide_site_slogan: A flag indicating if the site slogan has been toggled off
- *   on the theme settings page. If hidden, the "visually-hidden" class is
- *   added to make the site slogan visually hidden, but still accessible.
  *
  * Page content (in order of occurrence in the default page.html.twig):
  * - title_prefix: Additional output populated by modules, intended to be
@@ -48,7 +37,8 @@
  *   comment/reply/12345).
  *
  * Regions:
- * - page.header: Items for the header region.
+ * - page.header_first: Items for the first header region.
+ * - page.header_second: Items for the second header region.
  * - page.messages: Status and error messages. Should be displayed prominently.
  * - page.primary_menu: Items for the primary menu region.
  * - page.secondary_menu: Items for the secondary menu region.
@@ -77,35 +67,8 @@
     <header id="header" role="banner" aria-label="{{ 'Site header'|t}}">
       <div class="section clearfix">
         {{ page.secondary_menu }}
-        {% if logo %}
-          <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
-            <img src="{{ logo }}" alt="{{ 'Home'|t }}" />
-          </a>
-        {% endif %}
-        {% if site_name or site_slogan %}
-          <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="visually-hidden"{% endif %}>
-            {% if site_name %}
-              {% if title %}
-                <div id="site-name"{% if hide_site_name %} class="visually-hidden"{% endif %}>
-                  <strong>
-                    <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-                  </strong>
-                </div>
-              {# Use h1 when the content title is empty #}
-              {% else %}
-                <h1 id="site-name"{% if hide_site_name %} class="visually-hidden" {% endif %}>
-                  <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-                </h1>
-              {% endif %}
-            {% endif %}
-            {% if site_slogan %}
-              <div id="site-slogan"{% if hide_site_slogan %} class="visually-hidden"{% endif %}>
-                {{ site_slogan }}
-              </div>
-            {% endif %}
-          </div>
-        {% endif %}
-        {{ page.header }}
+        {{ page.header_first }}
+        {{ page.header_second }}
         {{ page.primary_menu }}
       </div>
     </header>
diff --git a/core/themes/classy/templates/layout/maintenance-page.html.twig b/core/themes/classy/templates/layout/maintenance-page.html.twig
index eaae5ab..f0ca665 100644
--- a/core/themes/classy/templates/layout/maintenance-page.html.twig
+++ b/core/themes/classy/templates/layout/maintenance-page.html.twig
@@ -14,26 +14,8 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-        {% if site_name %}
-         <h1 class="site-name">
-           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-         </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# /.name-and-slogan #}
-    {% endif %}
-
+    {{ page.header_first }}
+    {{ page.header_second }}
   </header>
 
   <main role="main">
diff --git a/core/themes/classy/templates/layout/page.html.twig b/core/themes/classy/templates/layout/page.html.twig
index 437a11c..52b05c4 100644
--- a/core/themes/classy/templates/layout/page.html.twig
+++ b/core/themes/classy/templates/layout/page.html.twig
@@ -19,11 +19,6 @@
  * Site identity:
  * - front_page: The URL of the front page. Use this instead of base_path when
  *   linking to the front page. This includes the language domain or prefix.
- * - logo: The url of the logo image, as defined in theme settings.
- * - site_name: The name of the site. This is empty when displaying the site
- *   name has been disabled in the theme settings.
- * - site_slogan: The slogan of the site. This is empty when displaying the site
- *   slogan has been disabled in theme settings.
  *
  * Page content (in order of occurrence in the default page.html.twig):
  * - title_prefix: Additional output populated by modules, intended to be
@@ -41,6 +36,8 @@
  *   comment/reply/12345).
  *
  * Regions:
+ * - page.header_first: Items for the first header region.
+ * - page.header_second: Items for the second header region.
  * - page.header: Items for the header region.
  * - page.messages: Status and error messages. Should be displayed prominently.
  * - page.primary_menu: Items for the primary menu region.
@@ -62,32 +59,8 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-
-        {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# ./name-and-slogan #}
-    {% endif %}
-
+    {{ page.header_first }}
+    {{ page.header_second }}
     {{ page.header }}
   </header>
 
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 621cf82..e0687e7 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -146,16 +146,20 @@ function seven_element_info_alter(&$type) {
  * Implements hook_preprocess_install_page().
  */
 function seven_preprocess_install_page(&$variables) {
+  $site_config = \Drupal::config('system.site');
   // Seven has custom styling for the install page.
   $variables['#attached']['library'][] = 'seven/install-page';
+  $variables['site_name'] = String::checkPlain($site_config->get('name'));
 }
 
 /**
  * Implements hook_preprocess_maintenance_page().
  */
 function seven_preprocess_maintenance_page(&$variables) {
+  $site_config = \Drupal::config('system.site');
   // Seven has custom styling for the maintenance page.
   $variables['#attached']['library'][] = 'seven/maintenance-page';
+  $variables['site_name'] = String::checkPlain($site_config->get('name'));
 }
 
 /**
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 4110987..0cdf4a4 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -20,11 +20,6 @@
  * Site identity:
  * - front_page: The URL of the front page. Use this instead of base_path when
  *   linking to the front page. This includes the language domain or prefix.
- * - logo: The url of the logo image, as defined in theme settings.
- * - site_name: The name of the site. This is empty when displaying the site
- *   name has been disabled in the theme settings.
- * - site_slogan: The slogan of the site. This is empty when displaying the site
- *   slogan has been disabled in theme settings.
  *
  * Page content (in order of occurrence in the default page.html.twig):
  * - title_prefix: Additional output populated by modules, intended to be