GovAlta · chrisolsen · May 27, 2025 · May 20, 2025 · May 20, 2025 · May 20, 2025
diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx
@@ -304,9 +304,9 @@ export default function IconsPage() {
             <GoabContainer type="non-interactive" accent="filled" padding="relaxed" width="content">
               <GoabText size="body-m" mt="none" mb="none">
                 The extended icon set includes the full
-                {" "}<a href="https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties"
+                {" "}<a href="https://ionic.io/ionicons"
                         target="_blank" rel="noreferrer">
-                Ionicon library.
+                Ionicons library.
               </a>{" "}
                 When you need additional icons outside of the core icon set, use these icons to maintain a consistent
                 visual language.

diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx
@@ -1,48 +1,55 @@
-import { GoabCallout, GoabContainer, GoabDetails, GoabDivider, GoabSpacer, GoabTable,  } from "@abgov/react-components";
+import {
+  GoabCallout,
+  GoabContainer,
+  GoabDetails,
+  GoabDivider,
+  GoabSpacer,
+  GoabTable,
+  GoabText
+} from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 export default function ContributePage() {
   return (
     <ComponentContent tocCssQuery="h2[id], h3[id]">
-      <h1>Contribute</h1>
-      <h3 className="introduction">
-      Add to the components or patterns in the design system</h3>
-       <p>The design system is a shared resource for product teams to use and contribute to. We encourage everyone, regardless of their role, to help improve the design system.</p>
-
-      <GoabContainer type="non-interactive" mb="l" mt="m">
-        <b>Start by using what's in the design system to design and build services easier</b>
-        <GoabDetails heading="What happens when I need a new or different component or pattern?" mt="m">
+      <GoabText size="heading-xl" mb="m" mt="xl">
+        Contribute
+      </GoabText>
+      <GoabText size="heading-m" mb="l">
+        Add to the components or patterns in the design system
+      </GoabText>
+      <GoabText size="body-m" mt="l" mb="l">The design system is a shared resource for product teams to use and
+        contribute to. We encourage everyone, regardless of their role, to help improve the design system.</GoabText>
+
+      <GoabText size="heading-s" mt={"xl"} mb="m">Start by using what's in the design system</GoabText>
+      <GoabDetails heading="What happens when I need a new or different component or pattern?" mb={"2xl"}>
           <img src="/images/Contribution/contribution-process.png" width="100%" alt="Contribute" />
-          <GoabSpacer vSpacing="m"></GoabSpacer>
-          <p>
-            <a href="https://www.figma.com/board/bFFeTY8CI2qOqCq7yvVXK6/Design-System---Governance-Process-Map?node-id=510-1364&t=gt7XnMUq1UsmJ7Lf-4" target="_blank">  
+        <GoabText size="body-m" mt="m">
+          <a
+            href="https://www.figma.com/board/bFFeTY8CI2qOqCq7yvVXK6/Design-System---Governance-Process-Map?node-id=510-1364&t=gt7XnMUq1UsmJ7Lf-4"
+            target="_blank">
               View the full governance process in Figma
             </a>
-          </p>
+        </GoabText>
         </GoabDetails>
-      </GoabContainer>
 
-      <GoabContainer type="interactive" mb="l" mt="m">
-        <h3>Did you know…</h3>
-        <p>
+      <GoabCallout type="information" heading="Did you know…" size="medium" maxWidth="640px" mb={"3xl"}>
         There are open <a href="https://www.figma.com/files/1352057334427203708/team/1365458889622139826" target="_blank">contribution files</a> in Figma for every component and pattern in the design system, including unpublished ideas and experiments.
-        </p>
-      </GoabContainer>
+      </GoabCallout>
 
       <h2 id="design-contribution-process">Design contribution process</h2>
-      
+
       <div className="max-width-72ch contribute-page-content">
-        <p>
+        <GoabText size="body-m" mt="l" mb="l">
         If a <a href="https://design.alberta.ca/components" target="_blank">component</a> or <a href="https://design.alberta.ca/patterns" target="_blank">pattern</a> doesn’t exist in production or doesn’t meet the needs of your users, please contact the design system team. We’ll discuss the issue to understand it better and decide on the next steps together.
-        </p>
-        <GoabSpacer vSpacing="2xs"></GoabSpacer>
-        <h3>1. Come talk to us:</h3>
+        </GoabText>
+        <GoabText size="heading-m" mt="2xl" mb="m">1. Come talk to us:</GoabText>
         <ul>
           <li>
             <a href="https://goa-dio.slack.com/archives/C02PLLT9HQ9" target="_blank">#design-system-support</a> on slack
           </li>
         </ul>
-        <h4>Be prepared to:</h4>
+        <GoabText size="heading-s" mt="xl">Be prepared to:</GoabText>
         <ul>
           <li>
             Describe the component or pattern and its purpose
@@ -53,11 +60,13 @@ export default function ContributePage() {
           <li>
             Share any options and iterations that were explored with and without the Design System
           </li>
-        </ul> 
+        </ul>
         <h3 id="contribution-criteria" style={{visibility: "hidden", height: "0px"}}>Contribution criteria</h3>
-         <h3>2. Your contribution will be evaluated against the following contribution criteria:</h3>
-         <h4>Proposing a component or pattern</h4>
-         <p>For something to be added or changed in the design system, it needs to be:</p>
+        <GoabText size="heading-m" mt="xl" mb="m">2. Your contribution will be evaluated against the following
+          contribution criteria:</GoabText>
+        <GoabText size="heading-s" mt="xl" mb="s">Proposing a component or pattern</GoabText>
+        <GoabText size="body-m" mt="l" mb="l">For something to be added or changed in the design system, it needs to
+          be:</GoabText>
          <GoabTable width="100%" mb="xl">
             <thead>
               <tr>
@@ -88,9 +97,9 @@ export default function ContributePage() {
               </tr>
             </tbody>
           </GoabTable>
-          <GoabSpacer vSpacing="2xs"></GoabSpacer>
-<h4>Standards for a given solution</h4>
-          <p>For a new component or pattern to be published, a given solution has to be:</p>
+        <GoabText size="heading-s" mt="2xl" mb="s">Standards for a given solution</GoabText>
+        <GoabText size="body-m" mt="l" mb="l">For a new component or pattern to be published, a given solution has to
+          be:</GoabText>
           <GoabTable width="100%" mb="xl">
             <thead>
               <tr>
@@ -121,26 +130,31 @@ export default function ContributePage() {
               </tr>
             </tbody>
           </GoabTable>
-          <GoabSpacer vSpacing="3xs"></GoabSpacer>
-            <h3>3. Once approved, it will be added to the <a href="https://github.com/orgs/GovAlta/projects/35/views/1?filterQuery=" target="_blank">Design System's backlog</a> </h3>
+        <GoabText size="heading-m" mt="2xl" mb="m">3. Once approved, it will be added to the <a
+          href="https://github.com/orgs/GovAlta/projects/35/views/1?filterQuery=" target="_blank">Design System's
+          backlog</a> </GoabText>
             <ul>
               <li>
-                When work starts, we will collaborate with you and your team to ensure the component meets your specific needs. 
+                When work starts, we will collaborate with you and your team to ensure the component meets your specific
+                needs.
               </li>
             </ul>
-            <h3>4. Contribute code to the component or pattern</h3>
+        <GoabText size="heading-m" mt="2xl" mb="m">4. Contribute code to the component or pattern</GoabText>
             <ul>
               <li>
-                To help build or contribute code to the component or pattern in the design system, follow the <a href="#development">code contribution process</a> below. 
+                To help build or contribute code to the component or pattern in the design system, follow the <a
+                href="#development">code contribution process</a> below.
               </li>
             </ul>
       </div>
 
       <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <div className="max-width-72ch contribute-page-content">
         <h2 id="development">Code contribution process</h2>
-        <p>In order to support all of the development frameworks that service teams use, we build and support a library of web components. Contributing entire components can be challenging and time-consuming, so we recommend and encourage smaller-scale contributions instead.</p>
-        <h4>Recommended ways to contribute:</h4>
+        <GoabText size="body-m" mt="l" mb="l">In order to support all of the development frameworks that service teams
+          use, we build and support a library of web components. Contributing entire components can be challenging and
+          time-consuming, so we recommend and encourage smaller-scale contributions instead.</GoabText>
+        <GoabText size="heading-s" mt="xl" mb="s">Recommended ways to contribute:</GoabText>
         <ul>
           <li>bug fixes</li>
           <li>documentation updates</li>
@@ -155,7 +169,7 @@ export default function ContributePage() {
             </GoabCallout>
           </li>
         </ol>
-        <h4>Setup contribution environment</h4>
+        <GoabText size="heading-s" mt="xl" mb="s">Setup contribution environment</GoabText>
         <ol start={ 3 }>
           <li>
             Go to <a href="https://github.com/GovAlta/ui-components" target="_blank">ui-components</a> repo and clone the repo
@@ -189,26 +203,22 @@ export default function ContributePage() {
         </ol>
         <GoabSpacer vSpacing="l" />
         <h3 id="react-and-web-wrappers">React and Angular wrappers</h3>
-        <GoabSpacer vSpacing="s" />
-        <p>
+        <GoabText size="body-m" mt="l" mb="l">
           <strong>React wrappers</strong> <br/>
           <CodeSnippet lang="css" allowCopy={true} code={`/libs/react-components/src/lib`}/>
-          <GoabSpacer vSpacing="s"></GoabSpacer>
           Each folder represents a single component with its associated unit tests and wrapper code
-        </p>
-        <GoabSpacer vSpacing="l"></GoabSpacer>
-        <p>
-          <strong>Angular wrappers</strong> <br /> 
+        </GoabText>
+        <GoabText size="body-m" mt="l" mb="2xl">
+          <strong>Angular wrappers</strong> <br />
           <CodeSnippet lang="css" allowCopy={true} code={`/libs/angular-components/src/lib/components`}/>
           <GoabSpacer vSpacing="s"></GoabSpacer>
           Each folder represents a single component with its associated unit tests and wrapper code
-        </p>
+        </GoabText>
         <h3 id="web-components">Web Components</h3>
-        <p>
+        <GoabText size="body-m" mt="l" mb="l">
           <CodeSnippet lang="css" allowCopy={true} code={`/libs/web-components/src/components`}/>
-          <GoabSpacer vSpacing="s"></GoabSpacer>
           Each folder represents a single component with:
-        </p>
+        </GoabText>
         <ul>
           <li>
             Unit tests as <code>*.spec.ts</code>
@@ -219,7 +229,7 @@ export default function ContributePage() {
         </ul>
         <GoabSpacer vSpacing="s"></GoabSpacer>
         <h3 id="testing-procedures">Testing procedures</h3>
-        <p>All unit tests must be written in Svelte.</p>
+        <GoabText size="body-m" mt="l" mb="l">All unit tests must be written in Svelte.</GoabText>
         <ul>
           <li>
             If you&#39;re updating/modifying React and/or Angular wrappers, you will need to write unit tests in
@@ -228,10 +238,10 @@ export default function ContributePage() {
           <li>It would also be recommended to add proper browser testing using jest for React wrappers and Svelte components.</li>
           <li>Manually test in React and Angular</li>
         </ul>
-        <p>
+        <GoabText size="body-m" mt="l" mb="l">
           Additionally, one of our developers will manually test the PR to
           ensure the components&#39; quality and functionality.
-        </p>
+        </GoabText>
         <GoabSpacer vSpacing="s"></GoabSpacer>
 
         <h3 id="submitting-your-code">Submitting your code</h3>

diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx
@@ -9,7 +9,10 @@ export default function GetStartedLayout() {
         <GoabSideMenu>
           <GoabSpacer vSpacing="m"></GoabSpacer>
           <Link to="">Start with the design system</Link>
-          <Link to="designers">UX Designers</Link>
+          <GoabSideMenuGroup heading="Designers">
+            <Link to="designers">Overview</Link>
+            <Link to="user-experience-guidelines">User experience guidelines</Link>
+          </GoabSideMenuGroup>
           <GoabSideMenuGroup heading="Developers">
             <Link to="developers">Overview</Link>
             <Link to="developers/setup">Setup</Link>
@@ -20,11 +23,11 @@ export default function GetStartedLayout() {
             <Link to="developers/update">Version update guide</Link>
           </GoabSideMenuGroup>
           <Link to="qa-testing">QA testing</Link>
-          <Link to="lts-policy">Long Term Support (LTS)</Link>
           <Link to="contribute">Contribute</Link>
-          <Link to="support">Support</Link>
           <Link to="roadmap">Roadmap</Link>
-          <Link to="user-experience-guidelines">User experience guidelines</Link>
+          <Link to="lts-policy">Long Term Support (LTS)</Link>
+          <Link to="support">Get support</Link>
+
         </GoabSideMenu>
       </section>
 

diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx
@@ -10,7 +10,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 export default function GetStartedOverviewPage() {
   return (
     <ComponentContent tocCssQuery="h2[id], h3[id]">
-      <GoabText size="heading-xl" mb="m" mt="2xl">
+      <GoabText size="heading-xl" mb="m" mt="xl">
         Starting with the design system
       </GoabText>
       <GoabText size="heading-m" mb="xl">
@@ -40,10 +40,9 @@ export default function GetStartedOverviewPage() {
       </GoabBlock>
 
       <GoabContainer type="non-interactive" padding="relaxed" maxWidth="740px">
-            Start with the design system. You don't need to reinvent the wheel. The design system is
-            the floor, not the ceiling. Start with it to save time building the common parts of a
-            service, so that you can spend time on the unique challenges within your service
-            context.
+        Start with the design system to align with standards, reduce duplication, and move faster. It gives you a solid
+        foundation for the common parts of government services, so your team can focus on solving the specific
+        challenges of your product. Build on it — don’t build from scratch.
           </GoabContainer>
       <h3 id="Why">Why start with the design system?</h3>
       <GoabText size="body-m" mb="m">

diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/LtsPolicyPage.tsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 export const LtsPolicyPage = () => {
   return (
     <>
-      <GoabText tag="h1" mt="xl" mb="xl">Long Term Support (LTS)</GoabText>
+      <GoabText size="heading-xl" mt="xl" mb="m">Long Term Support (LTS)</GoabText>
 
       <GoabText size="body-l" tag="h3" mb="xl">
         The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect.
@@ -14,17 +14,20 @@ export const LtsPolicyPage = () => {
         The previous version of the design system v3 (Angular) and v5 (React) is now in Long-Term Support (LTS). Here's what that means:
       </GoabText>
 
+      <GoabText size="body-m" mb="xl">
       <ul>
         <li><strong>Bug fixes only:</strong> We'll continue fixing critical bugs and regressions.</li>
         <li><strong>No new features or enhancements:</strong> All new development is happening in the latest major version.</li>
         <li><strong>Same reliable experience:</strong> Your project will continue to work as expected.</li>
       </ul>
+      </GoabText>
 
-      <p>
-        Ready to update to the latest version, visit our <Link to="/get-started/developers/update">update guide</Link>
-      </p>
+      <GoabText size="body-m" mb="2xl">
+        Ready to update to the latest version? Visit our <Link to="/get-started/developers/update">update guide</Link>
+      </GoabText>
 
-      <GoabCallout type="important" size={"medium"} heading="Active maintenance will cease on September 30, 2025" maxWidth={"72ch"} mt={"5"}>
+      <GoabCallout type="important" size={"medium"} heading="Active maintenance will cease on September 30, 2025"
+                   maxWidth={"65ch"} mt={"xl"}>
         Projects still using LTS will continue to work, but new issues or bugs will not be prioritized.
       </GoabCallout>
     </>

diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx
@@ -6,7 +6,7 @@ import {
   GoabFormItem,
   GoabInput,
   GoabRadioItem,
-  GoabRadioGroup, GoabTextarea
+  GoabRadioGroup, GoabTextarea, GoabText
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 import { useEffect, useState } from "react";
@@ -230,12 +230,16 @@ export default function ReportBugPage() {
     return (
       <ComponentContent>
         <a href="/get-started/support" className="back">Back</a>
-        <h1>Report a bug</h1>
-        <h3>
+        <GoabText size="heading-xl" mb="m" mt="l">
+          Report a bug
+        </GoabText>
+        <GoabText size="body-l" mb="xl">
           Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report
           helps our team understand, prioritize, and fix the issue faster.
-        </h3>
-        <GoabCallout type="information" heading="Ensure you're using the latest package versions" mb="2xl">
+        </GoabText>
+
+        <GoabCallout type="information" heading="Ensure you're using the latest package versions" mb="2xl"
+                     maxWidth={"640px"}>
           <ul>
             <li>Web Components - { versions["web"] }</li>
             <li>Angular Components - 3.2.2</li>
@@ -292,7 +296,7 @@ export default function ReportBugPage() {
         <GoabFormItem label="Any additional information" mb="2xl" helpText="Add any other relevant context." requirement="optional">
           <GoabTextarea name="additional" value={ formValues.additional } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" />
         </GoabFormItem>
-        <GoabButton onClick={ submitBug }>Submit bug</GoabButton>
+        <GoabButton onClick={submitBug}>Submit bug report</GoabButton>
       </ComponentContent>
     );
   } else {