refactor: 💡 update all header tags to use HDS::Text::Display (#2765)

* refactor: 💡 update all header tags to use HDS::Text::Display

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16863

* refactor: 💡 update minor css changes for page header

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16863

* refactor: 💡 remove duplicate title and lint hbs files

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16863

addons/api/tests/dummy/app/templates/application.hbs

@@ -5,6 +5,6 @@
 
 {{page-title "Dummy"}}
 
-<h2 id="title">Welcome to Ember</h2>
+<Hds::Text::Display @tag="h2" id="title">Welcome to Ember</Hds::Text::Display>
 
 {{outlet}}

addons/auth/tests/dummy/app/templates/application.hbs

@@ -5,6 +5,6 @@
 
 {{page-title "Dummy"}}
 
-<h2 id="title">Welcome to Ember</h2>
+<Hds::Text::Display @tag="h2" id="title">Welcome to Ember</Hds::Text::Display>
 
 {{outlet}}

addons/core/tests/dummy/app/templates/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2 id='title'>Welcome to Ember</h2>
+<Hds::Text::Display @tag='h2' id='title'>Welcome to Ember</Hds::Text::Display>
 <p>{{relative-datetime-live this.now}}</p>
 
 <ul>

addons/core/tests/dummy/app/templates/smoke-test.hbs

@@ -3,11 +3,13 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h1>Smoke Test</h1>
+<Hds::Text::Display @tag='h1'>Smoke Test</Hds::Text::Display>
 <p>
   This template is used by the smoke-test acceptance tests, which validate that
   Ember can start up and basic features work as intended.
 </p>
 
-<h2>{{t 'resources.account.title'}}</h2>
+<Hds::Text::Display @tag='h2'>{{t
+    'resources.account.title'
+  }}</Hds::Text::Display>
 <p>{{t 'resources.account.description'}}</p>

addons/rose/addon/components/rose/dialog/index.hbs

@@ -23,7 +23,10 @@
         <Rose::Icon @name={{@icon}} @size='medium' />
       {{/if}}
 
-      <h2 class='rose-dialog-heading'>{{@heading}}</h2>
+      <Hds::Text::Display
+        @tag='h2'
+        class='rose-dialog-heading'
+      >{{@heading}}</Hds::Text::Display>
 
       <button
         type='button'
@@ -65,7 +68,10 @@
           <Rose::Icon @name={{@icon}} @size='medium' />
         {{/if}}
 
-        <h2 class='rose-dialog-heading'>{{@heading}}</h2>
+        <Hds::Text::Display
+          @tag='h2'
+          class='rose-dialog-heading'
+        >{{@heading}}</Hds::Text::Display>
 
         <button
           type='button'

addons/rose/addon/components/rose/dropdown/section/index.hbs

@@ -8,7 +8,8 @@
   aria-labelledby={{concat 'dropdown-section-title-' this.id}}
 >
   {{#if @title}}
-    <h2
+    <Hds::Text::Display
+      @tag='h2'
       id={{concat 'dropdown-section-title-' this.id}}
       class='rose-dropdown-section-title'
     >
@@ -16,7 +17,7 @@
         <Rose::Icon @name={{@icon}} @size='medium' />
       {{/if}}
       {{@title}}
-    </h2>
+    </Hds::Text::Display>
   {{/if}}
 
   {{yield}}

addons/rose/addon/components/rose/header/brand/index.hbs

@@ -15,7 +15,10 @@
   {{/if}}
 
   {{#if @text}}
-    <h1 class='rose-header-brand-text'>{{@text}}</h1>
+    <Hds::Text::Display
+      @tag='h1'
+      class='rose-header-brand-text'
+    >{{@text}}</Hds::Text::Display>
   {{/if}}
 
 </LinkTo>

addons/rose/tests/integration/components/rose/dialog/cover-test.js

@@ -15,7 +15,9 @@ module('Integration | Component | rose/dialog/cover', function (hooks) {
     await render(hbs`
       <Rose::Dialog::Cover>
         <:header>
-          <h1>Authentication Pending</h1>
+          <Hds::Text::Display
+            @tag='h1'
+          >Authentication Pending</Hds::Text::Display>
         </:header>
         <:body>
           <p>Complete authentication in the newly-opened window.</p>

ui/admin/app/components/auth-methods/auth-method/accounts/account/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.account.title'}}
   <DocLink @doc='account' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.account.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/header/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.auth-method.title'}}
   {{#if @model.isPrimary}}
     &nbsp;
@@ -11,6 +11,6 @@
     &nbsp;
   {{/if}}
   <DocLink @doc='auth-method' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.auth-method.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.managed-group.title'}}
   <DocLink @doc='managed-groups' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.managed-group.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/credential-stores/credential-store/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.credential-store.title'}}
   <DocLink @doc='credential-store' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.credential-store.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/form/scope/add-storage-policy/create.hbs

@@ -15,7 +15,13 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.policy.titles.new'}}</h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
+      {{t 'resources.policy.titles.new'}}</Hds::Text::Display>
   </page.header>
 
   <page.body>

ui/admin/app/components/form/worker/create-worker-led/index.hbs

@@ -9,7 +9,14 @@
   @showEditToggle={{false}}
   as |form|
 >
-  <h3>{{t 'resources.worker.form.steps.1.title'}}</h3>
+  <Hds::Text::Display
+    @tag='h3'
+    @size='300'
+    @weight='bold'
+    class='header-spacing'
+  >
+    {{t 'resources.worker.form.steps.1.title'}}
+  </Hds::Text::Display>
   <div class='worker-create-section'>
     {{#if (feature-flag 'byow-pki-hcp-cluster-id')}}
       <Hds::Form::TextInput::Field
@@ -179,7 +186,14 @@
     </p>
   </div>
 
-  <h3>{{t 'resources.worker.form.steps.2.title'}}</h3>
+  <Hds::Text::Display
+    @tag='h3'
+    @size='300'
+    @weight='bold'
+    class='header-spacing'
+  >
+    {{t 'resources.worker.form.steps.2.title'}}
+  </Hds::Text::Display>
   <div class='worker-create-section'>
 
     <p>
@@ -201,7 +215,14 @@
     </p>
   </div>
 
-  <h3>{{t 'resources.worker.form.steps.3.title'}}</h3>
+  <Hds::Text::Display
+    @tag='h3'
+    @size='300'
+    @weight='bold'
+    class='header-spacing'
+  >
+    {{t 'resources.worker.form.steps.3.title'}}
+  </Hds::Text::Display>
   <div class='worker-create-section'>
     <div class='worker-auth-token'>
       <Hds::Form::TextInput::Field

ui/admin/app/components/groups/group/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.group.title'}}
   <DocLink @doc='group' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.group.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host-catalog.title'}}
   <DocLink @doc='host-catalog' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host-catalog.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/add-hosts/header/index.hbs

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host-set.host.messages.add.title'}}
   <DocLink @doc='host-set.add-hosts' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host-set.host.messages.add.description'}}</p>

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host/header/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host-set.actions.create-and-add-host'}}
   <DocLink @doc='host.new' @iconSize='large' />
-</h2>
+</Hds::Text::Display>

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host-set.title'}}
   <DocLink @doc='host-set' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host-set.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host.title'}}
   <DocLink @doc='host' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/new/header/index.hbs

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host-set.titles.new'}}
   <DocLink @doc='host-set.new' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host-set.description'}}</p>

ui/admin/app/components/host-catalogs/host-catalog/hosts/host/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host.title'}}
   <DocLink @doc='host' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/hosts/new/header/index.hbs

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.host.titles.new'}}
   <DocLink @doc='host.new' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>

ui/admin/app/components/roles/role/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.role.title'}}
   <DocLink @doc='role' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.role.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/targets/target/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.target.title'}}
   <DocLink @doc='target' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.target.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/users/user/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.user.title'}}
   <DocLink @doc='user' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.user.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/workers/worker/header/index.hbs

@@ -3,9 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h2>
+<Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
   {{t 'resources.worker.title'}}
   <DocLink @doc='worker' @iconSize='large' />
-</h2>
+</Hds::Text::Display>
 <p>{{t 'resources.worker.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/styles/app.scss

@@ -1081,6 +1081,15 @@
   }
 }
 
+.header-spacing {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+
+  .doc-link {
+    vertical-align: middle;
+  }
+}
+
 // scope picker
 .scope-picker {
   &__toggle-button {

ui/admin/app/templates/account/change-password.hbs

@@ -12,9 +12,12 @@
       <Rose::Frame>
         <:header>
           <Hds::Icon @name='boundary-color' @size='24' @isInline={{true}} />
-          <Hds::Text::Display @tag='h2' @size='300' @weight='bold'>{{t
-              'actions.change-password'
-            }}</Hds::Text::Display>
+          <Hds::Text::Display
+            @tag='h2'
+            @size='400'
+            @weight='bold'
+            class='header-spacing'
+          >{{t 'actions.change-password'}}</Hds::Text::Display>
         </:header>
         <:body>
           <Form::Account::Password::ChangePassword

ui/admin/app/templates/index.hbs

@@ -3,4 +3,4 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<h1>{{app-name}}</h1>
+<Hds::Text::Display @tag='h1' @size='400'>{{app-name}}</Hds::Text::Display>

ui/admin/app/templates/onboarding/index.hbs

@@ -7,9 +7,12 @@
   <Rose::Frame class='create-resources'>
     <:header>
       <Hds::Icon @name='boundary-color' @size='24' @isInline={{true}} />
-      <Hds::Text::Display @tag='h2' @size='300' @weight='bold'>{{t
-          'onboarding.add-target.titles.have-a-target'
-        }}</Hds::Text::Display>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >{{t 'onboarding.add-target.titles.have-a-target'}}</Hds::Text::Display>
     </:header>
     <:body>
       <p>{{t 'onboarding.add-target.descriptions.setup-first-target'}}</p>

ui/admin/app/templates/onboarding/success.hbs

@@ -9,9 +9,12 @@
   <Rose::Frame class='create-resources'>
     <:header>
       <Hds::Icon @name='boundary-color' @size='24' @isInline={{true}} />
-      <Hds::Text::Display @tag='h2' @size='300' @weight='bold'>{{t
-          'onboarding.success.titles.connect'
-        }}</Hds::Text::Display>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >{{t 'onboarding.success.titles.connect'}}</Hds::Text::Display>
     </:header>
     <:body>
       {{! We have created }}
@@ -23,7 +26,9 @@
             class='hds-foreground-success'
             @isInline={{true}}
           />
-          <h3>{{t 'onboarding.success.titles.creation-success'}}</h3>
+          <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>{{t
+              'onboarding.success.titles.creation-success'
+            }}</Hds::Text::Display>
         </span>
         <p>{{t 'onboarding.success.descriptions.role'}}</p>
       </div>
@@ -31,7 +36,9 @@
       {{! Download Desktop client }}
       <div class='create-resources-item'>
         <span class='create-resources-item-header'>
-          <h3>{{t 'onboarding.success.titles.desktop'}}</h3>
+          <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>{{t
+              'onboarding.success.titles.desktop'
+            }}</Hds::Text::Display>
         </span>
         <p>{{t 'onboarding.success.descriptions.download'}}</p>
 
@@ -51,9 +58,9 @@
 
         {{! Controller }}
         <div class='create-resources-item-controller'>
-          <h4 class='hds-typography-display-200 hds-font-weight-semibold'>
+          <Hds::Text::Display @tag='h4'>
             {{t 'onboarding.success.titles.controller'}}
-          </h4>
+          </Hds::Text::Display>
           <span class='create-resources-item-controller-label'>{{t
               'onboarding.success.descriptions.controller'
             }}</span>
@@ -67,9 +74,9 @@
 
       {{! Developers }}
       <div class='create-resources-item'>
-        <h4 class='hds-typography-display-200 hds-font-weight-semibold'>
+        <Hds::Text::Display @tag='h4'>
           {{t 'onboarding.success.titles.developers'}}
-        </h4>
+        </Hds::Text::Display>
         <p>{{t 'onboarding.success.descriptions.developers'}}</p>
 
         <Hds::Link::Standalone

ui/admin/app/templates/scopes/scope/add-storage-policy/create.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.policy.titles.new'}}
       <DocLink @doc='storage-policy.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.policy.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/add-storage-policy/index.hbs

@@ -14,10 +14,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.policy.actions.add'}}
       <DocLink @doc='storage-policy.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/aliases/alias/index.hbs

@@ -8,10 +8,15 @@
     <Breadcrumbs::Container />
   </page.breadcrumbs>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.alias.title'}}
       <DocLink @doc='alias' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.alias.description'}}</p>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>

ui/admin/app/templates/scopes/scope/aliases/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.alias.title_plural'}}
       <DocLink @doc='alias' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.alias.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/aliases/new.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.alias.titles.new'}}
       <DocLink @doc='alias' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.alias.description'}}</p>
 
   </page.header>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs

@@ -16,7 +16,12 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.account.title'}}</h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >{{t 'resources.account.title'}}</Hds::Text::Display>
     <p>{{t 'resources.account.messages.set-password.description'}}</p>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.account.titles.new'}}
       <DocLink @doc='account.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.account.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.managed-group.titles.new'}}
       <DocLink @doc='managed-groups' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.managed-group.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/auth-methods/index.hbs

@@ -5,10 +5,15 @@
 
 <Rose::Layout::Page as |page|>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.auth-method.title_plural'}}
       <DocLink @doc='auth-method' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.auth-method.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/auth-methods/new.hbs

@@ -11,10 +11,15 @@
 
 <Rose::Layout::Page as |page|>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.auth-method.titles.new'}}
       <DocLink @doc='auth-method' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.auth-method.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/authenticate.hbs

@@ -13,9 +13,12 @@
       <Rose::Frame>
         <:header>
           <Hds::Icon @name='boundary-color' @size='24' @isInline={{true}} />
-          <Hds::Text::Display @tag='h2' @size='300' @weight='bold'>{{t
-              'actions.authenticate'
-            }}</Hds::Text::Display>
+          <Hds::Text::Display
+            @tag='h2'
+            @size='400'
+            @weight='bold'
+            class='header-spacing'
+          >{{t 'actions.authenticate'}}</Hds::Text::Display>
         </:header>
         <:body>
           <Hds::Text::Body @tag='p'>{{t

ui/admin/app/templates/scopes/scope/authenticate/method/oidc.hbs

@@ -6,7 +6,9 @@
 <Rose::Dialog::Cover>
   <:header>
     {{inline-svg 'logo-app-full'}}
-    <h1>{{t 'resources.auth-method.messages.pending.title'}}</h1>
+    <Hds::Text::Display @tag='h1' @size='400' class='header-spacing'>{{t
+        'resources.auth-method.messages.pending.title'
+      }}</Hds::Text::Display>
   </:header>
   <:body>
     <p>{{t 'resources.auth-method.messages.pending.description'}}</p>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential-library.title'}}
       <DocLink @doc='credential-library' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.credential-library.description'}}</p>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential-library.titles.new'}}
       <DocLink @doc='credential-library' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.credential-library.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/credential/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential.title'}}
       <DocLink @doc='credential' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.credential.description'}}</p>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential.titles.new'}}
       <DocLink @doc='credential' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.credential.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/credential-stores/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential-store.title_plural'}}
       <DocLink @doc='credential-store' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doCredentialStoresExist}}
       <p>{{t 'resources.credential-store.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/credential-stores/new.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.credential-store.titles.new'}}
       <DocLink @doc='credential-store' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.credential-store.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/edit.hbs

@@ -21,24 +21,39 @@
 
   <page.header>
     {{#if @model.isGlobal}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.global.title'}}
         <DocLink @doc='global' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       <p>{{t 'resources.global.description'}}</p>
     {{/if}}
     {{#if @model.isOrg}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.org.title'}}
         <DocLink @doc='org' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       <p>{{t 'resources.org.description'}}</p>
     {{/if}}
     {{#if @model.isProject}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.project.title'}}
         <DocLink @doc='project' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       <p>{{t 'resources.project.description'}}</p>
     {{/if}}
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.group.messages.add-members.title'}}
       <DocLink @doc='group.add-members' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.group.messages.add-members.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/groups/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.group.title_plural'}}
       <DocLink @doc='group' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doGroupsExist}}
       <p>{{t 'resources.group.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/groups/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.group.titles.new'}}
       <DocLink @doc='group' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.group.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.host-catalog.title_plural'}}
       <DocLink @doc='host-catalog' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doHostCatalogsExist}}
       <p>{{t 'resources.host-catalog.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/host-catalogs/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.host-catalog.titles.new'}}
       <DocLink @doc='host-catalog.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.host-catalog.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/policies/index.hbs

@@ -8,10 +8,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.policy.title_plural'}}
       <DocLink @doc='storage-policy' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.policy.description'}}</p>
   </page.header>
   <page.actions>

ui/admin/app/templates/scopes/scope/policies/new.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.policy.titles.new'}}
       <DocLink @doc='storage-policy.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.policy.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/policies/policy/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.policy.title'}}
       <DocLink @doc='storage-policy' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.policy.description'}}</p>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.title_plural'}}
       <DocLink @doc='role' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doRolesExist}}
       <p>{{t 'resources.role.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/roles/new.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.titles.new'}}
       <DocLink @doc='role' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.principal.messages.add-principals.title'}}
       <DocLink @doc='role.add-principals' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.principal.messages.add-principals.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/grants.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.title'}}
       <DocLink @doc='role' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.grant.description'}}</p>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.scope.messages.manage-scopes.title'}}
       <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.scope.messages.manage-scopes.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.scope.messages.manage-custom-scopes.title'}}
       <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t
         'resources.role.scope.messages.manage-custom-scopes.description'
       }}</p>

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/manage-org-projects.hbs

@@ -31,13 +31,18 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t
         'resources.role.scope.messages.manage-org-projects.title'
         orgDisplayName=@model.orgScope.displayName
       }}
       <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.scope.messages.manage-org-projects.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/principals.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.title'}}
       <DocLink @doc='role' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.role.principal.description'}}</p>
     <Hds::Copy::Snippet @textToCopy={{@model.role.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/roles/role/scopes.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.role.title'}}
       <DocLink @doc='role' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>
       {{#if @model.role.scope.isOrg}}
         {{t 'resources.role.scope.description.org'}}

ui/admin/app/templates/scopes/scope/scopes/index.hbs

@@ -11,18 +11,28 @@
 
   <page.header>
     {{#if @model.currentScope.isGlobal}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.org.title_plural'}}
         <DocLink @doc='org' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       {{#if @model.doScopesExist}}
         <p>{{t 'resources.org.description'}}</p>
       {{/if}}
     {{else if @model.currentScope.isOrg}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.project.title_plural'}}
         <DocLink @doc='project' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       {{#if @model.doScopesExist}}
         <p>{{t 'resources.project.description'}}</p>
       {{/if}}

ui/admin/app/templates/scopes/scope/scopes/new.hbs

@@ -24,16 +24,26 @@
 
   <page.header>
     {{#if @model.isOrg}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.org.titles.new'}}
         <DocLink @doc='org.new' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       <p>{{t 'resources.org.description'}}</p>
     {{else if @model.isProject}}
-      <h2>
+      <Hds::Text::Display
+        @tag='h2'
+        @size='400'
+        @weight='bold'
+        class='header-spacing'
+      >
         {{t 'resources.project.titles.new'}}
         <DocLink @doc='project.new' @iconSize='large' />
-      </h2>
+      </Hds::Text::Display>
       <p>{{t 'resources.project.description'}}</p>
     {{/if}}
   </page.header>

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -9,9 +9,14 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.session-recording.title_plural'}}
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >{{t 'resources.session-recording.title_plural'}}
       <DocLink @doc='session-recording' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.session-recording.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs

@@ -19,13 +19,18 @@
   </page.breadcrumbs>
 
   <page.header class='channel-header'>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{reverse-indexed-display-name
         'resources.session-recording.channel.title_index'
         @model.channelRecording.connection_recording.channel_recordings
         @model.channelRecording
       }}
-    </h2>
+    </Hds::Text::Display>
     <Hds::Copy::Snippet
       @textToCopy={{@model.channelRecording.id}}
       @color='secondary'
@@ -41,7 +46,14 @@
       <bc.Sidebar>
         {{! Channel details information }}
         <div class='section-details'>
-          <h2>{{t 'resources.session-recording.channel.details'}}</h2>
+          <Hds::Text::Display
+            @tag='h2'
+            @size='400'
+            @weight='bold'
+            class='header-spacing'
+          >{{t
+              'resources.session-recording.channel.details'
+            }}</Hds::Text::Display>
           <Rose::MetadataList @orientation='vertical' as |list|>
             {{! Start time }}
             {{#if @model.channelRecording.start_time}}
@@ -88,7 +100,12 @@
 
         {{! Related information }}
         <div>
-          <h2>{{t 'resources.session-recording.related'}}</h2>
+          <Hds::Text::Display
+            @tag='h2'
+            @size='400'
+            @weight='bold'
+            class='header-spacing'
+          >{{t 'resources.session-recording.related'}}</Hds::Text::Display>
           <LinkListPanel as |list|>
             {{! User name }}
             {{#if @model.sessionRecording.create_time_values.user}}

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -9,7 +9,12 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.session-recording.session.title'}}</h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >{{t 'resources.session-recording.session.title'}}</Hds::Text::Display>
   </page.header>
 
   <page.actions>
@@ -198,7 +203,12 @@
         </bc.Body>
         <bc.Sidebar>
           <div class='section-details'>
-            <h2>{{t 'resources.session-recording.details'}}</h2>
+            <Hds::Text::Display
+              @tag='h2'
+              @size='400'
+              @weight='bold'
+              class='header-spacing'
+            >{{t 'resources.session-recording.details'}}</Hds::Text::Display>
 
             <Rose::MetadataList @orientation='vertical' as |list|>
               {{! Session Recording Status }}
@@ -287,7 +297,12 @@
 
           {{! Related information }}
           <div>
-            <h2>{{t 'resources.session-recording.related'}}</h2>
+            <Hds::Text::Display
+              @tag='h2'
+              @size='400'
+              @weight='bold'
+              class='header-spacing'
+            >{{t 'resources.session-recording.related'}}</Hds::Text::Display>
             <LinkListPanel as |list|>
               {{! User name }}
               {{#if @model.sessionRecording.create_time_values.user}}

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.session.title_plural'}}
       <DocLink @doc='session' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.session.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.storage-bucket.title_plural'}}
       <DocLink @doc='storage-bucket' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.storage-bucket.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/storage-buckets/new.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.storage-bucket.titles.new'}}
       <DocLink @doc='storage-bucket.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.storage-bucket.title'}}
       <DocLink @doc='storage-bucket' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/targets/index.hbs

@@ -9,10 +9,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.title_plural'}}
       <DocLink @doc='target' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doTargetsExist}}
       <p>{{t 'resources.target.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/targets/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.titles.new'}}
       <DocLink @doc='target.new' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.target.description'}}</p>
   </page.header>
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs

@@ -16,9 +16,14 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.brokered-credential-source.messages.add.title'}}
-    </h2>
+    </Hds::Text::Display>
     <p>{{t
         'resources.target.brokered-credential-source.messages.add.description'
       }}</p>

ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.host-source.messages.add.title'}}
       <DocLink @doc='target.add-host-sources' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.target.host-source.messages.add.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs

@@ -19,11 +19,16 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t
         'resources.target.injected-application-credential-source.messages.add.title'
       }}
-    </h2>
+    </Hds::Text::Display>
     <p>{{t
         'resources.target.injected-application-credential-source.messages.add.description'
       }}</p>

ui/admin/app/templates/scopes/scope/targets/target/create-alias.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.alias.titles.new'}}
       <DocLink @doc='alias' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.alias.description'}}</p>
 
   </page.header>

ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs

@@ -15,10 +15,15 @@
     <Breadcrumbs::Container />
   </page.breadcrumbs>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.workers.edit-egress-worker-filter.title'}}
       <DocLink @doc='worker-filters-format' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t
         'resources.target.workers.edit-egress-worker-filter.description'
       }}</p>

ui/admin/app/templates/scopes/scope/targets/target/edit-ingress-worker-filter.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.target.workers.edit-ingress-worker-filter.title'}}
       <DocLink @doc='worker-filters-format' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t
         'resources.target.workers.edit-ingress-worker-filter.description'
       }}</p>

ui/admin/app/templates/scopes/scope/targets/target/enable-session-recording/create-storage-bucket.hbs

@@ -15,10 +15,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.storage-bucket.titles.new'}}
       <DocLink @doc='storage-bucket' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/enable-session-recording/index.hbs

@@ -9,9 +9,14 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.target.enable-session-recording.messages.add.title'}}
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >{{t 'resources.target.enable-session-recording.messages.add.title'}}
       <DocLink @doc='target.enable-session-recording' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/index.hbs

@@ -35,9 +35,9 @@
       <bc.Sidebar>
         {{#if @model.aliases}}
           <div class='target-sidebar-aliases'>
-            <h3>
+            <Hds::Text::Display @tag='h3'>
               {{t 'resources.alias.title_plural'}}
-            </h3>
+            </Hds::Text::Display>
             <p class='description'>
               {{t 'resources.alias.form.sidebar.help'}}
             </p>
@@ -93,9 +93,9 @@
         {{else}}
           {{#if (can 'create model' this.globalScope collection='aliases')}}
             <div class='target-sidebar-aliases'>
-              <h3>
+              <Hds::Text::Display @tag='h3'>
                 {{t 'resources.alias.title_plural'}}
-              </h3>
+              </Hds::Text::Display>
               <p class='description'>
                 {{t 'resources.alias.form.sidebar.help'}}
               </p>
@@ -111,9 +111,9 @@
         {{/if}}
         <div class='target-sidebar'>
           {{#if (and @model.isSSH (feature-flag 'ssh-session-recording'))}}
-            <h3>
+            <Hds::Text::Display @tag='h3'>
               {{t 'resources.target.form.sidebar.label'}}
-            </h3>
+            </Hds::Text::Display>
             <p class='description'>
               {{t 'resources.target.form.sidebar.help'}}
             </p>

ui/admin/app/templates/scopes/scope/targets/target/manage-alias.hbs

@@ -13,10 +13,15 @@
     <Breadcrumbs::Container />
   </page.breadcrumbs>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.alias.title'}}
       <DocLink @doc='alias' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.alias.description'}}</p>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.user.title_plural'}}
       <DocLink @doc='user' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{#if @model.doUsersExist}}
       <p>{{t 'resources.user.description'}}</p>
     {{/if}}

ui/admin/app/templates/scopes/scope/users/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.user.titles.new'}}
       <DocLink @doc='user' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.user.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs

@@ -16,7 +16,12 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.user.messages.add-accounts.title'}}</h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >{{t 'resources.user.messages.add-accounts.title'}}</Hds::Text::Display>
     <p>{{t 'resources.user.messages.add-accounts.description'}}</p>
   </page.header>
 

ui/admin/app/templates/scopes/scope/workers/index.hbs

@@ -10,10 +10,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'titles.workers'}}
       <DocLink @doc='worker' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
 
   <page.actions>

ui/admin/app/templates/scopes/scope/workers/new.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.worker.titles.new'}}
       <DocLink @doc='worker' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
   </page.header>
   <page.body>
     <Form::Worker::CreateWorkerLed

ui/admin/app/templates/scopes/scope/workers/worker/create-tags.hbs

@@ -16,10 +16,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.worker.tags.create.title'}}
       <DocLink @doc='worker.create-tags' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     {{t 'resources.worker.tags.create.description'}}
     <Hds::Link::Inline @color='secondary' @href={{doc-url 'worker'}}>
       {{t 'resources.worker.tags.create.link'}}

ui/desktop/app/components/branded-card/index.hbs

@@ -4,7 +4,11 @@
 }}
 
 <div class='branded-card'>
-  <h2 class='branded-card-title h1'>{{@title}}</h2>
+  <Hds::Text::Display
+    @tag='h1'
+    @size='500'
+    class='branded-card-title'
+  >{{@title}}</Hds::Text::Display>
   <p class='branded-card-description'>{{@description}}</p>
   {{yield}}
 </div>

ui/desktop/app/components/card/index.hbs

@@ -7,12 +7,17 @@
   {{#if (if (has-block 'header') true @heading)}}
     <header class='card-header'>
       {{#if @heading}}
-        <h2>
+        <Hds::Text::Display
+          @tag='h2'
+          @size='400'
+          @weight='bold'
+          class='header-spacing'
+        >
           {{#if @icon}}
             <Rose::Icon @name={{@icon}} @size='medium' />
           {{/if}}
           {{@heading}}
-        </h2>
+        </Hds::Text::Display>
       {{/if}}
 
       {{yield to='header'}}

ui/desktop/app/styles/app.scss

@@ -240,7 +240,8 @@
   }
 
   .branded-card-title {
-    margin-bottom: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
   }
 
   .branded-card-description {
@@ -653,3 +654,12 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     }
   }
 }
+
+.header-spacing {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+
+  .doc-link {
+    vertical-align: middle;
+  }
+}

ui/desktop/app/templates/scopes/scope/authenticate/method/oidc.hbs

@@ -5,7 +5,9 @@
 
 <Rose::Dialog::Cover>
   <:header>
-    <h1>{{t 'resources.auth-method.messages.pending.title'}}</h1>
+    <Hds::Text::Display @tag='h1' @size='400' class='header-spacing'>{{t
+        'resources.auth-method.messages.pending.title'
+      }}</Hds::Text::Display>
   </:header>
   <:body>
     <p>{{t 'resources.auth-method.messages.pending.description'}}</p>

ui/desktop/app/templates/scopes/scope/projects/sessions.hbs

@@ -5,10 +5,15 @@
 
 <Rose::Layout::Page as |page|>
   <page.header>
-    <h2>
+    <Hds::Text::Display
+      @tag='h2'
+      @size='400'
+      @weight='bold'
+      class='header-spacing'
+    >
       {{t 'resources.session.title_plural'}}
       <DocLink @doc='sessions' @iconSize='large' />
-    </h2>
+    </Hds::Text::Display>
     <p>{{t 'resources.session.description'}}</p>
   </page.header>